Sidebar: Add a shared component for the inserter and list view #62343
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -162,6 +162,7 @@ export { default as __experimentalPublishDateTimePicker } from './publish-date-t | |
| export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header'; | ||
| export { default as BlockPopover } from './block-popover'; | ||
| export { useBlockEditingMode } from './block-editing-mode'; | ||
| export { default as TabbedSidebar } from './tabbed-sidebar'; | ||
|
There was a problem hiding this comment. This is a helpful refactor to work towards unified sidebars, so I don't want to block this progress. That said, I think it will be important to not combine the content of the sidebar with the interaction of the sidebar wrapper. I see the eventual goal as having a shared sidebar component (or another name that does not reference the visual position of the component) with a close button. The content within it can be whatever it needs to be. This will be possible if we move to a header title for each sidebar, as proposed in #61553 |
||
|
|
||
| /* | ||
| * State Related Components | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| # Tabbed Panel | ||
|
|
||
| The `TabbedPanel` component is used to create the secondary panels in the editor. | ||
|
|
||
| ## Development guidelines | ||
|
|
||
| This acts as a wrapper for the `Tabs` component, but adding conventions that can be shared between all secondary panels, for example: | ||
|
|
||
| - A close button | ||
| - Tabs that fill the panel | ||
| - Custom scollbars | ||
|
|
||
| ### Usage | ||
|
|
||
| Renders a block alignment toolbar with alignments options. | ||
|
|
||
| ```jsx | ||
| import { TabbedSidebar } from '@wordpress/components'; | ||
|
|
||
| const MyTabbedSidebar = () => ( | ||
| <TabbedSidebar | ||
| tabs={ [ | ||
| { | ||
| name: 'slug-1', | ||
| title: _x( 'Title 1', 'context' ), | ||
| panel: <PanelContents>, | ||
| panelRef: useRef('an-optional-ref'), | ||
| }, | ||
| { | ||
| name: 'slug-2', | ||
| title: _x( 'Title 2', 'context' ), | ||
| panel: <PanelContents />, | ||
| }, | ||
| ] } | ||
| onClose={ onClickCloseButton } | ||
| onSelect={ onSelectTab } | ||
| defaultTabId="slug-1" | ||
| ref={ tabsRef } | ||
| /> | ||
|
Comment on lines
+21
to
+39
There was a problem hiding this comment. To elaborate on the above, I think this should eventually look more like: Name tbd 😬 😅 There was a problem hiding this comment. Agree on this. We should try to keep things composable to avoid "YAP" syndrome. |
||
| ); | ||
| ``` | ||
|
|
||
| ### Props | ||
|
|
||
| ### `defaultTabId` | ||
|
|
||
| - **Type:** `String` | ||
| - **Default:** `undefined` | ||
|
|
||
| This is passed to the `Tabs` component so it can handle the tab to select by default when it component renders. | ||
|
|
||
| ### `onClose` | ||
|
|
||
| - **Type:** `Function` | ||
|
|
||
| The function that is called when the close button is clicked. | ||
|
|
||
| ### `onSelect` | ||
|
|
||
| - **Type:** `Function` | ||
|
|
||
| This is passed to the `Tabs` component - it will be called when a tab has been selected. It is passed the selected tab's ID as an argument. | ||
|
|
||
| ### `selectedTab` | ||
|
|
||
| - **Type:** `String` | ||
| - **Default:** `undefined` | ||
|
|
||
| This is passed to the `Tabs` component - it will display this tab as selected. | ||
|
|
||
| ### `tabs` | ||
|
|
||
| - **Type:** `Array` | ||
| - **Default:** `undefined` | ||
|
|
||
| An array of tabs which will be rendered as `TabList` and `TabPanel` components. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| Button, | ||
| privateApis as componentsPrivateApis, | ||
| } from '@wordpress/components'; | ||
| import { forwardRef } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { closeSmall } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { unlock } from '../../lock-unlock'; | ||
|
|
||
| const { Tabs } = unlock( componentsPrivateApis ); | ||
|
|
||
| function TabbedSidebar( | ||
| { defaultTabId, onClose, onSelect, selectedTab, tabs }, | ||
| ref | ||
| ) { | ||
| return ( | ||
| <div className="block-editor-tabbed-sidebar"> | ||
| <Tabs | ||
| selectOnMove={ false } | ||
| defaultTabId={ defaultTabId } | ||
| onSelect={ onSelect } | ||
| selectedTabId={ selectedTab } | ||
| > | ||
| <div className="block-editor-tabbed-sidebar__tablist-and-close-button"> | ||
| <Button | ||
| className="block-editor-tabbed-sidebar__close-button" | ||
| icon={ closeSmall } | ||
| label={ __( 'Close block inserter' ) } | ||
|
There was a problem hiding this comment. This will need to be dynamic, as the list view close button tooltip also says "Close block inserter"
|
||
| onClick={ () => onClose() } | ||
| size="small" | ||
| /> | ||
|
|
||
| <Tabs.TabList | ||
| className="block-editor-tabbed-sidebar__tablist" | ||
| ref={ ref } | ||
| > | ||
| { tabs.map( ( tab ) => ( | ||
| <Tabs.Tab | ||
| key={ tab.name } | ||
| tabId={ tab.name } | ||
| className="block-editor-tabbed-sidebar__tab" | ||
| > | ||
| { tab.title } | ||
| </Tabs.Tab> | ||
| ) ) } | ||
| </Tabs.TabList> | ||
| </div> | ||
| { tabs.map( ( tab ) => ( | ||
| <Tabs.TabPanel | ||
| key={ tab.name } | ||
| tabId={ tab.name } | ||
| focusable={ false } | ||
| className="block-editor-tabbed-sidebar__tabpanel" | ||
| ref={ tab.panelRef } | ||
| > | ||
| { tab.panel } | ||
| </Tabs.TabPanel> | ||
| ) ) } | ||
| </Tabs> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default forwardRef( TabbedSidebar ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| .block-editor-tabbed-sidebar { | ||
| height: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-grow: 1; | ||
| overflow: hidden; | ||
|
|
||
| @include break-medium() { | ||
| width: 350px; | ||
| } | ||
| } | ||
|
|
||
| .block-editor-tabbed-sidebar__tablist-and-close-button { | ||
| border-bottom: $border-width solid $gray-300; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding-right: $grid-unit-15; | ||
| } | ||
|
|
||
|
|
||
| .block-editor-tabbed-sidebar__close-button { | ||
| background: $white; | ||
| /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */ | ||
| order: 1; | ||
| align-self: center; | ||
| } | ||
|
|
||
| .block-editor-tabbed-sidebar__tablist { | ||
| box-sizing: border-box; | ||
| flex-grow: 1; | ||
| margin-bottom: -$border-width; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .block-editor-tabbed-sidebar__tab { | ||
| flex-grow: 1; | ||
| margin-bottom: -$border-width; | ||
|
|
||
| &[id$="reusable"] { | ||
| flex-grow: inherit; | ||
| // These are to align the `reusable` icon with the search icon. | ||
| padding-left: $grid-unit-20; | ||
| padding-right: $grid-unit-20; | ||
| } | ||
| } | ||
|
|
||
| .block-editor-tabbed-sidebar__tabpanel { | ||
| display: flex; | ||
| flex-grow: 1; | ||
| flex-direction: column; | ||
| overflow-y: auto; | ||
| scrollbar-gutter: auto; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should this be a public component?