gutenberg
gutenberg copied to clipboard
Fix empty Patterns inserter when selecting section root when editing Pages in Site Editor
What?
Fix empty Patterns inserter when core/post-content
is selected when editing a Page
in the Site Editor
Fixes https://github.com/WordPress/gutenberg/issues/65833
Why?
As detailed in the Issue, it's possible to select the core/post-content
block when editing Pages in the Site Editor. This is expected functionality for Zoom Out.
However, when selecting this block the Patterns inserter shows "empty" because the block root for the block is part of the Template and is thus disabled.
This provides a confusing UX because this section is acting as the defacto "root" of the canvas and thus when selected it should:
- show Patterns
- allow patterns to be inserted inside it.
The problem is:
- the Patterns "look up" code can accept an "Optional target root client ID" which is then used to filter the found patterns.
- this
rootClientId
is provided by the variabledestinationRootClientId
returned from theuseInsertionPoint
hook which gets passed to<PatternCategoryPreviews>
- if a block is selected then the logic within
useInsertionPoint
means that the_destinationRootClientId
is set by callinggetBlockRootClientId(selectedBlockClientId)
. This returns the root block from which the block is nested which is then used to determine which Patterns are elligable. Remember it is this value which ultimately gets passed to__experimentalGetAllowedPatterns()
asrootClientId
- when editing a Page in the Site Editor the block returned by
getBlockRootClientId(selectedBlockClientId)
is sometimes part of the Template and is thusdisabled
viagetBlockEditingMode
. Typically it's the<main>
block that wrapsHeader
,Post Content
andFooter
. - this means no Patterns can be inserted into that block.
How?
What we need to do is ensure that if the selected block is the sectionRootClientId
then we consider it to be the "root block" for which to look up eligible Patterns.
When a Pattern is inserted, we set the insertion index to be at the end of the section root block.
Testing Instructions
- Site Editor
- Open a Page
- Insert a few paragraph blocks (non-full width blocks) so that it's easy to click into the whitespace and select the post content block.
- Opens Patterns tab - should Zoom Out
- Select a Pattern category
- Click on the whitespace to the left/right of your paragraphs - this should select the
core/post-content
block. - See that Pattern inserter is not empty.
- Select a Pattern
- See Pattern inserted as the last block within the Post Content.
- Disable Zoom Out using the Zoom Out toggle button.
- Confirm the same fix still applies even when not Zoomed Out.
Testing Instructions for Keyboard
Screenshots or screencast
Before
https://github.com/user-attachments/assets/6a7ba493-68a4-4ad9-bb82-d4a6308111ac
After
https://github.com/user-attachments/assets/65d742a0-881e-42dd-b68d-ca5329174913