Pattern panel is blank when clicking on template part canvas in 6.7 beta 1

[mikemcalister]

Description

After you insert a pattern into the page from the slide out panel, if you click a template part in the block editor canvas, the pattern panel clears the patterns but remains open in a blank state.

Pre 6.7 beta, the panel closed entirely if you clicked into the editor canvas. I'm not sure what is the expected behavior here. Are we keeping the panel open now until closed manually? At the very least, we shouldn't see an empty panel here.

Step-by-step reproduction instructions

1. Make sure you are on the 6.7 beta 1
2. Go to the site editor
3. Add a pattern to the page
4. While the pattern sidebar is still open, click into the editor canvas and note if the panel remains open
5. Click onto a template part and note if the panel goes blank

Screenshots, screen recording, code snippet

Here's the issue demonstrated in a video.

CleanShot.2024-10-02.at.10.10.10.mp4

Environment info

• WordPress 6.7 beta 1
• Chrome
• MacOS

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

[colorful-tones]

@mikemcalister do you mind providing a little more detail on the context from which you're starting from. The video does not capture it. I know you're in the Site Editor and you're adding a pattern, but are you editing a template, and which template please?

[colorful-tones]

An interesting use case here. In order to recreate this in WP stable I had to create a new blank template and insert Template Part: header, blank Paragraph block, and Template Part: footer. Then, in the empty middle Paragraph block, open the pattern inserter, insert a pattern, and then click on the Template Part: footer to see how the pattern inserter closes.

Playground: TT4 - WP 6.6.2	Playground: TT5 - WP nightly with Gutenberg
https://github.com/user-attachments/assets/1ee70908-df4f-47fc-afe1-f40e16faddf6	https://github.com/user-attachments/assets/d46872f2-2b44-4ad4-986f-a98c42fc0017

Worth noting that the TT5 theme with WP nightly + Gutenberg has a difference experience than the bug reported. So, it might help to clarify what the intended interaction and experience should be.

[colorful-tones]

I suspect that this may be a regression or odd intersecting use case that may have been impacted by the Zoom Out work for 6.7. I'm adding it to the 6.7 project board, but feel free to remove it. @noisysocks might have some guidance here.

[mikemcalister]

@colorful-tones Hey Damon, thanks for triaging this. I was not in a template, I was adding a pattern to a standard page in the site editor. I was able to replicate this in Twenty Twenty Five as well as my own theme. Here's another video with Twenty Twenty Five:

CleanShot.2024-10-02.at.21.46.55.mp4

[getdave]

@mikemcalister Thanks for persisting with reporting this. It's really helpful to narrow down the exact steps.

What I can see from your video is that your clicks end up selecting either:

• a block in the canvas
• a template part (in this case the Header)

Specifically

1. You click and the Image is selected ("Featured Image")
2. You click again and the Header template part is selected
3. You click again and the Heading Block is selected

In all of those circumstances it is not possible to insert a pattern and thus the inserter is correctly empty.

Notice however, that when you select the Group block (the yellow pattern) you do get choices in the Patterns inserter.

Do you agree with the above assessment?

That said, I can see how it could be confusing that if you're trying to select "the empty canvas" you cannot seem to do this without selecting a block.

I believe this may also be impacted by the bug trying to be fixed in #65857.

This becomes easier with #65785. Once that is in a 6.7 Beta/RC it will be easier to click "outside" of the canvas.

Let me know if I can help further.

[mikemcalister]

@getdave Hey Dave, thanks for following up.

Yes, your assessment is fairly accurate. When clicking in a block, the panel stays open and populated.

Similarly, as you can see in this new video, I'm clicking in the white margin to the left of the page content and I'm getting that same empty panel. As a pro user, I know that this belongs to the template, so that's why I'm getting that empty panel. But many average users are going to click that same white space since it feels like it should be a group area (which technically it is). Clicking away into a canvas is also a common pattern for exiting panels and modals, even in WP.

