vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customizer: When a block theme is active, add an information about Site Editor in the Customizer.

Browse Source 
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.
Fixes #54939.


git-svn-id: https://develop.svn.wordpress.org/trunk@53024 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jb Audras 2022-03-29 19:07:15 +00:00
parent a06097a2b7
commit 81ebc7c712
4 changed files with 52 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/js/_enqueues/wp/customize/controls.js vendored
View File

@ -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.

6
src/wp-admin/css/customize-controls.css
View File

@ -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;
}

4
src/wp-admin/customize.php
View File

@ -222,7 +222,7 @@ do_action( 'customize_controls_head' );
<ul></ul>
</div>
<div class="wp-full-overlay-sidebar-content" tabindex="-1">
<div id="customize-info" class="accordion-section customize-info">
<div id="customize-info" class="accordion-section customize-info" data-block-theme="<?php echo (int) wp_is_block_theme(); ?>">
<div class="accordion-section-title">
<span class="preview-notice">
<?php
@ -235,7 +235,7 @@ do_action( 'customize_controls_head' );
<div class="customize-panel-description">
<p>
<?php
_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.' );
_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.' );
?>
</p>
<p>

13
src/wp-includes/script-loader.php
View File

@ -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. <a href="%1$s" target="_blank">Tell me more</a>. %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. */
'<button type="button" data-action="%1$s" class="button switch-to-editor" aria-label="%2$s">%3$s</button>',
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 );