Tracking: Top Toolbar Improvements

[aaronrobertshaw]

This issue aims to help track the work, feedback, and issues surrounding enhancing the Top Toolbar.

Primary Issue: #40450
PR: #47277

Goal

Find a MVP for the Top Toolbar enhancements that could potentially land in the next WordPress release.

Design Direction

Tasks

• Block toolbar needs to be shown when multiple blocks are selected
• Display the block inserter button regardless of if a block is selected
• Toolbar navigation component - Up arrow to switch to doc tools, block type/group icon to switch to block toolbar
• Implement toolbar navigation, trying to keep the nav buttons in the same position initially
• Create a component to combine the parent block, dot delimiter, and block transforms button
• Use combined parent.block component in top toolbar fixing the current parent block button's position
• Add new separators to block toolbar to match the design
• Update e2es covering Top Toolbar interactions
• Any a11y enhancements/issues raised through feedback (e.g. fixing tab order )
• Improve undo/redo visibility on smaller viewports

Known Issues / Bugs

• In small viewports, or blocks with big toolbars, there isn't enough horizontal space to display all toolbar items neatly. This is especially true when text labels are shown. ( #40450 (comment) )
  • Potential solution: Adding a new component to handle overflow items from the menu. Would require a11y review.
  • Short-term option: Horizontal scrolling for the toolbar was suggested.
• Tooltip positioning is off when opening URLInput popover from block toolbar (appears to be an issue on trunk as well)
  

Solved Issues / Bugs

• Block toolbar dropdowns display incorrectly (Fixed via c22e102)
• Block toolbar dropdowns appear behind the list view sidebar (Fixed after c22e102)
• Block transform preview popover trips over cursor and repeatedly animates. Also a problem in the multi-block selection toolbar ( Fixed again by c22e102)
• Mutli-block selections result in two toolbars in the header (Fixed in 06b2153)

---

cc/ @draganescu, @talldan, @priethor

[draganescu]

We should close this and track #53013. The only remaining item here is

Any a11y enhancements/issues raised through feedback (e.g. fixing #47277 (comment) )

which is more complex and detailed in #53013 and actioned in #53779