Customizer Menus: add hooks to the WP_Customize_Nav_Menus class so it can be extended

[imath]

Hi,

First, congrats for the great work in this area, it's a really interesting experience to set the nav menus using the customizer.

In BuddyPress, we are using a specific meta box into the WP Nav Menu administration screen to let Administrators build a dynamic user navigation. Depending on the user who is connected, the different links are customized at run time. We introduced this feature in version 1.9.

We have a ​ticket on our trac that suggests to use the new Customizer Nav menus feature. I've explored a bit the WP_Customize_Nav_Menus and, unless i've missed something, i haven't found how to extend it. I guess we could create a new customizer control or fake a post type and corresponding entries, but i thought let's ask WordPress if it's possible to adapt the customizer before completely rebuilding the BP dynamic user navigation feature :)

I saw in the code a 'todo' comment about using add_meta_box/do_accordion_section so maybe this request comes too early, if so i'm sorry.

The request: would it be possible to include 2 filters inside the class ?

• one to let plugins (BuddyPress for my case) "register" a new item type in WP_Customize_Nav_Menus->available_item_types()
• another to populate the corresponding items in WP_Customize_Nav_Menus->ajax_load_available_items()

I've tried to limit the number of hooks by editing the way WP_Customize_Nav_Menus->available_items_template() is building the templates so that you keep the control on how the accodion sections are structured.

I've quickly wrote the attached patch to illustrate my request.

Thanks a lot for your time.

[ocean90]

#32712 was marked as a duplicate.

[celloexpressions]

I like the idea of this, although the patch would need some minor adjustments, and note that this will conflict with at least one other patch that's pending. It should also be possible to add a custom section that has something more along the lines of the links section rather than type-style items, so it would be nice if we can easily support that with one filter (for these, load available types wouldn't be a thing). May just want an action in the available items panel for that, separately.

This would be the time to make a decision on using do_accordion_sections instead, or otherwise we can remove that todo.

[designsimply]

Cross-referencing a similar request from the Menu Customizer plugin support forum:
​https://wordpress.org/support/topic/dont-forget-an-action-hook-for-adding-additional-menu-fields?replies=4

[designsimply]

/cc @helgatheviking @smartpixels @sevenspark (because you commented on this topic in other places and might want to help test the patch)

[helgatheviking]

I would test a git branch, but typically struggle with SVN stuff.

[mercime]

I have tested this patch along with a patch for the BuddyPress menus in the customizer. Results are shown using the Twenty Fifteen and Twenty Fourteen themes as posted by @imath above at ​https://buddypress.trac.wordpress.org/ticket/6509

[celloexpressions]

#32827 was marked as a duplicate.

[Chouby]

Coming from #32827, I tested the patch proposed by @imath. The 2 filters look good to reproduce similar things we can do in Appearance->Menus with add_meta_box() :)

[obenland]

No recent movement, maybe in a future release.

[celloexpressions]

This is part of #32832 and should really happen in 4.3. I'll make sure the patch is ready to go in time for beta 3/test and determine the best approach to providing hooks here, and re-punt if necessary.

[valendesigns]

We've made a lot of changes since this patch was created, and I'm fairly certain it's not going to apply cleanly anymore. I started working on a new patch yesterday that I'll upload tomorrow once I sort out the dynamic type_label issue I'm having. Today is my only day off, or I would be working on it now. I just wanted to let you guys know so we don't double our efforts. There will be a working patch with unit tests tomorrow afternoon.

[valendesigns]

Patch 32708.2.diff​ adds two new filters and supporting unit tests. If you need to add a custom type label then you will need to use the wp_setup_nav_menu_item to achieve this. I'll write a Make post explaining exactly how to use the new filters and modify the type label. For now you can see how things work by looking at the unit tests. Let's get this tested and committed before beta4.

[imath]

hi @valendesigns

Great work on the patch, thank you very much. Just tested it and it's working great.

Let's get this tested and committed before beta4.

+1 :)

[obenland]

@westonruter, can you take a look before beta4?

[valendesigns]

refresh

[celloexpressions]

Patch looks good at a glance. @valendesigns - let's document this with all the other filters in the "Customizing the Customizer Menus Experience" post, if you can write this section we'll coordinate on getting that in and sequenced with the rest. I have it roughly outlined in my head.

[westonruter]

Replying to obenland:

@westonruter, can you take a look before beta4?

I'm looking at this now.

[westonruter]

Additional changes: ​https://github.com/xwp/wordpress-develop/compare/8dbba45...7781f1d

[westonruter]

In 32708.4.diff​:

• Flatten available_item_types() return array; normalize variable use for 'type' vs 'object'
• Also prevent objects of different types with the same name from colliding
• Add assertion for setting value's type_label property
• Use non-static call to available_item_types; supply missing return tag, remove unnecessary (array) fix coding standards
• Add @since tags and some other missing PhpDoc tags.
• Clean whitespace
• Use strict equality operators

See diff of additional changes: ​https://github.com/xwp/wordpress-develop/compare/8dbba45...7781f1d

[valendesigns]

Updated the patch to fix the AJAX test.

[westonruter]

In 33366:

Customizer: Introduce customize_nav_menu_available_item_types and customize_nav_menu_available_items filters.

Allows for new available menu item types/objects to be registered in addition to filtering the available items that are returned for each menu item type/object.

Props valendesigns, imath, westonruter.
See #32832.
Fixes #32708.

[valendesigns]

I've added a small patch that fixes a regression introduced in 33366. Basically when loading more menu items there's an improperly name data variable in api.Menus.AvailableMenuItemsPanelView which wasn't updated and causes a JS error.

[westonruter]

In 33392:

Customizer: Update JS variable to reference renamed data attribute for available nav menu object.

Fixes regression for a change that was missed in [33366].

Props valendesigns.
Fixes #32708.

[Chouby]

Hi!

Thank you for fixing this ticket. It should help plugins adding custom menu items. However by default we get a standard form, and I don't see how to customize it.

Currently, in Polylang, I have a custom menu item with a custom form. Rendering the form can be achieved either by using the 'wp_edit_nav_menu_walker filter' or JS. I use the second as the first is subject to conflicts with other plugins. Saving the user input is obviously done in a function hooked to the action 'wp_update_nav_menu_item'.

Now I am trying to include this custom menu item in the customizer menus and hopefully to be ready for the final release of WP 4.3, but I am lacking basic comprehension of the internals of the customizer menus.

Adding the menu item using the filters provided by this ticket was straightforward. I have two issues:

1. Rendering the form is not as obvious for me. In Appearance->menus, I do it binding a function to the click events on the form 'update-nav-menu'. Here I tried the same approach using the form 'customize-controls' but for some reason, this does not react on clicks when we are adding a menu item (thus this works for pre-existing items, not the newly added ones).
2. Of course, changes to the form are not propagated to the preview and worse, the 'wp_update_nav_menu_item' is not fired when I click on save and publish (for what I understood, the action is fired only for modified items, but currently my custom form does not inform the customizer of its changes).

Is there a documentation somewhere which explains the internals of the customizer menus?
How the form is created when adding a new item? Do we need a new filter to customize the form?
How to propagate changes to the preview and save them to the DB?

[westonruter]

@Chouby: The work in this ticket is just a first step toward extensibility of menus in the Customizer. All of your questions are good ones, and they'll be specifically addressed in #32832.