Skip to content

Sidebar: Split block tools into menu, settings, and appearance tabs#45005

Merged
talldan merged 2 commits intotrunkfrom
try/appearance-settings-tabs-in-sidebar
Nov 17, 2022
Merged

Sidebar: Split block tools into menu, settings, and appearance tabs#45005
talldan merged 2 commits intotrunkfrom
try/appearance-settings-tabs-in-sidebar

Conversation

@aaronrobertshaw
Copy link
Copy Markdown
Contributor

@aaronrobertshaw aaronrobertshaw commented Oct 17, 2022

Fixes: #40204

What?

  • Adds new Gutenberg Experiment to put the new tabs feature behind
  • Splits the block inspector primarily between settings and appearance-related tools.
  • The appearance tab contains tools provided via block supports.
  • The settings tab contains block-specific tools rendered into the default InspectorControls slot.
  • Updates the sidebar icon to use two new "drawer" icons taking into account RTL.

Why?

It's another step towards decluttering the sidebar and making it more intuitive to locate and discover block tools.

How?

  • Adds new drawer icons to the icons package
  • Updates sidebar icons
  • Updates the TabPanel component to allow icon-only buttons
  • Adds Gutenberg Experiment, making the new tabs opt-in
  • Updates the block inspector to render the various InspectorControls slots into their respective tabs when the new experiment is enabled
  • The same tabs have been introduced into the block inspector for both single and multi-block selections

Note: Tabs are no longer omitted should they not have any fills in their respective slots. Instead, they'd display a message illustrating the fact there are no settings/appearance tools. This helps maintain a more consistent UI for a11y purposes.

Testing Instructions

  1. Check that the sidebar icons have been updated in both the post and site editors, and confirm they get flipped when switching between LTR and RTL.
  2. In the post editor, add a navigation block, several paragraphs, a group block etc., to a post, save and select one.
  3. Confirm the block inspector displays as normal.
  4. Navigate to the Gutenberg Experiments admin page and enabled the Block Inspector Tabs experiment
    Screen Shot 2022-10-26 at 6 05 27 pm
  5. Switch back to the editor, reload the page, and select each block.
  6. Check that both tabs (settings & appearance) are in the sidebar and controls continue to function.
  7. Select multiple blocks of different types and confirm no controls within either tab.
  8. Select multiple blocks of the same type, e.g. two paragraph blocks. The appearance tab should still contain items.

Screenshots or screencast

Screen.Recording.2022-10-31.at.4.37.19.pm.mp4

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Inspector Controls The interface showing block settings and the controls available for each block Needs User Documentation Needs new user documentation [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.

Split block tools between "settings" and "appearance"