Ticket #33901: 33901.3.diff

src/wp-admin/includes/widgets.php

@@ -181 +181 @@
         $multi_number = isset($sidebar_args['_multi_num']) ? $sidebar_args['_multi_num'] : '';
         $add_new = isset($sidebar_args['_add']) ? $sidebar_args['_add'] : '';
 
+        $before_form = isset( $sidebar_args['before_form'] ) ? $sidebar_args['before_form'] : '<form method="post">';
+        $after_form = isset( $sidebar_args['after_form'] ) ? $sidebar_args['after_form'] : '</form>';
+        $before_widget_content = isset( $sidebar_args['before_widget_content'] ) ? $sidebar_args['before_widget_content'] : '<div class="widget-content">';
+        $after_widget_content = isset( $sidebar_args['after_widget_content'] ) ? $sidebar_args['after_widget_content'] : '</div>';
+
         $query_arg = array( 'editwidget' => $widget['id'] );
         if ( $add_new ) {
                 $query_arg['addnew'] = 1;
@@ -225 +230 @@
         </div>
 
         <div class="widget-inside">
-        <form method="post">
-        <div class="widget-content">
-<?php
-        if ( isset($control['callback']) )
+        <?php echo $before_form; ?>
+        <?php echo $before_widget_content; ?>
+        <?php
+        if ( isset( $control['callback'] ) ) {
                 $has_form = call_user_func_array( $control['callback'], $control['params'] );
-        else
-                echo "\t\t<p>" . __('There are no options for this widget.') . "</p>\n"; ?>
-        </div>
+        } else {
+                echo "\t\t<p>" . __('There are no options for this widget.') . "</p>\n";
+        }
+        ?>
+        <?php echo $after_widget_content; ?>
         <input type="hidden" name="widget-id" class="widget-id" value="<?php echo esc_attr($id_format); ?>" />
         <input type="hidden" name="id_base" class="id_base" value="<?php echo esc_attr($id_base); ?>" />
         <input type="hidden" name="widget-width" class="widget-width" value="<?php if (isset( $control['width'] )) echo esc_attr($control['width']); ?>" />
@@ -252 +259 @@
                 </div>
                 <br class="clear" />
         </div>
-        </form>
+        <?php echo $after_form; ?>
         </div>
 
         <div class="widget-description">

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

@@ -417 +417 @@
                 /**
                  * @since 4.1.0
                  */
-                initialize: function ( id, options ) {
+                initialize: function( id, options ) {
                         var control = this;
-                        api.Control.prototype.initialize.call( control, id, options );
-                        control.expanded = new api.Value();
+
+                        control.widgetControlEmbedded = false;
+                        control.widgetContentEmbedded = false;
+                        control.expanded = new api.Value( false );
                         control.expandedArgumentsQueue = [];
-                        control.expanded.bind( function ( expanded ) {
+                        control.expanded.bind( function( expanded ) {
                                 var args = control.expandedArgumentsQueue.shift();
                                 args = $.extend( {}, control.defaultExpandedArguments, args );
                                 control.onChangeExpanded( expanded, args );
                         });
-                        control.expanded.set( false );
+
+                        api.Control.prototype.initialize.call( control, id, options );
                 },
 
                 /**
-                 * Set up the control
+                 * Set up the control.
+                 *
+                 * @since 3.9.0
                  */
                 ready: function() {
-                        this._setupModel();
-                        this._setupWideWidget();
-                        this._setupControlToggle();
-                        this._setupWidgetTitle();
-                        this._setupReorderUI();
-                        this._setupHighlightEffects();
-                        this._setupUpdateUI();
-                        this._setupRemoveUI();
+                        var control = this;
+
+                        /*
+                         * Embed a placeholder once the section is expanded. The full widget
+                         * form content will be embedded once the control itself is expanded,
+                         * and at this point the widget-added event will be triggered.
+                         */
+                        if ( ! control.section() ) {
+                                control.embedWidgetControl();
+                        } else {
+                                api.section( control.section(), function( section ) {
+                                        var onExpanded = function( isExpanded ) {
+                                                if ( isExpanded ) {
+                                                        control.embedWidgetControl();
+                                                        section.expanded.unbind( onExpanded );
+                                                }
+                                        };
+                                        if ( section.expanded() ) {
+                                                onExpanded( true );
+                                        } else {
+                                                section.expanded.bind( onExpanded );
+                                        }
+                                } );
+                        }
+                },
+
+                /**
+                 * Embed the .widget element inside the li container.
+                 *
+                 * @since 4.4.0
+                 */
+                embedWidgetControl: function() {
+                        var control = this, widgetControl;
+
+                        if ( control.widgetControlEmbedded ) {
+                                return;
+                        }
+                        control.widgetControlEmbedded = true;
+
+                        widgetControl = $( control.params.widget_control );
+                        control.container.append( widgetControl );
+
+                        control._setupModel();
+                        control._setupWideWidget();
+                        control._setupControlToggle();
+
+                        control._setupWidgetTitle();
+                        control._setupReorderUI();
+                        control._setupHighlightEffects();
+                        control._setupUpdateUI();
+                        control._setupRemoveUI();
+                },
+
+                /**
+                 * Embed the actual widget form inside of .widget-content and finally trigger the widget-added event.
+                 *
+                 * @since 4.4.0
+                 */
+                embedWidgetContent: function() {
+                        var control = this, widgetContent;
+
+                        control.embedWidgetControl();
+                        if ( control.widgetContentEmbedded ) {
+                                return;
+                        }
+                        control.widgetContentEmbedded = true;
+
+                        widgetContent = $( control.params.widget_content );
+                        control.container.find( '.widget-content:first' ).append( widgetContent );
 
                         /*
                          * Trigger widget-added event so that plugins can attach any event
                          * listeners and dynamic UI elements.
                          */
-                        $( document ).trigger( 'widget-added', [ this.container.find( '.widget:first' ) ] );
+                        $( document ).trigger( 'widget-added', [ control.container.find( '.widget:first' ) ] );
+
                 },
 
                 /**
@@ -1008 +1075 @@
                         var self = this, instanceOverride, completeCallback, $widgetRoot, $widgetContent,
                                 updateNumber, params, data, $inputs, processing, jqxhr, isChanged;
 
+                        // The updateWidget logic requires that the form fields to be fully present.
+                        self.embedWidgetContent();
+
                         args = $.extend( {
                                 instance: null,
                                 complete: null,
@@ -1255 +1325 @@
                 onChangeExpanded: function ( expanded, args ) {
                         var self = this, $widget, $inside, complete, prevComplete;
 
+                        self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI.
+                        if ( expanded ) {
+                                self.embedWidgetContent();
+                        }
+
                         // If the expanded state is unchanged only manipulate container expanded states
                         if ( args.unchanged ) {
                                 if ( expanded ) {

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

@@ -1487 +1487 @@
         public $height;
         public $is_wide = false;
 
+        /**
+         * Gather control params for exporting to JavaScript.
+         *
+         * @global array $wp_registered_widgets
+         */
         public function to_json() {
+                global $wp_registered_widgets;
+
                 parent::to_json();
                 $exported_properties = array( 'widget_id', 'widget_id_base', 'sidebar_id', 'width', 'height', 'is_wide' );
                 foreach ( $exported_properties as $key ) {
                         $this->json[ $key ] = $this->$key;
                 }
-        }
 
-        /**
-         *
-         * @global array $wp_registered_widgets
-         */
-        public function render_content() {
-                global $wp_registered_widgets;
+                // Get the widget_control and widget_content.
                 require_once ABSPATH . '/wp-admin/includes/widgets.php';
 
                 $widget = $wp_registered_widgets[ $this->widget_id ];
@@ -1514 +1515 @@
                 );
 
                 $args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $args, 1 => $widget['params'][0] ) );
-                echo $this->manager->widgets->get_widget_control( $args );
+                $widget_control_parts = $this->manager->widgets->get_widget_control_parts( $args );
+
+                $this->json['widget_control'] = $widget_control_parts['control'];
+                $this->json['widget_content'] = $widget_control_parts['content'];
         }
 
         /**
+         * Override render_content to be no-op since content is exported via to_json for deferred embedding.
+         */
+        public function render_content() {}
+
+        /**
          * Whether the current widget is rendered on the page.
          *
          * @since 4.0.0

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

@@ -898 +898 @@
          * @return string Widget control form HTML markup.
          */
         public function get_widget_control( $args ) {
+                $args[0]['before_form'] = '<div class="form">';
+                $args[0]['after_form'] = '</div><!-- .form -->';
+                $args[0]['before_widget_content'] = '<div class="widget-content">';
+                $args[0]['after_widget_content'] = '</div><!-- .widget-content -->';
                 ob_start();
-
                 call_user_func_array( 'wp_widget_control', $args );
-                $replacements = array(
-                        '<form method="post">' => '<div class="form">',
-                        '</form>' => '</div><!-- .form -->',
-                );
-
                 $control_tpl = ob_get_clean();
+                return $control_tpl;
+        }
 
-                $control_tpl = str_replace( array_keys( $replacements ), array_values( $replacements ), $control_tpl );
+        /**
+         * Get the widget control markup parts.
+         *
+         * @since 4.4.0
+         * @access public
+         *
+         * @param array $args Widget control arguments.
+         * @return array {
+         *     @type string $control  Markup for widget control wrapping form.
+         *     @type string $content  The contents of the widget form itself.
+         * }
+         */
+        public function get_widget_control_parts( $args ) {
+                $args[0]['before_widget_content'] = '<div class="widget-content">';
+                $args[0]['after_widget_content'] = '</div><!-- .widget-content -->';
+                $control_markup = $this->get_widget_control( $args );
+
+                $content_start_pos = strpos( $control_markup, $args[0]['before_widget_content'] );
+                $content_end_pos = strrpos( $control_markup, $args[0]['after_widget_content'] );
+
+                $control = substr( $control_markup, 0, $content_start_pos + strlen( $args[0]['before_widget_content'] ) );
+                $control .= substr( $control_markup, $content_end_pos );
+                $content = trim( substr(
+                        $control_markup,
+                        $content_start_pos + strlen( $args[0]['before_widget_content'] ),
+                        $content_end_pos - $content_start_pos - strlen( $args[0]['before_widget_content'] )
+                ) );
 
-                return $control_tpl;
+                return compact( 'control', 'content' );
         }
 
         /**

tests/phpunit/tests/customize/widgets.php

@@ -195 +195 @@
                 $unsanitized_from_js = $this->manager->widgets->sanitize_widget_instance( $sanitized_for_js );
                 $this->assertEquals( $unsanitized_from_js, $new_categories_instance );
         }
+
+        /**
+         * Get the widget control args for tests.
+         *
+         * @return array
+         */
+        function get_test_widget_control_args() {
+                global $wp_registered_widgets;
+                require_once ABSPATH . '/wp-admin/includes/widgets.php';
+                $widget_id = 'search-2';
+                $widget = $wp_registered_widgets[ $widget_id ];
+                $args = array(
+                        'widget_id' => $widget['id'],
+                        'widget_name' => $widget['name'],
+                );
+                $args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $args, 1 => $widget['params'][0] ) );
+                return $args;
+        }
+
+        /**
+         * @see WP_Customize_Widgets::get_widget_control()
+         */
+        function test_get_widget_control() {
+                $this->do_customize_boot_actions();
+                $widget_control = $this->manager->widgets->get_widget_control( $this->get_test_widget_control_args() );
+
+                $this->assertContains( '<div class="form">', $widget_control );
+                $this->assertContains( '<div class="widget-content">', $widget_control );
+                $this->assertContains( '<input type="hidden" name="id_base" class="id_base" value="search"', $widget_control );
+                $this->assertContains( '<input class="widefat"', $widget_control );
+        }
+
+        /**
+         * @see WP_Customize_Widgets::get_widget_control_parts()
+         */
+        function test_get_widget_control_parts() {
+                $this->do_customize_boot_actions();
+                $widget_control_parts = $this->manager->widgets->get_widget_control_parts( $this->get_test_widget_control_args() );
+                $this->assertArrayHasKey( 'content', $widget_control_parts );
+                $this->assertArrayHasKey( 'control', $widget_control_parts );
+
+                $this->assertContains( '<div class="form">', $widget_control_parts['control'] );
+                $this->assertContains( '<div class="widget-content">', $widget_control_parts['control'] );
+                $this->assertContains( '<input type="hidden" name="id_base" class="id_base" value="search"', $widget_control_parts['control'] );
+                $this->assertNotContains( '<input class="widefat"', $widget_control_parts['control'] );
+                $this->assertContains( '<input class="widefat"', $widget_control_parts['content'] );
+        }
+
+        /**
+         * @see WP_Widget_Form_Customize_Control::json()
+         */
+        function test_wp_widget_form_customize_control_json() {
+                $this->do_customize_boot_actions();
+                $control = $this->manager->get_control( 'widget_search[2]' );
+                $params = $control->json();
+
+                $this->assertEquals( 'widget_form', $params['type'] );
+                $this->assertRegExp( '#^<li[^>]+>\s+</li>$#', $params['content'] );
+                $this->assertRegExp( '#^<div[^>]*class=\'widget\'[^>]*#s', $params['widget_control'] );
+                $this->assertContains( '<div class="widget-content"></div>', $params['widget_control'] );
+                $this->assertNotContains( '<input class="widefat"', $params['widget_control'] );
+                $this->assertContains( '<input class="widefat"', $params['widget_content'] );
+                $this->assertEquals( 'search-2', $params['widget_id'] );
+                $this->assertEquals( 'search', $params['widget_id_base'] );
+                $this->assertArrayHasKey( 'sidebar_id', $params );
+                $this->assertArrayHasKey( 'width', $params );
+                $this->assertArrayHasKey( 'height', $params );
+                $this->assertInternalType( 'bool', $params['is_wide'] );
+
+        }
 }

