vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 22:30:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customize: Introduce a new experience for discovering, installing, and previewing themes within the customizer.

Browse Source 
Unify the theme-browsing and theme-customization experiences by introducing a comprehensive theme browser and installer directly accessible in the customizer. Replaces the customizer theme switcher with a full-screen panel for discovering/browsing and installing themes available on WordPress.org. Themes can now be installed and previewed directly in the customizer without entering the wp-admin context.

For details, see https://make.wordpress.org/core/2016/10/03/feature-proposal-a-new-experience-for-discovering-installing-and-previewing-themes-in-the-customizer/

Fixes #37661, #34843.
Props celloexpressions, folletto, westonruter, karmatosed, afercia.


git-svn-id: https://develop.svn.wordpress.org/trunk@38813 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2016-10-19 03:19:13 +00:00
parent 788bb093f2
commit 8a79cdc107
11 changed files with 1799 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/wp-includes/class-wp-customize-manager.php
View File

@@ -294,6 +294,7 @@ final class WP_Customize_Manager {
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-panel.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
@@ -348,6 +349,7 @@ final class WP_Customize_Manager {
add_action( 'wp_ajax_customize_save', array( $this, 'save' ) );
add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
add_action( 'wp_ajax_customize-load-themes', array( $this, 'load_themes_ajax' ) );
add_action( 'customize_register', array( $this, 'register_controls' ) );
add_action( 'customize_register', array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first
@@ -361,6 +363,12 @@ final class WP_Customize_Manager {
// Export the settings to JS via the _wpCustomizeSettings variable.
add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
// Add theme update notices.
if ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) ) {
require_once( ABSPATH . '/wp-admin/includes/update.php' );
add_action( 'customize_controls_print_footer_scripts', 'wp_print_admin_notice_templates' );
}
}
/**
@@ -2584,6 +2592,9 @@ final class WP_Customize_Manager {
foreach ( $this->controls as $control ) {
$control->enqueue();
}
if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
wp_enqueue_script( 'updates' );
}
}
/**
@@ -2798,6 +2809,7 @@ final class WP_Customize_Manager {
$nonces = array(
'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
'switch-themes' => wp_create_nonce( 'switch-themes' ),
);
/**
@@ -2871,6 +2883,14 @@ final class WP_Customize_Manager {
'autofocus' => $this->get_autofocus(),
'documentTitleTmpl' => $this->get_document_title_template(),
'previewableDevices' => $this->get_previewable_devices(),
'l10n' => array(
'confirmDeleteTheme' => __( 'Are you sure you want to delete this theme?' ),
/* translators: %d is the number of theme search results, which cannot consider singular vs. plural forms */
'themeSearchResults' => __( '%d themes found' ),
/* translators: %d is the number of themes being displayed, which cannot consider singular vs. plural forms */
'announceThemeCount' => __( 'Displaying %d themes' ),
'announceThemeDetails' => __( 'Showing details for theme: %s' ),
),
);
// Prepare Customize Section objects to pass to JavaScript.
@@ -2974,8 +2994,10 @@ final class WP_Customize_Manager {
/* Panel, Section, and Control Types */
$this->register_panel_type( 'WP_Customize_Panel' );
$this->register_panel_type( 'WP_Customize_Themes_Panel' );
$this->register_section_type( 'WP_Customize_Section' );
$this->register_section_type( 'WP_Customize_Sidebar_Section' );
$this->register_section_type( 'WP_Customize_Themes_Section' );
$this->register_control_type( 'WP_Customize_Color_Control' );
$this->register_control_type( 'WP_Customize_Media_Control' );
$this->register_control_type( 'WP_Customize_Upload_Control' );
@@ -2985,12 +3007,71 @@ final class WP_Customize_Manager {
$this->register_control_type( 'WP_Customize_Site_Icon_Control' );
$this->register_control_type( 'WP_Customize_Theme_Control' );
/* Themes */
/* Themes (controls are loaded via ajax) */
$this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
'title' => $this->theme()->display( 'Name' ),
'capability' => 'switch_themes',
'priority' => 0,
$this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
'title' => $this->theme()->display( 'Name' ),
'description' => __( 'Once themes are installed, you can live-preview them on your site, customize them, and publish your new design. Browse available themes via the filters in this menu.' ),
'capability' => 'switch_themes',
'priority' => 0,
) ) );
$this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
'title' => __( 'Installed' ),
'text_before' => __( 'Your local site' ),
'action' => 'installed',
'capability' => 'switch_themes',
'panel' => 'themes',
'priority' => 0,
) ) );
$this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array(
'title' => __( 'Search themes…' ),
'text_before' => __( 'Browse all WordPress.org themes' ),
'action' => 'search',
'capability' => 'install_themes',
'panel' => 'themes',
'priority' => 5,
) ) );
$this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array(
'title' => __( 'Featured' ),
'action' => 'featured',
'capability' => 'install_themes',
'panel' => 'themes',
'priority' => 10,
) ) );
$this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array(
'title' => __( 'Popular' ),
'action' => 'popular',
'capability' => 'install_themes',
'panel' => 'themes',
'priority' => 15,
) ) );
$this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array(
'title' => __( 'Latest' ),
'action' => 'latest',
'capability' => 'install_themes',
'panel' => 'themes',
'priority' => 20,
) ) );
$this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array(
'title' => __( 'Feature Filter' ),
'action' => 'feature_filter',
'capability' => 'install_themes',
'panel' => 'themes',
'priority' => 25,
) ) );
$this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array(
'title' => __( 'Favorites' ),
'action' => 'favorites',
'capability' => 'install_themes',
'panel' => 'themes',
'priority' => 30,
) ) );
// Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
@@ -2998,37 +3079,6 @@ final class WP_Customize_Manager {
'capability' => 'switch_themes',
) ) );
require_once( ABSPATH . 'wp-admin/includes/theme.php' );
// Theme Controls.
// Add a control for the active/original theme.
if ( ! $this->is_theme_active() ) {
$themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
$active_theme = current( $themes );
$active_theme['isActiveTheme'] = true;
$this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
'theme' => $active_theme,
'section' => 'themes',
'settings' => 'active_theme',
) ) );
}
$themes = wp_prepare_themes_for_js();
foreach ( $themes as $theme ) {
if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
continue;
}
$theme_id = 'theme_' . $theme['id'];
$theme['isActiveTheme'] = false;
$this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
'theme' => $theme,
'section' => 'themes',
'settings' => 'active_theme',
) ) );
}
/* Site Identity */
$this->add_section( 'title_tagline', array(
@@ -3355,6 +3405,150 @@ final class WP_Customize_Manager {
$this->add_dynamic_settings( $setting_ids );
}
/**
* Load themes into the theme browsing/installation UI.
*
* @since 4.7.0
* @access public
*/
public function load_themes_ajax() {
check_ajax_referer( 'switch-themes', 'switch-themes-nonce' );
if ( ! current_user_can( 'switch_themes' ) ) {
wp_die( -1 );
}
if ( empty( $_POST['theme_action'] ) ) {
wp_send_json_error( 'missing_theme_action' );
}
if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) {
wp_send_json_error( 'empty_search' );
} elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) {
wp_send_json_error( 'empty_user' );
} elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) {
wp_send_json_error( 'no_features' );
}
require_once( ABSPATH . 'wp-admin/includes/theme.php' );
if ( 'installed' === $_POST['theme_action'] ) {
$themes = array( 'themes' => wp_prepare_themes_for_js() );
foreach ( $themes['themes'] as &$theme ) {
$theme['type'] = 'installed';
// Set active based on customized theme.
if ( $_POST['customized_theme'] === $theme['id'] ) {
$theme['active'] = true;
} else {
$theme['active'] = false;
}
}
} else {
if ( ! current_user_can( 'install_themes' ) ) {
wp_die( -1 );
}
// Arguments for all queries.
$args = array(
'per_page' => 100,
'page' => absint( $_POST['page'] ),
'fields' => array(
'slug' => true,
'screenshot' => true,
'description' => true,
'requires' => true,
'rating' => true,
'downloaded' => true,
'downloadLink' => true,
'last_updated' => true,
'homepage' => true,
'num_ratings' => true,
'tags' => true,
),
);
// Specialized handling for each query.
switch ( $_POST['theme_action'] ) {
case 'search':
$args['search'] = wp_unslash( $_POST['search'] );
break;
case 'favorites':
$args['user'] = wp_unslash( $_POST['user'] );
case 'featured':
case 'popular':
$args['browse'] = wp_unslash( $_POST['theme_action'] );
break;
case 'latest':
$args['browse'] = 'new';
break;
case 'feature_filter':
$args['tag'] = wp_unslash( $_POST['tags'] );
break;
}
// Load themes from the .org API.
$themes = themes_api( 'query_themes', $args );
if ( is_wp_error( $themes ) ) {
wp_send_json_error();
}
// This list matches the allowed tags in wp-admin/includes/theme-install.php.
$themes_allowedtags = array('a' => array('href' => array(), 'title' => array(), 'target' => array()),
'abbr' => array('title' => array()), 'acronym' => array('title' => array()),
'code' => array(), 'pre' => array(), 'em' => array(), 'strong' => array(),
'div' => array(), 'p' => array(), 'ul' => array(), 'ol' => array(), 'li' => array(),
'h1' => array(), 'h2' => array(), 'h3' => array(), 'h4' => array(), 'h5' => array(), 'h6' => array(),
'img' => array('src' => array(), 'class' => array(), 'alt' => array())
);
// Prepare a list of installed themes to check against before the loop.
$installed_themes = array();
$wp_themes = wp_get_themes();
foreach ( $wp_themes as $theme ) {
$installed_themes[] = $theme->get_stylesheet();
}
$update_php = network_admin_url( 'update.php?action=install-theme' );
foreach ( $themes->themes as &$theme ) {
$theme->install_url = add_query_arg( array(
'theme' => $theme->slug,
'_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug ),
), $update_php );
$theme->name = wp_kses( $theme->name, $themes_allowedtags );
$theme->author = wp_kses( $theme->author, $themes_allowedtags );
$theme->version = wp_kses( $theme->version, $themes_allowedtags );
$theme->description = wp_kses( $theme->description, $themes_allowedtags );
$theme->tags = implode( ', ', $theme->tags );
$theme->stars = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) );
$theme->num_ratings = number_format_i18n( $theme->num_ratings );
$theme->preview_url = set_url_scheme( $theme->preview_url );
// Handle themes that are already installed as installed themes.
if ( in_array( $theme->slug, $installed_themes, true ) ) {
$theme->type = 'installed';
} else {
$theme->type = $_POST['theme_action'];
}
// Set active based on customized theme.
if ( $_POST['customized_theme'] === $theme->slug ) {
$theme->active = true;
} else {
$theme->active = false;
}
// Map available theme properties to installed theme properties.
$theme->id = $theme->slug;
$theme->screenshot = array( $theme->screenshot_url );
$theme->authorAndUri = $theme->author;
unset( $theme->slug );
unset( $theme->screenshot_url );
unset( $theme->author );
} // End foreach().
} // End if().
wp_send_json_success( $themes );
}
/**
* Callback for validating the header_textcolor value.
*

53
src/wp-includes/customize/class-wp-customize-theme-control.php
View File

@@ -62,18 +62,22 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
* @access public
*/
public function content_template() {
$current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
$active_url = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
$preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
$preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
/* translators: %s: theme name */
$details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
/* translators: %s: theme name */
$customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
/* translators: %s: theme name */
$preview_label = sprintf( __( 'Live preview theme: %s' ), '{{ data.theme.name }}' );
/* translators: %s: theme name */
$install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
?>
<# if ( data.theme.isActiveTheme ) { #>
<div class="theme active" tabindex="0" data-preview-url="<?php echo esc_attr( $active_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# if ( data.theme.active ) { #>
<div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# } else { #>
<div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
<div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# } #>
<# if ( data.theme.screenshot[0] ) { #>
<# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
<div class="theme-screenshot">
<img data-src="{{ data.theme.screenshot[0] }}" alt="" />
</div>
@@ -81,25 +85,34 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
<div class="theme-screenshot blank"></div>
<# } #>
<# if ( data.theme.isActiveTheme ) { #>
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
<# } else { #>
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
<span class="more-details theme-details" id="{{ data.section }}-{{ data.theme.id }}-action" aria-label="<?php echo esc_attr( $details_label ); ?>"><?php _e( 'Theme Details' ); ?></span>
<# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
<div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}"><p><?php printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' ); ?></p></div>
<# } #>
<div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
<# if ( data.theme.isActiveTheme ) { #>
<h3 class="theme-name" id="{{ data.theme.id }}-name">
<# if ( data.theme.active ) { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
<?php
/* translators: %s: theme name */
printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' );
?>
</h3>
<# } else { #>
<h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
<div class="theme-actions">
<button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
<button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
</div>
<div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
<# } else if ( 'installed' === data.theme.type ) { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-theme-id="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
</div>
<div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
<# } else { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}" data-theme-id="{{ data.theme.id }}"><?php _e( 'Install & Preview' ); ?></button>
</div>
<# } #>
</div>

