Changeset 27584

Timestamp:

03/18/2014 03:20:38 PM (11 years ago)

Author:

ocean90

Message:

Widget Customizer: Restore highlighting of widgets in preview.

props westonruter.
see #27358.

Location:

trunk/src

Files:

• wp-admin/js/customize-widgets.js (modified) (1 diff)
• wp-includes/class-wp-customize-widgets.php (modified) (2 diffs)
• wp-includes/js/customize-preview-widgets.js (modified) (1 diff)

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

@@ -1443 +1443 @@
             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 );
         },
 

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

@@ -757 +757 @@
         );
 
-        /*
-        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
@@ -782 +777 @@
             sprintf( 'var WidgetCustomizerPreview_exports = %s;', json_encode( $exports ) )
         );
+    }
+
+    /**
+     * 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
     }
 

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

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