Make WordPress Core

Ticket #27358: 27358.diff

File 27358.diff, 3.2 KB (added by westonruter, 10 years ago)

Restore Widget Customizer highlighting of widgets in preview. Also on GitHub: https://github.com/x-team/wordpress-develop/pull/2

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

    diff --git src/wp-admin/js/customize-widgets.js src/wp-admin/js/customize-widgets.js
    index f0ca347..06a56bb 100644
    var WidgetCustomizer = ( function ($) { 
    14421442                getPreviewWidgetElement: function () {
    14431443                        var control = this,
    14441444                                widget_customizer_preview = self.getPreviewWindow().WidgetCustomizerPreview;
    1445                         return widget_customizer_preview.getSidebarWidgetElement( control.params.sidebar_id, control.params.widget_id );
     1445                        return widget_customizer_preview.getWidgetElement( control.params.widget_id );
    14461446                },
    14471447
    14481448                /**
  • src/wp-includes/class-wp-customize-widgets.php

    diff --git src/wp-includes/class-wp-customize-widgets.php src/wp-includes/class-wp-customize-widgets.php
    index 94d5974..d79637c 100644
    class WP_Customize_Widgets { 
    756756                        array( 'jquery', 'wp-util', 'customize-preview' )
    757757                );
    758758
    759                 /*
    760                 wp_enqueue_style(
    761                         'widget-customizer-preview',
    762                         'widget-customizer-preview.css'
    763                 );
    764                 */
     759                // @todo Move this into external stylesheet which a theme can just override the src for?
     760                add_action( 'wp_print_styles', array( __CLASS__, 'inject_preview_css' ), 1 );
    765761
    766762                // Why not wp_localize_script? Because we're not localizing, and it forces values into strings
    767763                global $wp_scripts;
    class WP_Customize_Widgets { 
    784780        }
    785781
    786782        /**
     783         * Insert default style for highlighted widget at early point so theme
     784         * stylesheet can override.
     785         *
     786         * @action wp_print_styles
     787         */
     788        static function inject_preview_css() {
     789                ?>
     790                <style>
     791                .widget-customizer-highlighted-widget {
     792                        border-radius: 2px;
     793                        outline: none;
     794                        box-shadow: 0 0 3px #CE0000;
     795                }
     796                </style>
     797                <?php
     798        }
     799
     800        /**
    787801         * At the very end of the page, at the very end of the wp_footer, communicate the sidebars that appeared on the page
    788802         *
    789803         * @action wp_footer
  • src/wp-includes/js/customize-preview-widgets.js

    diff --git src/wp-includes/js/customize-preview-widgets.js src/wp-includes/js/customize-preview-widgets.js
    index 67b5ed7..5b10c2a 100644
    var WidgetCustomizerPreview = (function ($) { 
    5252                },
    5353
    5454                /**
    55                  * Obtain a widget instance if it was added to the provided sidebar
    56                  * This addresses a race condition where a widget is moved between sidebars
    57                  * We cannot use ID selector because jQuery will only return the first one
    58                  * that matches. We have to resort to an [id] attribute selector
     55                 * Obtain a rendered widget element. Assumes standard practice of using
     56                 * the widget ID as the ID for the DOM element. To eliminate this
     57                 * assumption, additional data-* attributes would need to be injected
     58                 * onto the rendered widget root element.
    5959                 *
    60                  * @param {String} sidebar_id
    6160                 * @param {String} widget_id
    6261                 * @return {jQuery}
    6362                 */
    64                 getSidebarWidgetElement: function ( sidebar_id, widget_id ) {
    65                         return $( '[id=' + widget_id + ']' ).filter( function () {
    66                                 return $( this ).data( 'widget_customizer_sidebar_id' ) === sidebar_id;
    67                         } );
     63                getWidgetElement: function ( widget_id ) {
     64                        return $( '#' + widget_id );
    6865                },
    6966
    7067                /**