Changeset 39202

Timestamp:

11/11/2016 09:46:47 AM (8 years ago)

Author:

westonruter

Message:

Customize: Remove left-margin guard from edit shortcuts and adjust for small screen sizes.

Removes the .customize-partial-edit-shortcut-left-margin class which was not effective on some themes, created a worse experience for other themes, and which did not recalculate when the preview was reflowed or resized. Now some small-width media queries are added to handle common cases while more dramatic issues can be handled by the theme. Also renames Partial.positionEditShortcut()to Partial.addEditShortcutToPlacement() which is a more accurate description of its function.

Props sirbrillig, sstoqnov.
See #38651, #27403.

Location:

trunk/src/wp-includes

Files:

• css/customize-preview.css (modified) (3 diffs)
• js/customize-selective-refresh.js (modified) (3 diffs)

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

@@ -36 +36 @@
 }
 
-/* Styles for the actual shortcut */
+/**
+ * Styles for the actual shortcut
+ *
+ * Note that some properties are overly verbose to prevent theme interference.
+ */
 .widget .customize-partial-edit-shortcut button,
 .customize-partial-edit-shortcut button {
     position: absolute;
-    left: -36px;
+    left: -30px;
+    top: 2px;
     color: #fff;
     width: 30px;
@@ -102 +107 @@
 }
 
-.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
-    left: 0;
-}
-
 @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
     from, 20%, 40%, 60%, 80%, to {
@@ -243 +244 @@
 
 @media screen and (max-width:800px) {
+    .widget .customize-partial-edit-shortcut button,
     .customize-partial-edit-shortcut button {
-        left: -18px; /* Assume there will be less of a margin available on smaller screens */
-    }
-}
+        left: -32px;
+    }
+}
+
+@media screen and (max-width:320px) {
+    .site-title {
+        padding-left: 10px;
+    }
+
+    .widget-area .widget {
+        padding-left: 10px;
+    }
+
+    .widget .customize-partial-edit-shortcut button,
+    .customize-partial-edit-shortcut button {
+        left: -30px;
+    }
+}

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

@@ -119 +119 @@
             }
             $shortcut = partial.createEditShortcut();
-            partial.positionEditShortcut( placement, $shortcut );
+            partial.addEditShortcutToPlacement( placement, $shortcut );
             $shortcut.on( 'click', function( event ) {
                 event.preventDefault();
@@ -128 +128 @@
 
         /**
-         * Position an edit shortcut for the placement container.
-         *
-         * The shortcut must already be created and added to the page.
+         * Add an edit shortcut to the placement container.
          *
          * @since 4.7
@@ -138 +136 @@
          * @returns {void}
          */
-        positionEditShortcut: function( placement, $editShortcut ) {
-            var $placementContainer = $( placement.container ), $editButton;
+        addEditShortcutToPlacement: function( placement, $editShortcut ) {
+            var $placementContainer = $( placement.container );
             $placementContainer.prepend( $editShortcut );
             if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
                 $editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
             }
-            $editButton = $editShortcut.find( 'button' );
-            $editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
         },