From 928a2fa5e02b1e5037335aee780b915aab3ea33a Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Fri, 8 Dec 2023 16:30:25 -0500 Subject: [PATCH 1/6] implement `Tabs` --- .../src/components/inserter/tabs.js | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index a75e0029ef4900..bf42088cec3a5e 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -2,9 +2,16 @@ * WordPress dependencies */ import { useMemo } from '@wordpress/element'; -import { TabPanel } from '@wordpress/components'; +import { privateApis as componentsPrivateApis } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { Tabs } = unlock( componentsPrivateApis ); + const blocksTab = { name: 'blocks', /* translators: Blocks tab title in the block inserter. */ @@ -45,13 +52,22 @@ function InserterTabs( { }, [ prioritizePatterns, showPatterns, showMedia ] ); return ( - - { children } - +
+ + + { tabs.map( ( tab ) => ( + + { tab.title } + + ) ) } + + { tabs.map( ( tab ) => ( + + { children( tab ) } + + ) ) } + +
); } From 68213d351e884ff82b0855beb4192038bdc31b84 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Fri, 8 Dec 2023 17:01:52 -0500 Subject: [PATCH 2/6] update styles --- packages/block-editor/src/components/inserter/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 755445246e8596..97a3d877b7e72a 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -61,7 +61,7 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__popover .block-editor-inserter__menu { margin: -$grid-unit-15; - .block-editor-inserter__tabs .components-tab-panel__tabs { + .block-editor-inserter__tabs div[role="tablist"] { top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15; } @@ -118,10 +118,10 @@ $block-inserter-tabs-height: 44px; flex-direction: column; overflow: hidden; - .components-tab-panel__tabs { + div[role="tablist"] { border-bottom: $border-width solid $gray-300; - .components-tab-panel__tabs-item { + button[role="tab"] { flex-grow: 1; margin-bottom: -$border-width; &[id$="reusable"] { @@ -133,7 +133,7 @@ $block-inserter-tabs-height: 44px; } } - .components-tab-panel__tab-content { + div[role="tabpanel"] { display: flex; flex-grow: 1; flex-direction: column; From 7da0dc1579e75a9f2d57e9d17302e56599afa94b Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Fri, 8 Dec 2023 21:02:46 -0500 Subject: [PATCH 3/6] focusable false --- packages/block-editor/src/components/inserter/tabs.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index bf42088cec3a5e..85db27ca24be40 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -62,7 +62,11 @@ function InserterTabs( { ) ) } { tabs.map( ( tab ) => ( - + { children( tab ) } ) ) } From e83210a566e0156bc1d6cf990ce7c2b6a34f7c30 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Fri, 8 Dec 2023 21:03:58 -0500 Subject: [PATCH 4/6] replace render function with object --- .../src/components/inserter/menu.js | 20 ++++++++----------- .../src/components/inserter/tabs.js | 2 +- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 4f028eb69c6662..b09ec2a5f07ed1 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -191,17 +191,13 @@ function InserterMenu( ] ); - const getCurrentTab = useCallback( - ( tab ) => { - if ( tab.name === 'blocks' ) { - return blocksTab; - } else if ( tab.name === 'patterns' ) { - return patternsTab; - } else if ( tab.name === 'media' ) { - return mediaTab; - } - }, - [ blocksTab, patternsTab, mediaTab ] + const inserterTabsContents = useMemo( + () => ( { + blocks: blocksTab, + patterns: patternsTab, + media: mediaTab, + } ), + [ blocksTab, mediaTab, patternsTab ] ); const searchRef = useRef(); @@ -276,7 +272,7 @@ function InserterMenu( prioritizePatterns={ prioritizePatterns } onSelect={ handleSetSelectedTab } > - { getCurrentTab } + { inserterTabsContents } ) } { ! delayedFilterValue && ! showAsTabs && ( diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index 85db27ca24be40..5296c9fab7f737 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -67,7 +67,7 @@ function InserterTabs( { tabId={ tab.name } focusable={ false } > - { children( tab ) } + { children[ tab.name ] } ) ) } From f8ed95f8cde38036dd9c3dc5d71d59e500cab23a Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 11 Dec 2023 11:18:01 -0500 Subject: [PATCH 5/6] fix inserter tests --- packages/e2e-test-utils/src/inserter.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js index ebbda244d18564..a2c73abe666552 100644 --- a/packages/e2e-test-utils/src/inserter.js +++ b/packages/e2e-test-utils/src/inserter.js @@ -86,7 +86,10 @@ export async function selectGlobalInserterTab( label ) { } const activeTab = await page.waitForSelector( - '.block-editor-inserter__tabs button.is-active' + // Targeting a class name is necessary here, because there are likely + // two implementations of the `Tabs` component visible to this test, and + // we want to confirm that it's waiting for the correct one. + '.block-editor-inserter__tabs [role="tab"][aria-selected="true"]' ); const activeTabLabel = await page.evaluate( From b55460252b2aedc78676db43458a10c986a2ce7b Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Tue, 12 Dec 2023 14:29:32 -0500 Subject: [PATCH 6/6] pass contents as prop instead of children --- packages/block-editor/src/components/inserter/menu.js | 5 ++--- packages/block-editor/src/components/inserter/tabs.js | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index b09ec2a5f07ed1..cd44b902f491a5 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -271,9 +271,8 @@ function InserterMenu( showMedia={ showMedia } prioritizePatterns={ prioritizePatterns } onSelect={ handleSetSelectedTab } - > - { inserterTabsContents } - + tabsContents={ inserterTabsContents } + /> ) } { ! delayedFilterValue && ! showAsTabs && (
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index 5296c9fab7f737..72b13425bbbe79 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -30,11 +30,11 @@ const mediaTab = { }; function InserterTabs( { - children, showPatterns = false, showMedia = false, onSelect, prioritizePatterns, + tabsContents, } ) { const tabs = useMemo( () => { const tempTabs = []; @@ -67,7 +67,7 @@ function InserterTabs( { tabId={ tab.name } focusable={ false } > - { children[ tab.name ] } + { tabsContents[ tab.name ] } ) ) }