Changeset 39136

Timestamp:

11/04/2016 01:47:56 AM (8 years ago)

Author:

westonruter

Message:

Customize: Use button with svg as click target instead of :before content, improving clickability of edit shortcuts in Firefox.

Props sirbrillig, celloexpressions, delawski.
See #38532.

Location:

trunk/src

Files:

• wp-content/themes/twentyfourteen/style.css (modified) (1 diff)
• wp-content/themes/twentyseventeen/inc/color-patterns.php (modified) (1 diff)
• wp-content/themes/twentyseventeen/style.css (modified) (2 diffs)
• wp-includes/css/customize-preview.css (modified) (6 diffs)
• wp-includes/js/customize-selective-refresh.js (modified) (2 diffs)

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

@@ -1046 +1046 @@
 }
 
-.secondary-navigation .customize-partial-edit-shortcut:before,
-.footer-sidebar .widget:first-child .customize-partial-edit-shortcut:before {
+.secondary-navigation .customize-partial-edit-shortcut button,
+.footer-sidebar .widget:first-child .customize-partial-edit-shortcut button {
     left: 0;
 }

trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php

@@ -318 +318 @@
 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus,
-.colors-custom .customize-partial-edit-shortcut:before {
+.colors-custom .customize-partial-edit-shortcut button {
     background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
 }

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -2968 +2968 @@
 
 /* Add some space around the visual edit shortcut buttons. */
-.twentyseventeen-panel .customize-partial-edit-shortcut:before {
+.twentyseventeen-panel .customize-partial-edit-shortcut button {
     top: 30px;
     left: 30px;
@@ -2984 +2984 @@
 
 /* Prevent icon colors from clashing with color schemes. */
-.colors-custom .customize-partial-edit-shortcut:before {
+.colors-custom .customize-partial-edit-shortcut button {
     text-shadow: 0 -1px 1px rgba(0,0,0,.2),
                  1px 0 1px rgba(0,0,0,.2),

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

@@ -13 +13 @@
 
 /* Make shortcut buttons essentially invisible */
-.widget button.customize-partial-edit-shortcut,
+.widget .customize-partial-edit-shortcut,
 .customize-partial-edit-shortcut {
-    position: relative;
+    position: absolute;
     float: left;
     width: 1px; /* required to have a size to be focusable in Safari */
@@ -29 +29 @@
 }
 
-.customize-partial-edit-shortcut:active {
+.widget .customize-partial-edit-shortcut button:active,
+.customize-partial-edit-shortcut button:active {
     padding: 0;
     border: 0;
@@ -35 +36 @@
 
 /* Styles for the actual shortcut */
-.customize-partial-edit-shortcut:before {
+.widget .customize-partial-edit-shortcut button,
+.customize-partial-edit-shortcut button {
     position: absolute;
     left: -36px;
@@ -41 +43 @@
     width: 30px;
     height: 30px;
+    min-width: 30px;
+    min-height: 30px;
     font-size: 18px;
-    font-family: dashicons;
-    content: '\f464';
     z-index: 5;
     background-color: #0085ba;
+    background: #0085ba;
     border-radius: 50%;
     border: 2px solid #fff;
@@ -66 +69 @@
 }
 
-.customize-partial-edit-shortcut:hover:before,
-.customize-partial-edit-shortcut:focus:before {
+.customize-partial-edit-shortcut button svg {
+    fill: #fff;
+    min-width: 20px;
+    min-height: 20px;
+    width: 20px;
+    height: 20px;
+    margin: auto;
+}
+
+.customize-partial-edit-shortcut button:hover,
+.customize-partial-edit-shortcut button:focus {
     background: #008ec2; /* matches primary buttons */
     border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
 }
 
-body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before {
+body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
     animation-name: customize-partial-edit-shortcut-bounce-appear;
     pointer-events: auto;
 }
-body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before {
+body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
     animation-name: customize-partial-edit-shortcut-bounce-disappear;
     pointer-events: none;
 }
 
-.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
-.customize-partial-edit-shortcut-hidden:before {
+.page-sidebar-collapsed .customize-partial-edit-shortcut button,
+.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
     visibility: hidden;
 }
 
-.customize-partial-edit-shortcut-left-margin:before {
+.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
     left: 0;
 }
@@ -145 +157 @@
 
 @media screen and (max-width:800px) {
-    .customize-partial-edit-shortcut:before {
+    .customize-partial-edit-shortcut button {
         left: -18px; /* Assume there will be less of a margin available on smaller screens */
     }

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

@@ -139 +139 @@
          */
         positionEditShortcut: function( placement, $editShortcut ) {
-            var $placementContainer = $( placement.container );
+            var $placementContainer = $( placement.container ), $editButton;
             $placementContainer.prepend( $editShortcut );
             if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
                 $editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
             }
-            $editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editShortcut.offset().left < 1 );
+            $editButton = $editShortcut.find( 'button' );
+            $editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
         },
 
@@ -215 +216 @@
          */
         createEditShortcut: function() {
-            var partial = this, shortcutTitle;
+            var partial = this, shortcutTitle, $buttonContainer, $button, $image;
             shortcutTitle = partial.getEditShortcutTitle();
-            return $( '<button>', {
+            $buttonContainer = $( '<span>', {
+                'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
+            } );
+            $button = $( '<button>', {
                 'aria-label': shortcutTitle,
                 'title': shortcutTitle,
-                'type': 'button',
-                'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
+                'class': 'customize-partial-edit-shortcut-button'
             } );
+            $image = $( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"/></svg>' );
+            $button.append( $image );
+            $buttonContainer.append( $button );
+            return $buttonContainer;
         },