tests/phpunit/tests/widgets.php

@@ -293 +293 @@
                 $this->assertArrayNotHasKey( 2, $option_value );
         }
 
+        /**
+         * @see wp_widget_control()
+         */
+        function test_wp_widget_control() {
+                global $wp_registered_widgets;
+
+                wp_widgets_init();
+                require_once ABSPATH . '/wp-admin/includes/widgets.php';
+                $widget_id = 'search-2';
+                $widget = $wp_registered_widgets[ $widget_id ];
+                $params = array(
+                        'widget_id' => $widget['id'],
+                        'widget_name' => $widget['name'],
+                );
+                $args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $params, 1 => $widget['params'][0] ) );
+
+                ob_start();
+                call_user_func_array( 'wp_widget_control', $args );
+                $control = ob_get_clean();
+                $this->assertNotEmpty( $control );
+
+                $this->assertContains( '<div class="widget-top">', $control );
+                $this->assertContains( '<div class="widget-title-action">', $control );
+                $this->assertContains( '<div class="widget-title">', $control );
+                $this->assertContains( '<form method="post">', $control );
+                $this->assertContains( '<div class="widget-content">', $control );
+                $this->assertContains( '<input class="widefat"', $control );
+                $this->assertContains( '<input type="hidden" name="id_base" class="id_base" value="search"', $control );
+                $this->assertContains( '<div class="widget-control-actions">', $control );
+                $this->assertContains( '<div class="alignleft">', $control );
+                $this->assertContains( 'widget-control-remove', $control );
+                $this->assertContains( 'widget-control-close', $control );
+                $this->assertContains( '<div class="alignright">', $control );
+                $this->assertContains( '<input type="submit" name="savewidget"', $control );
+
+                $param_overrides = array(
+                        'before_form' => '<!-- before_form -->',
+                        'after_form' => '<!-- after_form -->',
+                        'before_widget_content' => '<!-- before_widget_content -->',
+                        'after_widget_content' => '<!-- after_widget_content -->',
+                );
+                $params = array_merge( $params, $param_overrides );
+                $args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $params, 1 => $widget['params'][0] ) );
+
+                ob_start();
+                call_user_func_array( 'wp_widget_control', $args );
+                $control = ob_get_clean();
+                $this->assertNotEmpty( $control );
+                $this->assertNotContains( '<form method="post">', $control );
+                $this->assertNotContains( '<div class="widget-content">', $control );
+
+                foreach ( $param_overrides as $contained ) {
+                        $this->assertContains( $contained, $control );
+                }
+        }
+
 }

