Ticket #27403: 27403.6.diff

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

@@ -4039 +4039 @@
 
                 $( '.collapse-sidebar' ).on( 'click', function() {
                         api.state( 'paneVisible' ).set( ! api.state( 'paneVisible' ).get() );
+                        api.previewer.send( 'collapse-sidebar', ! api.state( 'paneVisible' ).get() );
                 });
 
                 api.state( 'paneVisible' ).bind( function( paneVisible ) {

src/wp-includes/class-wp-customize-manager.php

@@ -837 +837 @@
                         'nonce' => $this->get_nonces(),
                         'l10n' => array(
                                 'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
+                                'clickIconToEdit' => __( 'Click to edit' ),
+                                'clickEditMenu' => __( 'Click to edit this menu.' ),
+                                'clickEditWidget' => __( 'Click to edit this widget.' ),
+                                'clickEditTitle' => __( 'Click to edit the site title.' ),
+                                'clickEditMisc' => __( 'Click to edit this element.' ),
                         ),
                         '_dirty' => array_keys( $this->unsanitized_post_values() ),
                 );

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

@@ -10 +10 @@
         -webkit-box-shadow: none;
         box-shadow: none;
 }
+
+.customize-partial-icon {
+        float: left;
+        position: relative;
+        fill: #fff;
+        width: 30px;
+        height: 30px;
+        font-size: 18px;
+        z-index: 5;
+        background: #0087BE;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        box-shadow: 0 2px 1px rgba(46,68,83,0.15);
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        animation-name: bounce-appear;
+        animation-delay: 0.8s;
+        animation-duration: 1s;
+        animation-fill-mode: both;
+        animation-duration: .75s;
+        padding: 0;
+}
+
+.customize-partial-icon.hidden {
+        opacity: 0;
+}
+
+.customize-partial-icon svg {
+        width: 18px;
+        height: 18px;
+}
+
+@keyframes bounce-appear {
+        from, 20%, 40%, 60%, 80%, to {
+                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        }
+        0% {
+                opacity: 0;
+                transform: scale3d(.3, .3, .3);
+        }
+        20% {
+                transform: scale3d(1.1, 1.1, 1.1);
+        }
+        40% {
+                transform: scale3d(.9, .9, .9);
+        }
+        60% {
+                opacity: 1;
+                transform: scale3d(1.03, 1.03, 1.03);
+        }
+        80% {
+                transform: scale3d(.97, .97, .97);
+        }
+        to {
+                opacity: 1;
+                transform: scale3d(1, 1, 1);
+        }
+}

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

@@ -184 +184 @@
                         'renderQueryVar' => self::RENDER_QUERY_VAR,
                         'l10n'           => array(
                                 'shiftClickToEdit' => __( 'Shift-click to edit this element.' ),
+                                'clickEditMenu' => __( 'Click to edit this menu.' ),
+                                'clickEditWidget' => __( 'Click to edit this widget.' ),
+                                'clickEditTitle' => __( 'Click to edit the site title.' ),
+                                'clickEditMisc' => __( 'Click to edit this element.' ),
                                 /* translators: %s: document.write() */
                                 'badDocumentWrite' => sprintf( __( '%s is forbidden' ), 'document.write()' ),
                         ),

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

@@ -357 +357 @@
                                 widgetPartial = new self.WidgetPartial( partialId, {
                                         params: {}
                                 } );
-                                api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
                         }
 
                         // Make sure that there is a container element for the widget in the sidebar, if at least a placeholder.
@@ -400 +399 @@
                                 wasInserted = true;
                         } );
 
+                        api.selectiveRefresh.partial.add( widgetPartial.id, widgetPartial );
+
                         if ( wasInserted ) {
                                 sidebarPartial.reflowWidgets();
                         }

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

@@ -19 +19 @@
 
         _.extend( self, api.Events );
 
