Make WordPress Core


Ignore:
Timestamp:
12/14/2021 03:31:14 PM (3 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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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">
Note: See TracChangeset for help on using the changeset viewer.