Make WordPress Core

Opened 7 years ago

Last modified 3 years 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_d's profile dingo_d Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7
Component: Customize Keywords: 2nd-opinion
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 7 years ago.
Proposed patch for the issue
39362.2.patch (885 bytes) - added by dingo_bastard 7 years ago.
Patch of the customize-nav-menus.js

Download all attachments as: .zip

Change History (6)

7 years ago

Proposed patch for the issue

#1 @celloexpressions
7 years 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
7 years 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 = + '[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-' + '[', '-' ).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,
			priority: 999,
			settings: {
	} );
	api.control.add(, menuAutoAddControl ); true );

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

7 years ago

Patch of the customize-nav-menus.js

#4 @dd32
5 years ago

  • Reporter changed from dingo_bastard to dingo_d

#5 @celloexpressions
3 years ago

  • Keywords 2nd-opinion added

39362.2.patch looks reasonable, but I'm not entirely sure this is a necessary change. If a plugin wants to re-style all checkboxes, they could target based on input type attribute instead of this class.

It would also be worth looking into the todo reference on the line being change for further context.

Note: See TracTickets for help on using tickets.