-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Sidebar: Add a shared component for the inserter and list view (#62343)
* remove the old panels * move styles * rename classes * trying to fix the overflow * remove will-change: transform * update docs * add the correct markup for the list view * remove padding * remove unsued code * remove unused code * remove unused comment * move styles across * readd height * remove more code * fix the position of patterns * use different labels for each close button * Make TabbedSidebar private Co-authored-by: scruffian <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: tyxla <[email protected]>
- Loading branch information
8 people
authored
Jul 2, 2024
1 parent
a8501ab
commit e6768a7
Showing
9 changed files
with
277 additions
and
157 deletions.
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
76 changes: 76 additions & 0 deletions
76
packages/block-editor/src/components/tabbed-sidebar/README.md
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 } | ||
| /> | ||
| ); | ||
| ``` | ||
|
|
||
| ### 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. |
70 changes: 70 additions & 0 deletions
70
packages/block-editor/src/components/tabbed-sidebar/index.js
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,70 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| Button, | ||
| privateApis as componentsPrivateApis, | ||
| } from '@wordpress/components'; | ||
| import { forwardRef } from '@wordpress/element'; | ||
| import { closeSmall } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { unlock } from '../../lock-unlock'; | ||
|
|
||
| const { Tabs } = unlock( componentsPrivateApis ); | ||
|
|
||
| function TabbedSidebar( | ||
| { defaultTabId, onClose, onSelect, selectedTab, tabs, closeButtonLabel }, | ||
| 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={ closeButtonLabel } | ||
| 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 ); |
53 changes: 53 additions & 0 deletions
53
packages/block-editor/src/components/tabbed-sidebar/style.scss
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
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.