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-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 { #>
Note: See TracChangeset for help on using the changeset viewer.