Enable open on click for Page List inside Navigation.

[tellthemachines]

Description

Depends on #33775 and is currently pointed to that branch.

Enables open on click functionality for Page List blocks nested inside Navigation, whenever the open on click option is set in Navigation.

Consolidates the front end script from Submenu with the Navigation one, so that it can be used by all child blocks of Navigation.

When open on click is set, in the editor, submenus really open on focus. Because the block is server-rendered, it's tricky to add click events in the editor, and I think this is a good compromise. For mouse/touch users, it will work the same, whereas for keyboard users it shouldn't be a major issue because Select mode already allows skipping nested blocks when tabbing through items.

How has this been tested?

Add a Navigation block with a Page List inside it, and enable "open on click" in the Navigation block sidebar. Verify that Page List submenus open on click instead of hover/focus.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[jasmussen]

Nice, this feels close to me! When the click option is toggled on, it appears to behave well for me in editor and frontend:

We should probably use the cursor: pointer; even on navigation items that open on click using a button — it feels a bit broken without it.

When I have click toggled off, I see what looks like a button around the dropdown chevron:

And something a bit confusing appeared to happen to me on the frontend when previewing. When I first tested, and created a hover menu, I got this to show:

In this view, outside of the styling issue, focus also appeared to behave as intended.

Then I enabled the click option and saved and previewed, but it required a few reloads for the effect to take. Once it finally stuck, I was unable to go back to hover-only. Same with hiding the chevron — this did not appear to save on the frontend.

I might be experiencing a caching issue of sorts. But in any case, these steps failed for me:

• Create a nav block with a page list, then toggle click, save, preview, reload.
• Untoggle click, save, preview, and menus still open on click.
• Untoggle chevrons, save, preview, chevrons still show up.

Any idea what's up here?

[vcanales]

Consolidates the front end script from Submenu with the Navigation one, so that it can be used by all child blocks of Navigation.

Thanks for this! It looks good 🎉

I noticed a few issues (screen caps from Firefox)

1. In the editor, opening a submenu with multiple children opens all of them, and I can't seem to close the children by themselves.
   
2. In the frontend, clicking on a sub-submenu closes the parent.
3. At least on TT1, buttons are being styled in a few different ways depending on the settings; showing you what I see in a table below:

	Open on click enabled	Open on click disabled
Frontend
Editor

[tellthemachines]

Thanks for reviewing and testing, folks!

All the issues should now be fixed:

• The button toggles and dropdowns were missing some styles, that's why the indicators were looking weird and the submenus were opening all at once.
• The parent closing on clicking a sub-submenu was due to a bug in the front end script.
• The front end not updating due to changing from open on click to hover and toggling submenu icons was due to the context not being properly saved as attributes in the block edit.

Let me know if I've missed anything 😅

[vcanales]

Looking good! I'm only noticing one minor remaining issue, again on TT1; buttons for links that contain submenus look differently in the editor and the frontend:

Editor	Frontend

In trunk they show up as they do in the editor; ie. no background.

[tellthemachines]

buttons for links that contain submenus look differently in the editor and the frontend:

That is when Navigation is set to open on click, right? The problem is Twenty Twenty One has some super specific button styling, but there's not much we can do about that because we want to keep editor style specificity as low as possible. It will need to be fixed in the theme sooner or later.

[vcanales]

That is when Navigation is set to open on click, right?

Indeed, it happens only when open on click is on.

there's not much we can do about that because we want to keep editor style specificity as low as possible. It will need to be fixed in the theme sooner or later.

With this in mind, I think this PR good to go :)

[jasmussen]

In my testing, this specificity wasn't necessary, and the added padding makes the chevron look very different from editor and frontend. I have a followup in #35030.