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' );