'.metabox-prefs:first' is not a reliable selector for meta boxes in nav menus

[goth69]

The original ticket is #38952.

If I use a plugin (e.g. WooCommerce), which is adding a meta box next to the advanced menu properties, the ability to show and hide menu property fields will be broken again.

WooCommerce adds its endpoint meta box this way:

add_meta_box( 'woocommerce_endpoints_nav_link', __( 'WooCommerce Endpoints', 'woocommerce' ), array( $this, 'nav_menu_links' ), 'nav-menus', 'side', 'low' );

After the rendering the first meta box with HTML class "metabox-prefs" will be the WooCommerce Metabox and then comes the WordPress meta box with the toggles. Because of this, the fix will be broken.

The broken code is located at line '940' in the javascript file (customize-nav-menus.js).

fieldActiveToggles = api.panel( 'nav_menus' ).contentContainer.find( '.metabox-prefs:first' ).find( '.hide-column-tog' );

The selector '.metabox-prefs:first' is wrong in this case, because we cannot rely on the position of a metabox in an extensible container. The 'fieldActiveToggles' variable will be empty, because the WooCommerce meta box has no element with class 'hide-column-tog'.

[SergeyBiryukov]

Hi @goth69, welcome to WordPress Trac! Thanks for the report.

[westonruter]

@goth69 hi, I'm not sure I exactly understand what the problem is. If you could add a patch that demonstrates the fix, that would be helpful. Also, if you can show the DOM you are looking at, as with a screenshot like metabox-prefs.png​. Also, you may want to report this issue to WooCommerce so they can also be involved.

[goth69]

Hi there,

i have got a simple example according to the WooCommerce Endpoints meta box.

function add_nav_menu_meta_boxes() {
        add_meta_box( 'test-metabox', 'Test MetaBox Title', 'test_metabox_callback', 'nav-menus', 'side', 'low' );
}
add_action( 'admin_init', 'add_nav_menu_meta_boxes' );

function test_metabox_callback() { 
        echo '<div>Test Content</div>';
}

I think the behavior of the sample meta box is not the appropriate behavior, because the meta box does not appear in Customizer, only the meta box toggle. I will add some screenshots, too.

My workaround for the problem is using a '.metabox-prefs' selector instead of '.metabox-prefs:first' selector.

[goth69]

This is how the meta boxes appear (toggles)

[goth69]

But neither the the WooCommerce Endpoints meta box nor my example do not appear here.

[westonruter]

@goth69 Thanks for the screenshots.

Ok, the fundamental issue here is that metaboxes do not work in the customizer at all. Metaboxes are a PHP-centric approach to adding custom fields to screens in the admin. The customizer, on the other hand, is a single page application that requires a JavaScript-centric approach for extending nav menu items with custom fields. See #18584. This has to be addressed before looking at adding support for toggling which nav menu item custom fields are displayed.

To add new checkboxes here it will really require much more than adding another selector on the line indicated. It will also require a change in selectors in wp.customize.Menus.MenusPanel.ready, but even more so it will creating a function like wp.customize.Menus.MenusPanel.saveManageColumnsState which specifically is responsible for making the closed-postboxes admin-ajax requests, where the former only does hidden-columns admin ajax requests for the nav menus screen.

In any case, this is really a duplicate of #18584.