tests/qunit/fixtures/customize-settings.js

@@ -1 +1 @@
 window.wp = window.wp || {};
-window.wp.customize = window.wp.customize || { get: function(){}  };
+window.wp.customize = window.wp.customize || { get: function() {} };
 
 var customizerRootElement;
 customizerRootElement = jQuery( '<div id="customize-theme-controls"><ul></ul></div>' );
-customizerRootElement.css( { position: 'absolute', left: -10000, top: -10000 } ); // remove from view
+customizerRootElement.css( { position: 'absolute', left: -10000, top: -10000 } ); // Remove from view.
 jQuery( document.body ).append( customizerRootElement );
 
 window._wpCustomizeSettings = {

new file tests/qunit/fixtures/customize-widgets.js

@@ +1 @@
+window._wpCustomizeWidgetsSettings = {
+        'nonce': '12cc9d3284',
+        'registeredSidebars': [{
+                'name': 'Widget Area',
+                'id': 'sidebar-1',
+                'description': 'Add widgets here to appear in your sidebar.',
+                'class': '',
+                'before_widget': '<aside id="%1$s" class="widget %2$s">',
+                'after_widget': '</aside>',
+                'before_title': '<h2 class="widget-title">',
+                'after_title': '</h2>'
+        }],
+        'registeredWidgets': {
+                'search-2': {
+                        'name': 'Search',
+                        'id': 'search-2',
+                        'params': [
+                                {
+                                        'number': 2
+                                }
+                        ],
+                        'classname': 'widget_search',
+                        'description': 'A search form for your site.'
+                }
+        },
+        'availableWidgets': [
+                {
+                        'name': 'Search',
+                        'id': 'search-2',
+                        'params': [
+                                {
+                                        'number': 2
+                                }
+                        ],
+                        'classname': 'widget_search',
+                        'description': 'A search form for your site.',
+                        'temp_id': 'search-__i__',
+                        'is_multi': true,
+                        'multi_number': 3,
+                        'is_disabled': false,
+                        'id_base': 'search',
+                        'transport': 'refresh',
+                        'width': 250,
+                        'height': 200,
+                        'is_wide': false
+                }
+        ],
+        'l10n': {
+                'saveBtnLabel': 'Apply',
+                'saveBtnTooltip': 'Save and preview changes before publishing them.',
+                'removeBtnLabel': 'Remove',
+                'removeBtnTooltip': 'Trash widget by moving it to the inactive widgets sidebar.',
+                'error': 'An error has occurred. Please reload the page and try again.',
+                'widgetMovedUp': 'Widget moved up',
+                'widgetMovedDown': 'Widget moved down'
+        },
+        'tpl': {
+                'widgetReorderNav': '<div class="widget-reorder-nav"><span class="move-widget" tabindex="0">Move to another area&hellip;</span><span class="move-widget-down" tabindex="0">Move down</span><span class="move-widget-up" tabindex="0">Move up</span></div>',
+                'moveWidgetArea': '<div class="move-widget-area"> <p class="description">Select an area to move this widget into:</p> <ul class="widget-area-select"> <% _.each( sidebars, function ( sidebar ){ %> <li class="" data-id="<%- sidebar.id %>" title="<%- sidebar.description %>" tabindex="0"><%- sidebar.name %></li> <% }); %> </ul> <div class="move-widget-actions"> <button class="move-widget-btn button-secondary" type="button">Move</button> </div> </div>'
+        }
+};
+
+window._wpCustomizeSettings.panels.widgets = {
+        'id': 'widgets',
+        'description': 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).',
+        'priority': 110,
+        'type': 'default',
+        'title': 'Widgets',
+        'content': '',
+        'active': true,
+        'instanceNumber': 1
+};
+
+window._wpCustomizeSettings.sections['sidebar-widgets-sidebar-1'] = {
+        'id': 'sidebar-widgets-sidebar-1',
+        'description': 'Add widgets here to appear in your sidebar.',
+        'priority': 0,
+        'panel': 'widgets',
+        'type': 'sidebar',
+        'title': 'Widget Area',
+        'content': '',
+        'active': false,
+        'instanceNumber': 1,
+        'customizeAction': 'Customizing &#9656; Widgets',
+        'sidebarId': 'sidebar-1'
+};
+
+window._wpCustomizeSettings.settings['widget_search[2]'] = {
+        'value': {
+                'encoded_serialized_instance': 'YToxOntzOjU6InRpdGxlIjtzOjY6IkJ1c2NhciI7fQ==',
+                'title': 'Buscar',
+                'is_widget_customizer_js_value': true,
+                'instance_hash_key': '45f0a7f15e50bd3be86b141e2a8b3aaf'
+        },
+        'transport': 'refresh',
+        'dirty': false
+};
+window._wpCustomizeSettings.settings['sidebars_widgets[sidebar-1]'] = {
+        'value': [ 'search-2' ],
+        'transport': 'refresh',
+        'dirty': false
+};
+
+window._wpCustomizeSettings.controls['widget_search[2]'] = {
+        'settings': {
+                'default': 'widget_search[2]'
+        },
+        'type': 'widget_form',
+        'priority': 0,
+        'active': false,
+        'section': 'sidebar-widgets-sidebar-1',
+        'content': '<li id="customize-control-widget_search-2" class="customize-control customize-control-widget_form"> <\/li>',
+        'label': 'Search',
+        'description': '',
+        'instanceNumber': 2,
+        'widget_id': 'search-2',
+        'widget_id_base': 'search',
+        'sidebar_id': 'sidebar-1',
+        'width': 250,
+        'height': 200,
+        'is_wide': false,
+        'widget_control': '<div id="widget-15_search-2" class="widget"> <div class="widget-top"> <div class="widget-title-action"> <a class="widget-action hide-if-no-js" href="#available-widgets"><\/a> <a class="widget-control-edit hide-if-js" href="\/wp-admin\/customize.php?editwidget=search-2&#038;key=-1"> <span class="edit">Edit<\/span> <span class="add">Add<\/span> <span class="screen-reader-text">Search<\/span> <\/a> <\/div> <div class="widget-title"><h4>Search<span class="in-widget-title"><\/span><\/h4><\/div> <\/div> <div class="widget-inside"> <div class="form"> <div class="widget-content"><\/div><!-- .widget-content --> <input type="hidden" name="widget-id" class="widget-id" value="search-2" \/> <input type="hidden" name="id_base" class="id_base" value="search" \/> <input type="hidden" name="widget-width" class="widget-width" value="250" \/> <input type="hidden" name="widget-height" class="widget-height" value="200" \/> <input type="hidden" name="widget_number" class="widget_number" value="2" \/> <input type="hidden" name="multi_number" class="multi_number" value="" \/> <input type="hidden" name="add_new" class="add_new" value="" \/> <div class="widget-control-actions"> <div class="alignleft"> <a class="widget-control-remove" href="#remove">Delete<\/a> |   <a class="widget-control-close" href="#close">Close<\/a> <\/div> <div class="alignright"> <input type="submit" name="savewidget" id="widget-search-2-savewidget" class="button button-primary widget-control-save right" value="Save"  \/> <span class="spinner"><\/span> <\/div> <br class="clear" \/> <\/div> <\/div><!-- .form --> <\/div> <div class="widget-description"> A search form for your site.  <\/div> <\/div>',
+        'widget_content': '<p><label for="widget-search-2-title">Title: <input class="widefat" id="widget-search-2-title" name="widget-search[2][title]" type="text" value="Buscar" \/><\/label><\/p>'
+};
+window._wpCustomizeSettings.controls['sidebars_widgets[sidebar-1]'] = {
+        'settings': {
+                'default': 'sidebars_widgets[sidebar-1]'
+        },
+        'type': 'sidebar_widgets',
+        'priority': 99,
+        'active': true,
+        'section': 'sidebar-widgets-sidebar-1',
+        'content': '<li id="customize-control-sidebars_widgets-sidebar-1" class="customize-control customize-control-sidebar_widgets"> <span class="button-secondary add-new-widget" tabindex="0">    Add a Widget  <\/span> <span class="reorder-toggle" tabindex="0"> <span class="reorder">Reorder<\/span> <span class="reorder-done">Done<\/span> <\/span> <\/li>',
+        'label': '',
+        'description': '',
+        'instanceNumber': 1,
+        'sidebar_id': 'sidebar-1'
+};

