+
@@ -868,10 +940,44 @@
foreach ( $widget_ids as $widget_id ) {
$sanitized_widget_ids[] = preg_replace( '/[^a-z0-9_\-]/', '', $widget_id );
}
+
return $sanitized_widget_ids;
}
/**
+ * Create an list of saved widgets that correspond to a widget type.
+ *
+ * @since 4.6.0
+ * @access protected
+ *
+ * @global array $wp_registered_widget_controls
+ *
+ * @return array List of saved widget by type.
+ */
+ protected function get_sorted_saved_widgets() {
+ global $wp_registered_widget_controls;
+
+ $sidebars_widgets = wp_get_sidebars_widgets();
+
+ $sorted_saved_widgets = array();
+ foreach ( $sidebars_widgets as $sidebars_widget ) {
+ foreach( $sidebars_widget as $widget ) {
+
+ if ( isset ( $wp_registered_widget_controls[ $widget ]['id_base'] ) ) {
+ $current_base_id = $wp_registered_widget_controls[ $widget ]['id_base'];
+ $sorted_saved_widgets[ $current_base_id ][] = array(
+ 'id' => $widget,
+ 'type' => $wp_registered_widget_controls[ $widget ]['name'],
+ );
+ }
+
+ }
+ }
+
+ return $sorted_saved_widgets;
+ }
+
+ /**
* Builds up an index of all available widgets for use in Backbone models.
*
* @since 3.9.0
@@ -894,6 +1000,7 @@
global $wp_registered_widgets, $wp_registered_widget_controls;
require_once ABSPATH . '/wp-admin/includes/widgets.php'; // for next_widget_id_number()
+ $sorted_saved_widgets = $this->get_sorted_saved_widgets();
$sort = $wp_registered_widgets;
usort( $sort, array( $this, '_sort_name_callback' ) );
$done = array();
@@ -950,6 +1057,7 @@
'width' => $wp_registered_widget_controls[$widget['id']]['width'],
'height' => $wp_registered_widget_controls[$widget['id']]['height'],
'is_wide' => $this->is_wide_widget( $widget['id'] ),
+ 'saved_widgets' => isset( $sorted_saved_widgets[ $id_base ] ) ? $sorted_saved_widgets[ $id_base ] : array(),
) );
$available_widgets[] = $available_widget;
@@ -1257,7 +1365,7 @@
* @return array|void Sanitized widget instance.
*/
public function sanitize_widget_instance( $value ) {
- if ( $value === array() ) {
+ if ( $value === array() || false === $value ) {
return $value;
}
@@ -1347,7 +1455,6 @@
global $wp_registered_widget_updates, $wp_registered_widget_controls;
$setting_id = $this->get_setting_id( $widget_id );
-
/*
* Make sure that other setting changes have previewed since this widget
* may depend on them (e.g. Menus being present for Custom Menu widget).
@@ -1396,6 +1503,24 @@
}
}
+ // If deleting widget.
+ $delete_widget_val = $this->get_post_value( 'delete_widget' );
+ $is_widget_delete = ! empty( $delete_widget_val );
+
+ if ( $is_widget_delete ) {
+ // Set post values needed in widget update_callback.
+ $_POST[ 'sidebar' ] = 'wp_inactive_widgets';
+ $_POST[ 'widget-' . $parsed_id['id_base'] ] = array();
+ $_POST[ 'the-widget-id' ] = $widget_id;
+ $_POST[ 'delete_widget' ] = '1';
+
+ $post_values_added = array( 'sidebar', 'widget-' . $parsed_id[ 'id_base' ], 'the-widget-id', 'delete_widget' );
+ $added_input_vars = array_merge( $added_input_vars, $post_values_added );
+
+ /** This action is documented in wp-admin/widgets.php */
+ do_action( 'delete_widget', $widget_id, $_POST[ 'sidebar' ], $parsed_id['id_base'] );
+ }
+
// Invoke the widget update callback.
foreach ( (array) $wp_registered_widget_updates as $name => $control ) {
if ( $name === $parsed_id['id_base'] && is_callable( $control['callback'] ) ) {
@@ -1428,7 +1553,9 @@
// Obtain the widget instance.
$option = $this->get_captured_option( $option_name );
- if ( null !== $parsed_id['number'] ) {
+ if ( $is_widget_delete ) {
+ $instance = array( 'multidimensional_delete' => true );
+ } else if ( null !== $parsed_id['number'] ) {
$instance = $option[ $parsed_id['number'] ];
} else {
$instance = $option;
@@ -1445,7 +1572,7 @@
// Obtain the widget control with the updated instance in place.
ob_start();
$form = $wp_registered_widget_controls[ $widget_id ];
- if ( $form ) {
+ if ( $form && false === $is_widget_delete ) {
call_user_func_array( $form['callback'], $form['params'] );
}
$form = ob_get_clean();
Index: src/wp-includes/class-wp-customize-setting.php
===================================================================
--- src/wp-includes/class-wp-customize-setting.php (revision 37658)
+++ src/wp-includes/class-wp-customize-setting.php (working copy)
@@ -845,9 +845,16 @@
$result = $this->multidimensional( $root, $keys, true );
- if ( isset( $result ) )
- $result['node'][ $result['key'] ] = $value;
+ if ( isset( $result ) ) {
+ if ( ! empty( $value['multidimensional_delete'] ) ) {
+ unset( $result['node'][ $result['key'] ] );
+ } else {
+ $result['node'][ $result['key'] ] = $value;
+ }
+
+ }
+
return $root;
}
Index: src/wp-admin/js/customize-widgets.js
===================================================================
--- src/wp-admin/js/customize-widgets.js (revision 37658)
+++ src/wp-admin/js/customize-widgets.js (working copy)
@@ -153,10 +153,16 @@
'search #widgets-search': 'search',
'focus .widget-tpl' : 'focus',
'click .widget-tpl' : '_submit',
+ 'click .add-saved-widget' : '_submit',
+ 'click .delete-widget-permanently' : '_delete',
+ 'click .widget-tpl .widget-title-action' : '_toggleInactive',
'keypress .widget-tpl' : '_submit',
'keydown' : 'keyboardAccessible'
},
+ // Inactive widget template to be used in available widgets.
+ inactiveWidgetTpl: null,
+
// Cache current selected widget
selected: null,
@@ -175,6 +181,10 @@
this.updateList();
+ this.inactiveWidgetTpl = _.template( api.Widgets.data.tpl.inactiveWidget );
+
+ this._createInactiveWidgets();
+
// If the available widgets panel is open and the customize controls are
// interacted with (i.e. available widgets panel is blurred) then close the
// available widgets panel. Also close on back button click.
@@ -214,6 +224,11 @@
this.select( firstVisible );
}
}
+
+ // Collapse inactive widgets upon searching.
+ this.$el.find( '.saved-widget' ).hide();
+ this.$el.find( '.widget-tpl.expanded' ).removeClass( 'expanded' );
+
},
// Changes visibility of available widgets
@@ -227,6 +242,183 @@
} );
},
+ /**
+ * Create the list of inactive widgets to be added to the available widgets sidebar onload.
+ *
+ * @since 4.6.0
+ */
+ _createInactiveWidgets : function () {
+ var self = this;
+
+ _( api.Widgets.data.availableWidgets ).each( function ( availableWidget ) {
+ _( availableWidget.saved_widgets ).each( function ( savedWidget ) {
+ self.addInactiveWidget( {
+ id: savedWidget.id,
+ type: savedWidget.type,
+ idBase: availableWidget.id_base,
+ } );
+ });
+ });
+ },
+
+ /**
+ * Adds a single inactive widget to the available widgets sidebar.
+ *
+ * @since 4.6.0
+ */
+ addInactiveWidget : function ( templateArgs ) {
+ var $inactiveWidget = $( this.inactiveWidgetTpl( templateArgs ) );
+
+ if ( 0 === this.$el.find( '.saved-widget[data-widget-id="' + templateArgs.id + '"]' ).length ) {
+ this.$el.find( '[data-id-base="' + templateArgs.idBase + '"]' ).first().after( $inactiveWidget );
+ }
+
+ return $inactiveWidget;
+ },
+
+ /**
+ * Show inactive widgets and hide active widgets.
+ *
+ * @since 4.6.0
+ */
+ updateVisibleSavedWidgets : function () {
+ var self = this;
+
+ // Remove state classes.
+ this.$el.find( '.widget-tpl.has-inactive-widgets, .widget-tpl.expanded' )
+ .removeClass( 'has-inactive-widgets' )
+ .removeClass( 'expanded' );
+
+ // Hide all inactive widgets
+ this.$el.find( '.saved-widget' )
+ .hide()
+ .removeClass( 'inactive-widget' );
+
+ _( api( 'sidebars_widgets[wp_inactive_widgets]' )() ).each( function( widgetId ) {
+ var $savedWidget = self.$el.find( '#saved-widget-' + widgetId ),
+ parsedWidgetId = parseWidgetId( widgetId ),
+ widgetControlId = 'widget_' + parsedWidgetId.id_base + '[' + parsedWidgetId.number + ']',
+ widgetControl = api.control( widgetControlId ),
+ widgetSetting = api( widgetControlId ),
+ title = ( widgetSetting ) ? widgetSetting().title : null,
+ $inWidgetTitle,
+ availableWidget;
+
+ if ( ! widgetControl ) {
+ return;
+ }
+
+ // If inactive widget HTML does not exist, create it.
+ if ( 0 === $savedWidget.length ) {
+ availableWidget = api.Widgets.availableWidgets.findWhere( { id_base: parsedWidgetId.id_base } );
+ $savedWidget = self.addInactiveWidget({
+ id: widgetId,
+ type: availableWidget.attributes.name,
+ idBase: parsedWidgetId.id_base,
+ });
+ }
+
+ $savedWidget.addClass( 'inactive-widget' );
+
+ self.$el.find( '.widget-tpl[data-id-base="' + parsedWidgetId.id_base + '"]' )
+ .not( '.saved-widget' )
+ .addClass( 'has-inactive-widgets' );
+
+ $inWidgetTitle = $savedWidget.find( '.in-widget-title' );
+ if ( title ) {
+ $inWidgetTitle.text( ': ' + title );
+ } else {
+ $inWidgetTitle.text( '' );
+ }
+ } );
+ },
+
+ /**
+ * Show or hide the list of inactive widgets per widget id base.
+ *
+ * @since 4.6.0
+ */
+ toggleInactive : function ( idBase ) {
+ var $widgetTpl = this.$el.find( '.has-inactive-widgets[data-id-base="' + idBase + '"]' ),
+ $inactiveWidgets = this.$el.find( '.saved-widget[data-id-base="' + idBase + '"].inactive-widget' );
+
+ $widgetTpl.toggleClass( 'expanded' );
+ $inactiveWidgets.stop().slideToggle( 'fast' );
+
+ if ( $widgetTpl.hasClass('expanded') ) {
+ this.select( $inactiveWidgets.first().focus() );
+ } else {
+ this.select( $widgetTpl.focus() );
+ }
+ },
+
+ /**
+ * Slides down a list of active widgets per widget type.
+ *
+ * @since 4.6.0
+ */
+ _toggleInactive : function ( event ) {
+ event.stopPropagation();
+ event.preventDefault();
+
+ var $widgetTpl = $( event.currentTarget ).closest( '.widget-tpl' );
+ this.toggleInactive( $widgetTpl.data('id-base') );
+ },
+
+ /**
+ * Permanently delete a widget.
+ *
+ * @since 4.6.0
+ */
+ _delete : function ( event ) {
+ var self = this,
+ $currentTarget = $( event.currentTarget ),
+ $savedWidgets = $currentTarget.closest( '.saved-widget' ),
+ widgetId = $savedWidgets.data( 'widget-id' ),
+ idBase = $savedWidgets.data( 'id-base' ),
+ settingId = widgetIdToSettingId( widgetId ),
+ control = api.Widgets.getWidgetFormControlForWidget( widgetId ),
+ deleteCallback,
+ inactiveSidebarWidgets,
+ inactiveWidgets,
+ i;
+
+ // Remove from sidebar.
+ inactiveWidgets = api( 'sidebars_widgets[wp_inactive_widgets]' );
+
+ inactiveSidebarWidgets = inactiveWidgets().slice();
+ i = _.indexOf( inactiveSidebarWidgets, widgetId );
+ if ( -1 !== i ) {
+ inactiveSidebarWidgets.splice( i, 1 );
+ inactiveWidgets.set( inactiveSidebarWidgets );
+ }
+
+ // Embed control to allow unembedded controls to trigger update calls.
+ if ( ! control.widgetControlEmdedded ) {
+ control.embedWidgetControl();
+ }
+ api( settingId ).set( false );
+
+ deleteCallback = function () {
+ var $remainingWidgets;
+
+ $( this ).remove();
+ api.control.remove( control.id );
+ control.container.remove();
+
+ // Remove drop down if widgets no longer exist
+ $remainingWidgets = self.$el.find( '.saved-widget[data-id-base="' + idBase + '"].inactive-widget' );
+ if ( ! $remainingWidgets.length ) {
+ self.$el.find( '.has-inactive-widgets[data-id-base="' + idBase + '"]' )
+ .removeClass( 'has-inactive-widgets expanded' );
+ }
+
+ wp.a11y.speak( l10n.itemDeleted );
+ };
+
+ $currentTarget.closest( '.saved-widget' ).slideUp( 'fast' , deleteCallback );
+ },
+
// Highlights a widget
select: function( widgetTpl ) {
this.selected = $( widgetTpl );
@@ -251,7 +443,7 @@
// Adds a selected widget to the sidebar
submit: function( widgetTpl ) {
- var widgetId, widget, widgetFormControl;
+ var widgetId, widget, widgetFormControl, isSavedWidget, addWidgetId;
if ( ! widgetTpl ) {
widgetTpl = this.selected;
@@ -263,13 +455,17 @@
this.select( widgetTpl );
- widgetId = $( this.selected ).data( 'widget-id' );
+ widgetId = widgetTpl.data( 'widget-id' );
+ isSavedWidget = widgetTpl.data( 'is-saved-widget' );
+
widget = this.collection.findWhere( { id: widgetId } );
- if ( ! widget ) {
+ if ( ( ! widget && ! isSavedWidget ) || widgetTpl.hasClass( 'saved-widget' ) ) {
return;
}
- widgetFormControl = this.currentSidebarControl.addWidget( widget.get( 'id_base' ) );
+ addWidgetId = ( isSavedWidget ) ? widgetId : widget.get( 'id_base' );
+ widgetFormControl = this.currentSidebarControl.addWidget( addWidgetId );
+
if ( widgetFormControl ) {
widgetFormControl.focus();
}
@@ -281,6 +477,9 @@
open: function( sidebarControl ) {
this.currentSidebarControl = sidebarControl;
+ // Create inactive widget controls that were moved to the inactive sidebar.
+ this.updateVisibleSavedWidgets();
+
// Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens
_( this.currentSidebarControl.getWidgetFormControls() ).each( function( control ) {
if ( control.params.is_wide ) {
@@ -316,17 +515,19 @@
this.$search.val( '' );
},
- // Add keyboard accessiblity to the panel
+ // Add keyboard accessibility to the panel
keyboardAccessible: function( event ) {
var isEnter = ( event.which === 13 ),
isEsc = ( event.which === 27 ),
isDown = ( event.which === 40 ),
isUp = ( event.which === 38 ),
+ isLeft = ( event.which === 37 ),
+ isRight = ( event.which === 39 ),
isTab = ( event.which === 9 ),
isShift = ( event.shiftKey ),
selected = null,
- firstVisible = this.$el.find( '> .widget-tpl:visible:first' ),
- lastVisible = this.$el.find( '> .widget-tpl:visible:last' ),
+ firstVisible = this.$el.find( '.widget-tpl:visible:first' ),
+ lastVisible = this.$el.find( '.widget-tpl:visible:last' ),
isSearchFocused = $( event.target ).is( this.$search ),
isLastWidgetFocused = $( event.target ).is( '.widget-tpl:visible:last' );
@@ -356,6 +557,16 @@
return;
}
+ // Toggle display when the user presses left or right on widget template with inactive widgets.
+ if ( isLeft || isRight ) {
+ if ( this.selected && (this.selected.hasClass( 'has-inactive-widgets' ) || this.selected.hasClass( 'saved-widget' ) ) ) {
+ var idBase = this.selected.data('id-base');
+ this.toggleInactive( idBase );
+ }
+
+ return;
+ }
+
// If enter pressed but nothing entered, don't do anything
if ( isEnter && ! this.$search.val() ) {
return;
@@ -478,6 +689,7 @@
if ( control.widgetControlEmbedded ) {
return;
}
+
control.widgetControlEmbedded = true;
widgetControl = $( control.params.widget_control );
@@ -491,6 +703,7 @@
control._setupReorderUI();
control._setupHighlightEffects();
control._setupUpdateUI();
+ control._setupMoveUI();
control._setupRemoveUI();
},
@@ -904,14 +1117,43 @@
},
/**
- * Set up event handlers for widget removal
+ * Set up event handlers for widget move.
+ *
+ * @since 4.6.0
*/
+ _setupMoveUI: function() {
+ var self = this, $moveBtn, $reorderToggle, replaceDeleteWithMove;
+
+ // Configure move button
+ $moveBtn = this.container.find( 'a.widget-control-remove' );
+
+ $moveBtn.on( 'click', function ( e ) {
+ e.preventDefault();
+
+ $reorderToggle = $( this ).closest( '.ui-sortable' ).find( '.reorder-toggle' );
+
+ $reorderToggle.trigger( 'click' );
+ self.openWidgetMoveArea();
+ } );
+
+ // Replace the Delete link with Move.
+ replaceDeleteWithMove = function () {
+ $moveBtn.text( l10n.moveBtnLabel ); // wp_widget_control() outputs the link as "Close"
+ $moveBtn.attr( 'title', l10n.moveBtnTooltip );
+ };
+
+ replaceDeleteWithMove();
+ },
+
+ /**
+ * Set up event handlers for widget removal.
+ */
_setupRemoveUI: function() {
- var self = this, $removeBtn, replaceDeleteWithRemove;
+ var self = this, $closeBtn;
// Configure remove button
- $removeBtn = this.container.find( 'a.widget-control-remove' );
- $removeBtn.on( 'click', function( e ) {
+ $closeBtn = this.container.find( 'a.widget-control-close' );
+ $closeBtn.on( 'click', function( e ) {
e.preventDefault();
// Find an adjacent element to add focus to when this widget goes away
@@ -926,7 +1168,7 @@
self.container.slideUp( function() {
var sidebarsWidgetsControl = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ),
- sidebarWidgetIds, i;
+ sidebarWidgetIds, i, inactiveWidgets, inactiveWidgetSetting;
if ( ! sidebarsWidgetsControl ) {
return;
@@ -941,20 +1183,21 @@
sidebarWidgetIds.splice( i, 1 );
sidebarsWidgetsControl.setting( sidebarWidgetIds );
+ // Add widget to inactive widgets.
+ inactiveWidgetSetting = api( 'sidebars_widgets[wp_inactive_widgets]' );
+ inactiveWidgets = inactiveWidgetSetting();
+ inactiveWidgets.push( self.params.widget_id );
+ inactiveWidgetSetting.set( [] ).set( _( inactiveWidgets ).unique() );
+
$adjacentFocusTarget.focus(); // keyboard accessibility
+
+ // Remove display none in case its added again.
+ self.container.show();
} );
} );
- replaceDeleteWithRemove = function() {
- $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
- $removeBtn.attr( 'title', l10n.removeBtnTooltip );
- };
-
- if ( this.params.is_new ) {
- api.bind( 'saved', replaceDeleteWithRemove );
- } else {
- replaceDeleteWithRemove();
- }
+ $closeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Close"
+ $closeBtn.attr( 'title', l10n.removeBtnTooltip );
},
/**
@@ -1113,6 +1356,7 @@
params.nonce = api.settings.nonce['update-widget'];
params.theme = api.settings.theme.stylesheet;
params.customized = wp.customize.previewer.query().customized;
+ params.delete_widget = ( false === self.setting() ) ? 1 : 0;
data = $.param( params );
$inputs = this._getInputs( $widgetContent );
@@ -1126,9 +1370,10 @@
if ( instanceOverride ) {
data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instanceOverride ) } );
- } else {
+ } else if ( $inputs.length ) {
data += '&' + $inputs.serialize();
}
+
data += '&' + $widgetContent.find( '~ :input' ).serialize();
if ( this._previousUpdateRequest ) {
@@ -1209,7 +1454,7 @@
* preview finishing loading.
*/
isChanged = ! isLiveUpdateAborted && ! _( self.setting() ).isEqual( r.data.instance );
- if ( isChanged ) {
+ if ( isChanged || false === self.setting() ) {
self.isWidgetUpdating = true; // suppress triggering another updateWidget
self.setting( r.data.instance );
self.isWidgetUpdating = false;
@@ -1326,7 +1571,6 @@
*/
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();
@@ -1485,9 +1729,43 @@
}
$moveWidgetArea.toggleClass( 'active', showOrHide );
+ self.toggleSaveForLater();
},
/**
+ * Open widget move area if control is not active already.
+ *
+ * @since 4.6.0
+ */
+ openWidgetMoveArea: function() {
+ var self = this, $moveWidgetArea;
+
+ $moveWidgetArea = this.container.find( '.move-widget-area' );
+
+ if( ! $moveWidgetArea.hasClass( 'active' ) ) {
+ self.toggleWidgetMoveArea();
+ }
+ },
+
+ /**
+ * Toggle visibility of the Save For Later/Inactive Widget Sidebar section.
+ *
+ * @since 4.6.0
+ */
+ toggleSaveForLater: function() {
+ var $moveWidgetArea, $saveForLater;
+
+ $moveWidgetArea = this.container.find( '.move-widget-area' );
+ $saveForLater = this.container.find( 'li[data-id="wp_inactive_widgets"]' );
+
+ if( $moveWidgetArea.hasClass( 'active' ) ) {
+ $saveForLater.show();
+ } else {
+ $saveForLater.hide();
+ }
+ },
+
+ /**
* Highlight the widget control and section
*/
highlightSectionAndControl: function() {
@@ -1708,20 +1986,9 @@
return;
}
- removedControl = api.Widgets.getWidgetFormControlForWidget( removedWidgetId );
-
- // Detect if widget control was dragged to another sidebar
- wasDraggedToAnotherSidebar = removedControl && $.contains( document, removedControl.container[0] ) && ! $.contains( self.$sectionContent[0], removedControl.container[0] );
-
- // Delete any widget form controls for removed widgets
- if ( removedControl && ! wasDraggedToAnotherSidebar ) {
- api.control.remove( removedControl.id );
- removedControl.container.remove();
- }
-
// Move widget to inactive widgets sidebar (move it to trash) if has been previously saved
// This prevents the inactive widgets sidebar from overflowing with throwaway widgets
- if ( api.Widgets.savedWidgetIds[removedWidgetId] ) {
+ if ( api.Widgets.savedWidgetIds[removedWidgetId] && 'sidebars_widgets[wp_inactive_widgets]' !== self.id ) {
inactiveWidgets = api.value( 'sidebars_widgets[wp_inactive_widgets]' )().slice();
inactiveWidgets.push( removedWidgetId );
api.value( 'sidebars_widgets[wp_inactive_widgets]' )( _( inactiveWidgets ).unique() );
@@ -1990,26 +2257,30 @@
setting.set( {} ); // mark dirty, changing from '' to {}
}
- controlConstructor = api.controlConstructor[controlType];
- widgetFormControl = new controlConstructor( settingId, {
- params: {
- settings: {
- 'default': settingId
+ widgetFormControl = api.control( settingId );
+ if ( ! widgetFormControl ) {
+
+ controlConstructor = api.controlConstructor[controlType];
+ widgetFormControl = new controlConstructor( settingId, {
+ params: {
+ settings: {
+ 'default': settingId
+ },
+ content: controlContainer,
+ sidebar_id: self.params.sidebar_id,
+ widget_id: widgetId,
+ widget_id_base: widget.get( 'id_base' ),
+ type: controlType,
+ is_new: ! isExistingWidget,
+ width: widget.get( 'width' ),
+ height: widget.get( 'height' ),
+ is_wide: widget.get( 'is_wide' ),
+ active: true
},
- content: controlContainer,
- sidebar_id: self.params.sidebar_id,
- widget_id: widgetId,
- widget_id_base: widget.get( 'id_base' ),
- type: controlType,
- is_new: ! isExistingWidget,
- width: widget.get( 'width' ),
- height: widget.get( 'height' ),
- is_wide: widget.get( 'is_wide' ),
- active: true
- },
- previewer: self.setting.previewer
- } );
- api.control.add( settingId, widgetFormControl );
+ previewer: self.setting.previewer
+ } );
+ api.control.add( settingId, widgetFormControl );
+ }
// Make sure widget is removed from the other sidebars
api.each( function( otherSetting ) {
@@ -2025,7 +2296,7 @@
i = _.indexOf( otherSidebarWidgets, widgetId );
if ( -1 !== i ) {
- otherSidebarWidgets.splice( i );
+ otherSidebarWidgets.splice( i, 1 );
otherSetting( otherSidebarWidgets );
}
} );
Index: src/wp-admin/css/customize-controls.css
===================================================================
--- src/wp-admin/css/customize-controls.css (revision 37658)
+++ src/wp-admin/css/customize-controls.css (working copy)
@@ -1626,4 +1626,8 @@
#available-widgets-list {
top: 140px;
}
+
+ .wp-customizer #available-widgets .saved-widget-controls {
+ visibility: visible;
+ }
}
Index: src/wp-admin/css/customize-widgets.css
===================================================================
--- src/wp-admin/css/customize-widgets.css (revision 37658)
+++ src/wp-admin/css/customize-widgets.css (working copy)
@@ -212,6 +212,16 @@
display: block;
}
+#customize-theme-controls .widget-control-remove:hover {
+ color: #0096dd;
+}
+#customize-theme-controls .widget-control-close {
+ color: #a00;
+}
+#customize-theme-controls .widget-control-close:hover {
+ color: #f00;
+}
+
/**
* Styles for new widget addition panel
*/
@@ -265,7 +275,92 @@
opacity: 0.4;
}
+#available-widgets .widget-tpl {
+ padding-right: 35px;
+}
+#available-widgets .saved-widget {
+ margin-left: 48px;
+ border-left: 1px #e4e4e4 solid;
+ padding: 10px 20px 10px;
+ background-color: white;
+ display: none;
+ cursor: default;
+}
+
+#available-widgets .saved-widget:last-of-type {
+ margin-bottom: 40px;
+}
+
+#available-widgets .saved-widget h3 {
+ font-size: 1em;
+ margin: 0;
+}
+
+#available-widgets .saved-widget a {
+ text-decoration: none;
+}
+
+#available-widgets .saved-widget-controls {
+ visibility: hidden;
+}
+
+#available-widgets .saved-widget.selected .saved-widget-controls,
+#available-widgets .saved-widget:hover .saved-widget-controls {
+ visibility: visible;
+}
+
+#available-widgets .delete-widget-permanently {
+ color: #a00;
+}
+
+#available-widgets .delete-widget-permanently:hover {
+ color: #f00;
+}
+
+#available-widgets .widget-tpl.expanded a.widget-action:after {
+ content: "\f142";
+}
+
+#available-widgets .has-inactive-widgets .widget-action {
+ display: block;
+ position: relative;
+ top: 50%;
+ width: 20px;
+ margin: 0 auto;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+
+#available-widgets .has-inactive-widgets .widget-title-action {
+ display: block;
+ position: absolute;
+ right: 0;
+ top: 0;
+ height:100%;
+ width: 30px;
+ background-color: #eee;
+}
+
+#available-widgets .saved-widget.widget-title:before {
+ display: none;
+}
+
+#available-widgets .widget-tpl.expanded .widget-title-action,
+#available-widgets .has-inactive-widgets .widget-title-action:hover {
+ border-left: 1px #e4e4e4 solid;
+ background-color: #FFFFFF;
+}
+
+#available-widgets .has-inactive-widgets .widget-title-action:hover .widget-action {
+ color: #555d66;
+}
+
+#available-widgets .has-inactive-widgets .widget-top a.widget-action:after {
+ margin: 0 auto;
+}
+
/**
* Widget Icon styling
* No plurals in naming.
@@ -445,6 +540,9 @@
.widget-reorder-nav span:before {
line-height: 39px;
}
+ #available-widgets .widget-top {
+ position: static;
+ }
#customize-theme-controls .widget-area-select li {
padding: 9px 15px 11px 42px;
}