Make WordPress Core

Changeset 53026


Ignore:
Timestamp:
03/29/2022 08:16:36 PM (2 years 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, joedolson, pbiron.
Merges [53024] and [53025] to the 5.9 branch.
Fixes #54939.

Location:
branches/5.9
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • branches/5.9

  • branches/5.9/src/js/_enqueues/wp/customize/controls.js

    r52003 r53026  
    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        })();
  • branches/5.9/src/wp-admin/css/customize-controls.css

    r51996 r53026  
    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}
  • branches/5.9/src/wp-admin/customize.php

    r52053 r53026  
    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>
  • branches/5.9/src/wp-includes/script-loader.php

    r53017 r53026  
    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    );
Note: See TracChangeset for help on using the changeset viewer.