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

[dingo_d]

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

.input[type="checkbox"]

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"].

[dingo_bastard]

Proposed patch for the issue

[celloexpressions]

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.

[dingo_bastard]

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.

[dingo_bastard]

Patch of the customize-nav-menus.js

[celloexpressions]

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.