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.

Built from https://develop.svn.wordpress.org/trunk@39202


git-svn-id: http://core.svn.wordpress.org/trunk@39142 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -35,11 +35,16 @@
 	border: 1px solid #0085ba;
 }
 
-/* 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;
-	right: -36px;
+	right: -30px;
+	top: 2px;
 	color: #fff;
 	width: 30px;
 	height: 30px;
@@ -101,10 +106,6 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
 	visibility: hidden;
 }
 
-.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
-	right: 0;
-}
-
 @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
 	from, 20%, 40%, 60%, 80%, to {
 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -242,7 +243,23 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
 }
 
 @media screen and (max-width:800px) {
+	.widget .customize-partial-edit-shortcut button,
 	.customize-partial-edit-shortcut button {
-		right: -18px; /* Assume there will be less of a margin available on smaller screens */
+		right: -32px;
+	}
+}
+
+@media screen and (max-width:320px) {
+	.site-title {
+		padding-right: 10px;
+	}
+
+	.widget-area .widget {
+		padding-right: 10px;
+	}
+
+	.widget .customize-partial-edit-shortcut button,
+	.customize-partial-edit-shortcut button {
+		right: -30px;
 	}
 }

wp-includes/css/customize-preview.css

@@ -35,11 +35,16 @@
 	border: 1px solid #0085ba;
 }
 
-/* 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;
 	height: 30px;
@@ -101,10 +106,6 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
 	visibility: hidden;
 }
 
-.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 {
 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -242,7 +243,23 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
 }
 
 @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;
 	}
 }

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

@@ -118,7 +118,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
 				return;
 			}
 			$shortcut = partial.createEditShortcut();
-			partial.positionEditShortcut( placement, $shortcut );
+			partial.addEditShortcutToPlacement( placement, $shortcut );
 			$shortcut.on( 'click', function( event ) {
 				event.preventDefault();
 				event.stopPropagation();
@@ -127,9 +127,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
 		},
 
 		/**
-		 * 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
 		 *
@@ -137,14 +135,12 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
 		 * @param {jQuery} $editShortcut The shortcut element as a jQuery object.
 		 * @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 );
 		},
 
 		/**

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta3-39201';
+$wp_version = '4.7-beta3-39202';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.