Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Block Editor: Reset inspector tab when selecting non-list-view content item#75656

Open
ramonjd wants to merge 11 commits into
trunkfrom
update/pattern-inspector-content-focus
Open

Block Editor: Reset inspector tab when selecting non-list-view content item#75656
ramonjd wants to merge 11 commits into
trunkfrom
update/pattern-inspector-content-focus

Conversation

@ramonjd

@ramonjd ramonjd commented Feb 18, 2026

Copy link
Copy Markdown
Member

Summary

This PR attempts to sync selection across:

  • list view

  • canvas (inside patterns)

  • block inspector content fields

  • When editing a pattern, clicking a list-view-enabled block (e.g. Buttons, Social Links) in the content list switches the inspector to the List View tab

  • Selecting a different block without list view support (e.g. Heading) left the tab stuck on List View because the section block clientId never changes, so the existing tab reset logic never fired

  • Adds a selector that detects when the selected block is a content item that doesn't navigate to List View, and an effect that switches back to the Content tab on a false → true transition

Related

Testing Instructions

  1. Create a pattern containing a Heading, a Buttons block (with at least one Button child), and a Paragraph
  2. Select the pattern to enter content-only editing
  3. In the inspector Content tab, click the Buttons item — the tab should switch to List View
  4. Click the Heading block in the canvas — the tab should switch back to Content
  5. Manually click the List View tab icon — it should stay on List View (no regression)

Test plan

  • Verify switching from list-view block to non-list-view block resets the tab
  • Verify manually clicking the List View tab still works
  • Verify clicking between two list-view blocks works correctly
  • Verify initial tab selection and requestedTab are not affected

Before

Kapture.2026-04-16.at.14.38.32.mp4

After

Kapture.2026-04-16.at.14.37.31.mp4

Navigation block (inside a template part)

Kapture.2026-02-20.at.16.09.29.mp4

@github-actions github-actions Bot added the [Package] Block editor /packages/block-editor label Feb 18, 2026
@ramonjd ramonjd self-assigned this Feb 18, 2026
@ramonjd ramonjd added the [Type] Enhancement A suggestion for improvement. label Feb 18, 2026
@github-actions

github-actions Bot commented Feb 18, 2026

Copy link
Copy Markdown

Size Change: +302 B (0%)

Total Size: 8.46 MB

📦 View Changed
Filename Size Change
build/scripts/block-editor/index.min.js 380 kB +302 B (+0.08%)

compressed-size-action

@github-actions

github-actions Bot commented Feb 18, 2026

Copy link
Copy Markdown

Flaky tests detected in 31e087a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24491967120
📝 Reported issues:

@talldan

talldan commented Feb 18, 2026

Copy link
Copy Markdown
Contributor

This works well. I thought that maybe it'd also select the list view tab when selecting one of the blocks that's shown there, but it doesn't. So it's a lot more minimal than I expected, and that might be a good thing this close to beta. 😄

I tested the 'Edit navigation' button changes from Navigation: select list view tab on contentOnly. Alternative with explicit solution, and that still works. However, if you click 'Edit navigation' and then select a different block that doesn't have list view support, the List View tab still remains open, so the behavior feels a bit inconsistent there.

@ramonjd

ramonjd commented Feb 18, 2026

Copy link
Copy Markdown
Member Author

However, if you click 'Edit navigation' and then select a different block that doesn't have list view support, the List View tab still remains open, so the behavior feels a bit inconsistent there

Thanks for testing. I'll take a look 👀

@ramonjd ramonjd force-pushed the update/pattern-inspector-content-focus branch from 1a3b66f to 8e0fb02 Compare February 18, 2026 04:57
@ramonjd

ramonjd commented Feb 18, 2026

Copy link
Copy Markdown
Member Author

I'll keep this one simmering and see if I can crack something that's consistent. Might need more thorough testing.

Cheers!

@ramonjd

ramonjd commented Feb 18, 2026

Copy link
Copy Markdown
Member Author

I'm listing some preliminary scenarios (need validating) to handle so I can come back to test:

Content block selection while on List View → switches to Content tab

  1. Click Buttons in content list → List View, then click Heading in canvas → Content
  2. Click Social Links in content list → List View, then click Paragraph in canvas → Content
  3. Click Buttons in canvas while on List View → Content (previously stayed stuck on List View)
  4. “Edit navigation” → List View, then click Heading in canvas → Content
  5. requestInspectorTab('list') → List View, then select any content block → Content

List child selection while on Content tab → switches to List View

  1. Click Button 1 (child of Buttons) in the canvas while on Content → List View
  2. Click a Social Link (child of Social Links) in the canvas while on Content → List View

Intentional List View switches are preserved (not undone by reset)

  1. Click Buttons in content list → switchToListView sets skipNextContentResetRef → stays on List View
  2. Click Social Links in content list → same skip mechanism → stays on List View
  3. “Edit navigation” → requestedTab effect sets skipNextContentResetRef → stays on List View