113
src/wp-includes/customize/class-wp-customize-themes-panel.php Normal file
View File

@@ -0,0 +1,113 @@
<?php
/**
* Customize API: WP_Customize_Themes_Panel class
*
* @package WordPress
* @subpackage Customize
* @since 4.7.0
*/
/**
* Customize Themes Panel Class
*
* @since 4.7.0
*
* @see WP_Customize_Panel
*/
class WP_Customize_Themes_Panel extends WP_Customize_Panel {
/**
* Panel type.
*
* @since 4.7.0
* @access public
* @var string
*/
public $type = 'themes';
/**
* An Underscore (JS) template for rendering this panel's container.
*
* The themes panel renders a custom panel heading with the current theme and a switch themes button.
*
* @see WP_Customize_Panel::print_template()
*
* @since 4.7.0
* @access protected
*/
protected function render_template() {
?>
<li id="accordion-section-{{ data.id }}" class="accordion-section control-panel-themes">
<h3 class="accordion-section-title">
<?php
if ( $this->manager->is_theme_active() ) {
echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> {{ data.title }}';
} else {
echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}';
}
?>
<?php
if ( current_user_can( 'switch_themes' ) ) : ?>
<button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
<?php endif; ?>
</h3>
<ul class="accordion-sub-container control-panel-content"></ul>
</li>
<?php
}
/**
* An Underscore (JS) template for this panel's content (but not its container).
*
* Class variables for this panel class are available in the `data` JS object;
* export custom variables by overriding WP_Customize_Panel::json().
*
* @since 4.7.0
* @access protected
*
* @see WP_Customize_Panel::print_template()
*/
protected function content_template() {
?>
<li class="filter-themes-count">
<span class="themes-displayed"><?php
/* translators: %s: number of themes displayed; plural forms cannot be accomodated here so assume plurality or translate as "Themes: %s" */
echo sprintf( __( 'Displaying %s themes' ), '<span class="theme-count">0</span>' );
?></span>
<button type="button" class="button button-primary see-themes"><?php
/* translators: %s: number of themes displayed; plural forms cannot be accomodated here so assume plurality or omit the count and translate as "Show themes" */
echo sprintf( __( 'Show %s themes' ), '<span class="theme-count">0</span>' );
?></button>
<button type="button" class="button button-primary filter-themes"><?php _e( 'Filter themes' ); ?></button>
</li>
<li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
<button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
<div class="accordion-section-title">
<span class="preview-notice"><?php
/* translators: %s: themes panel title in the Customizer */
echo sprintf( __( 'You are browsing %s' ), '<strong class="panel-title">' . __( 'Themes' ) . '</strong>' ); // Separate strings for consistency with other panels.
?></span>
<?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
<# if ( data.description ) { #>
<button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
<# } #>
<?php endif; ?>
</div>
<?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
<# if ( data.description ) { #>
<div class="description customize-panel-description">
{{{ data.description }}}
</div>
<# } #>
<?php endif; ?>
</li>
<li id="customize-container"></li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
<li class="customize-themes-full-container-container">
<ul class="customize-themes-full-container">
<li class="customize-themes-notifications"></li>
</ul>
</li>
<?php
}
}

