Make WordPress Core

Opened 13 months ago

Last modified 13 months ago

#39362 new enhancement

Checkbox control for 'Automatically add new top-level pages to this menu' not wrapped in checkbox customize control

Reported by: dingo_bastard Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7
Component: Customize Keywords:
Focuses: Cc:


When you go to set the menu in the customizer you have the option to check the Menu Options for Adding the top-level pages automatically to the current menu. This option isn't wrapped in the

<li class="customize-control customize-control-checkbox"></li>

This isn't a bug, but a hindrance if you want to customize the look of the customizer and would like to have all the checkboxes look the same.

One could say that all one needs to add is the style for


but this is not true if you have a custom control that has a checkbox input, and you want to style it differently. In that case you'd need to overwrite additionally. Plus the current style is styled via .customize-control-checkbox input[type="checkbox"] as well as with just input[type="checkbox"].

Attachments (2)

39362.patch (868 bytes) - added by dingo_bastard 13 months ago.
Proposed patch for the issue
39362.2.patch (885 bytes) - added by dingo_bastard 13 months ago.
Patch of the customize-nav-menus.js

Download all attachments as: .zip

Change History (4)

13 months ago

Proposed patch for the issue

#1 @celloexpressions
13 months ago

The customize control class and li should already be added outside the content_template to reflect the actual control type, which in this case is specific to the nav menu auto-add control.

I don't remember off the top of my head why this isn't a regular checkbox control, I think it's so that its JS logic can be organized within the control's JS structure. I don't think we could add another li like 39362.patch does, but it would probably be okay to add the checkbox class to the existing .customize-control here if there's a clean way to do it.

#2 @dingo_bastard
13 months ago

From what I see when I inspect it, it's wrapped in a

<li id="customize-control-nav_menu-123-auto-add" class="customize-control customize-control-nav_menu_auto_add" style="display: list-item;"></li>

If there could be added a customize-control-checkbox class without it disrupting anything, that would also work as well.

In the \wp-admin\js\customize-nav-menus.js there is (I guess) a wrapper for that control on line 995 so my guess that the class should be added there

// Add the control for managing the menu auto_add.
menuAutoAddControlId = section.id + '[auto_add]';
menuAutoAddControl = api.control( menuAutoAddControlId );
if ( ! menuAutoAddControl ) {
	menuAutoAddControl = new api.controlConstructor.nav_menu_auto_add( menuAutoAddControlId, {
		params: {
			type: 'nav_menu_auto_add',
			content: '<li id="customize-control-' + section.id.replace( '[', '-' ).replace( ']', '' ) + '-auto-add" class="customize-control customize-control-nav_menu_auto_add customize-control-checkbox"></li>', // @todo core should do this for us
			label: '',
			active: true,
			section: section.id,
			priority: 999,
			settings: {
				'default': section.id
	} );
	api.control.add( menuAutoAddControl.id, menuAutoAddControl );
	menuAutoAddControl.active.set( true );

I added it in my local testing enviroment, but haven't tested to see if this will affect the behavior in any way.

13 months ago

Patch of the customize-nav-menus.js

Note: See TracTickets for help on using tickets.