+        // Extend jQuery to notice element removal and call the 'destroyed' event
+        $.event.special.destroyed = {
+                remove: function( o ) {
+                        if ( o.handler ) {
+                                o.handler();
+                        }
+                }
+        };
+
         /**
          * A Customizer Partial.
          *
@@ -43 +52 @@
 
                 id: null,
 
+                editIconSource: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M13 6l5 5-9.507 9.507c-.686-.686-.69-1.794-.012-2.485l-.002-.003c-.69.676-1.8.673-2.485-.013-.677-.677-.686-1.762-.036-2.455l-.008-.008c-.694.65-1.78.64-2.456-.036L13 6zm7.586-.414l-2.172-2.172c-.78-.78-2.047-.78-2.828 0L14 5l5 5 1.586-1.586c.78-.78.78-2.047 0-2.828zM3 18v3h3c0-1.657-1.343-3-3-3z"/></g></svg>',
+
                  /**
                  * Constructor.
                  *
@@ -85 +96 @@
                         var partial = this;
                         _.each( _.pluck( partial.placements(), 'container' ), function( container ) {
                                 $( container ).attr( 'title', self.data.l10n.shiftClickToEdit );
+                                partial.showEditIconForElement( container );
                         } );
                         $( document ).on( 'click', partial.params.selector, function( e ) {
                                 if ( ! e.shiftKey ) {
@@ -100 +112 @@
                 },
 
                 /**
+                 * Create and show the edit icon for this element.
+                 */
+                showEditIconForElement: function( element ) {
+                        var partial = this;
+                        var $icon = this.createEditIcon();
+                        var $element = $( element );
+                        $element.before( $icon );
+                        partial.positionEditIcon( $element, $icon );
+                        $icon.on( 'click', partial.showControl.bind( this ) );
+                        $element.on( 'destroyed', function() {
+                                $icon.remove();
+                                partial.editIcon = null;
+                        } );
+                        api.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
+                                partial.refreshEditIcon( placement.container );
+                        } );
+                        api.selectiveRefresh.bind( 'partial-content-moved', function( placement ) {
+                                partial.refreshEditIcon( placement.container );
+                        } );
+                        // When the sidebar collapses
+                        api.preview.bind( 'collapse-sidebar', function( collapsed ) {
+                                return collapsed ? $icon.hide() : $icon.show();
+                        } );
+                        partial.editIcon = $icon;
+                },
+
+                refreshEditIcon: function( element ) {
+                        var partial = this;
+                        if ( ! partial.editIcon ) {
+                                this.showEditIconForElement( element );
+                        }
+                },
+
+                positionEditIcon: function( $element, $icon ) {
+                        var partial = this;
+                        if ( $element.css( 'position' ) === 'absolute' ) {
+                                $icon.css( 'position', 'absolute' );
+                                $icon.css( partial.getCalculatedCssForIcon( $element ) );
+                                partial.whenPageChanges( function() {
+                                        $icon.css( partial.getCalculatedCssForIcon( $element ) );
+                                } );
+                        }
+                },
+
+                whenPageChanges: function( callback ) {
+                        var debouncedCallaback = _.debounce( function() {
+                                // Timeout allows any page animations to finish
+                                setTimeout( callback, 100 );
+                        }, 350 );
+                        // When window is resized
+                        $( window ).resize( debouncedCallaback );
+                        // When any customizer setting changes
+                        api.bind( 'change', debouncedCallaback );
+                        var $document = $( window.document );
+                        // After scroll in case there are fixed position elements
+                        $document.on( 'scroll', debouncedCallaback );
+                        // After page click (eg: hamburger menus)
+                        $document.on( 'click', debouncedCallaback );
+                },
+
+                getCalculatedCssForIcon: function( $element ) {
+                        var top, right, bottom, left;
+                        if ( $element.css( 'top' ) ) {
+                                top = $element.css( 'top' );
+                        }
+                        if ( $element.css( 'right' ) ) {
+                                right = $element.css( 'right' );
+                        }
+                        if ( $element.css( 'bottom' ) ) {
+                                bottom = $element.css( 'bottom' );
+                        }
+                        if ( $element.css( 'left' ) ) {
+                                left = $element.css( 'left' );
+                        }
+                        return { top: top || '', right: right || '', bottom: bottom || '', left: left || '' };
+                },
+
+                getIconClassName: function() {
+                        var partial = this;
+                        var cleanId = partial.id.replace( /\]/g, '' ).replace( /\[/g, '-' );
+                        return 'customize-partial-icon-' + cleanId;
+                },
+
+                getIconTitle: function() {
+                        var l10n = self.data.l10n;
+                        switch ( this.getType() ) {
+                                case 'widget':
+                                        return l10n.clickEditWidget;
+                                case 'blogname':
+                                        return l10n.clickEditTitle;
+                                case 'blogdescription':
+                                        return l10n.clickEditTitle;
+                                case 'nav_menu':
+                                        return l10n.clickEditMenu;
+                                default:
+                                        return l10n.clickEditMisc;
+                        }
+                },
+
+                getType: function() {
+                        var partial = this;
+                        var settingId = partial.params.primarySetting || _.first( partial.settings() ) || 'unknown';
+                        if ( partial.params.type ) {
+                                return partial.params.type;
+                        }
+                        if ( settingId.match( /^nav_menu_instance/ ) ) {
+                                return 'nav_menu';
+                        }
+                        if ( settingId.match( /^widget_/ ) ) {
+                                return 'widget';
+                        }
+                        return settingId;
+                },
+
+                createEditIcon: function() {
+                        var iconTitle = this.getIconTitle();
+                        return $( '<button aria-label="' + iconTitle + '" title="' + iconTitle + '" type="button" class="customize-partial-icon ' + this.getIconClassName() + '">' + this.editIconSource + '</button>' );
+                },
+
+                /**
                  * Find all placements for this partial int he document.
                  *
                  * @since 4.5.0
@@ -180 +312 @@
                         if ( ! settingId ) {
                                 settingId = _.first( partial.settings() );
                         }
+                        if ( this.getType() === 'nav_menu' ) {
+                                var menuSlug = partial.params.navMenuArgs.theme_location;
+                                if ( menuSlug ) {
+                                        settingId = 'nav_menu_locations[' + menuSlug + ']';
+                                }
+                        }
                         api.preview.send( 'focus-control-for-setting', settingId );
                 },