Ticket #27358: 27358.diff

src/wp-admin/js/customize-widgets.js

@@ -1442 +1442 @@
                 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 );
                 },
 
                 /**

src/wp-includes/class-wp-customize-widgets.php

@@ -756 +756 @@
                         array( 'jquery', 'wp-util', 'customize-preview' )
                 );
 
-                /*
-                wp_enqueue_style(
-                        'widget-customizer-preview',
-                        'widget-customizer-preview.css'
-                );
-                */
+                // @todo Move this into external stylesheet which a theme can just override the src for?
+                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;
@@ -784 +780 @@
         }
 
         /**
+         * 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
          *
          * @action wp_footer

src/wp-includes/js/customize-preview-widgets.js

@@ -52 +52 @@
                 },
 
                 /**
-                 * 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 );
                 },
 
                 /**