gutenberg
gutenberg copied to clipboard
Sidebar: Add a shared component for the inserter and list view
What?
Creates a new TabbedPanel
component that is used by both the inserter and the list view.
Why?
This will ensure visual and behaviour consistency between these two panels. In time we should also update the block inspector and global styles to use the component too.
How?
- Create a new
TabbedPanel
component - Refactor shared code to use the new component
Testing Instructions
- Open the Site Editor
- Open the block inserter and check that the tabs behave the same way as in trunk
- Open the list view and check that the tabs behave the same way as in trunk
Testing Instructions for Keyboard
Also check that the keyboard interactions are the same as in trunk.
Note: There is ongoing discussion about the best way to handle keyboard interactions with these panels. This PR aims to consolidate these panels to use the same code and approach. When we update the approach to keyboard interactions then we'll only need to do it in one place for all panels.
Screenshots or screencast
Before | After |
---|---|
The visual differences are:
- The blue border under the tabs are now the same, which means the one in the inserter is now slightly wider
- The tabs in the list view are very slightly wider