From 71db141b04d193d9f68bc69865fa596fd6cce774 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 5 Jun 2024 16:02:43 +0100 Subject: [PATCH 01/17] remove the old panels --- packages/block-editor/README.md | 4 + packages/block-editor/src/components/index.js | 1 + .../src/components/inserter/menu.js | 51 ++++++++--- .../src/components/tabbed-sidebar/index.js | 71 ++++++++++++++++ .../src/components/list-view-sidebar/index.js | 85 +++++-------------- 5 files changed, 136 insertions(+), 76 deletions(-) create mode 100644 packages/block-editor/src/components/tabbed-sidebar/index.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 7c70473430b31..bd4b25ae86ca3 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -804,6 +804,10 @@ _Related_ - +### TabbedSidebar + +Undocumented declaration. + ### ToolSelector Undocumented declaration. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 2a127feb3df1c..e315ad53b0fd8 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -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'; /* * State Related Components diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 6a4ac798b7490..6b2fc31b6fc0e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -30,8 +30,8 @@ import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-catego import { MediaTab, MediaCategoryPanel } from './media-tab'; import InserterSearchResults from './search-results'; import useInsertionPoint from './hooks/use-insertion-point'; -import InserterTabs from './tabs'; import { store as blockEditorStore } from '../../store'; +import TabbedSidebar from '../tabbed-sidebar'; const NOOP = () => {}; function InserterMenu( @@ -315,21 +315,48 @@ function InserterMenu( ref={ ref } >
- - { inserterSearch } - { selectedTab === 'blocks' && - ! delayedFilterValue && - blocksTab } - { selectedTab === 'patterns' && - ! delayedFilterValue && - patternsTab } - { selectedTab === 'media' && mediaTab } - + tabs={ [ + { + name: 'blocks', + title: __( 'Blocks' ), + panel: ( + <> + { inserterSearch } + { selectedTab === 'blocks' && + ! delayedFilterValue && + blocksTab } + + ), + }, + { + name: 'patterns', + title: __( 'Patterns' ), + panel: ( + <> + { inserterSearch } + { selectedTab === 'patterns' && + ! delayedFilterValue && + patternsTab } + + ), + }, + { + name: 'media', + title: __( 'Media' ), + panel: ( + <> + { inserterSearch } + { mediaTab } + + ), + }, + ] } + />
{ showInserterHelpPanel && hoveredItem && ( + +
+
+ { tabs.map( ( tab ) => ( + + { tab.panel } + + ) ) } + + + ); +} + +export default forwardRef( TabbedSidebar ); diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js index 79a63ecdec4d9..f2bf97899d754 100644 --- a/packages/editor/src/components/list-view-sidebar/index.js +++ b/packages/editor/src/components/list-view-sidebar/index.js @@ -1,17 +1,15 @@ /** * WordPress dependencies */ -import { __experimentalListView as ListView } from '@wordpress/block-editor'; import { - Button, - privateApis as componentsPrivateApis, -} from '@wordpress/components'; + __experimentalListView as ListView, + TabbedSidebar, +} from '@wordpress/block-editor'; import { useFocusOnMount, useMergeRefs } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; import { focus } from '@wordpress/dom'; import { useCallback, useRef, useState } from '@wordpress/element'; -import { __, _x } from '@wordpress/i18n'; -import { closeSmall } from '@wordpress/icons'; +import { _x } from '@wordpress/i18n'; import { useShortcut } from '@wordpress/keyboard-shortcuts'; import { ESCAPE } from '@wordpress/keycodes'; @@ -22,8 +20,6 @@ import ListViewOutline from './list-view-outline'; import { unlock } from '../../lock-unlock'; import { store as editorStore } from '../../store'; -const { Tabs } = unlock( componentsPrivateApis ); - export default function ListViewSidebar() { const { setIsListViewOpened } = useDispatch( editorStore ); const { getListViewToggleRef } = unlock( useSelect( editorStore ) ); @@ -120,64 +116,25 @@ export default function ListViewSidebar() { onKeyDown={ closeOnEscape } ref={ sidebarRef } > - , + panelRef: listViewContainerRef, + }, + { + name: 'outline', + title: _x( 'Outline', 'Post overview' ), + panel: , + }, + ] } + onClose={ closeListView } onSelect={ ( tabName ) => setTab( tabName ) } - selectOnMove={ false } - // The initial tab value is set explicitly to avoid an initial - // render where no tab is selected. This ensures that the - // tabpanel height is correct so the relevant scroll container - // can be rendered internally. defaultTabId="list-view" - > -
-
- - -
-
- -
-
- - -
- -
- - + ref={ tabsRef } + /> ); } From 8f810e94ce0660091e4bc405c8c3228fa572a7ae Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 5 Jun 2024 16:15:37 +0100 Subject: [PATCH 02/17] move styles --- .../src/components/tabbed-sidebar/style.scss | 38 +++++++++++++++++++ packages/block-editor/src/style.scss | 1 + .../components/list-view-sidebar/style.scss | 38 ------------------- 3 files changed, 39 insertions(+), 38 deletions(-) create mode 100644 packages/block-editor/src/components/tabbed-sidebar/style.scss diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss new file mode 100644 index 0000000000000..c5d6a3c5d00f8 --- /dev/null +++ b/packages/block-editor/src/components/tabbed-sidebar/style.scss @@ -0,0 +1,38 @@ +.editor-tabbed-sidebar { + height: 100%; + display: flex; + flex-direction: column; + + @include break-medium() { + // Same width as the Inserter. + // @see packages/block-editor/src/components/inserter/style.scss + width: 350px; + } +} + +.editor-tabbed-sidebar__tablist-and-close-button { + display: flex; + border-bottom: $border-width solid $gray-300; +} + +.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; + margin-right: $grid-unit-15; +} + +.editor-tabbed-sidebar__tablist { + box-sizing: border-box; + flex-grow: 1; +} + +.editor-tabbed-sidebar__tab { + flex-grow: 1; + margin-bottom: -$border-width; +} + +.editor-tabbed-sidebar__tabpanel { + height: calc(100% - #{$grid-unit-60 - $border-width}); +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index cf4683b02c707..4498387c54407 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -42,6 +42,7 @@ @import "./components/rich-text/style.scss"; @import "./components/segmented-text-control/style.scss"; @import "./components/skip-to-selected-block/style.scss"; +@import "./components/tabbed-sidebar/style.scss"; @import "./components/tool-selector/style.scss"; @import "./components/url-input/style.scss"; @import "./components/url-popover/style.scss"; diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss index 973defca41f1c..4ee99c7f771a1 100644 --- a/packages/editor/src/components/list-view-sidebar/style.scss +++ b/packages/editor/src/components/list-view-sidebar/style.scss @@ -1,41 +1,3 @@ -.editor-list-view-sidebar { - height: 100%; - display: flex; - flex-direction: column; - - @include break-medium() { - // Same width as the Inserter. - // @see packages/block-editor/src/components/inserter/style.scss - width: 350px; - } - .editor-list-view-sidebar__header { - display: flex; - border-bottom: $border-width solid $gray-300; - } - .editor-list-view-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; - margin-right: $grid-unit-15; - } -} - -.editor-list-view-sidebar__tabs-tablist { - box-sizing: border-box; - flex-grow: 1; - -} - -.editor-list-view-sidebar__tabs-tab { - width: 50%; - margin-bottom: -$border-width; -} - -.editor-list-view-sidebar__tabs-tabpanel { - height: calc(100% - #{$grid-unit-60 - $border-width}); -} - .editor-list-view-sidebar__list-view-panel-content, .editor-list-view-sidebar__list-view-container > .document-outline { height: 100%; From f062dcff8b62b529e23dce5c2a6c1eb1abd5d317 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 5 Jun 2024 16:18:18 +0100 Subject: [PATCH 03/17] rename classes --- .../src/components/tabbed-sidebar/index.js | 12 ++++++------ .../src/components/tabbed-sidebar/style.scss | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/tabbed-sidebar/index.js b/packages/block-editor/src/components/tabbed-sidebar/index.js index f7be8da4f4ec8..977ba96e9aa6c 100644 --- a/packages/block-editor/src/components/tabbed-sidebar/index.js +++ b/packages/block-editor/src/components/tabbed-sidebar/index.js @@ -21,16 +21,16 @@ function TabbedSidebar( ref ) { return ( -
+
-
+
); From a7a65e79ef56b889f19b94c1d6e646bef1f013a7 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 2 Jul 2024 13:30:05 +0100 Subject: [PATCH 17/17] Make TabbedSidebar private --- packages/block-editor/README.md | 4 ---- packages/block-editor/src/components/index.js | 1 - packages/block-editor/src/private-apis.js | 2 ++ packages/editor/src/components/list-view-sidebar/index.js | 4 +++- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index bd4b25ae86ca3..7c70473430b31 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -804,10 +804,6 @@ _Related_ - -### TabbedSidebar - -Undocumented declaration. - ### ToolSelector Undocumented declaration. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index e315ad53b0fd8..2a127feb3df1c 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -162,7 +162,6 @@ 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'; /* * State Related Components diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index e6f3fc4cc39d6..989cc8fe1cfd4 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -44,6 +44,7 @@ import { PrivateInserterLibrary } from './components/inserter/library'; import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker'; import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes'; import useBlockDisplayTitle from './components/block-title/use-block-display-title'; +import TabbedSidebar from './components/tabbed-sidebar'; /** * Private @wordpress/block-editor APIs. @@ -73,6 +74,7 @@ lock( privateApis, { useLayoutStyles, DimensionsTool, ResolutionTool, + TabbedSidebar, TextAlignmentControl, ReusableBlocksRenameHint, useReusableBlocksRenameHint, diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js index ba33a3cf2f13b..c90479c23ec70 100644 --- a/packages/editor/src/components/list-view-sidebar/index.js +++ b/packages/editor/src/components/list-view-sidebar/index.js @@ -3,7 +3,7 @@ */ import { __experimentalListView as ListView, - TabbedSidebar, + privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { useFocusOnMount, useMergeRefs } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -20,6 +20,8 @@ import ListViewOutline from './list-view-outline'; import { unlock } from '../../lock-unlock'; import { store as editorStore } from '../../store'; +const { TabbedSidebar } = unlock( blockEditorPrivateApis ); + export default function ListViewSidebar() { const { setIsListViewOpened } = useDispatch( editorStore ); const { getListViewToggleRef } = unlock( useSelect( editorStore ) );