tests/qunit/index.html

@@ -25 +25 @@
                         <script src="fixtures/customize-header.js"></script>
                         <script src="fixtures/customize-settings.js"></script>
                         <script src="fixtures/customize-menus.js"></script>
+                        <script src="fixtures/customize-widgets.js"></script>
                 </div>
                 <p><a href="editor">TinyMCE tests</a></p>
 
@@ -44 +45 @@
 
                 <script src="../../src/wp-admin/js/nav-menu.js"></script>
                 <script src="../../src/wp-admin/js/customize-nav-menus.js"></script>
+                <script src="../../src/wp-admin/js/customize-widgets.js"></script>
                 <script src="../../src/wp-admin/js/word-count.js"></script>
 
                 <!-- Unit tests -->
@@ -54 +56 @@
                 <script src="wp-admin/js/customize-controls.js"></script>
                 <script src="wp-admin/js/customize-controls-utils.js"></script>
                 <script src="wp-admin/js/customize-nav-menus.js"></script>
+                <script src="wp-admin/js/customize-widgets.js"></script>
                 <script src="wp-admin/js/word-count.js"></script>
 
                 <!-- Customizer templates for sections -->
@@ -267 +270 @@
                         <div class="menu-item-reorder-nav">
                                 <button type="button" class="menus-move-up">Move up</button><button type="button" class="menus-move-down">Move down</button><button type="button" class="menus-move-left">Move one level up</button><button type="button" class="menus-move-right">Move one level down</button>                 </div>
                 </script>
