From c2a4665966f2a772fd50b60028a025904e230519 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Tue, 18 Mar 2014 15:20:38 +0000
Subject: [PATCH] Widget Customizer: Restore highlighting of widgets in
 preview.

props westonruter.
see #27358.

git-svn-id: https://develop.svn.wordpress.org/trunk@27584 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-widgets.js          |  2 +-
 .../class-wp-customize-widgets.php            | 25 ++++++++++++++-----
 .../js/customize-preview-widgets.js           | 15 +++++------
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js
index f0ca3476fb..06a56bb085 100644
--- a/src/wp-admin/js/customize-widgets.js
+++ b/src/wp-admin/js/customize-widgets.js
@@ -1442,7 +1442,7 @@ var WidgetCustomizer = ( function ($) {
 		getPreviewWidgetElement: function () {
 			var control = this,
 				widget_customizer_preview = self.getPreviewWindow().WidgetCustomizerPreview;
-			return widget_customizer_preview.getSidebarWidgetElement( control.params.sidebar_id, control.params.widget_id );
+			return widget_customizer_preview.getWidgetElement( control.params.widget_id );
 		},
 
 		/**
diff --git a/src/wp-includes/class-wp-customize-widgets.php b/src/wp-includes/class-wp-customize-widgets.php
index 94d597452e..c5f8ee2779 100644
--- a/src/wp-includes/class-wp-customize-widgets.php
+++ b/src/wp-includes/class-wp-customize-widgets.php
@@ -756,12 +756,7 @@ class WP_Customize_Widgets {
 			array( 'jquery', 'wp-util', 'customize-preview' )
 		);
 
-		/*
-		wp_enqueue_style(
-			'widget-customizer-preview',
-			'widget-customizer-preview.css'
-		);
-		*/
+		add_action( 'wp_print_styles', array( __CLASS__, 'inject_preview_css' ), 1 );
 
 		// Why not wp_localize_script? Because we're not localizing, and it forces values into strings
 		global $wp_scripts;
@@ -783,6 +778,24 @@ class WP_Customize_Widgets {
 		);
 	}
 
+	/**
+	 * Insert default style for highlighted widget at early point so theme
+	 * stylesheet can override.
+	 *
+	 * @action wp_print_styles
+	 */
+	static function inject_preview_css() {
+		?>
+		<style>
+		.widget-customizer-highlighted-widget {
+			border-radius: 2px;
+			outline: none;
+			box-shadow: 0 0 3px #ce0000;
+		}
+		</style>
+		<?php
+	}
+
 	/**
 	 * At the very end of the page, at the very end of the wp_footer, communicate the sidebars that appeared on the page
 	 *
diff --git a/src/wp-includes/js/customize-preview-widgets.js b/src/wp-includes/js/customize-preview-widgets.js
index 67b5ed7411..5b10c2af28 100644
--- a/src/wp-includes/js/customize-preview-widgets.js
+++ b/src/wp-includes/js/customize-preview-widgets.js
@@ -52,19 +52,16 @@ var WidgetCustomizerPreview = (function ($) {
 		},
 
 		/**
-		 * Obtain a widget instance if it was added to the provided sidebar
-		 * This addresses a race condition where a widget is moved between sidebars
-		 * We cannot use ID selector because jQuery will only return the first one
-		 * that matches. We have to resort to an [id] attribute selector
+		 * Obtain a rendered widget element. Assumes standard practice of using
+		 * the widget ID as the ID for the DOM element. To eliminate this
+		 * assumption, additional data-* attributes would need to be injected
+		 * onto the rendered widget root element.
 		 *
-		 * @param {String} sidebar_id
 		 * @param {String} widget_id
 		 * @return {jQuery}
 		 */
-		getSidebarWidgetElement: function ( sidebar_id, widget_id ) {
-			return $( '[id=' + widget_id + ']' ).filter( function () {
-				return $( this ).data( 'widget_customizer_sidebar_id' ) === sidebar_id;
-			} );
+		getWidgetElement: function ( widget_id ) {
+			return $( '#' + widget_id );
 		},
 
 		/**