WordPress.org
Get WordPress

Make WordPress Core

Changeset 38967


Ignore:
Timestamp:
10/26/2016 08:02:51 PM (8 years ago)
Author:
westonruter
Message:

Customize: Add edit shortcuts in customizer preview to visually expose editable elements and focus on the corresponding controls when clicked.

  • Edit shortcuts show initially for a moment and then fade away so as to not get in the way of the preview.
  • Visibility of edit shortcuts is toggled by clicking/touching anywhere inert in the document.
  • Implements UI for mobile and touch devices which do not support shift-click.
  • Adds editShortcutVisibility state.
  • Adds new methods to wp.customize.selectiveRefresh.Partial for managing edit shortcuts.

Incorporates aspects of the Customize Direct Manipulation feature plugin.

Props sirbrillig, mattwiebe, celloexpressions, melchoyce, westonruter, afercia.
Fixes #27403.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/customize.php

    r38813 r38967  
    162162                </div>
    163163                <div class="customize-panel-description"><?php
    164                     _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
     164                    _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; click anywhere in the preview to toggle them off and on.' );
    165165                ?></div>
    166166            </div>

  • trunk/src/wp-admin/js/customize-controls.js

    r38948 r38967  
    43034303                synced.scroll = previewer.scroll;
    43044304            }
     4305            synced['edit-shortcut-visibility'] = api.state( 'editShortcutVisibility' ).get();
    43054306            previewer.send( 'sync', synced );
    43064307
    … …  
    51235124                changesetStatus = state.create( 'changesetStatus' ),
    51245125                previewerAlive = state.create( 'previewerAlive' ),
     5126                editShortcutVisibility  = state.create( 'editShortcutVisibility' ),
    51255127                populateChangesetUuidParam;
    51265128
    … …  
    51595161            expandedSection( false );
    51605162            previewerAlive( true );
     5163            editShortcutVisibility( 'initial' );
    51615164            changesetStatus( api.settings.changeset.status );
    51625165
    … …  
    57525755        });
    57535756
     5757        // Update the edit shortcut visibility state.
     5758        api.previewer.bind( 'edit-shortcut-visibility', function( visibility ) {
     5759            api.state( 'editShortcutVisibility' ).set( visibility );
     5760        } );
     5761        api.state( 'editShortcutVisibility' ).bind( function( visibility ) {
     5762            api.previewer.send( 'edit-shortcut-visibility', visibility );
     5763        } );
     5764
    57545765        // Autosave changeset.
    57555766        ( function() {

  • trunk/src/wp-content/themes/twentyfourteen/style.css

    r38171 r38967  
    10401040}
    10411041
     1042.secondary-navigation .customize-partial-edit-shortcut:before,
     1043.footer-sidebar .widget:first-child .customize-partial-edit-shortcut:before {
     1044    left: 0;
     1045}
    10421046
    10431047/**

  • trunk/src/wp-includes/css/customize-preview.css

    r36890 r38967  
    1111    box-shadow: none;
    1212}
     13
     14/* Make shortcut buttons essentially invisible */
     15.widget button.customize-partial-edit-shortcut,
     16.customize-partial-edit-shortcut {
     17    position: relative;
     18    float: left;
     19    width: 1px; /* required to have a size to be focusable in Safari */
     20    height: 1px;
     21    padding: 0;
     22    margin: -1px 0 0 -1px;
     23    border: 0;
     24    background: transparent;
     25    color: transparent;
     26    box-shadow: none;
     27    outline: none;
     28    z-index: 5;
     29}
     30
     31.customize-partial-edit-shortcut:active {
     32    padding: 0;
     33    border: 0;
     34}
     35
     36/* Styles for the actual shortcut */
     37.customize-partial-edit-shortcut:before {
     38    position: absolute;
     39    left: -36px;
     40    color: #fff;
     41    width: 30px;
     42    height: 30px;
     43    font-size: 18px;
     44    font-family: dashicons;
     45    content: '\f464';
     46    z-index: 5;
     47    background-color: #0085ba;
     48    border-radius: 50%;
     49    border: 2px solid #fff;
     50    box-shadow: 0 2px 1px rgba(46,68,83,0.15);
     51    text-align: center;
     52    display: flex;
     53    flex-direction: row;
     54    justify-content: center;
     55    align-items: center;
     56    cursor: pointer;
     57    padding: 0;
     58    animation-fill-mode: both;
     59    animation-duration: .4s;
     60    opacity: 0;
     61    pointer-events: none;
     62    text-shadow: 0 -1px 1px #006799,
     63                 1px 0 1px #006799,
     64                 0 1px 1px #006799,
     65                 -1px 0 1px #006799;
     66}
     67
     68.customize-partial-edit-shortcut:hover:before,
     69.customize-partial-edit-shortcut:focus:before {
     70    background: #008ec2; /* matches primary buttons */
     71    border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
     72}
     73
     74body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before {
     75    animation-name: customize-partial-edit-shortcut-bounce-appear;
     76    pointer-events: auto;
     77}
     78body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before {
     79    animation-name: customize-partial-edit-shortcut-bounce-disappear;
     80    pointer-events: none;
     81}
     82
     83body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before {
     84    animation-duration: 1.5s;
     85    animation-delay: 0.4s;
     86    animation-name: customize-partial-edit-shortcut-bounce-disappear;
     87    pointer-events: none;
     88}
     89
     90.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
     91.customize-partial-edit-shortcut-hidden:before {
     92    visibility: hidden;
     93}
     94
     95.widget button.customize-partial-edit-shortcut-absolute,
     96.customize-partial-edit-shortcut-absolute {
     97    position: static;
     98}
     99
     100.customize-partial-edit-shortcut-left-margin:before {
     101    left: 0;
     102}
     103
     104@keyframes customize-partial-edit-shortcut-bounce-appear {
     105    from, 20%, 40%, 60%, 80%, to {
     106        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
     107    }
     108    0% {
     109        opacity: 0;
     110        transform: scale3d(.3, .3, .3);
     111    }
     112    20% {
     113        transform: scale3d(1.1, 1.1, 1.1);
     114    }
     115    40% {
     116        transform: scale3d(.9, .9, .9);
     117    }
     118    60% {
     119        opacity: 1;
     120        transform: scale3d(1.03, 1.03, 1.03);
     121    }
     122    80% {
     123        transform: scale3d(.97, .97, .97);
     124    }
     125    to {
     126        opacity: 1;
     127        transform: scale3d(1, 1, 1);
     128    }
     129}
     130
     131@keyframes customize-partial-edit-shortcut-bounce-disappear {
     132    from, 20%, 40%, 60%, 80%, to {
     133        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
     134    }
     135    0% {
     136        opacity: 1;
     137        transform: scale3d(1, 1, 1);
     138    }
     139    20% {
     140        transform: scale3d(.97, .97, .97);
     141    }
     142    40% {
     143        opacity: 1;
     144        transform: scale3d(1.03, 1.03, 1.03);
     145    }
     146    60% {
     147        transform: scale3d(.9, .9, .9);
     148    }
     149    80% {
     150        transform: scale3d(1.1, 1.1, 1.1);
     151    }
     152    to {
     153        opacity: 0;
     154        transform: scale3d(.3, .3, .3);
     155    }
     156}
     157
     158@media screen and (max-width:800px) {
     159    .customize-partial-edit-shortcut:before {
     160        left: -18px; /* Assume there will be less of a margin available on smaller screens */
     161    }
     162}

  • trunk/src/wp-includes/customize/class-wp-customize-selective-refresh.php

    r38810 r38967  
    185185            'l10n'           => array(
    186186                'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
     187                'clickEditMenu' => __( 'Click to edit this menu.' ),
     188                'clickEditWidget' => __( 'Click to edit this widget.' ),
     189                'clickEditTitle' => __( 'Click to edit the site title.' ),
     190                'clickEditMisc' => __( 'Click to edit this element.' ),
     191                'editShortcutVisibilityToggle'  => __( 'Toggle edit shortcuts' ),
    187192                /* translators: %s: document.write() */
    188193                'badDocumentWrite' => sprintf( __( '%s is forbidden' ), 'document.write()' ),

  • trunk/src/wp-includes/js/customize-preview-widgets.js

    r38810 r38967  
    358358                    params: {}
    359359                } );
    360                 api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
    361360            }
    362361
    … …  
    400399                wasInserted = true;
    401400            } );
     401
     402            api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
    402403
    403404            if ( wasInserted ) {

  • trunk/src/wp-includes/js/customize-selective-refresh.js

    r38810 r38967  
    77    self = {
    88        ready: $.Deferred(),
     9        editShortcutVisibility: new api.Value(),
    910        data: {
    1011            partials: {},
    … …  
    4344        id: null,
    4445
    45          /**
     46        /**
    4647         * Constructor.
    4748         *
    … …  
    8384        ready: function() {
    8485            var partial = this;
    85             _.each( _.pluck( partial.placements(), 'container' ), function( container ) {
    86                 $( container ).attr( 'title', self.data.l10n.shiftClickToEdit );
     86            _.each( partial.placements(), function( placement ) {
     87                $( placement.container ).attr( 'title', self.data.l10n.shiftClickToEdit );
     88                partial.createEditShortcutForPlacement( placement );
    8789            } );
    8890            $( document ).on( 'click', partial.params.selector, function( e ) {
    … …  
    100102
    101103        /**
     104         * Create and show the edit shortcut for a given partial placement container.
     105         *
     106         * @since 4.7
     107         *
     108         * @param {Placement} placement The placement container element.
     109         * @returns {void}
     110         */
     111        createEditShortcutForPlacement: function( placement ) {
     112            var partial = this, $shortcut, $placementContainer;
     113            if ( ! placement.container ) {
     114                return;
     115            }
     116            $placementContainer = $( placement.container );
     117            if ( ! $placementContainer.length ) {
     118                return;
     119            }
     120            $shortcut = partial.createEditShortcut();
     121            partial.positionEditShortcut( placement, $shortcut );
     122            $shortcut.on( 'click', function( event ) {
     123                event.preventDefault();
     124                event.stopPropagation();
     125                partial.showControl();
     126            } );
     127        },
     128
     129        /**
     130         * Position an edit shortcut for the placement container.
     131         *
     132         * The shortcut must already be created and added to the page.
     133         *
     134         * @since 4.7
     135         *
     136         * @param {Placement} placement The placement for the partial.
     137         * @param {jQuery} $editShortcut The shortcut element as a jQuery object.
     138         * @returns {void}
     139         */
     140        positionEditShortcut: function( placement, $editShortcut ) {
     141            var partial = this, $placementContainer;
     142            $placementContainer = $( placement.container );
     143            $placementContainer.prepend( $editShortcut );
     144            if ( 'absolute' === $placementContainer.css( 'position' ) ) {
     145                $editShortcut.addClass( 'customize-partial-edit-shortcut-absolute' );
     146                $editShortcut.css( partial.getEditShortcutPositionStyles( $placementContainer ) );
     147                partial.whenPageChanges( function() {
     148                    $editShortcut.css( partial.getEditShortcutPositionStyles( $placementContainer ) );
     149                } );
     150            }
     151            if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
     152                $editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
     153            }
     154            $editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editShortcut.offset().left < 1 );
     155        },
     156
     157        /**
     158         * Call a callback function when the page changes.
     159         *
     160         * This calls a callback for any change that might require refreshing the edit shortcuts.
     161         *
     162         * @since 4.7
     163         *
     164         * @param {Function} callback The function to call when the page changes.
     165         * @returns {void}
     166         */
     167        whenPageChanges: function( callback ) {
     168            var debouncedCallback, $document;
     169            debouncedCallback = _.debounce( function() {
     170                // Timeout allows any page animations to finish
     171                setTimeout( callback, 100 );
     172            }, 350 );
     173            // When window is resized.
     174            $( window ).resize( debouncedCallback );
     175            // When any customizer setting changes.
     176            api.bind( 'change', debouncedCallback );
     177            $document = $( window.document );
     178            // After scroll in case there are fixed position elements
     179            $document.on( 'scroll', debouncedCallback );
     180            // After page click (eg: hamburger menus)
     181            $document.on( 'click', debouncedCallback );
     182        },
     183
     184        /**
     185         * Return the CSS positioning for the edit shortcut for a given partial placement.
     186         *
     187         * @since 4.7
     188         *
     189         * @param {jQuery} $placementContainer The placement container element as a jQuery object.
     190         * @return {Object} Object containing CSS positions.
     191         */
     192        getEditShortcutPositionStyles: function( $placementContainer ) {
     193            return {
     194                top: $placementContainer.css( 'top' ),
     195                left: $placementContainer.css( 'left' ),
     196                right: 'auto'
     197            };
     198        },
     199
     200        /**
     201         * Return the unique class name for the edit shortcut button for this partial.
     202         *
     203         * @since 4.7
     204         *
     205         * @return {string} Partial ID converted into a class name for use in shortcut.
     206         */
     207        getEditShortcutClassName: function() {
     208            var partial = this, cleanId;
     209            cleanId = partial.id.replace( /]/g, '' ).replace( /\[/g, '-' );
     210            return 'customize-partial-edit-shortcut-' + cleanId;
     211        },
     212
     213        /**
     214         * Return the appropriate translated string for the edit shortcut button.
     215         *
     216         * @since 4.7
     217         *
     218         * @return {string} Tooltip for edit shortcut.
     219         */
     220        getEditShortcutTitle: function() {
     221            var partial = this, l10n = self.data.l10n;
     222            switch ( partial.getType() ) {
     223                case 'widget':
     224                    return l10n.clickEditWidget;
     225                case 'blogname':
     226                    return l10n.clickEditTitle;
     227                case 'blogdescription':
     228                    return l10n.clickEditTitle;
     229                case 'nav_menu':
     230                    return l10n.clickEditMenu;
     231                default:
     232                    return l10n.clickEditMisc;
     233            }
     234        },
     235
     236        /**
     237         * Return the type of this partial
     238         *
     239         * Will use `params.type` if set, but otherwise will try to infer type from settingId.
     240         *
     241         * @since 4.7
     242         *
     243         * @return {string} Type of partial derived from type param or the related setting ID.
     244         */
     245        getType: function() {
     246            var partial = this, settingId;
     247            settingId = partial.params.primarySetting || _.first( partial.settings() ) || 'unknown';
     248            if ( partial.params.type ) {
     249                return partial.params.type;
     250            }
     251            if ( settingId.match( /^nav_menu_instance\[/ ) ) {
     252                return 'nav_menu';
     253            }
     254            if ( settingId.match( /^widget_.+\[\d+]$/ ) ) {
     255                return 'widget';
     256            }
     257            return settingId;
     258        },
     259
     260        /**
     261         * Create an edit shortcut button for this partial.
     262         *
     263         * @since 4.7
     264         *
     265         * @return {jQuery} The edit shortcut button element.
     266         */
     267        createEditShortcut: function() {
     268            var partial = this, shortcutTitle;
     269            shortcutTitle = partial.getEditShortcutTitle();
     270            return $( '<button>', {
     271                'aria-label': shortcutTitle,
     272                'title': shortcutTitle,
     273                'type': 'button',
     274                'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
     275            } );
     276        },
     277
     278        /**
    102279         * Find all placements for this partial int he document.
    103280         *
    … …  
    176353         */
    177354        showControl: function() {
    178             var partial = this, settingId = partial.params.primarySetting;
     355            var partial = this, settingId = partial.params.primarySetting, menuSlug;
    179356            if ( ! settingId ) {
    180357                settingId = _.first( partial.settings() );
     358            }
     359            if ( partial.getType() === 'nav_menu' ) {
     360                menuSlug = partial.params.navMenuArgs.theme_location;
     361                if ( menuSlug ) {
     362                    settingId = 'nav_menu_locations[' + menuSlug + ']';
     363                }
    181364            }
    182365            api.preview.send( 'focus-control-for-setting', settingId );
    … …  
    320503            /* jshint ignore:end */
    321504
     505            partial.createEditShortcutForPlacement( placement );
    322506            placement.container.removeClass( 'customize-partial-refreshing' );
    323507
    … …  
    8551039        } );
    8561040
     1041        api.preview.bind( 'edit-shortcut-visibility', function( visibility ) {
     1042            api.selectiveRefresh.editShortcutVisibility.set( visibility );
     1043        } );
     1044        api.selectiveRefresh.editShortcutVisibility.bind( function( visibility ) {
     1045            var body = $( document.body ), shouldAnimateHide;
     1046
     1047            shouldAnimateHide = ( 'hidden' === visibility && body.hasClass( 'customize-partial-edit-shortcuts-shown' ) && ! body.hasClass( 'customize-partial-edit-shortcuts-hidden' ) );
     1048            body.toggleClass( 'customize-partial-edit-shortcuts-hidden', shouldAnimateHide );
     1049            body.toggleClass( 'customize-partial-edit-shortcuts-shown', 'visible' === visibility );
     1050            body.toggleClass( 'customize-partial-edit-shortcuts-flash', 'initial' === visibility );
     1051        } );
     1052
    8571053        api.preview.bind( 'active', function() {
     1054            var body = $( document.body ), buttonText, $editShortcutVisibilityButton;
     1055
     1056            // Add invisible button to toggle editShortcutVisibility.
     1057            if ( $( '.edit-shortcut-visibility-button' ).length < 1 ) {
     1058                buttonText = self.data.l10n.editShortcutVisibilityToggle || 'Toggle edit shortcuts';
     1059                $editShortcutVisibilityButton = $( '<button type="button" class="edit-shortcut-visibility-button screen-reader-text"></button>' );
     1060                $editShortcutVisibilityButton.text( buttonText );
     1061                $editShortcutVisibilityButton.on( 'click', function() {
     1062                    api.selectiveRefresh.editShortcutVisibility.set( 'visible' === api.selectiveRefresh.editShortcutVisibility.get() ? 'hidden' : 'visible' );
     1063                } );
     1064                body.prepend( $editShortcutVisibilityButton );
     1065            }
    8581066
    8591067            // Make all partials ready.
    … …  
    8661074                partial.deferred.ready.resolve();
    8671075            } );
     1076
     1077            body.on( 'click', function( event ) {
     1078                if ( $( event.target ).is( '.customize-partial-edit-shortcut, :input, a[href]' ) || 0 !== $( event.target ).closest( 'a' ).length ) {
     1079                    return; // Don't toggle shortcuts on form, link, or link child clicks.
     1080                }
     1081                api.selectiveRefresh.editShortcutVisibility.set( 'visible' === api.selectiveRefresh.editShortcutVisibility.get() ? 'hidden' : 'visible' );
     1082                api.preview.send( 'edit-shortcut-visibility', api.selectiveRefresh.editShortcutVisibility.get() );
     1083            } );
    8681084        } );
    8691085

  • trunk/src/wp-includes/script-loader.php

    r38880 r38967  
    857857    $styles->add( 'media-views',          "/wp-includes/css/media-views$suffix.css", array( 'buttons', 'dashicons', 'wp-mediaelement' ) );
    858858    $styles->add( 'wp-pointer',           "/wp-includes/css/wp-pointer$suffix.css", array( 'dashicons' ) );
    859     $styles->add( 'customize-preview',    "/wp-includes/css/customize-preview$suffix.css" );
     859    $styles->add( 'customize-preview',    "/wp-includes/css/customize-preview$suffix.css", array( 'dashicons' ) );
    860860    $styles->add( 'wp-embed-template-ie', "/wp-includes/css/wp-embed-template-ie$suffix.css" );
    861861    $styles->add_data( 'wp-embed-template-ie', 'conditional', 'lte IE 8' );
Note: See TracChangeset for help on using the changeset viewer.