From 81db200a740fdecceecafac5716997749167346c Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 14 Dec 2023 15:33:34 -0500 Subject: [PATCH 01/13] implement Tabs --- .../src/components/list-view-sidebar/index.js | 78 +++++++++---------- 1 file changed, 36 insertions(+), 42 deletions(-) diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js index c369dea6734971..37056fd388d688 100644 --- a/packages/editor/src/components/list-view-sidebar/index.js +++ b/packages/editor/src/components/list-view-sidebar/index.js @@ -2,7 +2,10 @@ * WordPress dependencies */ import { __experimentalListView as ListView } from '@wordpress/block-editor'; -import { Button, TabPanel } from '@wordpress/components'; +import { + Button, + privateApis as componentsPrivateApis, +} from '@wordpress/components'; import { useFocusOnMount, useMergeRefs } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; import { focus } from '@wordpress/dom'; @@ -19,6 +22,8 @@ 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 ) ); @@ -108,22 +113,6 @@ export default function ListViewSidebar() { // It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed. useShortcut( 'core/editor/toggle-list-view', handleToggleListViewShortcut ); - /** - * Render tab content for a given tab name. - * - * @param {string} tabName The name of the tab to render. - */ - function renderTabContent( tabName ) { - if ( tabName === 'list-view' ) { - return ( -
- -
- ); - } - return ; - } - return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-
); } From 7eddb43b337e6e5542c570636679aae76c7d5af8 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Thu, 14 Dec 2023 15:33:55 -0500 Subject: [PATCH 02/13] update styles --- .../src/components/list-view-sidebar/style.scss | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss index 29cc4778e3d4ab..43439d48d1abd3 100644 --- a/packages/editor/src/components/list-view-sidebar/style.scss +++ b/packages/editor/src/components/list-view-sidebar/style.scss @@ -17,21 +17,18 @@ background: $white; } - // The TabPanel style overrides in the following blocks should be removed when the new TabPanel is available. - .components-tab-panel__tabs { + [role="tablist"] { border-bottom: $border-width solid $gray-300; - box-sizing: border-box; - display: flex; - width: 100%; padding-right: $grid-unit-70; + box-sizing: border-box; - .editor-list-view-sidebar__panel-tab { + [role="tab"] { width: 50%; margin-bottom: -$border-width; } } - .components-tab-panel__tab-content { + [role="tabpanel"] { height: calc(100% - #{$grid-unit-60 - $border-width}); } } From cea53c3342d4f38ed3adf18ff609c3231d2b802e Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 19 Dec 2023 14:08:53 -0500 Subject: [PATCH 03/13] fix tab flow and placement styles --- .../src/components/list-view-sidebar/index.js | 31 ++++++++++--------- .../components/list-view-sidebar/style.scss | 15 ++++----- 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js index 37056fd388d688..0f9ec11de2f820 100644 --- a/packages/editor/src/components/list-view-sidebar/index.js +++ b/packages/editor/src/components/list-view-sidebar/index.js @@ -128,21 +128,22 @@ export default function ListViewSidebar() { selectOnMove={ false } onSelect={ ( tabName ) => setTab( tabName ) } > - - - { _x( 'List View', 'Post overview' ) } - - - { _x( 'Outline', 'Post overview' ) } - - -