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 */
19class 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’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="themes-filter-container">
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}
209