+
+                <script type="text/html" id="tmpl-customize-section-sidebar">
+                        <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
+                        <h3 class="accordion-section-title" tabindex="0">
+                                {{ data.title }}
+                                <span class="screen-reader-text">Press return or enter to open</span>
+                        </h3>
+                        <ul class="accordion-section-content">
+                                <li class="customize-section-description-container">
+                                        <div class="customize-section-title">
+                                                <button class="customize-section-back" tabindex="-1">
+                                                        <span class="screen-reader-text">Back</span>
+                                                </button>
+                                                <h3>
+                                                        <span class="customize-action">
+                                                                {{{ data.customizeAction }}}
+                                                        </span>
+                                                        {{ data.title }}
+                                                </h3>
+                                        </div>
+                                        <# if ( data.description ) { #>
+                                                <div class="description customize-section-description">
+                                                        {{{ data.description }}}
+                                                </div>
+                                        <# } #>
+                                </li>
+                        </ul>
+                        </li>
+                </script>
+
                 <div hidden>
                         <div id="available-menu-items" class="accordion-container">
                         <div class="customize-section-title">
@@ -375 +408 @@
                                                 </div><!-- #available-menu-items -->
                         </div><!-- end nav menu templates -->
 
+                <div hidden>
+                        <div id="widgets-left"><!-- compatibility with JS which looks for widget templates here -->
+                                <div id="available-widgets">
+                                        <div class="customize-section-title">
+                                                <button class="customize-section-back" tabindex="-1">
+                                                        <span class="screen-reader-text">Back</span>
+                                                </button>
+                                                <h3>
+                                                        <span class="customize-action">Customizing &#9656; Widgets</span>
+                                                        Add a Widget                            </h3>
+                                        </div>
+                                        <div id="available-widgets-filter">
+                                                <label class="screen-reader-text" for="widgets-search">Search Widgets</label>
+                                                <input type="search" id="widgets-search" placeholder="Search widgets&hellip;" />
+                                        </div>
+                                        <div id="available-widgets-list">
+                                                                        <div id="widget-tpl-search-2" data-widget-id="search-2" class="widget-tpl search-2" tabindex="0">
+                                                        <div id='widget-11_search-__i__' class='widget'>        <div class="widget-top">
+                        <div class="widget-title-action">
+                                <a class="widget-action hide-if-no-js" href="#available-widgets"></a>
+                                <a class="widget-control-edit hide-if-js" href="/wp-admin/customize.php?editwidget=search-2&#038;addnew=1&#038;num=3&#038;base=search">
+                                        <span class="edit">Edit</span>
+                                        <span class="add">Add</span>
+                                        <span class="screen-reader-text">Search</span>
+                                </a>
+                        </div>
+                        <div class="widget-title"><h4>Search<span class="in-widget-title"></span></h4></div>
+                        </div>
 
