gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

Fix empty Patterns inserter when selecting section root when editing Pages in Site Editor

Open getdave opened this issue 4 months ago • 8 comments

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 variable destinationRootClientId returned from the useInsertionPoint hook which gets passed to <PatternCategoryPreviews>
  • if a block is selected then the logic within useInsertionPoint means that the _destinationRootClientId is set by calling getBlockRootClientId(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() as rootClientId
  • when editing a Page in the Site Editor the block returned by getBlockRootClientId(selectedBlockClientId) is sometimes part of the Template and is thus disabled via getBlockEditingMode. Typically it's the <main> block that wraps Header, Post Content and Footer.
  • 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

getdave avatar Oct 17 '24 15:10 getdave