Enhance: Added show outline command

[Mayank-Tripathi32]

Attempt to resolve #53191

What?

Added "Show document outline" command to open List View in outline tab.

Why?

• Improves accessibility by providing keyboard command for outline view
• Implements feature request from Add command to view the document outline #53191
• Makes outline functionality more discoverable

How?

• Added private API to manage List View tabs
• Created new command to open List View with outline tab active
• Reused existing List View functionality

Testing Instructions

• Open editor
• Press Cmd+k (Mac) or Ctrl+k (Windows)
• Type "outline"
• Select "Show document outline"
• Verify List View opens in outline tab
• Verify that command palette is closed
• Verify outline remains visible

Testing Instructions for Keyboard

• Press Cmd+k (Mac) or Ctrl+k (Windows)
• Type "outline" using keyboard
• Use arrow keys to navigate to "Show document outline"
• Press Enter to activate
• Verify focus moves to outline
• Tab to navigate outline items

ScreenCast

Screen.Recording.2025-02-04.at.12.44.36.AM.mov

[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: Mayank-Tripathi32 <[email protected]>
Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: abhi3315 <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: richtabor <[email protected]>

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

[yogeshbhutkar]

Overall, this PR tests well for me.

test.mov

[Mayank-Tripathi32]

@t-hamano Would you mind having a look into this whenever available? I would like to get this merged if everything looks good.

[t-hamano]

@Mayank-Tripathi32

Can you check the following points?

• Rewolve conflicts
• Don't persist the Outline tab. After you run this command, when you reopen the Document Overview, the Outline tab will be visible. Clicking the Document Overview button should always open the ListView tab.
• Change the command text to "Show or hide ...".

[t-hamano]

Another issue that needs to be resolved is accessibility. When executing a command, the screen reader does not announce that the outline tab has been opened. Furthermore, the focus does not move.

At the very least, it's a good idea to always be aware of the following accessibility checks:

• Is it possible to operate using only the keyboard?
• Is the screen reader reading the content appropriately?
• Does the focus move appropriately?

[Mayank-Tripathi32]

Is it possible to operate using only the keyboard?
Is the screen reader reading the content appropriately?
Does the focus move appropriately?

@t-hamano I think the focus is broken for entire component as tested on trunk. I think I will open separate issue regarding this.

probably after #70624 lands in trunk

[Mayank-Tripathi32]

Tested focus: https://q7utzrengv.ufs.sh/f/Wgl9eBAmTj29gtvhdExbvUVCLRtOZBc09F7pY3E1zdm6eXIS

You can see its broken on trunk aswell

[Mayank-Tripathi32]

What Updated?

• Updated "Show or hide document outline" command to the command palette
• Fixed tab persistence issue - Document Overview button now always opens List View tab
• Made TabbedSidebar controlled to respond to programmatic tab changes
• Enhanced toggle list view command to handle outline tab scenarios
• Updated command labels to be dynamic based on current state

Why?

• Users expect Document Overview button to show list view, not remember last tab
• Commands provide clear feedback and work as expected in all scenarios

How?

• Modified toggleListView function to reset tab to 'list-view' when opening
• Changed defaultTabId to selectedTab in TabbedSidebar component
• Updated existing toggle command to handle outline tab scenarios
• Commands now show "Show" or "Hide" based on current state

Testing Instructions

Test the new outline command:

• Open editor
• Press Cmd+k (Mac) or Ctrl+k (Windows)
• Type "outline"
• Select "Show document outline"
• Verify List View opens in outline tab
• Run command again - should switch back to list view tab
• Run command again - should close the sidebar

Test Document Overview button:

• Open Document Overview (should be on List View tab)
• Click Outline tab
• Close Document Overview
• Reopen Document Overview
• Verify it opens on List View tab (not Outline tab)

Test toggle list view command:

• Open Document Overview
• Switch to Outline tab
• Run "Toggle List View" command
• Verify it switches back to List View tab (doesn't close)
• Run command again - should close the sidebar

ScreenCast

https://q7utzrengv.ufs.sh/f/Wgl9eBAmTj29WUcJbYAmTj29whDvJ487kFt0Sz6RbdQVMYrN

[t-hamano]

Tested focus: https://q7utzrengv.ufs.sh/f/Wgl9eBAmTj29gtvhdExbvUVCLRtOZBc09F7pY3E1zdm6eXIS
You can see its broken on trunk aswell

I'm not talking about a problem with the command palette itself. If you're experiencing issues with the Safari browser, #50846 may be relevant.

When I run the "Open List View" command, the List View opens and the first block gets the focus. But when I run "Document outline opened", it doesn't get the focus anywhere in the outline sidebar. I think the focus should be on the Outline tab or the close button.

d0fe804442b2afe672327ea3d96f27da.mp4

[Mayank-Tripathi32]

I'm not talking about a problem with the command palette itself. If you're experiencing issues with the Safari browser, #50846 may be relevant.

I am using chrome so might worth exploring it further.

When I run the "Open List View" command, the List View opens and the first block gets the focus. But when I run "Document outline opened", it doesn't get the focus anywhere in the outline sidebar. I think the focus should be on the Outline tab or the close button.

Interesting, I will check why this is happening, because I just registered the command only.

[t-hamano]

@Mayank-Tripathi32 Do you still have the bandwidth to move forward with this PR? Thanks!

[Mayank-Tripathi32]

@Mayank-Tripathi32 Do you still have the bandwidth to move forward with this PR? Thanks!

I will add this to my calendar for this week! Sorry for delay. I got a little busy.

[jasmussen]

Nice work. Took a quick look from a design perspective. The base functionality is pretty good:

One of the niceties of the original proposal is that it mostly shows the action to open the document outline, it doesn't actually show any of the values. That's not a blocker for this landing, rather, that might still be good to follow up on at some point:

There's a bit of a meta question here, which is around command palette action design, where as an incomplete rule of thumb I've approached it as: any menu item that is available in the current context should eventually find its way into the command palette. Beyond a simple API for registering items, it opens questions around what icon, if any, to show here.

For document outline, this used to actually be a separate button with a (i) icon (info from the library), it has since merged into the List View panel as a tab. Does that mean the command palette icon should use the info icon? Or should it have no icon?

I'm leaning towards suggesting this action should not have an icon, and that as part of expanding the range of command palette actions, we'll eventually end up with a lot of actions that don't have icons, and that's fine too. But just for a broader bit of opinion, cc: @WordPress/gutenberg-design.

[jameskoster]

The question on my mind is whether the icon should represent the thing the action applies to, or the action itself. Additionally there are navigational actions to consider which are not really “do something to an object” commands.

Somewhat related are action groups/headers.

I agree we need some guidelines about this, but it's a pretty big topic and warrants a separate discussion.