From f5f0aea2a968132ade94988aa47f38c0182165d5 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Tue, 18 Apr 2017 00:30:07 +0000
Subject: [PATCH] Customize: Use fixed-width illustrative placeholder for hex
 field in color picker to prevent truncation.

Props stormrockwell, sagarprajapati, Presskopp, afercia, tejas5989, westonruter, mayurk for testing.
Fixes #39096.


git-svn-id: https://develop.svn.wordpress.org/trunk@40471 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/color-picker.css                        | 9 ++++++++-
 .../customize/class-wp-customize-color-control.php       | 6 +++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css
index baa1d94c83..30dec299be 100644
--- a/src/wp-admin/css/color-picker.css
+++ b/src/wp-admin/css/color-picker.css
@@ -133,4 +133,11 @@
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 1px rgba(30, 140, 190, .8);
-}
\ No newline at end of file
+}
+
+@media screen and ( max-width: 782px ) {
+	.wp-picker-container input[type="text"].wp-color-picker {
+		margin-right: 6px;
+		padding: 3px 5px;
+	}
+}
diff --git a/src/wp-includes/customize/class-wp-customize-color-control.php b/src/wp-includes/customize/class-wp-customize-color-control.php
index 7f6a9b5a84..775a63d7a8 100644
--- a/src/wp-includes/customize/class-wp-customize-color-control.php
+++ b/src/wp-includes/customize/class-wp-customize-color-control.php
@@ -92,7 +92,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 	 */
 	public function content_template() {
 		?>
-		<# var defaultValue = '',
+		<# var defaultValue = '#RRGGBB', defaultValueAttr = '',
 			isHueSlider = data.mode === 'hue';
 
 		if ( data.defaultValue && ! isHueSlider ) {
@@ -101,7 +101,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 			} else {
 				defaultValue = data.defaultValue;
 			}
-			defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
+			defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
 		} #>
 		<label>
 			<# if ( data.label ) { #>
@@ -114,7 +114,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 				<# if ( isHueSlider ) { #>
 					<input class="color-picker-hue" type="text" data-type="hue" />
 				<# } else { #>
-					<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
+					<input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
 				<# } #>
 			</div>
 		</label>