Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#40189 closed defect (bug) (duplicate)

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

Reported by: goth69 Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.7
Component: Customize Keywords:
Focuses: javascript Cc:


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'.

Attachments (5)

metabox-prefs.png (142.0 KB) - added by westonruter 5 years ago.
metabox-prefs-with-test-metabox.png (274.1 KB) - added by goth69 5 years ago.
metaboxes-under-boxes.png (111.5 KB) - added by goth69 5 years ago.
This is how the meta boxes appear (toggles)
test-metabox-is-not-visible.png (183.2 KB) - added by goth69 5 years ago.
But neither the the WooCommerce Endpoints meta box nor my example do not appear here.
40189.0.diff (1.0 KB) - added by westonruter 5 years ago.

Download all attachments as: .zip

Change History (9)

#1 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 4.7.4
  • Summary changed from Changeset #39379 fix does not work with extensions to '.metabox-prefs:first' is not a reliable selector for meta boxes in nav menus

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

#2 @westonruter
5 years ago

  • Keywords reporter-feedback added
  • Milestone changed from 4.7.4 to Awaiting Review
  • Version changed from 4.7.3 to 4.7

@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.

#3 @goth69
5 years ago

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.

5 years ago

This is how the meta boxes appear (toggles)

5 years ago

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

5 years ago

#4 @westonruter
5 years ago

  • Keywords reporter-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

@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.

Note: See TracTickets for help on using tickets.