140
src/wp-includes/customize/class-wp-customize-themes-section.php
View File

@@ -10,7 +10,7 @@
/**
* Customize Themes Section class.
*
* A UI container for theme controls, which behaves like a backwards Panel.
* A UI container for theme controls, which are displayed in tabbed sections.
*
* @since 4.2.0
*
@@ -28,57 +28,115 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
public $type = 'themes';
/**
* Render the themes section, which behaves like a panel.
* Theme section action.
*
* @since 4.2.0
* Defines the type of themes to load (installed, featured, latest, etc.).
*
* @since 4.7.0
* @access public
* @var string
*/
public $action = '';
/**
* Text before theme section heading.
*
* @since 4.7.0
* @access public
* @var string
*/
public $text_before = '';
/**
* Get section parameters for JS.
*
* @since 4.7.0
* @access public
* @return array Exported parameters.
*/
public function json() {
$exported = parent::json();
$exported['action'] = $this->action;
$exported['text_before'] = $this->text_before;
return $exported;
}
/**
* Render a themes section as a JS template.
*
* The template is only rendered by PHP once, so all actions are prepared at once on the server side.
*
* @since 4.7.0
* @access protected
*/
protected function render() {
$classes = 'accordion-section control-section control-section-' . $this->type;
protected function render_template() {
?>
<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
<h3 class="accordion-section-title">
<?php
if ( $this->manager->is_theme_active() ) {
echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
<li id="accordion-section-{{ data.id }}" class="theme-section">
<# if ( '' !== data.text_before ) { #>
<p class="customize-themes-text-before">{{ data.text_before }}</p>
<# } #>
<# if ( 'search' === data.action ) { #>
<div class="search-form customize-themes-section-title themes-section-search_themes">
<label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
<input placeholder="{{ data.title }}" type="text" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
<span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
</div>
<# } else { #>
<# if ( 'favorites' === data.action || 'feature_filter' === data.action ) {
var attr = ' aria-expanded="false"';
} else {
echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
}
?>
<?php if ( count( $this->controls ) > 0 ) : ?>
<button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
<?php endif; ?>
</h3>
<div class="customize-themes-panel control-panel-content themes-php">
<h3 class="accordion-section-title customize-section-title">
<span class="customize-action"><?php _e( 'Customizing' ); ?></span>
<?php _e( 'Themes' ); ?>
<span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
</h3>
<h3 class="accordion-section-title customize-section-title">
var attr = '';
} #>
<button type="button" class="customize-themes-section-title themes-section-{{ data.id }}"{{{ attr }}}>{{ data.title }}</button>
<# } #>
<?php if ( ! current_user_can( 'install_themes' ) || is_multisite() ) : ?>
<# if ( 'installed' === data.action ) { #>
<p class="themes-filter-container">
<label for="themes-filter">
<span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
<input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
</label>
</p>
<# } #>
<?php endif; ?>
<# if ( 'favorites' === data.action ) { #>
<div class="favorites-form filter-details">
<p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
<p>
<label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
<input type="search" id="wporg-username-input" value="">
<button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
</p>
</div>
<# } else if ( 'feature_filter' === data.action ) { #>
<div class="filter-drawer filter-details">
<?php
if ( $this->manager->is_theme_active() ) {
echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
} else {
echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
$feature_list = get_theme_feature_list();
foreach ( $feature_list as $feature_name => $features ) {
echo '<fieldset class="filter-group">';
$feature_name = esc_html( $feature_name );
echo '<legend><button type="button" class="button-link" aria-expanded="false">' . $feature_name . '</button></legend>';
echo '<div class="filter-group-feature">';
foreach ( $features as $feature => $feature_name ) {
$feature = esc_attr( $feature );
echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
}
echo '</div>';
echo '</fieldset>';
}
?>
<button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
</h3>
</div>
<# } #>
<div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
<div id="customize-container"></div>
<?php if ( count( $this->controls ) > 4 ) : ?>
<p><label for="themes-filter">
<span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
<input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
</label></p>
<?php endif; ?>
<div class="theme-browser rendered">
<ul class="themes accordion-section-content">
<div class="error unexpected-error" style="display: none; "><p><?php _e( '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="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
<ul class="themes">
</ul>
<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
<p class="spinner"></p>
</div>
</div>
</li>