mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-07-01 07:40:07 +00:00
Customize: Introduce a new experience for discovering, installing, and previewing themes within the customizer.
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:
@@ -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.
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user