+                        <div class="widget-inside">
+                        <div class="form">
+                        <div class="widget-content">
+                                <p><label for="widget-search-__i__-title">Title: <input class="widefat" id="widget-search-__i__-title" name="widget-search[__i__][title]" type="text" value="" /></label></p>
+                        </div>
+                        <input type="hidden" name="widget-id" class="widget-id" value="search-__i__" />
+                        <input type="hidden" name="id_base" class="id_base" value="search" />
+                        <input type="hidden" name="widget-width" class="widget-width" value="250" />
+                        <input type="hidden" name="widget-height" class="widget-height" value="200" />
+                        <input type="hidden" name="widget_number" class="widget_number" value="2" />
+                        <input type="hidden" name="multi_number" class="multi_number" value="3" />
+                        <input type="hidden" name="add_new" class="add_new" value="multi" />
+
+                        <div class="widget-control-actions">
+                                <div class="alignleft">
+                                <a class="widget-control-remove" href="#remove">Delete</a> |
+                                <a class="widget-control-close" href="#close">Close</a>
+                                </div>
+                                <div class="alignright">
+                                        <input type="submit" name="savewidget" id="widget-search-__i__-savewidget" class="button button-primary widget-control-save right" value="Save"  />                     <span class="spinner"></span>
+                                </div>
+                                <br class="clear" />
+                        </div>
+                        </div><!-- .form -->
+                        </div>
+
+                        <div class="widget-description">
+                A search form for your site.
+                        </div>
+                </div>                          </div>
+                                        </div><!-- #available-widgets-list -->
+                                </div><!-- #available-widgets -->
+                        </div><!-- #widgets-left -->
+                </div><!-- end widget templates -->
                 <script src="../../src/wp-includes/js/tinymce/tinymce.js"></script>
                 <script src="editor/js/utils.js"></script>
                 <script src="wp-includes/js/tinymce/plugins/wptextpattern/plugin.js"></script>

