class-wp-customize-themes-section.php 6.6 KB

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