No-op scenarios (tab stays where it is)

  1. Click Heading while already on Content → stays on Content (same role, no transition)
  2. Click Button 1 then Button 2 in list view → stays on List View (isListChildSelected stays true)
  3. Click Buttons in content list then Social Links in content list → both use switchToListView, stays on List View
  4. Manually click List View tab → stays on List View (no block change triggers the effect)
  5. Manually click Settings/Styles tab → not affected (effects only switch between Content and List View)

}
const parentName = getBlockName( parentId );
if (
parentName === 'core/navigation' ||

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tech debt alert. There's probably a very good reason why the navigation block doesn't support supports: { listView: true }. I need to remind myself why

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was the first block to implement the List View inspector UX, and because of that it has its own custom implementation rather than using the proper block support.

A couple of parts work slightly differently on the nav block List View like the appender and settings menu, so it hasn't been possible to make the block use the block support.

Comment thread packages/block-editor/src/store/private-selectors.js Outdated
@ramonjd ramonjd force-pushed the update/pattern-inspector-content-focus branch 3 times, most recently from 0b7ef83 to f98d3e1 Compare February 25, 2026 05:11
@ramonjd ramonjd marked this pull request as ready for review February 25, 2026 05:16
@ramonjd ramonjd requested a review from ellatrix as a code owner February 25, 2026 05:16
@github-actions

Copy link
Copy Markdown

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 <[email protected]>
Co-authored-by: talldan <[email protected]>

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

@ramonjd

ramonjd commented Mar 6, 2026

Copy link
Copy Markdown
Member Author

However, if you click 'Edit navigation' and then select a different block that doesn't have list view support, the List View tab still remains open, so the behavior feels a bit inconsistent there.

Sorry I forgot to reply to this. I just retested according to the steps in #75578

Kapture.2026-03-06.at.11.22.51.mp4

Are you still seeing the list view tab remaining open, or am I looking in the wrong place?

@ramonjd ramonjd force-pushed the update/pattern-inspector-content-focus branch from f98d3e1 to dc35086 Compare March 6, 2026 00:27
@ramonjd ramonjd force-pushed the update/pattern-inspector-content-focus branch from dc35086 to a44940f Compare March 10, 2026 06:40
@ramonjd ramonjd force-pushed the update/pattern-inspector-content-focus branch from a44940f to 31e087a Compare April 16, 2026 04:23
@ramonjd ramonjd force-pushed the update/pattern-inspector-content-focus branch from 31e087a to 6cbb4b2 Compare May 11, 2026 02:34
@ramonjd ramonjd force-pushed the update/pattern-inspector-content-focus branch from 6cbb4b2 to 1bd4937 Compare May 25, 2026 03:40
ramonjd and others added 3 commits June 10, 2026 16:16
…t item

When editing a pattern, clicking a list-view-enabled block (e.g. Button)
in the content list switches the inspector to the List View tab. Selecting
a different block without list view support (e.g. Heading) left the tab
stuck on List View because the section block clientId never changes,
so the existing tab reset logic never fired.

Add a selector that detects when the selected block is a content item
that doesn't navigate to List View, and an effect that switches back
to the Content tab in that case.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
The clientId-based reset for the "Edit navigation" case
was not visibly different from the existing fix. Reverting
to keep only the shouldResetToContentTab transition logic.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
Replace the previous approach that only reset the tab for non-list-view
blocks with a simpler one that resets to Content whenever any content
block is selected while on List View. This handles the case where
clicking a list-view-enabled block (e.g. Buttons) via the canvas should
also return to the Content tab.

A skipNextContentResetRef prevents the reset from firing when
switchToListView or requestInspectorTab intentionally opened List View
for that same block (content list click-through and "Edit navigation").

Co-Authored-By: Claude Opus 4.6 <[email protected]>
ramonjd and others added 8 commits June 10, 2026 16:16
When a child of a list-view-enabled content block is selected (e.g.
clicking Button 1 inside a Buttons block in the canvas), auto-switch
to the List View tab. This makes the inspector tab behavior consistent
regardless of whether the child was selected via the list view panel
or directly in the canvas.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
Set hasUserSelectionRef to true (not false) when programmatically
switching to List View for a list child. This prevents the auto-select
effect from immediately resetting back to the first tab (Content).

Co-Authored-By: Claude Opus 4.6 <[email protected]>
When auto-switching to List View for a selected list child, also call
setOpenListViewPanel with the parent block's clientId and increment the
expand revision. This ensures the correct panel expands and the
selected child block is visible in the list view.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
Remove redundant prev-ref guards from inspector tab effects
…n in the state selection. This change ensures that the anchor element is re-queried after the PrivateListView remounts, improving the accuracy of the displayed content in the list view.
This commit introduces a new test suite for the pattern inspector tabs in the block editor. It includes tests for resetting the inspector tab when selecting non-list-view content blocks, maintaining the List View tab selection, and auto-switching to the List View when interacting with list children. These tests ensure consistent behavior of the inspector UI across different interaction scenarios.
@ramonjd ramonjd force-pushed the update/pattern-inspector-content-focus branch from 1bd4937 to 169e1d2 Compare June 10, 2026 06:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants