IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests 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. Also includes an extensible framework for browsing and installing themes from other sources.

Also includes CSS auto-prefixing added via `grunt precommit:css`.

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/

Previously [38813] but reverted in [39140].
Fixes #37661, #34843, #38666.
Props celloexpressions, folletto, westonruter, karmatosed, melchoyce, afercia.

Built from https://develop.svn.wordpress.org/trunk@41648


git-svn-id: http://core.svn.wordpress.org/trunk@41482 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
2017-09-29 20:13:50 +00:00
parent fb30317bad
commit 76f590b99b
42 changed files with 2711 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
wp-includes/class-wp-customize-manager.php
View File

@@ -320,6 +320,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' );
@@ -375,6 +376,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( 'wp_ajax_dismiss_customize_changeset_autosave', array( $this, 'handle_dismiss_changeset_autosave_request' ) );
add_action( 'customize_register', array( $this, 'register_controls' ) );
@@ -392,6 +394,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' );
}
}
/**
@@ -3685,6 +3693,10 @@ 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' );
}
}
/**
@@ -3889,6 +3901,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' ),
'dismiss_autosave' => wp_create_nonce( 'dismiss_customize_changeset_autosave' ),
);
@@ -3995,6 +4008,15 @@ 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 currently consider singular vs. plural forms */
'themeSearchResults' => __( '%d themes found' ),
/* translators: %d is the number of themes being displayed, which cannot currently consider singular vs. plural forms */
'announceThemeCount' => __( 'Displaying %d themes' ),
/* translators: %s is the theme name */
'announceThemeDetails' => __( 'Showing details for theme: %s' ),
),
);
// Prepare Customize Section objects to pass to JavaScript.
@@ -4098,8 +4120,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' );
@@ -4159,50 +4183,38 @@ final class WP_Customize_Manager {
'default_value' => $initial_date,
) ) );
/* 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 themes' ),
'action' => 'installed',
'capability' => 'switch_themes',
'panel' => 'themes',
'priority' => 0,
) ) );
if ( ! is_multisite() ) {
$this->add_section( new WP_Customize_Themes_Section( $this, 'wporg_themes', array(
'title' => __( 'WordPress.org themes' ),
'action' => 'wporg',
'capability' => 'install_themes',
'panel' => 'themes',
'priority' => 5,
) ) );
}
// Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
$this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
'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(
@@ -4706,6 +4718,141 @@ final class WP_Customize_Manager {
$this->add_dynamic_settings( $setting_ids );
}
/**
* Load themes into the theme browsing/installation UI.
*
* @since 4.9.0
*/
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' );
}
$theme_action = sanitize_key( $_POST['theme_action'] );
$themes = array();
require_once ABSPATH . 'wp-admin/includes/theme.php';
if ( 'installed' === $theme_action ) {
$themes = array( 'themes' => wp_prepare_themes_for_js() );
foreach ( $themes['themes'] as &$theme ) {
$theme['type'] = 'installed';
$theme['active'] = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme['id'] );
}
} elseif ( 'wporg' === $theme_action ) {
if ( ! current_user_can( 'install_themes' ) ) {
wp_die( -1 );
}
// Arguments for all queries.
$args = array(
'per_page' => 100,
'page' => isset( $_POST['page'] ) ? absint( $_POST['page'] ) : 1,
'fields' => array(
'screenshot_url' => true,
'description' => true,
'rating' => true,
'downloaded' => true,
'downloadlink' => true,
'last_updated' => true,
'homepage' => true,
'num_ratings' => true,
'tags' => true,
'parent' => true,
// 'extended_author' => true, @todo: WordPress.org throws a 500 server error when this is here.
),
);
// Define query filters based on user input.
if ( ! array_key_exists( 'search', $_POST ) ) {
$args['search'] = '';
} else {
$args['search'] = sanitize_text_field( wp_unslash( $_POST['search'] ) );
}
if ( ! array_key_exists( 'tags', $_POST ) ) {
$args['tag'] = '';
} else {
$args['tag'] = array_map( 'sanitize_text_field', wp_unslash( (array) $_POST['tags'] ) );
}
if ( '' === $args['search'] && '' === $args['tag'] ) {
$args['browse'] = 'new'; // Sort by latest themes by default.
}
// 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_fill_keys(
array( 'a', 'abbr', 'acronym', 'code', 'pre', 'em', 'strong', 'div', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img' ),
array()
);
$themes_allowedtags['a'] = array_fill_keys( array( 'href', 'title', 'target' ), true );
$themes_allowedtags['acronym']['title'] = true;
$themes_allowedtags['abbr']['title'] = true;
$themes_allowedtags['img'] = array_fill_keys( array( 'src', 'class', 'alt' ), true );
// 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' );
// Set up properties for themes available on WordPress.org.
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 = $theme_action;
}
// Set active based on customized theme.
$theme->active = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme->slug );
// Map available theme properties to installed theme properties.
$theme->id = $theme->slug;
$theme->screenshot = array( $theme->screenshot_url );
$theme->authorAndUri = $theme->author;
$theme->parent = ( $theme->slug === $theme->template ) ? false : $theme->template; // The .org API does not seem to return the parent in a documented way; however, this check should yield a similar result in most cases.
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.
*