: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
* Make sure that each menu item control has the proper depth.
reflowMenuItems: function() {
menuItemControls = menuControl.getMenuItemControls(),
reflowRecursively = function( context ) {
var currentMenuItemControls = [],
thisParent = context.currentParent;
_.each( context.menuItemControls, function( menuItemControl ) {
if ( thisParent === menuItemControl.setting().menu_item_parent ) {
currentMenuItemControls.push( menuItemControl );
// @todo We could remove this item from menuItemControls now, for efficiency.
currentMenuItemControls.sort( function( a, b ) {
return a.setting().position - b.setting().position;
_.each( currentMenuItemControls, function( menuItemControl ) {
context.currentAbsolutePosition += 1;
menuItemControl.priority.set( context.currentAbsolutePosition ); // This will change the sort order.
if ( ! menuItemControl.container.hasClass( 'menu-item-depth-' + String( context.currentDepth ) ) ) {
_.each( menuItemControl.container.prop( 'className' ).match( /menu-item-depth-\d+/g ), function( className ) {
menuItemControl.container.removeClass( className );
menuItemControl.container.addClass( 'menu-item-depth-' + String( context.currentDepth ) );
menuItemControl.container.data( 'item-depth', context.currentDepth );
// Process any children items.
context.currentDepth += 1;
context.currentParent = menuItemControl.params.menu_item_id;
reflowRecursively( context );
context.currentDepth -= 1;
context.currentParent = thisParent;
// Update class names for reordering controls.
if ( currentMenuItemControls.length ) {
_( currentMenuItemControls ).each(function( menuItemControl ) {
menuItemControl.container.removeClass( 'move-up-disabled move-down-disabled move-left-disabled move-right-disabled' );
if ( 0 === context.currentDepth ) {
menuItemControl.container.addClass( 'move-left-disabled' );
} else if ( 10 === context.currentDepth ) {
menuItemControl.container.addClass( 'move-right-disabled' );
currentMenuItemControls[0].container
.addClass( 'move-up-disabled' )
.addClass( 'move-right-disabled' )
.toggleClass( 'move-down-disabled', 1 === currentMenuItemControls.length );
currentMenuItemControls[ currentMenuItemControls.length - 1 ].container
.addClass( 'move-down-disabled' )
.toggleClass( 'move-up-disabled', 1 === currentMenuItemControls.length );
menuItemControls: menuItemControls,
currentAbsolutePosition: 0
menuControl.updateInvitationVisibility( menuItemControls );
menuControl.container.find( '.reorder-toggle' ).toggle( menuItemControls.length > 1 );
* Note that this function gets debounced so that when a lot of setting
* changes are made at once, for instance when moving a menu item that
* has child items, this function will only be called once all of the
* settings have been updated.
debouncedReflowMenuItems: _.debounce( function() {
this.reflowMenuItems.apply( this, arguments );
* Add a new item to this menu.
* @param {Object} item - Value for the nav_menu_item setting to be created.
* @return {wp.customize.Menus.controlConstructor.nav_menu_item} The newly-created nav_menu_item control instance.
addItemToMenu: function( item ) {
var menuControl = this, customizeId, settingArgs, setting, menuItemControl, placeholderId, position = 0, priority = 10,
originalItemId = item.id || '';
_.each( menuControl.getMenuItemControls(), function( control ) {
if ( false === control.setting() ) {
priority = Math.max( priority, control.priority() );
if ( 0 === control.setting().menu_item_parent ) {
position = Math.max( position, control.setting().position );
api.Menus.data.defaultSettingValues.nav_menu_item,
nav_menu_term_id: menuControl.params.menu_id,
delete item.id; // Only used by Backbone.
placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
customizeId = 'nav_menu_item[' + String( placeholderId ) + ']';
transport: api.Menus.data.settingTransport,
setting = api.create( customizeId, customizeId, {}, settingArgs );
setting.set( item ); // Change from initial empty object to actual item to mark as dirty.
// Add the menu item control.
menuItemControl = new api.controlConstructor.nav_menu_item( customizeId, {
menu_item_id: placeholderId,
original_item_id: originalItemId
api.control.add( menuItemControl );
menuControl.debouncedReflowMenuItems();
wp.a11y.speak( api.Menus.data.l10n.itemAdded );
* Show an invitation to add new menu items when there are no menu items.
* @param {wp.customize.controlConstructor.nav_menu_item[]} optionalMenuItemControls
updateInvitationVisibility: function ( optionalMenuItemControls ) {
var menuItemControls = optionalMenuItemControls || this.getMenuItemControls();
this.container.find( '.new-menu-item-invitation' ).toggle( menuItemControls.length === 0 );
* Extends wp.customize.controlConstructor with control constructor for
* menu_location, menu_item, nav_menu, and new_menu.
$.extend( api.controlConstructor, {
nav_menu_location: api.Menus.MenuLocationControl,
nav_menu_item: api.Menus.MenuItemControl,
nav_menu: api.Menus.MenuControl,
nav_menu_name: api.Menus.MenuNameControl,
nav_menu_locations: api.Menus.MenuLocationsControl,
nav_menu_auto_add: api.Menus.MenuAutoAddControl
* Extends wp.customize.panelConstructor with section constructor for menus.
$.extend( api.panelConstructor, {
nav_menus: api.Menus.MenusPanel
* Extends wp.customize.sectionConstructor with section constructor for menu.
$.extend( api.sectionConstructor, {
nav_menu: api.Menus.MenuSection,
new_menu: api.Menus.NewMenuSection
* Init Customizer for menus.
api.bind( 'ready', function() {
// Set up the menu items panel.
api.Menus.availableMenuItemsPanel = new api.Menus.AvailableMenuItemsPanelView({
collection: api.Menus.availableMenuItems
api.bind( 'saved', function( data ) {
if ( data.nav_menu_updates || data.nav_menu_item_updates ) {
api.Menus.applySavedData( data );
* Reset the list of posts created in the customizer once published.
* The setting is updated quietly (bypassing events being triggered)
* so that the customized state doesn't become immediately dirty.
api.state( 'changesetStatus' ).bind( function( status ) {
if ( 'publish' === status ) {
api( 'nav_menus_created_posts' )._value = [];
// Open and focus menu control.
api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
* When customize_save comes back with a success, make sure any inserted
* nav menus and items are properly re-added with their newly-assigned IDs.
* @alias wp.customize.Menus.applySavedData
* @param {Array} data.nav_menu_updates
* @param {Array} data.nav_menu_item_updates
api.Menus.applySavedData = function( data ) {
var insertedMenuIdMapping = {}, insertedMenuItemIdMapping = {};
_( data.nav_menu_updates ).each(function( update ) {
var oldCustomizeId, newCustomizeId, customizeId, oldSetting, newSetting, setting, settingValue, oldSection, newSection, wasSaved, widgetTemplate, navMenuCount, shouldExpandNewSection;
if ( 'inserted' === update.status ) {
if ( ! update.previous_term_id ) {
throw new Error( 'Expected previous_term_id' );
if ( ! update.term_id ) {
throw new Error( 'Expected term_id' );
oldCustomizeId = 'nav_menu[' + String( update.previous_term_id ) + ']';
if ( ! api.has( oldCustomizeId ) ) {
throw new Error( 'Expected setting to exist: ' + oldCustomizeId );
oldSetting = api( oldCustomizeId );
if ( ! api.section.has( oldCustomizeId ) ) {
throw new Error( 'Expected control to exist: ' + oldCustomizeId );
oldSection = api.section( oldCustomizeId );
settingValue = oldSetting.get();
throw new Error( 'Did not expect setting to be empty (deleted).' );
settingValue = $.extend( _.clone( settingValue ), update.saved_value );
insertedMenuIdMapping[ update.previous_term_id ] = update.term_id;
newCustomizeId = 'nav_menu[' + String( update.term_id ) + ']';
newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
transport: api.Menus.data.settingTransport,
shouldExpandNewSection = oldSection.expanded();
if ( shouldExpandNewSection ) {
newSection = new api.Menus.MenuSection( newCustomizeId, {
title: settingValue.name,
customizeAction: api.Menus.data.l10n.customizingMenus,
priority: oldSection.priority.get(),
// Add new control for the new menu.
api.section.add( newSection );
// Update the values for nav menus in Navigation Menu controls.
api.control.each( function( setting ) {
if ( ! setting.extended( api.controlConstructor.widget_form ) || 'nav_menu' !== setting.params.widget_id_base ) {
var select, oldMenuOption, newMenuOption;
select = setting.container.find( 'select' );
oldMenuOption = select.find( 'option[value=' + String( update.previous_term_id ) + ']' );
newMenuOption = select.find( 'option[value=' + String( update.term_id ) + ']' );
newMenuOption.prop( 'selected', oldMenuOption.prop( 'selected' ) );
// Delete the old placeholder nav_menu.
oldSetting.callbacks.disable(); // Prevent setting triggering Customizer dirty state when set.
oldSetting._dirty = false;
// Remove nav_menu section.
oldSection.container.remove();
api.section.remove( oldCustomizeId );
// Update the nav_menu widget to reflect removed placeholder menu.
api.each(function( setting ) {
if ( /^nav_menu\[/.test( setting.id ) && false !== setting() ) {
widgetTemplate = $( '#available-widgets-list .widget-tpl:has( input.id_base[ value=nav_menu ] )' );
widgetTemplate.find( '.nav-menu-widget-form-controls:first' ).toggle( 0 !== navMenuCount );
widgetTemplate.find( '.nav-menu-widget-no-menus-message:first' ).toggle( 0 === navMenuCount );
widgetTemplate.find( 'option[value=' + String( update.previous_term_id ) + ']' ).remove();
// Update the nav_menu_locations[...] controls to remove the placeholder menus from the dropdown options.
wp.customize.control.each(function( control ){
if ( /^nav_menu_locations\[/.test( control.id ) ) {
control.container.find( 'option[value=' + String( update.previous_term_id ) + ']' ).remove();
// Update nav_menu_locations to reference the new ID.
api.each( function( setting ) {
var wasSaved = api.state( 'saved' ).get();
if ( /^nav_menu_locations\[/.test( setting.id ) && setting.get() === update.previous_term_id ) {
setting.set( update.term_id );
setting._dirty = false; // Not dirty because this is has also just been done on server in WP_Customize_Nav_Menu_Setting::update().
api.state( 'saved' ).set( wasSaved );
if ( shouldExpandNewSection ) {
} else if ( 'updated' === update.status ) {
customizeId = 'nav_menu[' + String( update.term_id ) + ']';
if ( ! api.has( customizeId ) ) {
throw new Error( 'Expected setting to exist: ' + customizeId );
// Make sure the setting gets updated with its sanitized server value (specifically the conflict-resolved name).
setting = api( customizeId );
if ( ! _.isEqual( update.saved_value, setting.get() ) ) {
wasSaved = api.state( 'saved' ).get();
setting.set( update.saved_value );
api.state( 'saved' ).set( wasSaved );
// Build up mapping of nav_menu_item placeholder IDs to inserted IDs.
_( data.nav_menu_item_updates ).each(function( update ) {
if ( update.previous_post_id ) {
insertedMenuItemIdMapping[ update.previous_post_id ] = update.post_id;
_( data.nav_menu_item_updates ).each(function( update ) {
var oldCustomizeId, newCustomizeId, oldSetting, newSetting, settingValue, oldControl, newControl;
if ( 'inserted' === update.status ) {
if ( ! update.previous_post_id ) {
throw new Error( 'Expected previous_post_id' );
if ( ! update.post_id ) {
throw new Error( 'Expected post_id' );
oldCustomizeId = 'nav_menu_item[' + String( update.previous_post_id ) + ']';
if ( ! api.has( oldCustomizeId ) ) {
throw new Error( 'Expected setting to exist: ' + oldCustomizeId );
oldSetting = api( oldCustomizeId );
if ( ! api.control.has( oldCustomizeId ) ) {
throw new Error( 'Expected control to exist: ' + oldCustomizeId );
oldControl = api.control( oldCustomizeId );
settingValue = oldSetting.get();
throw new Error( 'Did not expect setting to be empty (deleted).' );
settingValue = _.clone( settingValue );
// If the parent menu item was also inserted, update the menu_item_parent to the new ID.
if ( settingValue.menu_item_parent < 0 ) {
if ( ! insertedMenuItemIdMapping[ settingValue.menu_item_parent ] ) {
throw new Error( 'inserted ID for menu_item_parent not available' );
settingValue.menu_item_parent = insertedMenuItemIdMapping[ settingValue.menu_item_parent ];
// If the menu was also inserted, then make sure it uses the new menu ID for nav_menu_term_id.
if ( insertedMenuIdMapping[ settingValue.nav_menu_term_id ] ) {
settingValue.nav_menu_term_id = insertedMenuIdMapping[ settingValue.nav_menu_term_id ];
newCustomizeId = 'nav_menu_item[' + String( update.post_id ) + ']';
newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
transport: api.Menus.data.settingTransport,
newControl = new api.controlConstructor.nav_menu_item( newCustomizeId, {
section: 'nav_menu[' + String( settingValue.nav_menu_term_id ) + ']',
priority: oldControl.priority.get(),
'default': newCustomizeId
menu_item_id: update.post_id
oldControl.container.remove();
api.control.remove( oldCustomizeId );
// Add new control to take its place.
api.control.add( newControl );
// Delete the placeholder and preview the new setting.
oldSetting.callbacks.disable(); // Prevent setting triggering Customizer dirty state when set.
oldSetting._dirty = false;
newControl.container.toggleClass( 'menu-item-edit-inactive', oldControl.container.hasClass( 'menu-item-edit-inactive' ) );
* Update the settings for any nav_menu widgets that had selected a placeholder ID.
_.each( data.widget_nav_menu_updates, function( widgetSettingValue, widgetSettingId ) {
var setting = api( widgetSettingId );
setting._value = widgetSettingValue;
setting.preview(); // Send to the preview now so that menu refresh will use the inserted menu.
* Focus a menu item control.
* @alias wp.customize.Menus.focusMenuItemControl
* @param {string} menuItemId
api.Menus.focusMenuItemControl = function( menuItemId ) {
var control = api.Menus.getMenuItemControl( menuItemId );
* Get the control for a given menu.
* @alias wp.customize.Menus.getMenuControl
* @return {wp.customize.controlConstructor.menus[]}
api.Menus.getMenuControl = function( menuId ) {
return api.control( 'nav_menu[' + menuId + ']' );
* Given a menu item ID, get the control associated with it.
* @alias wp.customize.Menus.getMenuItemControl
* @param {string} menuItemId
api.Menus.getMenuItemControl = function( menuItemId ) {
return api.control( menuItemIdToSettingId( menuItemId ) );
* @alias wp.customize.Menus~menuItemIdToSettingId
* @param {string} menuItemId