Skip to content

Commit 1a569f3

Browse files
audrasjbaudrasjb
committed
Customizer: When a block theme is active, add an information about Site Editor in the Customizer.
This change adds an information notice to the customizer when a block theme is active and the customizer is also available (for example when a plugin activates it), to encourage people to use the Site Editor for the best full site customization experience. Props ironprogrammer, antonvlasenko, Clorith, audrasjb, psmits1567, tobifjellner, costdev, webcommsat, joedolson, pbiron. Merges [53024] and [53025] to the 5.9 branch. Fixes #54939. git-svn-id: https://develop.svn.wordpress.org/branches/5.9@53026 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 7a6a2ec commit 1a569f3

4 files changed

Lines changed: 49 additions & 2 deletions

File tree

‎src/js/_enqueues/wp/customize/controls.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8334,6 +8334,33 @@
83348334
history.replaceState( {}, document.title, urlParser.href );
83358335
}
83368336

8337+
/**
8338+
* Displays a Site Editor notification when a block theme is activated.
8339+
*
8340+
* @since 4.9.0
8341+
*
8342+
* @param {string} [notification] - A notification to display.
8343+
* @return {void}
8344+
*/
8345+
function addSiteEditorNotification( notification ) {
8346+
api.notifications.add( new api.Notification( 'site_editor_block_theme_notice', {
8347+
message: notification,
8348+
type: 'info',
8349+
dismissible: false,
8350+
render: function() {
8351+
var notification = api.Notification.prototype.render.call( this ),
8352+
button = notification.find( 'button.switch-to-editor' );
8353+
8354+
button.on( 'click', function( event ) {
8355+
event.preventDefault();
8356+
location.assign( button.data( 'action' ) );
8357+
} );
8358+
8359+
return notification;
8360+
}
8361+
} ) );
8362+
}
8363+
83378364
/**
83388365
* Dismiss autosave.
83398366
*
@@ -8408,6 +8435,10 @@
84088435
if ( api.settings.changeset.latestAutoDraftUuid || api.settings.changeset.hasAutosaveRevision ) {
84098436
addAutosaveRestoreNotification();
84108437
}
8438+
var shouldDisplayBlockThemeNotification = !! parseInt( $( '#customize-info' ).data( 'block-theme' ), 10 );
8439+
if (shouldDisplayBlockThemeNotification) {
8440+
addSiteEditorNotification( api.l10n.blockThemeNotification );
8441+
}
84118442
})();
84128443

84138444
// Check if preview url is valid and load the preview frame.

‎src/wp-admin/css/customize-controls.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1733,6 +1733,12 @@ p.customize-section-description {
17331733
font-weight: 400;
17341734
}
17351735

1736+
#customize-notifications-area .notification-message button.switch-to-editor {
1737+
display: block;
1738+
margin-top: 6px;
1739+
font-weight: 400;
1740+
}
1741+
17361742
#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
17371743
display: none;
17381744
}

‎src/wp-admin/customize.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@
222222
<ul></ul>
223223
</div>
224224
<div class="wp-full-overlay-sidebar-content" tabindex="-1">
225-
<div id="customize-info" class="accordion-section customize-info">
225+
<div id="customize-info" class="accordion-section customize-info" data-block-theme="<?php echo (int) wp_is_block_theme(); ?>">
226226
<div class="accordion-section-title">
227227
<span class="preview-notice">
228228
<?php
@@ -235,7 +235,7 @@
235235
<div class="customize-panel-description">
236236
<p>
237237
<?php
238-
_e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements.' );
238+
_e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements. The Customizer is intended for use with non-block themes.' );
239239
?>
240240
</p>
241241
<p>

‎src/wp-includes/script-loader.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1220,6 +1220,16 @@ function wp_default_scripts( $scripts ) {
12201220
'publishSettings' => __( 'Publish Settings' ),
12211221
'invalidDate' => __( 'Invalid date.' ),
12221222
'invalidValue' => __( 'Invalid value.' ),
1223+
'blockThemeNotification' => sprintf(
1224+
/* translators: 1: Link to Site Editor documentation on HelpHub, 2: HTML button. */
1225+
__( 'Hurray! Your theme supports Full Site Editing with blocks. <a href="%1$s">Tell me more</a>. %2$s' ),
1226+
__( 'https://wordpress.org/support/article/site-editor/' ),
1227+
sprintf(
1228+
'<button type="button" data-action="%1$s" class="button switch-to-editor">%2$s</button>',
1229+
esc_url( admin_url( 'site-editor.php' ) ),
1230+
__( 'Use Site Editor' )
1231+
)
1232+
),
12231233
)
12241234
);
12251235
$scripts->add( 'customize-selective-refresh', "/wp-includes/js/customize-selective-refresh$suffix.js", array( 'jquery', 'wp-util', 'customize-preview' ), false, 1 );

0 commit comments

Comments
 (0)