110 </li> |
110 </li> |
111 <?php |
111 <?php |
112 } |
112 } |
113 |
113 |
114 /** |
114 /** |
115 * Render the filter bar portion of a themes section as a JS template. |
115 * Renders the filter bar portion of a themes section as a JS template. |
116 * |
116 * |
117 * The template is only rendered by PHP once, so all actions are prepared at once on the server side. |
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()`. |
118 * The filter bar container is rendered by {@see render_template()}. |
119 * |
119 * |
120 * @since 4.9.0 |
120 * @since 4.9.0 |
121 */ |
121 */ |
122 protected function filter_bar_content_template() { |
122 protected function filter_bar_content_template() { |
123 ?> |
123 ?> |
124 <button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Go to theme sources' ); ?></button> |
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 ) { #> |
125 <# if ( 'wporg' === data.action ) { #> |
126 <div class="search-form"> |
126 <div class="search-form"> |
127 <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes…' ); ?></label> |
127 <label for="wp-filter-search-input-{{ data.id }}"><?php _e( 'Search themes' ); ?></label> |
128 <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes…' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search"> |
128 <div class="search-form-input"> |
129 <div class="search-icon" aria-hidden="true"></div> |
129 <input type="search" id="wp-filter-search-input-{{ data.id }}" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search"> |
130 <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span> |
130 <div class="search-icon" aria-hidden="true"></div> |
131 </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 ) { #> |
132 <button type="button" class="button feature-filter-toggle"> |
156 <button type="button" class="button feature-filter-toggle"> |
133 <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters"> |
157 <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters"> |
134 <?php |
158 <?php |
135 /* translators: %s: Number of filters selected. */ |
159 /* translators: %s: Number of filters selected. */ |
136 printf( __( 'Filter themes (%s)' ), '<span class="theme-filter-count">0</span>' ); |
160 printf( __( 'Filter themes (%s)' ), '<span class="theme-filter-count">0</span>' ); |
137 ?> |
161 ?> |
138 </span> |
162 </span> |
139 </button> |
163 </button> |
140 <# } else { #> |
164 <# } #> |
141 <div class="themes-filter-container"> |
165 <div class="filter-themes-count"> |
142 <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes…' ); ?></label> |
166 <span class="themes-displayed"> |
143 <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes…' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" /> |
167 <?php |
144 <div class="search-icon" aria-hidden="true"></div> |
168 /* translators: %s: Number of themes displayed. */ |
145 <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span> |
169 printf( __( '%s themes' ), '<span class="theme-count">0</span>' ); |
146 </div> |
170 ?> |
147 <# } #> |
171 </span> |
148 <div class="filter-themes-count"> |
172 </div> |
149 <span class="themes-displayed"> |
|
150 <?php |
|
151 /* translators: %s: Number of themes displayed. */ |
|
152 printf( __( '%s themes' ), '<span class="theme-count">0</span>' ); |
|
153 ?> |
|
154 </span> |
|
155 </div> |
173 </div> |
156 <?php |
174 <?php |
157 } |
175 } |
158 |
176 |
159 /** |
177 /** |
160 * Render the filter drawer portion of a themes section as a JS template. |
178 * Renders the filter drawer portion of a themes section as a JS template. |
161 * |
179 * |
162 * The filter bar container is rendered by @see `render_template()`. |
180 * The filter bar container is rendered by {@see render_template()}. |
163 * |
181 * |
164 * @since 4.9.0 |
182 * @since 4.9.0 |
165 */ |
183 */ |
166 protected function filter_drawer_content_template() { |
184 protected function filter_drawer_content_template() { |
167 // @todo Use the .org API instead of the local core feature list. |
185 /* |
168 // The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned. |
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 */ |
169 $feature_list = get_theme_feature_list( false ); |
189 $feature_list = get_theme_feature_list( false ); |
170 ?> |
190 ?> |
171 <# if ( 'wporg' === data.action ) { #> |
191 <# if ( 'wporg' === data.action ) { #> |
172 <div class="filter-drawer filter-details"> |
192 <div class="filter-drawer filter-details"> |
173 <?php foreach ( $feature_list as $feature_name => $features ) : ?> |
193 <?php foreach ( $feature_list as $feature_name => $features ) : ?> |