diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js index 00ec7e2599..37a57fd859 100644 --- a/src/js/_enqueues/wp/customize/controls.js +++ b/src/js/_enqueues/wp/customize/controls.js @@ -8334,6 +8334,33 @@ history.replaceState( {}, document.title, urlParser.href ); } + /** + * Displays a Site Editor notification when a block theme is activated. + * + * @since 4.9.0 + * + * @param {string} [notification] - A notification to display. + * @return {void} + */ + function addSiteEditorNotification( notification ) { + api.notifications.add( new api.Notification( 'site_editor_block_theme_notice', { + message: notification, + type: 'info', + dismissible: false, + render: function() { + var notification = api.Notification.prototype.render.call( this ), + button = notification.find( 'button.switch-to-editor' ); + + button.on( 'click', function( event ) { + event.preventDefault(); + location.assign( button.data( 'action' ) ); + } ); + + return notification; + } + } ) ); + } + /** * Dismiss autosave. * @@ -8408,6 +8435,10 @@ if ( api.settings.changeset.latestAutoDraftUuid || api.settings.changeset.hasAutosaveRevision ) { addAutosaveRestoreNotification(); } + var shouldDisplayBlockThemeNotification = !! parseInt( $( '#customize-info' ).data( 'block-theme' ), 10 ); + if (shouldDisplayBlockThemeNotification) { + addSiteEditorNotification( api.l10n.blockThemeNotification ); + } })(); // Check if preview url is valid and load the preview frame. diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index bdd28880c1..20596fa23c 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1733,6 +1733,12 @@ p.customize-section-description { font-weight: 400; } +#customize-notifications-area .notification-message button.switch-to-editor { + display: block; + margin-top: 6px; + font-weight: 400; +} + #customize-theme-controls .control-panel-themes > .accordion-section-title:after { display: none; } diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php index aed0646336..0df5d81ae5 100644 --- a/src/wp-admin/customize.php +++ b/src/wp-admin/customize.php @@ -222,7 +222,7 @@ do_action( 'customize_controls_head' );
-
+

diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 6b7ccea2f7..1469d42762 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1154,6 +1154,7 @@ function wp_default_scripts( $scripts ) { $scripts->add( 'customize-models', '/wp-includes/js/customize-models.js', array( 'underscore', 'backbone' ), false, 1 ); $scripts->add( 'customize-views', '/wp-includes/js/customize-views.js', array( 'jquery', 'underscore', 'imgareaselect', 'customize-models', 'media-editor', 'media-views' ), false, 1 ); $scripts->add( 'customize-controls', "/wp-admin/js/customize-controls$suffix.js", array( 'customize-base', 'wp-a11y', 'wp-util', 'jquery-ui-core' ), false, 1 ); + $switch_to_site_editor_label = __( 'Use Site Editor' ); did_action( 'init' ) && $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', @@ -1221,6 +1222,18 @@ function wp_default_scripts( $scripts ) { 'publishSettings' => __( 'Publish Settings' ), 'invalidDate' => __( 'Invalid date.' ), 'invalidValue' => __( 'Invalid value.' ), + 'blockThemeNotification' => sprintf( + /* translators: 1. %s: URL to the localized version of https://wordpress.org/support/article/site-editor/, 2: HTML Button. */ + __( 'Hurray! Your theme supports Full Site Editing with blocks. Tell me more. %2$s' ), + __( 'https://wordpress.org/support/article/site-editor/' ), + sprintf( + /* translators: 1: URL to the Site Editor admin screen, 2: Button label, 3: Button text. */ + '', + esc_url( admin_url( 'site-editor.php' ) ), + $switch_to_site_editor_label, + $switch_to_site_editor_label + ) + ), ) ); $scripts->add( 'customize-selective-refresh', "/wp-includes/js/customize-selective-refresh$suffix.js", array( 'jquery', 'wp-util', 'customize-preview' ), false, 1 );