[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Customize API: WP_Customize_Themes_Section class
   4   *
   5   * @package WordPress
   6   * @subpackage Customize
   7   * @since 4.4.0
   8   */
   9  
  10  /**
  11   * Customize Themes Section class.
  12   *
  13   * A UI container for theme controls, which are displayed within sections.
  14   *
  15   * @since 4.2.0
  16   *
  17   * @see WP_Customize_Section
  18   */
  19  class WP_Customize_Themes_Section extends WP_Customize_Section {
  20  
  21      /**
  22       * Section type.
  23       *
  24       * @since 4.2.0
  25       * @var string
  26       */
  27      public $type = 'themes';
  28  
  29      /**
  30       * Theme section action.
  31       *
  32       * Defines the type of themes to load (installed, wporg, etc.).
  33       *
  34       * @since 4.9.0
  35       * @var string
  36       */
  37      public $action = '';
  38  
  39      /**
  40       * Theme section filter type.
  41       *
  42       * Determines whether filters are applied to loaded (local) themes or by initiating a new remote query (remote).
  43       * When filtering is local, the initial themes query is not paginated by default.
  44       *
  45       * @since 4.9.0
  46       * @var string
  47       */
  48      public $filter_type = 'local';
  49  
  50      /**
  51       * Gets section parameters for JS.
  52       *
  53       * @since 4.9.0
  54       * @return array Exported parameters.
  55       */
  56  	public function json() {
  57          $exported                = parent::json();
  58          $exported['action']      = $this->action;
  59          $exported['filter_type'] = $this->filter_type;
  60  
  61          return $exported;
  62      }
  63  
  64      /**
  65       * Renders a themes section as a JS template.
  66       *
  67       * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
  68       *
  69       * @since 4.9.0
  70       */
  71  	protected function render_template() {
  72          ?>
  73          <li id="accordion-section-{{ data.id }}" class="theme-section">
  74              <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}">{{ data.title }}</button>
  75              <?php if ( current_user_can( 'install_themes' ) || is_multisite() ) : // @todo Upload support. ?>
  76              <?php endif; ?>
  77              <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
  78                  <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
  79                  <div class="theme-browser rendered">
  80                      <div class="customize-preview-header themes-filter-bar">
  81                          <?php $this->filter_bar_content_template(); ?>
  82                      </div>
  83                      <?php $this->filter_drawer_content_template(); ?>
  84                      <div class="error unexpected-error" style="display: none; ">
  85                          <p>
  86                              <?php
  87                              printf(
  88                                  /* translators: %s: Support forums URL. */
  89                                  __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="%s">support forums</a>.' ),
  90                                  __( 'https://wordpress.org/support/forums/' )
  91                              );
  92                              ?>
  93                          </p>
  94                      </div>
  95                      <ul class="themes">
  96                      </ul>
  97                      <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
  98                      <p class="no-themes-local">
  99                          <?php
 100                          printf(
 101                              /* translators: %s: "Search WordPress.org themes" button text. */
 102                              __( 'No themes found. Try a different search, or %s.' ),
 103                              sprintf( '<button type="button" class="button-link search-dotorg-themes">%s</button>', __( 'Search WordPress.org themes' ) )
 104                          );
 105                          ?>
 106                      </p>
 107                      <p class="spinner"></p>
 108                  </div>
 109              </div>
 110          </li>
 111          <?php
 112      }
 113  
 114      /**
 115       * Renders the filter bar portion of a themes section as a JS template.
 116       *
 117       * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
 118       * The filter bar container is rendered by {@see render_template()}.
 119       *
 120       * @since 4.9.0
 121       */
 122  	protected function filter_bar_content_template() {
 123          ?>
 124          <button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Go to theme sources' ); ?></button>
 125          <# if ( 'wporg' === data.action ) { #>
 126              <div class="search-form">
 127                  <label for="wp-filter-search-input-{{ data.id }}"><?php _e( 'Search themes' ); ?></label>
 128                  <div class="search-form-input">
 129                      <input type="search" id="wp-filter-search-input-{{ data.id }}" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
 130                      <div class="search-icon" aria-hidden="true"></div>
 131                      <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
 132                          <?php
 133                          /* translators: Hidden accessibility text. */
 134                          _e( 'The search results will be updated as you type.' );
 135                          ?>
 136                      </span>
 137                  </div>
 138              </div>
 139          <# } else { #>
 140              <div class="themes-filter-container">
 141                  <label for="{{ data.id }}-themes-filter"><?php _e( 'Search themes' ); ?></label>
 142                  <div class="search-form-input">
 143                      <input type="search" id="{{ data.id }}-themes-filter" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
 144                      <div class="search-icon" aria-hidden="true"></div>
 145                      <span id="{{ data.id }}-live-search-desc" class="screen-reader-text">
 146                          <?php
 147                          /* translators: Hidden accessibility text. */
 148                          _e( 'The search results will be updated as you type.' );
 149                          ?>
 150                      </span>
 151                  </div>
 152              </div>
 153          <# } #>
 154          <div class="filter-themes-wrapper">
 155              <# if ( 'wporg' === data.action ) { #>
 156              <button type="button" class="button feature-filter-toggle">
 157                  <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
 158                      <?php
 159                      /* translators: %s: Number of filters selected. */
 160                      printf( __( 'Filter themes (%s)' ), '<span class="theme-filter-count">0</span>' );
 161                      ?>
 162                  </span>
 163              </button>
 164              <# } #>
 165              <div class="filter-themes-count">
 166                  <span class="themes-displayed">
 167                      <?php
 168                      /* translators: %s: Number of themes displayed. */
 169                      printf( __( '%s themes' ), '<span class="theme-count">0</span>' );
 170                      ?>
 171                  </span>
 172              </div>
 173          </div>
 174          <?php
 175      }
 176  
 177      /**
 178       * Renders the filter drawer portion of a themes section as a JS template.
 179       *
 180       * The filter bar container is rendered by {@see render_template()}.
 181       *
 182       * @since 4.9.0
 183       */
 184  	protected function filter_drawer_content_template() {
 185          /*
 186           * @todo Use the .org API instead of the local core feature list.
 187           * The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
 188           */
 189          $feature_list = get_theme_feature_list( false );
 190          ?>
 191          <# if ( 'wporg' === data.action ) { #>
 192              <div class="filter-drawer filter-details">
 193                  <?php foreach ( $feature_list as $feature_name => $features ) : ?>
 194                      <fieldset class="filter-group">
 195                          <legend><?php echo esc_html( $feature_name ); ?></legend>
 196                          <div class="filter-group-feature">
 197                              <?php foreach ( $features as $feature => $feature_name ) : ?>
 198                                  <input type="checkbox" id="filter-id-<?php echo esc_attr( $feature ); ?>" value="<?php echo esc_attr( $feature ); ?>" />
 199                                  <label for="filter-id-<?php echo esc_attr( $feature ); ?>"><?php echo esc_html( $feature_name ); ?></label>
 200                              <?php endforeach; ?>
 201                          </div>
 202                      </fieldset>
 203                  <?php endforeach; ?>
 204              </div>
 205          <# } #>
 206          <?php
 207      }
 208  }