Changeset 41648 for trunk/src/wp-includes/class-wp-customize-manager.php

Timestamp:

09/29/2017 08:12:19 PM (7 years ago)

Author:

westonruter

Message:

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. 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.

File:

• trunk/src/wp-includes/class-wp-customize-manager.php (modified) (10 diffs)

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -321 +321 @@
         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' );
@@ -376 +377 @@
         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' ) );
 
@@ -393 +395 @@
         // 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' );
+        }
     }
 
@@ -3686 +3694 @@
             $control->enqueue();
         }
+
+        if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
+            wp_enqueue_script( 'updates' );
+        }
     }
 
@@ -3890 +3902 @@
             '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' ),
         );
@@ -3996 +4009 @@
             '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' ),
+            ),
         );
 
@@ -4099 +4121 @@
         /* 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' );
@@ -4160 +4184 @@
         ) ) );
 
-        /* Themes */
-
-        $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
-            'title'      => $this->theme()->display( 'Name' ),
-            'capability' => 'switch_themes',
-            'priority'   => 0,
+        /* Themes (controls are loaded via ajax) */
+
+        $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).
@@ -4172 +4215 @@
             '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 */
@@ -4708 +4720 @@
 
     /**
+     * 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.
      *