WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.47k stars 4.18k forks source link

Patterns with a Group block wrapper can be inserted in a Navigation block #51086

Open tyxla opened 1 year ago

tyxla commented 1 year ago

Description

We recently encountered an instance of a site where a block pattern, containing a Navigation block inside a Group was inserted inside a navigation block. Because that pattern included a navigation block itself, rendering it resulted in an infinite loop.

Unfortunately, I'm unable to reproduce it, but I wonder if anyone has an idea of how this came to be.

I only have the end result - a block pattern that contains a navigation, as an inner block inside a navigation block.

Related to #51087

Step-by-step reproduction instructions

I'm not sure what the steps are. I'm looking for anyone who can think of a way to insert a block pattern (one that contains a navigation block) inside a navigation block and break it that way.

When I try to insert the "Header with Button" pattern from the Yuga theme in the navigation block, it gets inserted outside so I'm unable to reproduce it myself.

Screenshots, screen recording, code snippet

No response

Environment info

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

Yes

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

No

talldan commented 1 year ago

The navigation block has some code to prevent infinite loops (RecursionProvider, useHasRecursion), and from my testing it seems to work.

I added an inner navigation block inside a pattern inside a group into a parent navigation block. Here's how:

  1. Create the pattern with a group and navigation block inside the group and save it
  2. Switch to code editor and copy the html for the wp:block
  3. Go to the side editor > navigation and edit the navigation menu (ideally the same one that your pattern shows)
  4. Switch to code editor and paste in the group block

The result of this was that the inner navigation block wasn't visible at all, I guess some CSS combination causes that.

If I inspect the HTML, it looks like the recursion is properly prevented as the inner navigation block outputs this ("Block cannot be rendered inside itself"): Screenshot 2023-10-04 at 4 38 37 pm