From edf755823ba24030f3b636c5bcdf002632451e18 Mon Sep 17 00:00:00 2001
From: hellofromTonya <hellofromTonya@git.wordpress.org>
Date: Tue, 14 Dec 2021 15:33:01 +0000
Subject: [PATCH] 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.
Built from https://develop.svn.wordpress.org/trunk@52371


git-svn-id: http://core.svn.wordpress.org/trunk@51963 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-admin/includes/theme.php                   | 31 ++++++++++--
 wp-includes/class-wp-customize-manager.php    |  9 ++--
 .../class-wp-customize-theme-control.php      | 50 +++++++++++++++----
 wp-includes/version.php                       |  2 +-
 4 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/wp-admin/includes/theme.php b/wp-admin/includes/theme.php
index 1e4828b3c1..8e98854afc 100644
--- a/wp-admin/includes/theme.php
+++ b/wp-admin/includes/theme.php
@@ -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 ) { #>
diff --git a/wp-includes/class-wp-customize-manager.php b/wp-includes/class-wp-customize-manager.php
index 25d831bb2f..9f74692e7f 100644
--- a/wp-includes/class-wp-customize-manager.php
+++ b/wp-includes/class-wp-customize-manager.php
@@ -5808,10 +5808,11 @@ final class WP_Customize_Manager {
 		if ( 'installed' === $theme_action ) {
 
 			// Load all installed themes from wp_prepare_themes_for_js().
-			$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'] );
+			$themes = array( 'themes' => array() );
+			foreach ( wp_prepare_themes_for_js() as $theme ) {
+				$theme['type']      = 'installed';
+				$theme['active']    = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme['id'] );
+				$themes['themes'][] = $theme;
 			}
 		} elseif ( 'wporg' === $theme_action ) {
 
diff --git a/wp-includes/customize/class-wp-customize-theme-control.php b/wp-includes/customize/class-wp-customize-theme-control.php
index a0a705d545..20f867e462 100644
--- a/wp-includes/customize/class-wp-customize-theme-control.php
+++ b/wp-includes/customize/class-wp-customize-theme-control.php
@@ -242,17 +242,47 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 				</div>
 				<div class="notice notice-success notice-alt"><p><?php _ex( 'Installed', 'theme' ); ?></p></div>
 			<# } else if ( 'installed' === data.theme.type ) { #>
-				<div class="theme-id-container">
-					<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
-					<div class="theme-actions">
-						<# if ( data.theme.compatibleWP && data.theme.compatiblePHP ) { #>
-							<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>
-						<# } else { #>
-							<button type="button" class="button button-primary disabled" aria-label="<?php echo esc_attr( $preview_label ); ?>"><?php _e( 'Live Preview' ); ?></button>
-						<# } #>
+				<# if ( data.theme.blockTheme ) { #>
+					<div class="theme-id-container">
+						<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
+						<div class="theme-actions">
+							<# if ( data.theme.actions.activate ) { #>
+								<?php
+									/* translators: %s: Theme name. */
+									$aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
+								?>
+								<a href="{{{ data.theme.actions.activate }}}" class="button button-primary activate" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
+							<# } #>
+						</div>
 					</div>
-				</div>
-				<div class="notice notice-success notice-alt"><p><?php _ex( 'Installed', 'theme' ); ?></p></div>
+					<div class="notice notice-error notice-alt"><p>
+					<?php
+						_e( 'This theme doesn\'t support Customizer.' );
+					?>
+					<# if ( data.theme.actions.activate ) { #>
+						<?php
+							echo ' ';
+							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.theme.actions.activate }}}'
+							);
+						?>
+					<# } #>
+					</p></div>
+				<# } else { #>
+					<div class="theme-id-container">
+						<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
+						<div class="theme-actions">
+							<# if ( data.theme.compatibleWP && data.theme.compatiblePHP ) { #>
+								<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>
+							<# } else { #>
+								<button type="button" class="button button-primary disabled" aria-label="<?php echo esc_attr( $preview_label ); ?>"><?php _e( 'Live Preview' ); ?></button>
+							<# } #>
+						</div>
+					</div>
+					<div class="notice notice-success notice-alt"><p><?php _ex( 'Installed', 'theme' ); ?></p></div>
+				<# } #>
 			<# } else { #>
 				<div class="theme-id-container">
 					<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
diff --git a/wp-includes/version.php b/wp-includes/version.php
index cf5fb84914..6d6cb89f1b 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.9-beta2-52370';
+$wp_version = '5.9-beta2-52371';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.