Further, you can see when I click near the featured image, it glitches a few times. That may be separate from the initial issue mentioned here.

CleanShot.2024-10-07.at.16.30.08.mp4

[ndiego]

pattern-selection-6-7-bug.mp4

I tested this further and believe it's quite a significant UX issue.

[colorful-tones]

Thanks for removing the Zoom Out label @ndiego 👍

I do think that there is likely overlap and side-effects being caused by the Zoom Out work for 6.7, which are likely impacting the canvas root. I do not have a PR/Issue to link to though.

FWIW - here is an additional video of clicking around with pattern inserter and Zoom Out stuff activated too, which might help debug or open up the conversation around how the canvas and context of the overall editing experience gets confusing. I'm honestly not sure what to expect at this point when I click on certain things? 😕

pattern-canvas-click-oddity.mp4

[getdave]

Ok I'm pretty sure I've figured this one out.

If we dive deep into the code that determines what Patterns show up we end up here:

gutenberg/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js

Lines 108 to 110 in 4f3da91

	_destinationRootClientId = getBlockRootClientId(
	selectedBlockClientId
	);

This _destinationRootClientId ultimately ends up being passed as rootClientId to <PatternCategoryPreviews> here:

gutenberg/packages/block-editor/src/components/inserter/menu.js

Lines 247 to 248 in 4f3da91

	<PatternCategoryPreviews
	rootClientId={ destinationRootClientId }

This is then used to get the patterns that are available by passing it here:

gutenberg/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js

Lines 52 to 56 in 4f3da91

	const [ allPatterns, , onClickPattern ] = usePatternsState(
	onInsert,
	rootClientId,
	category?.name
	);

The problem is that in Zoom Out mode, the "root" should be the sectionRootClientId which is acting as the top level block. However, when we click in the "empty" space (and select the core/post-content block which is acting as the section root) the code is actually finding the blockRootClientId of the core/post-content block. This is some random Group block which is why no patterns show up.

So the solution is to check if the selectedBlockClientId matches the sectionRootClientId and then ensure it is that which is passed to the Patterns retrieval mechanics.

This is easier to show rather than explain so I'll spin up a PR for review. I thought I'd document it here so I can pick up against next week as it's nearly my end of day.

[getdave]

Noting that this bug does not manifest on Gutenberg trunk but only on wp/6.7 branch. This means there may be a PR that has not been picked to that branch.

[talldan]

Trunk has this PR, which 6.7 doesn't have - #65611 - so it will work quite differently.

Despite that, I tested latest 6.7, and this issue seems mostly resolved from what I can tell. At least I found it difficult to reproduce the issue with the empty inserter, there's a chance I didn't take the right steps. It'd be great to get some further testing on this before closing the issue.

[getdave]

I believe the rapid/repeating reloading of Patterns was just fixed in #66162.

However, the issue of seeing "No results" still remains. To replicate:

• Checkout wp/6.7 branch
• Site Editor
• Pages
• Choose Sample Page
• Open Patterns inserter
• Make sure you're in Zoom Out.
• Click on some blocks. Now click on some empty space within the block canvas (not the grey area around the canvas).
• Notice the Paterns inserter is now "empty results".

As shown in the video below that's because we're selecting the core/post-content block.

Screen.Capture.on.2024-10-17.at.15-56-10.mp4

I tried to explain why I think that is in this comment.

I think we need to pass the sectionRootClientId (in this case the core/post-content) block to the mechanism that retrieves patterns.

[ndiego]

Notice the Paterns inserter is now "empty results".

Yeah, if we can just get this empty section to close, we should be good.

[getdave]

Draft of a fix in #66214. Might be a bit naive. Will try to evolve again tomorrow if no one else picks it up first.

[getdave]

Two PRs merged to the wp/6.7 branch as a patch fix for 6.7. This is to prioritise stability for 6.7.

A more robust fix is already in trunk in #65611 but backporting that would require backporting other PRs and those are complex and have potential for introducing other bugs.

Going to close out.