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.

git-svn-id: https://develop.svn.wordpress.org/trunk@52371 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork
2021-12-14 15:31:14 +00:00
parent d3a851d0d1
commit 4b35425d7b
4 changed files with 118 additions and 17 deletions
+28 -3
View File
@@ -1005,6 +1005,21 @@ function customize_themes_print_templates() {
?>
<# } #>
</p></div>
<# } else if ( ! data.active && data.blockTheme ) { #>
<div class="notice notice-error notice-alt notice-large"><p>
<?php
_e( 'This theme doesn\'t support Customizer.' );
?>
<# if ( data.actions.activate ) { #>
<?php
printf(
/* translators: %s: URL to the themes page (also it activates the theme). */
' ' . __( 'However, you can still <a href="%s">activate this theme</a>, and use the Site Editor to customize it.' ),
'{{{ data.actions.activate }}}'
);
?>
<# } #>
</p></div>
<# } #>
<p class="theme-description">{{{ data.description }}}</p>
@@ -1025,10 +1040,20 @@ function customize_themes_print_templates() {
<# } #>
<?php } ?>
<# if ( data.compatibleWP && data.compatiblePHP ) { #>
<button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></button>
<# if ( data.blockTheme ) { #>
<?php
/* translators: %s: Theme name. */
$aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
?>
<# if ( data.compatibleWP && data.compatiblePHP && data.actions.activate ) { #>
<a href="{{{ data.actions.activate }}}" class="button button-primary activate" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
<# } #>
<# } else { #>
<button class="button button-primary disabled"><?php _e( 'Live Preview' ); ?></button>
<# if ( data.compatibleWP && data.compatiblePHP ) { #>
<button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></button>
<# } else { #>
<button class="button button-primary disabled"><?php _e( 'Live Preview' ); ?></button>
<# } #>
<# } #>
<# } else { #>
<# if ( data.compatibleWP && data.compatiblePHP ) { #>