new file tests/qunit/wp-admin/js/customize-widgets.js

@@ +1 @@
+/* global wp */
+jQuery( window ).load( function() {
+
+        var api = wp.customize, $ = jQuery;
+
+        module( 'Customize Widgets' );
+
+        test( 'fixtures should be present', function() {
+                var widgetControl;
+                ok( api.panel( 'widgets' ) );
+                ok( api.section( 'sidebar-widgets-sidebar-1' ) );
+                widgetControl = api.control( 'widget_search[2]' );
+                ok( widgetControl );
+                ok( api.control( 'sidebars_widgets[sidebar-1]' ) );
+                ok( api( 'widget_search[2]' ) );
+                ok( api( 'sidebars_widgets[sidebar-1]' ) );
+                ok( widgetControl.params.content );
+                ok( widgetControl.params.widget_control );
+                ok( widgetControl.params.widget_content );
+                ok( widgetControl.params.widget_id );
+                ok( widgetControl.params.widget_id_base );
+        });
+
+        test( 'widget contents should embed (with widget-added event) when section and control expand', function() {
+                var control, section, widgetAddedEvent = null, widgetControlRootElement = null;
+                control = api.control( 'widget_search[2]' );
+                section = api.section( 'sidebar-widgets-sidebar-1' );
+
+                $( document ).on( 'widget-added', function( event, widgetElement ) {
+                        widgetAddedEvent = event;
+                        widgetControlRootElement = widgetElement;
+                });
+
+                ok( ! section.expanded() );
+                ok( 0 === control.container.find( '> .widget' ).length );
+
+                section.expand();
+                ok( ! widgetAddedEvent );
+                ok( 1 === control.container.find( '> .widget' ).length );
+                ok( 0 === control.container.find( '.widget-content' ).children().length );
+
+                control.expand();
+                ok( 1 === control.container.find( '.widget-content' ).children().length );
+                ok( widgetAddedEvent );
+                ok( widgetControlRootElement.is( control.container.find( '> .widget' ) ) );
+                ok( 1 === control.container.find( '.widget-content #widget-search-2-title' ).length );
+
+                $( document ).off( 'widget-added' );
+        });
+});