Ticket #33901: 33901.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' );
         }
 
         /**