Make WordPress Core

Changeset 53024


Ignore:
Timestamp:
03/29/2022 07:07:15 PM (10 months ago)
Author:
audrasjb
Message:

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

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/wp/customize/controls.js

    r52003 r53024  
    83368336
    83378337            /**
     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
     8364            /**
    83388365             * Dismiss autosave.
    83398366             *
     
    84088435            if ( api.settings.changeset.latestAutoDraftUuid || api.settings.changeset.hasAutosaveRevision ) {
    84098436                addAutosaveRestoreNotification();
     8437            }
     8438            var shouldDisplayBlockThemeNotification = !! parseInt( $( '#customize-info' ).data( 'block-theme' ), 10 );
     8439            if (shouldDisplayBlockThemeNotification) {
     8440                addSiteEditorNotification( api.l10n.blockThemeNotification );
    84108441            }
    84118442        })();
  • trunk/src/wp-admin/css/customize-controls.css

    r51996 r53024  
    17311731    top: 50%;
    17321732    margin-top: -14px;
     1733    font-weight: 400;
     1734}
     1735
     1736#customize-notifications-area .notification-message button.switch-to-editor {
     1737    display: block;
     1738    margin-top: 6px;
    17331739    font-weight: 400;
    17341740}
  • trunk/src/wp-admin/customize.php

    r52053 r53024  
    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">
     
    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>
  • trunk/src/wp-includes/script-loader.php

    r53015 r53024  
    11551155    $scripts->add( 'customize-views', '/wp-includes/js/customize-views.js', array( 'jquery', 'underscore', 'imgareaselect', 'customize-models', 'media-editor', 'media-views' ), false, 1 );
    11561156    $scripts->add( 'customize-controls', "/wp-admin/js/customize-controls$suffix.js", array( 'customize-base', 'wp-a11y', 'wp-util', 'jquery-ui-core' ), false, 1 );
     1157    $switch_to_site_editor_label = __( 'Use Site Editor' );
    11571158    did_action( 'init' ) && $scripts->localize(
    11581159        'customize-controls',
     
    12221223            'invalidDate'             => __( 'Invalid date.' ),
    12231224            'invalidValue'            => __( 'Invalid value.' ),
     1225            'blockThemeNotification'  => sprintf(
     1226                /* translators: 1. %s: URL to the localized version of https://wordpress.org/support/article/site-editor/, 2: HTML Button. */
     1227                __( 'Hurray! Your theme supports Full Site Editing with blocks. <a href="%1$s" target="_blank">Tell me more</a>. %2$s' ),
     1228                __( 'https://wordpress.org/support/article/site-editor/' ),
     1229                sprintf(
     1230                    /* translators: 1: URL to the Site Editor admin screen, 2: Button label, 3: Button text. */
     1231                    '<button type="button" data-action="%1$s" class="button switch-to-editor" aria-label="%2$s">%3$s</button>',
     1232                    esc_url( admin_url( 'site-editor.php' ) ),
     1233                    $switch_to_site_editor_label,
     1234                    $switch_to_site_editor_label
     1235                )
     1236            ),
    12241237        )
    12251238    );
Note: See TracChangeset for help on using the changeset viewer.