Navigation block "Open on click" option has stopped working

[carolinan]

Description

In the current nightly, 6.5-alpha-57378:

1. When a classic theme is active,
2. And the option "Open on click" is enabled,
3. And the navigation block has a submenu, or a page list with a submenu, The the submenu items do not show when the parent menu item is activated (by mouse click or keyboard). This is a problem on the front of the site.

With Gutenberg trunk active, the submenu drop down works. So I am going to assume there was a part of the navigation block update that was not committed to core yet.

The submenus also work when the Open on click option is not enabled.

Step-by-step reproduction instructions

On the current 6.5 nightly, without Gutenberg active, Activate a classic theme, create a new post, and add a navigation block with a submenu. Save your change and view the front of the site. Try expanding the submenu.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

I tested it with WordPress 6.5-alpha-57379 with the latest Gutenberg plugin disabled.

I have confirmed that this problem also occurs in block themes. The underlying problem would be that the navigation/view.min.js is not loading. Probably because of this, the overlay menu also doesn't seem to be working properly.

https://github.com/WordPress/gutenberg/assets/54422211/a2170479-f360-4883-9851-fb388ab3b93b

[carolinan]

Thank you for testing

[t-hamano]

As mentioned in this comment, this issue appears to have been fixed in the latest Alpha trunk. I also tested this problem again with WordPress 6.5-alpha-57502, but it did not reproduce.

I would like to close this issue, but if you are still having problems, please comment.

[eastriverstudio]

@t-hamano @carolinan there still appears to be an issue here with the navigation block in 6.5.x if it's used in a classic theme using a hooks system (in my case I'm using Generatepress) and adding the navigation block to specific region of the theme using a hook, but the menu renders and works if the hover setting is used, but doesn't work if the click to open option is used. This looks to be because as mentioned above, the navigation/view.min.js file is not loaded correctly.

So is there a solution for this as those of us not using block themes will typically use themes with a hook system to add a custom navigation using the navigation block and it worked prior to 6.5.

[carolinan]

@eastriverstudio It is up to the extender to make sure the file is loaded, then.

[eastriverstudio]

@carolinan it used to work using the theme's hook methods pre 6.5, and it sounds like the same issue as above which was fixed for block themes. So a change in 6.5 seems to have stopped this from working correctly when the block is used added via hooks. Surely it is not the extender's responsibility to make sure core or third party code is loaded. Hooks are still a big part of the WP eco-system, particularly for those who don't want to use block themes, so if the navigation block is used in the block editor and loaded in this way it should load the required code correctly in my opinion as it did pre 6.5.

[carolinan]

It is not possible for other contributors to know how the navigation block has been added, it would require testing your code and the code of GeneratePress. Without being able to reproduce the issue without third party code, such as an example theme or plugin, it is not really possible to determine what the problem is.

[carolinan]

In other words, I mean that this issue can only move forward if there are clear, detailed steps to reproduce the issue.

[carolinan]

Has there been any support requests submitted to GeneratePress, that are public and that can provide more information?

[eastriverstudio]

@carolinan I've asked Generatepress for their thoughts, but I don't think this is their issue per se. The only feature being used from their side is a block editor created element which is hooked in to a specific part of the theme, in this case the header. So I've just built a navigation with the core block and then hooked it in to the theme. Lots of hybrid block / classic themes like Generatepress have similar hook systems to add block editor created elements to different parts of the theme, so if the core navigation block no longer works fully with this type of hook setup and doesn't load the assets it should this could be a problem for many classic themes and it isn't necessarily specific to just Generatepress in my opinion using hooks.

[carolinan]

Please, it is not possible to reproduce this without knowing exactly how the block is added, as in literal working code examples and step by step instructions.

[eastriverstudio]

@carolinan after some further testing the problem I was experiencing looks to be specific to the site I was working on and some manually declared add_theme_support functions for additional block appearance tools. No idea why this stopped the JS from loading, but after updating it, the core navigation js now loads again. Thanks

[carolinan]

I am glad it works for you now. Lets keep the issue open.

The appearance tools is a new theme support, but I don't think it has any intentional effect on the loading of the navigation block JS. I wonder if other view JS files are loaded.

[t-hamano]

I tested the following steps, but I cannot reproduce the problem. Is there anything we should fix in core or Gutenberg?

• On the current 6.5.2 without Gutenberg active, activate Twenty Twenty-one.
• Create a new post, add a navigation block with a submenu, and enable "Open on click" option.
• Save the change and view the front of the site.
• Expanding the submenu works.
• Add add_theme_support( 'appearance-tools' ); to twentytwentyone/functions.php.
• Expanding the submenu works.

[carolinan]

I have retested this again on WP 6.6 without issues.