WordPress.org
Get WordPress

Make WordPress Core

Changeset 52371


Ignore:
Timestamp:
12/14/2021 03:31:14 PM (5 years ago)
Author:
hellofromTonya
Message:

Customize: Overlay incompatible banner for block themes.

Starting in 5.9, block themes are not compatible with (do not support) Customizer; rather, they use the Site Editor. Viewing installed themes in Customizer, this commit adds an overlay message to alert users and give them a way to activate the block theme. Clicking on the "Activate" button activates the block theme and redirects back to the Appearance > Themes interface, where the user can then enter the Site Editor for customization.

Non-block themes are not affected by this change and continue to work in Customizer.

Follow-up to [41648], [41893], [52279].

Props antonvlasenko, costdev, hellofromTonya, jffng, joyously, noisysocks, poena, shaunandrews.
Fixes #54549.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/includes/theme.php

    r52346 r52371  
    10061006                                                        <# } #>
    10071007                                                </p></div>
     1008                                        <# } else if ( ! data.active && data.blockTheme ) { #>
     1009                                                <div class="notice notice-error notice-alt notice-large"><p>
     1010                                                <?php
     1011                                                        _e( 'This theme doesn\'t support Customizer.' );
     1012                                                ?>
     1013                                                <# if ( data.actions.activate ) { #>
     1014                                                        <?php
     1015                                                        printf(
     1016                                                                /* translators: %s: URL to the themes page (also it activates the theme). */
     1017                                                                ' ' . __( 'However, you can still <a href="%s">activate this theme</a>, and use the Site Editor to customize it.' ),
     1018                                                                '{{{ data.actions.activate }}}'
     1019                                                        );
     1020                                                        ?>
     1021                                                <# } #>
     1022                                                </p></div>
    10081023                                        <# } #>
    10091024
    … …  
    10261041                                        <?php } ?>
    10271042
    1028                                         <# if ( data.compatibleWP && data.compatiblePHP ) { #>
    1029                                                 <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></button>
     1043                                        <# if ( data.blockTheme ) { #>
     1044                                                <?php
     1045                                                        /* translators: %s: Theme name. */
     1046                                                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
     1047                                                ?>
     1048                                                <# if ( data.compatibleWP && data.compatiblePHP && data.actions.activate ) { #>
     1049                                                        <a href="{{{ data.actions.activate }}}" class="button button-primary activate" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
     1050                                                <# } #>
    10301051                                        <# } else { #>
    1031                                                 <button class="button button-primary disabled"><?php _e( 'Live Preview' ); ?></button>
     1052                                                <# if ( data.compatibleWP && data.compatiblePHP ) { #>
     1053                                                        <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></button>
     1054                                                <# } else { #>
     1055                                                        <button class="button button-primary disabled"><?php _e( 'Live Preview' ); ?></button>
     1056                                                <# } #>
    10321057                                        <# } #>
    10331058                                <# } else { #>

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

    r52352 r52371  
    58095809
    58105810                        // Load all installed themes from wp_prepare_themes_for_js().
    5811                         $themes = array( 'themes' => wp_prepare_themes_for_js() );
    5812                         foreach ( $themes['themes'] as &$theme ) {
    5813                                 $theme['type']   = 'installed';
    5814                                 $theme['active'] = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme['id'] );
     5811                        $themes = array( 'themes' => array() );
     5812                        foreach ( wp_prepare_themes_for_js() as $theme ) {
     5813                                $theme['type']      = 'installed';
     5814                                $theme['active']    = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme['id'] );
     5815                                $themes['themes'][] = $theme;
    58155816                        }
    58165817                } elseif ( 'wporg' === $theme_action ) {

  • trunk/src/wp-includes/customize/class-wp-customize-theme-control.php

    r48659 r52371  
    243243                                <div class="notice notice-success notice-alt"><p><?php _ex( 'Installed', 'theme' ); ?></p></div>
    244244                        <# } else if ( 'installed' === data.theme.type ) { #>
    245                                 <div class="theme-id-container">
    246                                         <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
    247                                         <div class="theme-actions">
    248                                                 <# if ( data.theme.compatibleWP && data.theme.compatiblePHP ) { #>
    249                                                         <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></button>
    250                                                 <# } else { #>
    251                                                         <button type="button" class="button button-primary disabled" aria-label="<?php echo esc_attr( $preview_label ); ?>"><?php _e( 'Live Preview' ); ?></button>
    252                                                 <# } #>
    253                                         </div>
    254                                 </div>
    255                                 <div class="notice notice-success notice-alt"><p><?php _ex( 'Installed', 'theme' ); ?></p></div>
     245                                <# if ( data.theme.blockTheme ) { #>
     246                                        <div class="theme-id-container">
     247                                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     248                                                <div class="theme-actions">
     249                                                        <# if ( data.theme.actions.activate ) { #>
     250                                                                <?php
     251                                                                        /* translators: %s: Theme name. */
     252                                                                        $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
     253                                                                ?>
     254                                                                <a href="{{{ data.theme.actions.activate }}}" class="button button-primary activate" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
     255                                                        <# } #>
     256                                                </div>
     257                                        </div>
     258                                        <div class="notice notice-error notice-alt"><p>
     259                                        <?php
     260                                                _e( 'This theme doesn\'t support Customizer.' );
     261                                        ?>
     262                                        <# if ( data.theme.actions.activate ) { #>
     263                                                <?php
     264                                                        echo ' ';
     265                                                        printf(
     266                                                                /* translators: %s: URL to the themes page (also it activates the theme). */
     267                                                                __( 'However, you can still <a href="%s">activate this theme</a>, and use the Site Editor to customize it.' ),
     268                                                                '{{{ data.theme.actions.activate }}}'
     269                                                        );
     270                                                ?>
     271                                        <# } #>
     272                                        </p></div>
     273                                <# } else { #>
     274                                        <div class="theme-id-container">
     275                                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     276                                                <div class="theme-actions">
     277                                                        <# if ( data.theme.compatibleWP && data.theme.compatiblePHP ) { #>
     278                                                                <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></button>
     279                                                        <# } else { #>
     280                                                                <button type="button" class="button button-primary disabled" aria-label="<?php echo esc_attr( $preview_label ); ?>"><?php _e( 'Live Preview' ); ?></button>
     281                                                        <# } #>
     282                                                </div>
     283                                        </div>
     284                                        <div class="notice notice-success notice-alt"><p><?php _ex( 'Installed', 'theme' ); ?></p></div>
     285                                <# } #>
    256286                        <# } else { #>
    257287                                <div class="theme-id-container">

  • trunk/tests/phpunit/tests/ajax/CustomizeManager.php

    r52010 r52371  
    715715                $this->assertSame( 'no_autosave_revision_to_delete', $this->_last_response_parsed['data'] );
    716716        }
     717
     718        /**
     719         * Test request for retrieving installed themes.
     720         *
     721         * @ticket 54549
     722         * @covers WP_Customize_Manager::handle_load_themes_request
     723         */
     724        public function test_wp_ajax_customize_load_themes_action() {
     725                $arguments = array(
     726                        'changeset_uuid'     => false,
     727                        'settings_previewed' => true,
     728                        'branching'          => false,
     729                );
     730                new WP_Customize_Manager( $arguments );
     731                wp_set_current_user( self::$admin_user_id );
     732                $nonce                 = wp_create_nonce( 'switch_themes' );
     733                $_POST['nonce']        = $nonce;
     734                $_GET['nonce']         = $nonce;
     735                $_REQUEST['nonce']     = $nonce;
     736                $_POST['theme_action'] = 'installed';
     737                $this->make_ajax_call( 'customize_load_themes' );
     738                $response = $this->_last_response_parsed;
     739                $this->assertIsArray( $response, 'Response is not an array' );
     740
     741                $this->assertArrayHasKey( 'success', $response, 'Response must have a "success" key' );
     742                $this->assertTrue( $response['success'], 'Response was not "success"' );
     743
     744                $this->assertArrayHasKey( 'data', $response, 'Response must have a "data" key' );
     745                $this->assertIsArray( $response['data'], 'The response "data" is not an array' );
     746                $this->assertArrayHasKey( 'themes', $response['data'], 'The response data must have a "themes" key' );
     747                $this->assertIsArray( $response['data']['themes'], 'Themes data is not an array' );
     748                $this->assertNotEmpty( $response['data']['themes'], 'Themes data must not be empty' );
     749
     750                foreach ( $response['data']['themes'] as $theme ) {
     751                        $this->assertIsArray( $theme, 'Theme is not an array' );
     752                        $this->assertNotEmpty( $theme, 'Theme data must not be empty' );
     753                        $this->assertArrayHasKey( 'id', $theme, 'Theme data must have an "id" key' );
     754                        $this->assertNotEmpty( $theme['id'], 'Theme id cannot be empty' );
     755
     756                        $this->assertArrayHasKey( 'name', $theme, 'Theme data must have a "name" key' );
     757                        $this->assertNotEmpty( $theme['name'], 'Theme name cannot be empty' );
     758
     759                        $this->assertArrayHasKey( 'blockTheme', $theme, 'Themes data must include information about blocks support' );
     760                }
     761        }
    717762}
Note: See TracChangeset for help on using the changeset viewer.