Block Editor: Open Patterns Explorer for zoom-out insertion#78604
Open
richtabor wants to merge 1 commit into
Open
Block Editor: Open Patterns Explorer for zoom-out insertion#78604richtabor wants to merge 1 commit into
richtabor wants to merge 1 commit into
Conversation
richtabor
added
[Type] Enhancement
|
Size Change: -1.36 kB (-0.02%) Total Size: 8.04 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 429bb3a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26342484827
|
This was referenced May 24, 2026
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
richtabor
requested review from
Mamaduka and
andrewserong
and removed request for
ellatrix
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the zoom-out in-between pattern insertion flow in the Block Editor to open the full Patterns Explorer modal and preserve the intended insertion gap via an explicit insertionIndex, while also relying on the standard insertion point UI during drag/reorder and removing the old zoom-out “Drop pattern.” separator UI.
Changes:
- Thread
insertionIndexthroughPatternsExplorer→PatternList→useInsertionPointso chosen patterns insert at the selected zoom-out gap. - Replace the zoom-out in-between inserter behavior to open the full-screen Patterns Explorer modal (instead of the regular inserter-opening path).
- Remove the zoom-out separator/drop strip component and its related styles; show the standard insertion point while dragging in zoom-out mode.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js | Passes insertionIndex into useInsertionPoint so pattern insertion targets the correct gap. |
| packages/block-editor/src/components/inserter/block-patterns-explorer/index.js | Extends PatternsExplorer plumbing to accept/forward insertionIndex into the list. |
| packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js | Opens the Patterns Explorer modal from zoom-out in-between inserters and passes insertionIndex. |
| packages/block-editor/src/components/block-tools/index.js | Renders InsertionPoint during zoom-out dragging to use the standard insertion indicator. |
| packages/block-editor/src/components/block-list/index.js | Removes rendering of the zoom-out separator component and adjusts appender logic to remain disabled in zoom-out. |
| packages/block-editor/src/components/block-list/content.scss | Removes styles for the deleted zoom-out separator UI. |
| packages/block-editor/src/components/block-list/zoom-out-separator.js | Deletes the now-dead zoom-out separator/drop indicator component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
Thanks for the ping, I agree with the idea here, and it's feeling pretty good to me. The modal is a better way (IMO) to navigate very large libraries of patterns, and the editor surface has received some nice quality of life improvements since the zoom out separator approach was added (notably the WYSIWYG dragging of blocks).
So all up, I think this experience feels nicer, and good that it's also less code!
Just left a code quality comment re: where we place the Modal component, I think we'll want to move it up to BlockTools itself to live next to the other modals (I've run into bugs before when the Modal was placed too far down a hierarchy).
Other than that, this LGTM. I'll just add a few other folks as reviewers as a gentle FYI ping since they worked on the original feature.
Comment on lines
+92
to
+99
| { isPatternsExplorerOpen && ( | ||
| <PatternsExplorerModal | ||
| initialCategory={ allPatternsCategory } | ||
| rootClientId={ sectionRootClientId } | ||
| insertionIndex={ insertionIndex } | ||
| onModalClose={ () => setIsPatternsExplorerOpen( false ) } | ||
| /> | ||
| ) } |
Contributor
There was a problem hiding this comment.
The Zoom Out mode inserters aren't always visible, and it can sometimes be a bit buggy and unreliable rendering a modal as the child of something that can disappear.
Could we lift the PatternsExplorerModal here to live in block-tools/index.js next to BlockRenameModal and BlockVisibilityModal? That might help it to feel a bit more consistent, too.
I'm imagining we'd also lift the state up, too, so perhaps we'd have the modal open state in block-tools/index.js, too, and pass down an onClick handler to ZoomOutModeInserters as a new prop and then pass that to ZoomOutModeInserterButton?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Why?
The zoom-out pattern inserter was still routed through the regular inserter-opening path, which brought along insertion-point state and a separate drop indicator UI. This made the flow feel more like a sidebar inserter variant than a focused pattern-picking interaction.
Opening the Patterns Explorer as a modal creates a temporary, intentional selection state: choose a pattern, insert it at the selected gap, and return to the same zoom-out canvas context so you can keep composing or add another pattern. The modal is also easier to dismiss than the nested flyout/sidebar inserter panels, and it avoids distorting the editor UI while browsing.
The tradeoff is that the pattern browser and current page are no longer visible at the same time. For this zoomed-out insertion flow, the larger full-screen pattern browsing surface, simpler close behavior, and clean return to the canvas outweigh the benefit of keeping the sidebar inserter visible beside the page.
For drag/reorder, the PR leans on the standard insertion point instead of maintaining a separate zoom-out-specific "Drop pattern" strip.
Before
zoom-before.mp4
After
zoom-done.mp4
Testing Instructions
+inserter.Drop pattern.strip does not appear.Checks
npm run lint:js -- packages/block-editor/src/components/block-list/index.js packages/block-editor/src/components/block-tools/index.js packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js packages/block-editor/src/components/inserter/block-patterns-explorer/index.js packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.jsnpm run lint:css -- packages/block-editor/src/components/block-list/content.scssgit diff --check trunk