Pattern editing: fade blocks outside the edited pattern in List View

[ramonjd]

Closes #73954

What?

Adds spotlight mode to List View when editing content-only patterns:

• Fades blocks outside the edited section

Why?

Provides visual and navigation consistency between canvas and List View during pattern editing.

Testing

1. Insert a pattern or ten.
2. Select the pattern, click "Edit section"
3. Open List View (Cmd/Ctrl+Shift+O)
4. All blocks outside the edited pattern are visible but faded.
5. Click on the first paragraph in the canvas, arrow up or down to the start or end of the pattern.
6. The focus stays in the pattern (navigation blocked)
7. Click the faded block in List View to exit pattern editing. (Escape key should work too)

2026-02-25.16.56.43.mp4

[github-actions]

Size Change: +461 B (+0.01%)

Total Size: 7.5 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	383 kB	+332 B (+0.09%)
build/styles/block-editor/style-rtl.css	18.7 kB	+34 B (+0.18%)
build/styles/block-editor/style-rtl.min.css	16 kB	+31 B (+0.19%)
build/styles/block-editor/style.css	18.7 kB	+34 B (+0.18%)
build/styles/block-editor/style.min.css	16 kB	+30 B (+0.19%)

_{compressed-size-action}

[Copilot]

Pull request overview

This PR implements a "spotlight mode" for content-only pattern editing, which fades out blocks outside the edited pattern in the list view and restricts keyboard navigation to stay within the pattern boundary. The changes improve the UX when editing individual patterns by providing visual focus and preventing accidental navigation outside the pattern.

Key changes:

• Adds keyboard navigation constraints (Tab, Arrow keys, Escape) to keep focus within the edited pattern
• Implements visual fading in the list view for blocks outside the edited section
• Adds Escape key handler to exit content-only editing mode
• Ensures block selection when entering spotlight mode

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/block-editor/src/store/reducer.js	Clears selection when exiting content-only editing mode and removes old disabled block logic
packages/block-editor/src/components/writing-flow/use-tab-nav.js	Prevents tabbing outside pattern boundaries in content-only mode
packages/block-editor/src/components/writing-flow/use-arrow-nav.js	Constrains arrow key navigation within pattern boundaries and adds Escape to exit
packages/block-editor/src/components/list-view/use-block-selection.js	Handles Escape key in list view to exit content-only editing mode
packages/block-editor/src/components/list-view/style.scss	Adds spotlight fade styling for blocks outside edited section
packages/block-editor/src/components/list-view/block.js	Implements spotlight fading logic and disables interactions for faded blocks
packages/block-editor/src/components/block-settings-menu-controls/edit-section-menu-item.js	Selects block when entering spotlight mode via menu
packages/block-editor/src/components/block-list/use-block-props/use-focus-handler.js	Exits spotlight mode when clicking outside the edited section
packages/block-editor/src/components/block-inspector/edit-contents.js	Selects block when entering spotlight mode via inline edit button

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ramonjd]

This is a bit trash, but just trying out e2e scenarios

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[talldan]

It works pretty well, so this is promising. I left a few comments.

[ramonjd]

Thanks for taking this for a spin @talldan I'm not sure when I can come back to it fully, but I'll give it a quick second run tomorrow. Maybe this feature is a nice to have anyway.

[ramonjd]

I removed the experiment flag and rebased.

[talldan]

I've added some commits to try to get this closer to the finish line:

• There were some writing flow and other associated changes in the PR which are all unnecessary, already handled in trunk, so I've deleted those.
• I reworked the List View changes, so that a List View block can be considered isDisabled, which is defined by the disabled blockEditingMode. Before it used some other logic about sections, which wasn't necessary.
• Simplified or made other code more readable, added inline comments and missing doc blocks.

In testing though, I discovered a bug. If you Edit a pattern with 'Show template' active, then suddenly all the hidden template blocks are revealed in List View, which is incorrect. That might be tricky to fix. 🤔

[talldan]

So this code is starting to get a bit complex because it is basically replicating what the withDerivedBlockEditingModes reducer does. I don't think it can be a long term solution. We'll need to find another way, but it works for now. The issue long-term will be maintainability and keeping the two in sync.

To fix the 'Show template' bug, I've added some code that checks the explicit blockEditingModes that are set by DisableNonPageContentBlocks, those are still set when editing a pattern, so we can figure out if a block should be shown.

[talldan]

This is working well in my testing, so I think it'd be good to get it in.

After merging I'll put some thought into how we can refine this behavior to improve the code I highlighted in my last comment.

[ramonjd]

Thanks for running with this @talldan

It's working really well. 🙇🏻 🎉