The + icon on the Navigation Menu doesn't add menu items in the Blockbase themes

[happychait]

Quick summary

In the Site Editor, selecting the Navigation Menu block and clicking the + icon only brings up this toolbar, but we can't create new menus, or add menu items.

Steps to reproduce

1. Open the Site Editor
2. Select the Navigation menu block in the header
3. Click the + icon on the Navigation block to add menu items.

What you expected to happen

Add link option should be added to the Navigation block as in this screenshot:

What actually happened

1. The + icon simply pulls up the block's toolbar which can only be hidden by selecting the Navigation Menu block in the List View and hitting the Escape key.
2. No way to add menu items.

Video of what happens:

Captured.at.06-07-2022.at.16.42.43.mp4

A few screenshots showing the issue:

Context

Discovered this bug while trying to help the user add the Navigation Menu from the Site Editor in 35992415-hc

Also confirmed the bug in exploratory testing.

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Yes, seems to be specific to the Blockbase and all its child themes.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

No response

Available workarounds?

Yes, easy to implement

Workaround details

We can workaround by:

1. Choosing the Top toolbar option for the Site Editor preferences.
2. Editing the Navigation Menu from the template or template parts editor instead of the Site Editor.

[jordesign]

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅

On Atomic and Self Hosted - the error was only present with the Gutenberg plugin activated

📌 FINDINGS/SCREENSHOTS/VIDEO

I was able to recreate this consistently when Blockbase and the Gutenberg plugin were both active

📌 ACTIONS

• Marked as Triaged for Quality Squad review
• Closed as could not replicate (please reopen the issue reoccurs)
• Transferred to Themes Repo

[getdave]

I tested this on Gutenberg Core trunk using Empty Theme theme and I wasn't able to reproduce.

That said there are a number of bugs with the popover that seem to have been introduced as a result of the upgrade to the core component's underlying library. One of these is that the block toolbar is appearing over the top of the Nav block. You can also see the Link UI disappearing off screen.

Not sure if those issues are related to what you're seeing here.

Screen.Capture.on.2022-07-06.at.10-56-09.mp4

[happychait]

@getdave In your video, the Top toolbar option is selected in your block editor, and hence the issue can't be reproduced. So that's another workaround as @tanjoymor helped find it originally.

Edited the issue description and included this second workaround.

[pbking]

I didn't realize this was Blockbase specific. I thought that this was the behavior of the Navigation Block. I'll look into this today; thank you for all the details.

[pbking]

I don't believe this is an issue with Blockbase per-se. It happens with Blockbase but I believe because of the layout of the header. The navigation is so close to the top that the panel hides the button. If I introduce space above then everything works as expected. When Gutenberg is de-activated the panel in question is rendered below the navigation which I expect is the correct behavior for a block in that position.

I observed the same behavior on Pendant which is not a Blockbase child theme but has a header with navigation a similar distance from the top of the page.

This seems to be properly represented in the issue that @getdave mentioned above.

[tanjoymor]

@pbking You are totally right! I just retested on Twenty Twenty-Two and if I move the Navigation block to the very top the same issues occur. As a point of interest, Simple sites (that don't have access to plugins) can't deactivate Gutenberg.

[pbking]

Going to close this considering the above. Hopefully this gets resolved via Gutenberg #41575 soon! It makes using that nav block extra hard!