WordPress.org

Make WordPress Core

Ticket #27404: 27404-3-24-16.patch

File 27404-3-24-16.patch, 33.1 KB (added by rramo012, 2 years ago)

27404 Patch

  • src/wp-admin/css/customize-controls.css

     
    16641664        #available-widgets-list {
    16651665                top: 140px;
    16661666        }
     1667
     1668        .wp-customizer #available-widgets .saved-widget-controls {
     1669                visibility: visible;
     1670        }
    16671671}
  • src/wp-admin/css/customize-widgets.css

     
    212212        display: block;
    213213}
    214214
     215#customize-theme-controls .widget-control-remove:hover {
     216        color: #0096dd;
     217}
     218#customize-theme-controls .widget-control-close {
     219        color: #a00;
     220}
     221#customize-theme-controls .widget-control-close:hover {
     222        color: #f00;
     223}
     224
    215225/**
    216226 * Styles for new widget addition panel
    217227 */
     
    265275        opacity: 0.4;
    266276}
    267277
     278#available-widgets .widget-tpl {
     279        padding-right: 35px;
     280}
    268281
     282#available-widgets .saved-widget {
     283        margin-left: 48px;
     284        border-left: 1px #e4e4e4 solid;
     285        padding: 10px 20px 10px;
     286        background-color: white;
     287        display: none;
     288        cursor: default;
     289}
     290
     291#available-widgets .saved-widget:last-of-type {
     292        margin-bottom: 40px;
     293}
     294
     295#available-widgets .saved-widget h3 {
     296        font-size: 1em;
     297        margin: 0;
     298}
     299
     300#available-widgets .saved-widget a {
     301        text-decoration: none;
     302}
     303
     304#available-widgets .saved-widget-controls {
     305        visibility: hidden;
     306}
     307
     308#available-widgets .saved-widget.selected .saved-widget-controls,
     309#available-widgets .saved-widget:hover .saved-widget-controls {
     310        visibility: visible;
     311}
     312
     313#available-widgets .delete-widget-permanently {
     314        color: #a00;
     315}
     316
     317#available-widgets .delete-widget-permanently:hover {
     318        color: #f00;
     319}
     320
     321#available-widgets .widget-tpl.expanded a.widget-action:after {
     322        content: "\f142";
     323}
     324
     325#available-widgets .has-inactive-widgets .widget-action {
     326        display: block;
     327        position: relative;
     328        top: 50%;
     329        width: 20px;
     330        margin: 0 auto;
     331        -webkit-transform: translateY(-50%);
     332        -ms-transform: translateY(-50%);
     333        transform: translateY(-50%);
     334}
     335
     336#available-widgets .has-inactive-widgets .widget-title-action {
     337        display: block;
     338        position: absolute;
     339        right: 0;
     340        top: 0;
     341        height:100%;
     342        width: 30px;
     343        background-color: #eee;
     344}
     345
     346#available-widgets .saved-widget.widget-title:before {
     347        display: none;
     348}
     349
     350#available-widgets .widget-tpl.expanded .widget-title-action,
     351#available-widgets .has-inactive-widgets .widget-title-action:hover {
     352        border-left: 1px #e4e4e4 solid;
     353        background-color: #FFFFFF;
     354}
     355
     356#available-widgets .has-inactive-widgets .widget-title-action:hover .widget-action {
     357        color: #555d66;
     358}
     359
     360#available-widgets .has-inactive-widgets .widget-top a.widget-action:after {
     361        margin: 0 auto;
     362}
     363
    269364/**
    270365 * Widget Icon styling
    271366 * No plurals in naming.
     
    445540        .widget-reorder-nav span:before {
    446541                line-height: 39px;
    447542        }
     543        #available-widgets .widget-top {
     544                position: static;
     545        }
    448546        #customize-theme-controls .widget-area-select li {
    449547                padding: 9px 15px 11px 42px;
    450548        }
  • src/wp-admin/js/customize-widgets.js

     
    153153                        'search #widgets-search': 'search',
    154154                        'focus .widget-tpl' : 'focus',
    155155                        'click .widget-tpl' : '_submit',
     156                        'click .add-saved-widget' : '_submit',
     157                        'click .delete-widget-permanently' : '_delete',
     158                        'click .widget-tpl .widget-title-action' : '_toggleInactive',
    156159                        'keypress .widget-tpl' : '_submit',
    157160                        'keydown' : 'keyboardAccessible'
    158161                },
    159162
     163                // Inactive widget template to be used in available widgets.
     164                inactiveWidgetTpl: null,
     165
    160166                // Cache current selected widget
    161167                selected: null,
    162168
     
    175181
    176182                        this.updateList();
    177183
     184                        this.inactiveWidgetTpl = _.template( api.Widgets.data.tpl.inactiveWidget );
     185
     186                        this._createInactiveWidgets();
     187
    178188                        // If the available widgets panel is open and the customize controls are
    179189                        // interacted with (i.e. available widgets panel is blurred) then close the
    180190                        // available widgets panel. Also close on back button click.
     
    214224                                        this.select( firstVisible );
    215225                                }
    216226                        }
     227
     228                        // Collapse inactive widgets upon searching.
     229                        this.$el.find( '.saved-widget' ).hide();
     230                        this.$el.find( '.widget-tpl.expanded' ).removeClass( 'expanded' );
     231
    217232                },
    218233
    219234                // Changes visibility of available widgets
     
    227242                        } );
    228243                },
    229244
     245                /**
     246                 * Create the list of inactive widgets to be added to the available widgets sidebar onload.
     247                 *
     248                 * @since 4.6.0
     249                 */
     250                _createInactiveWidgets : function () {
     251                        var self = this;
     252
     253                        _( api.Widgets.data.availableWidgets ).each( function ( availableWidget )  {
     254                                _( availableWidget.saved_widgets ).each( function ( savedWidget )  {
     255                                        self.addInactiveWidget( {
     256                                                id: savedWidget.id,
     257                                                type: savedWidget.type,
     258                                                idBase: availableWidget.id_base,
     259                                        } );
     260                                });
     261                        });
     262                },
     263
     264                /**
     265                 * Adds a single inactive widget to the available widgets sidebar.
     266                 *
     267                 * @since 4.6.0
     268                 */
     269                addInactiveWidget : function ( templateArgs ) {
     270                        var $inactiveWidget = $( this.inactiveWidgetTpl( templateArgs ) );
     271
     272                        if ( 0 === this.$el.find( '.saved-widget[data-widget-id="' + templateArgs.id + '"]' ).length ) {
     273                                this.$el.find( '[data-id-base="' + templateArgs.idBase + '"]' ).first().after( $inactiveWidget );
     274                        }
     275
     276                        return $inactiveWidget;
     277                },
     278
     279                /**
     280                 * Show inactive widgets and hide active widgets.
     281                 *
     282                 * @since 4.6.0
     283                 */
     284                updateVisibleSavedWidgets : function () {
     285                        var self = this;
     286
     287                        // Remove state classes.
     288                        this.$el.find( '.widget-tpl.has-inactive-widgets, .widget-tpl.expanded' )
     289                                .removeClass( 'has-inactive-widgets' )
     290                                .removeClass( 'expanded' );
     291
     292                        // Hide all inactive widgets
     293                        this.$el.find( '.saved-widget' )
     294                                .hide()
     295                                .removeClass( 'inactive-widget' );
     296
     297                        _( api( 'sidebars_widgets[wp_inactive_widgets]' )() ).each( function( widgetId ) {
     298                                var $savedWidget  = self.$el.find( '#saved-widget-' + widgetId ),
     299                                        parsedWidgetId = parseWidgetId( widgetId ),
     300                                        widgetControlId = 'widget_' + parsedWidgetId.id_base + '[' + parsedWidgetId.number + ']',
     301                                        widgetControl =  api.control( widgetControlId ),
     302                                        widgetSetting =  api( widgetControlId ),
     303                                        title = ( widgetSetting ) ? widgetSetting().title : null,
     304                                        $inWidgetTitle,
     305                                        availableWidget;
     306
     307                                if ( ! widgetControl ) {
     308                                        return;
     309                                }
     310
     311                                // If inactive widget HTML does not exist, create it.
     312                                if ( 0 === $savedWidget.length ) {
     313                                        availableWidget = api.Widgets.availableWidgets.findWhere( { id_base: parsedWidgetId.id_base } );
     314                                        $savedWidget = self.addInactiveWidget({
     315                                                id: widgetId,
     316                                                type: availableWidget.attributes.name,
     317                                                idBase: parsedWidgetId.id_base,
     318                                        });
     319                                }
     320
     321                                $savedWidget.addClass( 'inactive-widget' );
     322
     323                                self.$el.find( '.widget-tpl[data-id-base="' + parsedWidgetId.id_base + '"]' )
     324                                        .not( '.saved-widget' )
     325                                        .addClass( 'has-inactive-widgets' );
     326
     327                                $inWidgetTitle = $savedWidget.find( '.in-widget-title' );
     328                                if ( title ) {
     329                                        $inWidgetTitle.text( ': ' + title );
     330                                } else {
     331                                        $inWidgetTitle.text( '' );
     332                                }
     333                        } );
     334                },
     335
     336                /**
     337                 * Show or hide the list of inactive widgets per widget id base.
     338                 *
     339                 * @since 4.6.0
     340                 */
     341                toggleInactive : function ( idBase ) {
     342                        var $widgetTpl = this.$el.find( '.has-inactive-widgets[data-id-base="' + idBase + '"]' ),
     343                                $inactiveWidgets = this.$el.find( '.saved-widget[data-id-base="' + idBase + '"].inactive-widget' );
     344
     345                        $widgetTpl.toggleClass( 'expanded' );
     346                        $inactiveWidgets.stop().slideToggle( 'fast' );
     347
     348                        if ( $widgetTpl.hasClass('expanded') ) {
     349                                this.select( $inactiveWidgets.first().focus() );
     350                        } else {
     351                                this.select( $widgetTpl.focus() );
     352                        }
     353                },
     354
     355                /**
     356                 * Slides down a list of active widgets per widget type.
     357                 *
     358                 * @since 4.6.0
     359                 */
     360                _toggleInactive : function ( event ) {
     361                        event.stopPropagation();
     362                        event.preventDefault();
     363
     364                        var $widgetTpl = $( event.currentTarget ).closest( '.widget-tpl' );
     365                        this.toggleInactive( $widgetTpl.data('id-base') );
     366                },
     367
     368                /**
     369                 * Permanently delete a widget.
     370                 *
     371                 * @since 4.6.0
     372                 */
     373                _delete : function ( event ) {
     374                        var self = this,
     375                                $currentTarget = $( event.currentTarget ),
     376                                $savedWidgets = $currentTarget.closest( '.saved-widget' ),
     377                                widgetId = $savedWidgets.data( 'widget-id' ),
     378                                idBase = $savedWidgets.data( 'id-base' ),
     379                                settingId = widgetIdToSettingId( widgetId ),
     380                                control = api.Widgets.getWidgetFormControlForWidget( widgetId ),
     381                                deleteCallback,
     382                                inactiveSidebarWidgets,
     383                                inactiveWidgets,
     384                                i;
     385
     386                        // Remove from sidebar.
     387                        inactiveWidgets = api( 'sidebars_widgets[wp_inactive_widgets]' );
     388
     389                        inactiveSidebarWidgets = inactiveWidgets().slice();
     390                        i = _.indexOf( inactiveSidebarWidgets, widgetId );
     391                        if ( -1 !== i ) {
     392                                inactiveSidebarWidgets.splice( i, 1 );
     393                                inactiveWidgets.set( inactiveSidebarWidgets );
     394                        }
     395
     396                        // Embed control to allow unembedded controls to trigger update calls.
     397                        if ( ! control.widgetControlEmdedded ) {
     398                                control.embedWidgetControl();
     399                        }
     400                        api( settingId ).set( false );
     401
     402                        deleteCallback = function () {
     403                                var $remainingWidgets;
     404
     405                                $( this ).remove();
     406                                api.control.remove( control.id );
     407                                control.container.remove();
     408
     409                                // Remove drop down if widgets no longer exist
     410                                $remainingWidgets = self.$el.find( '.saved-widget[data-id-base="' + idBase + '"].inactive-widget' );
     411                                if ( ! $remainingWidgets.length ) {
     412                                        self.$el.find( '.has-inactive-widgets[data-id-base="' + idBase + '"]' )
     413                                                .removeClass( 'has-inactive-widgets expanded' );
     414                                }
     415
     416                                wp.a11y.speak( l10n.itemDeleted );
     417                        };
     418
     419                        $currentTarget.closest( '.saved-widget' ).slideUp( 'fast' , deleteCallback );
     420                },
     421
    230422                // Highlights a widget
    231423                select: function( widgetTpl ) {
    232424                        this.selected = $( widgetTpl );
     
    251443
    252444                // Adds a selected widget to the sidebar
    253445                submit: function( widgetTpl ) {
    254                         var widgetId, widget, widgetFormControl;
     446                        var widgetId, widget, widgetFormControl, isSavedWidget, addWidgetId;
    255447
    256448                        if ( ! widgetTpl ) {
    257449                                widgetTpl = this.selected;
     
    263455
    264456                        this.select( widgetTpl );
    265457
    266                         widgetId = $( this.selected ).data( 'widget-id' );
     458                        widgetId = widgetTpl.data( 'widget-id' );
     459                        isSavedWidget = widgetTpl.data( 'is-saved-widget' );
     460
    267461                        widget = this.collection.findWhere( { id: widgetId } );
    268                         if ( ! widget ) {
     462                        if ( ( ! widget && ! isSavedWidget ) || widgetTpl.hasClass( 'saved-widget' ) ) {
    269463                                return;
    270464                        }
    271465
    272                         widgetFormControl = this.currentSidebarControl.addWidget( widget.get( 'id_base' ) );
     466                        addWidgetId = ( isSavedWidget ) ? widgetId : widget.get( 'id_base' );
     467                        widgetFormControl = this.currentSidebarControl.addWidget( addWidgetId );
     468
    273469                        if ( widgetFormControl ) {
    274470                                widgetFormControl.focus();
    275471                        }
     
    281477                open: function( sidebarControl ) {
    282478                        this.currentSidebarControl = sidebarControl;
    283479
     480                        // Create inactive widget controls that were moved to the inactive sidebar.
     481                        this.updateVisibleSavedWidgets();
     482
    284483                        // Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens
    285484                        _( this.currentSidebarControl.getWidgetFormControls() ).each( function( control ) {
    286485                                if ( control.params.is_wide ) {
     
    316515                        this.$search.val( '' );
    317516                },
    318517
    319                 // Add keyboard accessiblity to the panel
     518                // Add keyboard accessibility to the panel
    320519                keyboardAccessible: function( event ) {
    321520                        var isEnter = ( event.which === 13 ),
    322521                                isEsc = ( event.which === 27 ),
    323522                                isDown = ( event.which === 40 ),
    324523                                isUp = ( event.which === 38 ),
     524                                isLeft = ( event.which === 37 ),
     525                                isRight = ( event.which === 39 ),
    325526                                isTab = ( event.which === 9 ),
    326527                                isShift = ( event.shiftKey ),
    327528                                selected = null,
    328                                 firstVisible = this.$el.find( '> .widget-tpl:visible:first' ),
    329                                 lastVisible = this.$el.find( '> .widget-tpl:visible:last' ),
     529                                firstVisible = this.$el.find( '.widget-tpl:visible:first' ),
     530                                lastVisible = this.$el.find( '.widget-tpl:visible:last' ),
    330531                                isSearchFocused = $( event.target ).is( this.$search ),
    331532                                isLastWidgetFocused = $( event.target ).is( '.widget-tpl:visible:last' );
    332533
     
    356557                                return;
    357558                        }
    358559
     560                        // Toggle display when the user presses left or right on widget template with inactive widgets.
     561                        if ( isLeft || isRight ) {
     562                                if ( this.selected && (this.selected.hasClass( 'has-inactive-widgets' ) || this.selected.hasClass( 'saved-widget' ) ) ) {
     563                                        var idBase = this.selected.data('id-base');
     564                                        this.toggleInactive( idBase );
     565                                }
     566
     567                                return;
     568                        }
     569
    359570                        // If enter pressed but nothing entered, don't do anything
    360571                        if ( isEnter && ! this.$search.val() ) {
    361572                                return;
     
    477688                        if ( control.widgetControlEmbedded ) {
    478689                                return;
    479690                        }
     691
    480692                        control.widgetControlEmbedded = true;
    481693
    482694                        widgetControl = $( control.params.widget_control );
     
    490702                        control._setupReorderUI();
    491703                        control._setupHighlightEffects();
    492704                        control._setupUpdateUI();
     705                        control._setupMoveUI();
    493706                        control._setupRemoveUI();
    494707                },
    495708
     
    9031116                },
    9041117
    9051118                /**
    906                  * Set up event handlers for widget removal
     1119                 * Set up event handlers for widget move.
     1120                 *
     1121                 * @since 4.6.0
    9071122                 */
     1123                _setupMoveUI: function() {
     1124                        var self = this, $moveBtn, $reorderToggle, replaceDeleteWithMove;
     1125
     1126                        // Configure move button
     1127                        $moveBtn = this.container.find( 'a.widget-control-remove' );
     1128
     1129                        $moveBtn.on( 'click', function ( e ) {
     1130                                e.preventDefault();
     1131
     1132                                $reorderToggle = $( this ).closest( '.ui-sortable' ).find( '.reorder-toggle' );
     1133
     1134                                $reorderToggle.trigger( 'click' );
     1135                                self.openWidgetMoveArea();
     1136                        } );
     1137
     1138                        // Replace the Delete link with Move.
     1139                        replaceDeleteWithMove = function () {
     1140                                $moveBtn.text( l10n.moveBtnLabel ); // wp_widget_control() outputs the link as "Close"
     1141                                $moveBtn.attr( 'title', l10n.moveBtnTooltip );
     1142                        };
     1143
     1144                        replaceDeleteWithMove();
     1145                },
     1146
     1147                /**
     1148                 * Set up event handlers for widget removal.
     1149                 */
    9081150                _setupRemoveUI: function() {
    909                         var self = this, $removeBtn, replaceDeleteWithRemove;
     1151                        var self = this, $closeBtn;
    9101152
    9111153                        // Configure remove button
    912                         $removeBtn = this.container.find( 'a.widget-control-remove' );
    913                         $removeBtn.on( 'click', function( e ) {
     1154                        $closeBtn = this.container.find( 'a.widget-control-close' );
     1155                        $closeBtn.on( 'click', function( e ) {
    9141156                                e.preventDefault();
    9151157
    9161158                                // Find an adjacent element to add focus to when this widget goes away
     
    9251167
    9261168                                self.container.slideUp( function() {
    9271169                                        var sidebarsWidgetsControl = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ),
    928                                                 sidebarWidgetIds, i;
     1170                                                sidebarWidgetIds, i, inactiveWidgets, inactiveWidgetSetting;
    9291171
    9301172                                        if ( ! sidebarsWidgetsControl ) {
    9311173                                                return;
     
    9401182                                        sidebarWidgetIds.splice( i, 1 );
    9411183                                        sidebarsWidgetsControl.setting( sidebarWidgetIds );
    9421184
     1185                                        // Add widget to inactive widgets.
     1186                                        inactiveWidgetSetting = api( 'sidebars_widgets[wp_inactive_widgets]' );
     1187                                        inactiveWidgets = inactiveWidgetSetting();
     1188                                        inactiveWidgets.push( self.params.widget_id );
     1189                                        inactiveWidgetSetting.set( [] ).set( _( inactiveWidgets ).unique() );
     1190
    9431191                                        $adjacentFocusTarget.focus(); // keyboard accessibility
     1192
     1193                                        // Remove display none in case its added again.
     1194                                        self.container.show();
    9441195                                } );
    9451196                        } );
    9461197
    947                         replaceDeleteWithRemove = function() {
    948                                 $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
    949                                 $removeBtn.attr( 'title', l10n.removeBtnTooltip );
    950                         };
    951 
    952                         if ( this.params.is_new ) {
    953                                 api.bind( 'saved', replaceDeleteWithRemove );
    954                         } else {
    955                                 replaceDeleteWithRemove();
    956                         }
     1198                        $closeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Close"
     1199                        $closeBtn.attr( 'title', l10n.removeBtnTooltip );
    9571200                },
    9581201
    9591202                /**
     
    11121355                        params.nonce = api.settings.nonce['update-widget'];
    11131356                        params.theme = api.settings.theme.stylesheet;
    11141357                        params.customized = wp.customize.previewer.query().customized;
     1358                        params.delete_widget = ( false === self.setting() ) ? 1 : 0;
    11151359
    11161360                        data = $.param( params );
    11171361                        $inputs = this._getInputs( $widgetContent );
     
    11251369
    11261370                        if ( instanceOverride ) {
    11271371                                data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instanceOverride ) } );
    1128                         } else {
     1372                        } else if ( $inputs.length ) {
    11291373                                data += '&' + $inputs.serialize();
    11301374                        }
     1375
    11311376                        data += '&' + $widgetContent.find( '~ :input' ).serialize();
    11321377
    11331378                        if ( this._previousUpdateRequest ) {
     
    12081453                                         * preview finishing loading.
    12091454                                         */
    12101455                                        isChanged = ! isLiveUpdateAborted && ! _( self.setting() ).isEqual( r.data.instance );
    1211                                         if ( isChanged ) {
     1456                                        if ( isChanged || false === self.setting() ) {
    12121457                                                self.isWidgetUpdating = true; // suppress triggering another updateWidget
    12131458                                                self.setting( r.data.instance );
    12141459                                                self.isWidgetUpdating = false;
     
    13251570                 */
    13261571                onChangeExpanded: function ( expanded, args ) {
    13271572                        var self = this, $widget, $inside, complete, prevComplete;
    1328 
    13291573                        self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI.
    13301574                        if ( expanded ) {
    13311575                                self.embedWidgetContent();
     
    14841728                        }
    14851729
    14861730                        $moveWidgetArea.toggleClass( 'active', showOrHide );
     1731                        self.toggleSaveForLater();
    14871732                },
    14881733
    14891734                /**
     1735                 * Open widget move area if control is not active already.
     1736                 *
     1737                 * @since 4.6.0
     1738                 */
     1739                openWidgetMoveArea: function() {
     1740                        var self = this, $moveWidgetArea;
     1741
     1742                        $moveWidgetArea = this.container.find( '.move-widget-area' );
     1743
     1744                        if( ! $moveWidgetArea.hasClass( 'active' ) ) {
     1745                                self.toggleWidgetMoveArea();
     1746                        }
     1747                },
     1748
     1749                /**
     1750                 * Toggle visibility of the Save For Later/Inactive Widget Sidebar section.
     1751                 *
     1752                 * @since 4.6.0
     1753                 */
     1754                toggleSaveForLater: function() {
     1755                        var $moveWidgetArea, $saveForLater;
     1756
     1757                        $moveWidgetArea = this.container.find( '.move-widget-area' );
     1758                        $saveForLater = this.container.find( 'li[data-id="wp_inactive_widgets"]' );
     1759
     1760                        if( $moveWidgetArea.hasClass( 'active' ) ) {
     1761                                $saveForLater.show();
     1762                        } else {
     1763                                $saveForLater.hide();
     1764                        }
     1765                },
     1766
     1767                /**
    14901768                 * Highlight the widget control and section
    14911769                 */
    14921770                highlightSectionAndControl: function() {
     
    17071985                                                        return;
    17081986                                                }
    17091987
    1710                                                 removedControl = api.Widgets.getWidgetFormControlForWidget( removedWidgetId );
    1711 
    1712                                                 // Detect if widget control was dragged to another sidebar
    1713                                                 wasDraggedToAnotherSidebar = removedControl && $.contains( document, removedControl.container[0] ) && ! $.contains( self.$sectionContent[0], removedControl.container[0] );
    1714 
    1715                                                 // Delete any widget form controls for removed widgets
    1716                                                 if ( removedControl && ! wasDraggedToAnotherSidebar ) {
    1717                                                         api.control.remove( removedControl.id );
    1718                                                         removedControl.container.remove();
    1719                                                 }
    1720 
    17211988                                                // Move widget to inactive widgets sidebar (move it to trash) if has been previously saved
    17221989                                                // This prevents the inactive widgets sidebar from overflowing with throwaway widgets
    1723                                                 if ( api.Widgets.savedWidgetIds[removedWidgetId] ) {
     1990                                                if ( api.Widgets.savedWidgetIds[removedWidgetId] && 'sidebars_widgets[wp_inactive_widgets]' !== self.id ) {
    17241991                                                        inactiveWidgets = api.value( 'sidebars_widgets[wp_inactive_widgets]' )().slice();
    17251992                                                        inactiveWidgets.push( removedWidgetId );
    17261993                                                        api.value( 'sidebars_widgets[wp_inactive_widgets]' )( _( inactiveWidgets ).unique() );
     
    19892256                                setting.set( {} ); // mark dirty, changing from '' to {}
    19902257                        }
    19912258
    1992                         controlConstructor = api.controlConstructor[controlType];
    1993                         widgetFormControl = new controlConstructor( settingId, {
    1994                                 params: {
    1995                                         settings: {
    1996                                                 'default': settingId
     2259                        widgetFormControl = api.control( settingId );
     2260                        if ( ! widgetFormControl ) {
     2261
     2262                                controlConstructor = api.controlConstructor[controlType];
     2263                                widgetFormControl = new controlConstructor( settingId, {
     2264                                        params: {
     2265                                                settings: {
     2266                                                        'default': settingId
     2267                                                },
     2268                                                content: controlContainer,
     2269                                                sidebar_id: self.params.sidebar_id,
     2270                                                widget_id: widgetId,
     2271                                                widget_id_base: widget.get( 'id_base' ),
     2272                                                type: controlType,
     2273                                                is_new: ! isExistingWidget,
     2274                                                width: widget.get( 'width' ),
     2275                                                height: widget.get( 'height' ),
     2276                                                is_wide: widget.get( 'is_wide' ),
     2277                                                active: true
    19972278                                        },
    1998                                         content: controlContainer,
    1999                                         sidebar_id: self.params.sidebar_id,
    2000                                         widget_id: widgetId,
    2001                                         widget_id_base: widget.get( 'id_base' ),
    2002                                         type: controlType,
    2003                                         is_new: ! isExistingWidget,
    2004                                         width: widget.get( 'width' ),
    2005                                         height: widget.get( 'height' ),
    2006                                         is_wide: widget.get( 'is_wide' ),
    2007                                         active: true
    2008                                 },
    2009                                 previewer: self.setting.previewer
    2010                         } );
    2011                         api.control.add( settingId, widgetFormControl );
     2279                                        previewer: self.setting.previewer
     2280                                } );
     2281                                api.control.add( settingId, widgetFormControl );
     2282                        }
    20122283
    20132284                        // Make sure widget is removed from the other sidebars
    20142285                        api.each( function( otherSetting ) {
     
    20242295                                        i = _.indexOf( otherSidebarWidgets, widgetId );
    20252296
    20262297                                if ( -1 !== i ) {
    2027                                         otherSidebarWidgets.splice( i );
     2298                                        otherSidebarWidgets.splice( i, 1 );
    20282299                                        otherSetting( otherSidebarWidgets );
    20292300                                }
    20302301                        } );
  • src/wp-includes/class-wp-customize-setting.php

     
    769769
    770770                $result = $this->multidimensional( $root, $keys, true );
    771771
    772                 if ( isset( $result ) )
    773                         $result['node'][ $result['key'] ] = $value;
     772                if ( isset( $result ) ) {
    774773
     774                        if ( ! empty( $value['multidimensional_delete'] ) ) {
     775                                unset( $result['node'][ $result['key'] ] );
     776                        } else {
     777                                $result['node'][ $result['key'] ] = $value;
     778                        }
     779
     780                }
     781
    775782                return $root;
    776783        }
    777784
  • src/wp-includes/class-wp-customize-widgets.php

     
    442442
    443443                                // Add section to contain controls.
    444444                                $section_id = sprintf( 'sidebar-widgets-%s', $sidebar_id );
    445                                 if ( $is_active_sidebar ) {
    446445
    447                                         $section_args = array(
    448                                                 'title' => $wp_registered_sidebars[ $sidebar_id ]['name'],
    449                                                 'description' => $wp_registered_sidebars[ $sidebar_id ]['description'],
    450                                                 'priority' => array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
    451                                                 'panel' => 'widgets',
    452                                                 'sidebar_id' => $sidebar_id,
    453                                         );
     446                                if ( $is_inactive_widgets ) {
     447                                        $title = 'Inactive Widgets';
     448                                        $description = $title;
     449                                } else {
     450                                        $title = $wp_registered_sidebars[ $sidebar_id ]['name'];
     451                                        $description = $wp_registered_sidebars[ $sidebar_id ]['description'];
     452                                }
    454453
    455                                         /**
    456                                          * Filter Customizer widget section arguments for a given sidebar.
    457                                          *
    458                                          * @since 3.9.0
    459                                          *
    460                                          * @param array      $section_args Array of Customizer widget section arguments.
    461                                          * @param string     $section_id   Customizer section ID.
    462                                          * @param int|string $sidebar_id   Sidebar ID.
    463                                          */
    464                                         $section_args = apply_filters( 'customizer_widgets_section_args', $section_args, $section_id, $sidebar_id );
     454                                $section_args = array(
     455                                        'title' => $title,
     456                                        'description' => $description,
     457                                        'priority' => array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
     458                                        'panel' => 'widgets',
     459                                        'sidebar_id' => $sidebar_id,
     460                                );
    465461
    466                                         $section = new WP_Customize_Sidebar_Section( $this->manager, $section_id, $section_args );
    467                                         $this->manager->add_section( $section );
     462                                /**
     463                                 * Filter Customizer widget section arguments for a given sidebar.
     464                                 *
     465                                 * @since 3.9.0
     466                                 *
     467                                 * @param array      $section_args Array of Customizer widget section arguments.
     468                                 * @param string     $section_id   Customizer section ID.
     469                                 * @param int|string $sidebar_id   Sidebar ID.
     470                                 */
     471                                $section_args = apply_filters( 'customizer_widgets_section_args', $section_args, $section_id, $sidebar_id );
    468472
    469                                         $control = new WP_Widget_Area_Customize_Control( $this->manager, $setting_id, array(
    470                                                 'section'    => $section_id,
    471                                                 'sidebar_id' => $sidebar_id,
    472                                                 'priority'   => count( $sidebar_widget_ids ), // place 'Add Widget' and 'Reorder' buttons at end.
    473                                         ) );
    474                                         $new_setting_ids[] = $setting_id;
     473                                $section = new WP_Customize_Sidebar_Section( $this->manager, $section_id, $section_args );
     474                                $this->manager->add_section( $section );
    475475
    476                                         $this->manager->add_control( $control );
    477                                 }
     476                                $control = new WP_Widget_Area_Customize_Control( $this->manager, $setting_id, array(
     477                                        'section'    => $section_id,
     478                                        'sidebar_id' => $sidebar_id,
     479                                        'priority'   => count( $sidebar_widget_ids ), // place 'Add Widget' and 'Reorder' buttons at end.
     480                                ) );
     481                                $new_setting_ids[] = $setting_id;
     482
     483                                $this->manager->add_control( $control );
    478484                        }
    479485
    480486                        // Add a control for each active widget (located in a sidebar).
     
    481487                        foreach ( $sidebar_widget_ids as $i => $widget_id ) {
    482488
    483489                                // Skip widgets that may have gone away due to a plugin being deactivated.
    484                                 if ( ! $is_active_sidebar || ! isset( $wp_registered_widgets[$widget_id] ) ) {
     490                                if ( ! isset( $wp_registered_widgets[$widget_id] ) ) {
    485491                                        continue;
    486492                                }
    487493
     
    500506                                        'height'         => $wp_registered_widget_controls[$widget_id]['height'],
    501507                                        'is_wide'        => $this->is_wide_widget( $widget_id ),
    502508                                ) );
     509
    503510                                $this->manager->add_control( $control );
    504511                        }
    505512                }
     
    717724                        </div>'
    718725                );
    719726
     727                $inactive_widget_tpl = str_replace(
     728                        array( '{delete}', '{add}' ),
     729                        array(
     730                                __( 'Delete' ),
     731                                __( 'Add' )
     732                        ),
     733                        '<div id="saved-widget-<%- id %>" data-id-base="<%- idBase %>" data-widget-id="<%- id %>" class="widget-title saved-widget widget-tpl" tabindex="0">
     734                                <h3><%- type %><span class="in-widget-title"></span></h3>
     735                                <div class="saved-widget-controls">
     736                                        <a href="#" class="add-saved-widget" data-is-saved-widget="1" data-widget-id="<%- id %>"
     737                                        >{add}</a> &#124; <a href="#" class="delete-widget-permanently">{delete}</a>
     738                                </div>
     739                        </div>'
     740                );
     741
     742                $inactive_sidebar = array(
     743                        'inactive-sidebar' => array(
     744                                'name' => __( 'Save For Later' ),
     745                                'id' => 'wp_inactive_widgets',
     746                                'description' => __( 'Save widgets to the Inactive Sidebar to use later.' ),
     747                                'class' => 'inactive-sidebar',
     748                                'before_widget' => '<aside id="%1$s" class="widget %2$s">',
     749                                'after_widget' => '</aside>',
     750                                'before_title' => '<h1 class="widget-title">',
     751                                'after_title' => '</h1>',
     752                        ),
     753                );
     754
     755                $all_sidebars = array_values( array_merge( $wp_registered_sidebars, $inactive_sidebar ) );
     756
    720757                $settings = array(
    721                         'registeredSidebars'   => array_values( $wp_registered_sidebars ),
     758                        'registeredSidebars'   => $all_sidebars,
    722759                        'registeredWidgets'    => $wp_registered_widgets,
    723760                        'availableWidgets'     => $available_widgets, // @todo Merge this with registered_widgets
    724761                        'l10n' => array(
     
    726763                                'saveBtnTooltip'   => __( 'Save and preview changes before publishing them.' ),
    727764                                'removeBtnLabel'   => __( 'Remove' ),
    728765                                'removeBtnTooltip' => __( 'Trash widget by moving it to the inactive widgets sidebar.' ),
     766                                'moveBtnLabel'     => __( 'Move' ),
     767                                'moveBtnTooltip'   => __( 'Reorder the widgets in this sidebar.' ),
    729768                                'error'            => __( 'An error has occurred. Please reload the page and try again.' ),
    730769                                'widgetMovedUp'    => __( 'Widget moved up' ),
    731770                                'widgetMovedDown'  => __( 'Widget moved down' ),
     
    734773                                'reorderModeOff'   => __( 'Reorder mode closed' ),
    735774                                'reorderLabelOn'   => esc_attr__( 'Reorder widgets' ),
    736775                                'reorderLabelOff'  => esc_attr__( 'Close reorder mode' ),
     776                                'itemDeleted'       => __( 'Widget deleted' ),
    737777                        ),
    738778                        'tpl' => array(
    739779                                'widgetReorderNav' => $widget_reorder_nav_tpl,
    740780                                'moveWidgetArea'   => $move_widget_area_tpl,
     781                                'inactiveWidget'   => $inactive_widget_tpl,
    741782                        ),
    742783                        'selectiveRefreshableWidgets' => $this->get_selective_refreshable_widgets(),
    743784                );
     
    781822                        </div>
    782823                        <div id="available-widgets-list">
    783824                        <?php foreach ( $this->get_available_widgets() as $available_widget ): ?>
    784                                 <div id="widget-tpl-<?php echo esc_attr( $available_widget['id'] ) ?>" data-widget-id="<?php echo esc_attr( $available_widget['id'] ) ?>" class="widget-tpl <?php echo esc_attr( $available_widget['id'] ) ?>" tabindex="0">
     825                                <div id="widget-tpl-<?php echo esc_attr( $available_widget['id'] ) ?>" data-id-base="<?php echo esc_attr( $available_widget['id_base'] ) ?>" data-widget-id="<?php echo esc_attr( $available_widget['id'] ) ?>" class="widget-tpl <?php echo esc_attr( $available_widget['id'] ) ?>" tabindex="0">
    785826                                        <?php echo $available_widget['control_tpl']; ?>
    786827                                </div>
    787828                        <?php endforeach; ?>
     
    865906                foreach ( $widget_ids as $widget_id ) {
    866907                        $sanitized_widget_ids[] = preg_replace( '/[^a-z0-9_\-]/', '', $widget_id );
    867908                }
     909
    868910                return $sanitized_widget_ids;
    869911        }
    870912
    871913        /**
     914         * Create an list of saved widgets that correspond to a widget type.
     915         *
     916         * @since 4.6.0
     917         * @access protected
     918         *
     919         * @global array $wp_registered_widget_controls
     920         *
     921         * @return array List of saved widget by type.
     922         */
     923        protected function get_sorted_saved_widgets() {
     924                global $wp_registered_widget_controls;
     925
     926                $sidebars_widgets = wp_get_sidebars_widgets();
     927
     928                $sorted_saved_widgets = array();
     929                foreach ( $sidebars_widgets as $sidebars_widget ) {
     930                        foreach( $sidebars_widget as $widget ) {
     931
     932                                if ( isset ( $wp_registered_widget_controls[ $widget ]['id_base'] ) ) {
     933                                        $current_base_id = $wp_registered_widget_controls[ $widget ]['id_base'];
     934                                        $sorted_saved_widgets[ $current_base_id ][] = array(
     935                                                'id' => $widget,
     936                                                'type' => $wp_registered_widget_controls[ $widget ]['name'],
     937                                        );
     938                                }
     939
     940                        }
     941                }
     942
     943                return $sorted_saved_widgets;
     944        }
     945
     946        /**
    872947         * Builds up an index of all available widgets for use in Backbone models.
    873948         *
    874949         * @since 3.9.0
     
    891966                global $wp_registered_widgets, $wp_registered_widget_controls;
    892967                require_once ABSPATH . '/wp-admin/includes/widgets.php'; // for next_widget_id_number()
    893968
     969                $sorted_saved_widgets = $this->get_sorted_saved_widgets();
    894970                $sort = $wp_registered_widgets;
    895971                usort( $sort, array( $this, '_sort_name_callback' ) );
    896972                $done = array();
     
    9471023                                'width'        => $wp_registered_widget_controls[$widget['id']]['width'],
    9481024                                'height'       => $wp_registered_widget_controls[$widget['id']]['height'],
    9491025                                'is_wide'      => $this->is_wide_widget( $widget['id'] ),
     1026                                'saved_widgets' => isset( $sorted_saved_widgets[ $id_base ] ) ? $sorted_saved_widgets[ $id_base ] : array(),
    9501027                        ) );
    9511028
    9521029                        $available_widgets[] = $available_widget;
     
    12541331         * @return array|void Sanitized widget instance.
    12551332         */
    12561333        public function sanitize_widget_instance( $value ) {
    1257                 if ( $value === array() ) {
     1334                if ( $value === array() || false === $value ) {
    12581335                        return $value;
    12591336                }
    12601337
     
    13441421                global $wp_registered_widget_updates, $wp_registered_widget_controls;
    13451422
    13461423                $setting_id = $this->get_setting_id( $widget_id );
    1347 
    13481424                /*
    13491425                 * Make sure that other setting changes have previewed since this widget
    13501426                 * may depend on them (e.g. Menus being present for Custom Menu widget).
     
    13931469                        }
    13941470                }
    13951471
     1472                // If deleting widget.
     1473                $is_widget_delete = ! empty( $this->get_post_value( 'delete_widget' ) );
     1474
     1475                if ( $is_widget_delete ) {
     1476                        // Set post values needed in widget update_callback.
     1477                        $_POST[ 'sidebar' ] = 'wp_inactive_widgets';
     1478                        $_POST[ 'widget-' . $parsed_id['id_base'] ] = array();
     1479                        $_POST[ 'the-widget-id' ] = $widget_id;
     1480                        $_POST[ 'delete_widget' ] = '1';
     1481
     1482                        $post_values_added = array( 'sidebar', 'widget-' . $parsed_id[ 'id_base' ], 'the-widget-id', 'delete_widget' );
     1483                        $added_input_vars = array_merge( $added_input_vars, $post_values_added );
     1484
     1485                        /** This action is documented in wp-admin/widgets.php */
     1486                        do_action( 'delete_widget', $widget_id, $_POST[ 'sidebar' ], $parsed_id['id_base'] );
     1487                }
     1488
    13961489                // Invoke the widget update callback.
    13971490                foreach ( (array) $wp_registered_widget_updates as $name => $control ) {
    13981491                        if ( $name === $parsed_id['id_base'] && is_callable( $control['callback'] ) ) {
     
    14251518
    14261519                // Obtain the widget instance.
    14271520                $option = $this->get_captured_option( $option_name );
    1428                 if ( null !== $parsed_id['number'] ) {
     1521                if ( $is_widget_delete ) {
     1522                        $instance = array( 'multidimensional_delete' => true );
     1523                } else if ( null !== $parsed_id['number'] ) {
    14291524                        $instance = $option[ $parsed_id['number'] ];
    14301525                } else {
    14311526                        $instance = $option;
     
    14421537                // Obtain the widget control with the updated instance in place.
    14431538                ob_start();
    14441539                $form = $wp_registered_widget_controls[ $widget_id ];
    1445                 if ( $form ) {
     1540                if ( $form && false === $is_widget_delete ) {
    14461541                        call_user_func_array( $form['callback'], $form['params'] );
    14471542                }
    14481543                $form = ob_get_clean();