Ticket #27403: 27403.2.diff

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

@@ -10 +10 @@
         -webkit-box-shadow: none;
         box-shadow: none;
 }
+
+.customize-partial-icon {
+        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 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/js/customize-selective-refresh.js

@@ -85 +85 @@
                         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 +101 @@
                 },
 
                 /**
+                 * Create and show the edit icon for this element.
+                 *
+                 * Specifically:
+                 *  - create icon element
+                 *  - add icon to DOM
+                 *  - position icon relative to target
+                 *  - add click handler to icon
+                 *  - monitor DOM for changes and reposition icon when changed
+                 *  - monitor DOM for sidebar collapse and hide/show icon
+                 */
+                showEditIconForElement: function( element ) {
+                        var partial = this;
+                        var $icon = this.createEditIcon();
+                        // TODO: remove the icon if the DOM node is removed
+                        $( element ).before( $icon );
+                        $icon.on( 'click', partial.showControl.bind( this ) );
+                },
+
+                getIconClassName: function() {
+                        var partial = this;
+                        // TODO: simplify the id string to avoid brackets, etc
+                        return 'customize-partial-icon-' + partial.id;
+                },
+
+                createEditIcon: function() {
+                        // TODO: get translated text for title/hover text
+                        var 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>';
+                        return $( '<button class="customize-partial-icon ' + this.getIconClassName() + '">' + editIconSource + '</button>' );
+                },
+
+                /**
                  * Find all placements for this partial int he document.
                  *
                  * @since 4.5.0
@@ -180 +212 @@
                         if ( ! settingId ) {
                                 settingId = _.first( partial.settings() );
                         }
+                        if ( settingId.match( /^nav_menu_instance/ ) ) {
+                                var menuSlug = partial.params.navMenuArgs.theme_location;
+                                if ( menuSlug ) {
+                                        settingId = 'nav_menu_locations[' + menuSlug + ']';
+                                }
+                        }
                         api.preview.send( 'focus-control-for-setting', settingId );
                 },