From 32f21e706ff34f128a63db2358c603f2239e6cd2 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 27 Mar 2024 13:06:05 -0500 Subject: [PATCH 01/24] WIP for switching patterns to tab navigation --- .../inserter/block-patterns-tab/index.js | 79 +++++++++++++------ .../src/components/inserter/menu.js | 74 ++++++++--------- 2 files changed, 94 insertions(+), 59 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 378bd996bf93b..e5e1a75e0769d 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -5,11 +5,10 @@ import { useState } from '@wordpress/element'; import { __, isRTL } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; import { - __experimentalItemGroup as ItemGroup, - __experimentalItem as Item, __experimentalHStack as HStack, FlexBlock, Button, + privateApis as componentsPrivateApis, } from '@wordpress/components'; import { Icon, chevronRight, chevronLeft } from '@wordpress/icons'; @@ -20,12 +19,16 @@ import PatternsExplorerModal from '../block-patterns-explorer'; import MobileTabNavigation from '../mobile-tab-navigation'; import { PatternCategoryPreviews } from './pattern-category-previews'; import { usePatternCategories } from './use-pattern-categories'; +import { unlock } from '../../../lock-unlock'; + +const { Tabs } = unlock( componentsPrivateApis ); function BlockPatternsTab( { onSelectCategory, selectedCategory, onInsert, rootClientId, + children, } ) { const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false ); @@ -34,22 +37,47 @@ function BlockPatternsTab( { const initialCategory = selectedCategory || categories[ 0 ]; const isMobile = useViewportMatch( 'medium', '<' ); + // const patternsContent = useMemo( + // () => ( + // + // ), + // [ + // destinationRootClientId, + // onInsertPattern, + // onClickPatternCategory, + // selectedPatternCategory, + // ] + // ); + return ( <> { ! isMobile && (
- + + { categories.map( ( category ) => ( + + { children } + + ) ) } + +
) } { isMobile && ( diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 9e1322f0435fe..21f711fbff244 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -155,23 +155,6 @@ function InserterMenu( ] ); - const patternsTab = useMemo( - () => ( - - ), - [ - destinationRootClientId, - onInsertPattern, - onClickPatternCategory, - selectedPatternCategory, - ] - ); - const mediaTab = useMemo( () => ( ( { - blocks: blocksTab, - patterns: patternsTab, - media: mediaTab, - } ), - [ blocksTab, mediaTab, patternsTab ] - ); - const searchRef = useRef(); useImperativeHandle( ref, () => ( { focusSearch: () => { @@ -223,6 +197,44 @@ function InserterMenu( setSelectedTab( value ); }; + const patternsTab = useMemo( + () => ( + + { showPatternPanel && ( + + ) } + + ), + [ + destinationRootClientId, + onInsertPattern, + onClickPatternCategory, + selectedPatternCategory, + showPatternPanel, + ] + ); + + const inserterTabsContents = useMemo( + () => ( { + blocks: blocksTab, + patterns: patternsTab, + media: mediaTab, + } ), + [ blocksTab, mediaTab, patternsTab ] + ); + return (
) } - { showPatternPanel && ( - - ) }
); } From d9d8fd3d6257b5f9d3754b9c57f2db21ac134bff Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 27 Mar 2024 14:22:39 -0500 Subject: [PATCH 02/24] remove unused code --- .../inserter/block-patterns-tab/index.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index e5e1a75e0769d..a1d1682d55a8d 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -37,23 +37,6 @@ function BlockPatternsTab( { const initialCategory = selectedCategory || categories[ 0 ]; const isMobile = useViewportMatch( 'medium', '<' ); - // const patternsContent = useMemo( - // () => ( - // - // ), - // [ - // destinationRootClientId, - // onInsertPattern, - // onClickPatternCategory, - // selectedPatternCategory, - // ] - // ); - return ( <> { ! isMobile && ( From 7b4fbf11c444ff89a6fe46e275dd44a1cc0ef9fa Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 28 Mar 2024 09:22:58 -0500 Subject: [PATCH 03/24] Let tabs component handle focus --- .../inserter/block-patterns-tab/index.js | 1 + .../pattern-category-preview-panel.js | 40 +++++-------------- 2 files changed, 10 insertions(+), 31 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index a1d1682d55a8d..3cc8a4a55af24 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -93,6 +93,7 @@ function BlockPatternsTab( { key={ category.name } tabId={ category.name } focusable={ false } + className="block-editor-inserter__patterns-category-dialog" > { children } diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js index 7a5a9eb8d989e..7e34bd963c383 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js @@ -1,10 +1,3 @@ -/** - * WordPress dependencies - */ -import { useRef, useEffect } from '@wordpress/element'; - -import { focus } from '@wordpress/dom'; - /** * Internal dependencies */ @@ -20,34 +13,19 @@ export function PatternCategoryPreviewPanel( { showTitlesAsTooltip, patternFilter, } ) { - const container = useRef(); - - useEffect( () => { - const timeout = setTimeout( () => { - const [ firstTabbable ] = focus.tabbable.find( container.current ); - firstTabbable?.focus(); - } ); - return () => clearTimeout( timeout ); - }, [ category ] ); - // Move to zoom out mode when this component is mounted // and back to the previous mode when unmounted. useZoomOut(); return ( -
- -
+ ); } From 4e83e4ba05e4661f3879b3e3d51397b04a2a2e7b Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 28 Mar 2024 12:05:38 -0500 Subject: [PATCH 04/24] Pattern tab styles --- .../inserter/block-patterns-tab/index.js | 28 ++--- .../pattern-category-previews.js | 4 +- .../src/components/inserter/style.scss | 118 ++++++++++-------- .../src/components/inserter/tabs.js | 9 +- 4 files changed, 88 insertions(+), 71 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 3cc8a4a55af24..1186a2360d6bc 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -43,8 +43,6 @@ function BlockPatternsTab( {
{ @@ -56,16 +54,12 @@ function BlockPatternsTab( { ); } } > - + { categories.map( ( category ) => ( { children } @@ -111,13 +105,15 @@ function BlockPatternsTab( { { isMobile && ( { ( category ) => ( - +
+ +
) } ) } diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js index 7b8fd8e76202a..8a4bedbb4a5fc 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js @@ -128,7 +128,7 @@ export function PatternCategoryPreviews( { ); return ( -
+ <> ) } -
+ ); } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 580e4ec0e21f2..5098c49821db5 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -62,7 +62,7 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__popover .block-editor-inserter__menu { margin: -$grid-unit-15; - .block-editor-inserter__tabs div[role="tablist"] { + .block-editor-inserter__tablist { top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15; } @@ -115,7 +115,7 @@ $block-inserter-tabs-height: 44px; flex-direction: column; overflow: hidden; - div[role="tablist"] { + .block-editor-inserter__tablist { border-bottom: $border-width solid $gray-300; button[role="tab"] { @@ -130,7 +130,7 @@ $block-inserter-tabs-height: 44px; } } - div[role="tabpanel"] { + .block-editor-inserter__tabpanel { display: flex; flex-grow: 1; flex-direction: column; @@ -246,56 +246,77 @@ $block-inserter-tabs-height: 44px; width: 100%; } -.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category { - color: var(--wp-admin-theme-color); - position: relative; - - .components-flex-item { - filter: brightness(0.95); - } - - svg { - fill: var(--wp-admin-theme-color); - } - - &::after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: $radius-block-ui; - opacity: 0.04; - background: var(--wp-admin-theme-color); - } -} - .block-editor-inserter__block-patterns-tabs-container { height: 100%; - nav { - height: 100%; - } } -.block-editor-inserter__block-patterns-tabs { +.block-editor-inserter__block-patterns-tablist { display: flex; flex-direction: column; padding: $grid-unit-20; overflow-y: auto; height: 100%; + border: none; // Push the listitem wrapping the "explore" button to the bottom of the panel. div[role="listitem"]:last-child { margin-top: auto; } - .block-editor-inserter__patterns-category { + .block-editor-inserter__patterns-tab { // Account for the icon on the right so that it's visually balanced. padding-right: $grid-unit-05; + text-align: left; + font-weight: inherit; + display: block; + position: relative; + + &[aria-selected="true"] { + color: var(--wp-admin-theme-color); + + .components-flex-item { + filter: brightness(0.95); + } + + svg { + fill: var(--wp-admin-theme-color); + } + + &::after { + content: ""; + display: block; + outline: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: $radius-block-ui; + opacity: 0.04; + background: var(--wp-admin-theme-color); + height: 100%; + } + } + + &:focus-visible, + &:focus:not(:disabled) { + border-radius: 2px; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + // Windows high contrast mode. + outline: 2px solid transparent; + outline-offset: 0; + } + + &::before { + display: none; + } + + &::after { + display: none; + } } } -.block-editor-inserter__patterns-category-dialog { +.block-editor-inserter__patterns-category-panel { background: $gray-100; border-left: $border-width solid $gray-200; border-right: $border-width solid $gray-200; @@ -304,35 +325,30 @@ $block-inserter-tabs-height: 44px; left: 0; height: 100%; width: 100%; + padding: 0 $grid-unit-20; + display: flex; + flex-direction: column; @include break-medium { + padding: 0; left: 100%; display: block; width: 300px; } - .block-editor-block-patterns-list { - overflow-y: auto; - flex-grow: 1; - height: 100%; - padding: $grid-unit-20 $grid-unit-30; - } -} - -.block-editor-inserter__patterns-category-panel { - padding: 0 $grid-unit-20; - display: flex; - flex-direction: column; - height: 100%; - @include break-medium { - padding: 0; - } .block-editor-inserter__patterns-category-panel-header { padding: 16px $grid-unit-30; } .block-editor-inserter__patterns-category-no-results { margin-top: $grid-unit-30; } + + .block-editor-block-patterns-list { + overflow-y: auto; + flex-grow: 1; + height: 100%; + padding: $grid-unit-20 $grid-unit-30; + } } .block-editor-inserter__preview-content { @@ -763,7 +779,7 @@ $block-inserter-tabs-height: 44px; display: flex; } - .block-editor-inserter__patterns-category-dialog { + .block-editor-inserter__patterns-category-panel { position: static; } diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index 4795c3ce4fdc2..ad9cd4888bd94 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -43,9 +43,13 @@ function InserterTabs( { return (
- + { tabs.map( ( tab ) => ( - + { tab.title } ) ) } @@ -55,6 +59,7 @@ function InserterTabs( { key={ tab.name } tabId={ tab.name } focusable={ false } + className="block-editor-inserter__tabpanel" > { tabsContents[ tab.name ] } From 12f9f24be327abf3f8b04ec117be4725eeccd79d Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 28 Mar 2024 12:44:52 -0500 Subject: [PATCH 05/24] Fix overflow scrolling on tablist --- .../block-editor/src/components/inserter/style.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 5098c49821db5..2c8707f8a1286 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -242,21 +242,18 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__patterns-explore-button.components-button { padding: $grid-unit-20; justify-content: center; - margin-top: $grid-unit-20; width: 100%; } .block-editor-inserter__block-patterns-tabs-container { - height: 100%; + padding: $grid-unit-20; } .block-editor-inserter__block-patterns-tablist { display: flex; flex-direction: column; - padding: $grid-unit-20; - overflow-y: auto; - height: 100%; border: none; + margin-bottom: $grid-unit-10; // Push the listitem wrapping the "explore" button to the bottom of the panel. div[role="listitem"]:last-child { margin-top: auto; @@ -264,11 +261,12 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__patterns-tab { // Account for the icon on the right so that it's visually balanced. - padding-right: $grid-unit-05; + padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15; text-align: left; font-weight: inherit; display: block; position: relative; + height: auto; &[aria-selected="true"] { color: var(--wp-admin-theme-color); From 7acdeb90d9a5a31443962702564ffc10e99a8cd6 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 28 Mar 2024 13:37:26 -0500 Subject: [PATCH 06/24] Select first tab on patterns open I don't like this interaction because so much happens when you change the tab, but otherwise the first element of the tab panel isn't set when you initially move focus to the panel, so nothing is focused. It seems like there's a bug where you can't have a panel focused but not selected intially --- .../src/components/inserter/block-patterns-tab/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 1186a2360d6bc..e1f824a5082ae 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -34,7 +34,6 @@ function BlockPatternsTab( { const categories = usePatternCategories( rootClientId ); - const initialCategory = selectedCategory || categories[ 0 ]; const isMobile = useViewportMatch( 'medium', '<' ); return ( @@ -44,7 +43,6 @@ function BlockPatternsTab( { { // Pass the full category object onSelectCategory( @@ -119,7 +117,7 @@ function BlockPatternsTab( { ) } { showPatternsExplorer && ( setShowPatternsExplorer( false ) } rootClientId={ rootClientId } From e8f8d9c5ef40438ec7c1efe264622a4755611600 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 28 Mar 2024 14:34:23 -0500 Subject: [PATCH 07/24] Add placeholder to offset zoom-out mode space for tabpanel --- packages/block-editor/src/components/inserter/menu.js | 4 ++++ .../block-editor/src/components/inserter/style.scss | 11 +++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 21f711fbff244..43e47ff3353ca 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -68,6 +68,7 @@ function InserterMenu( insertionIndex: __experimentalInsertionIndex, shouldFocusBlock, } ); + const { showPatterns } = useSelect( ( select ) => { const { hasAllowedPatterns } = unlock( select( blockEditorStore ) ); @@ -304,6 +305,9 @@ function InserterMenu( ) } + { showPatternPanel && ( +
+ ) }
); } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 2c8707f8a1286..fd7b5fff9e0fe 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -772,13 +772,20 @@ $block-inserter-tabs-height: 44px; } } +// Only relevant in zoom-out-mode +.block-editor-inserter__pattern-panel-placeholder { + display: none; +} + .is-zoom-out { .block-editor-inserter__menu { display: flex; } - .block-editor-inserter__patterns-category-panel { - position: static; + .block-editor-inserter__pattern-panel-placeholder { + display: block; + width: 300px; + height: 100%; } .block-editor-inserter__media-dialog { From 95951d29d8bc5d619438e21da35c11592d0f8edd Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 28 Mar 2024 15:16:05 -0500 Subject: [PATCH 08/24] Fix overflow on zoom out mode pattern inserter --- packages/block-editor/src/components/inserter/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index fd7b5fff9e0fe..b4dc40b425820 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -330,7 +330,6 @@ $block-inserter-tabs-height: 44px; @include break-medium { padding: 0; left: 100%; - display: block; width: 300px; } From 96ebe8ad77946d05bb40d3f4f885fabe0ce7bce0 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 29 Mar 2024 09:35:55 -0500 Subject: [PATCH 09/24] Refactor making space for side panel by using :after --- .../block-editor/src/components/inserter/menu.js | 9 +++++---- .../block-editor/src/components/inserter/style.scss | 12 ++++++++---- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 43e47ff3353ca..57cba6065c828 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -237,7 +237,11 @@ function InserterMenu( ); return ( -
+
) } - { showPatternPanel && ( -
- ) }
); } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index b4dc40b425820..87e9b04fddaf5 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -781,10 +781,14 @@ $block-inserter-tabs-height: 44px; display: flex; } - .block-editor-inserter__pattern-panel-placeholder { - display: block; - width: 300px; - height: 100%; + .show-panel::after { + // Makes space for the inserter flyout panel + @include break-medium { + content: ""; + display: block; + width: 300px; + height: 100%; + } } .block-editor-inserter__media-dialog { From 74cd1925ed2d7c040442cbec6b6ba3da64802e03 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 29 Mar 2024 13:00:46 -0500 Subject: [PATCH 10/24] Fix performance test --- .../post-editor.performance-results.json | 3 + .../post-editor.performance-results.raw.json | 23 ++++++++ .../artifacts/storage-states/admin.json | 56 +++++++++++++++++++ test/performance/specs/post-editor.spec.js | 2 +- 4 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 test/performance/artifacts/post-editor.performance-results.json create mode 100644 test/performance/artifacts/post-editor.performance-results.raw.json create mode 100644 test/performance/artifacts/storage-states/admin.json diff --git a/test/performance/artifacts/post-editor.performance-results.json b/test/performance/artifacts/post-editor.performance-results.json new file mode 100644 index 0000000000000..7fcf1ac600e84 --- /dev/null +++ b/test/performance/artifacts/post-editor.performance-results.json @@ -0,0 +1,3 @@ +{ + "loadPatterns": 2157.14 +} diff --git a/test/performance/artifacts/post-editor.performance-results.raw.json b/test/performance/artifacts/post-editor.performance-results.raw.json new file mode 100644 index 0000000000000..0d6696acfb0bc --- /dev/null +++ b/test/performance/artifacts/post-editor.performance-results.raw.json @@ -0,0 +1,23 @@ +{ + "serverResponse": [], + "firstPaint": [], + "domContentLoaded": [], + "loaded": [], + "firstContentfulPaint": [], + "firstBlock": [], + "type": [], + "typeWithoutInspector": [], + "typeWithTopToolbar": [], + "typeContainer": [], + "focus": [], + "listViewOpen": [], + "inserterOpen": [], + "inserterHover": [], + "inserterSearch": [], + "loadPatterns": [ + 6520.134291999999, 670.5597500000003, 506.68683299999975, + 719.2165410000016, 771.6043750000026, 10102.817540999997, + 641.4196670000092, 479.9243340000103, 664.5374169999996, + 494.4980829999986 + ] +} diff --git a/test/performance/artifacts/storage-states/admin.json b/test/performance/artifacts/storage-states/admin.json new file mode 100644 index 0000000000000..8d296a0b76ba7 --- /dev/null +++ b/test/performance/artifacts/storage-states/admin.json @@ -0,0 +1,56 @@ +{ + "cookies": [ + { + "name": "wordpress_test_cookie", + "value": "WP%20Cookie%20check", + "domain": "localhost", + "path": "/", + "expires": -1, + "httpOnly": false, + "secure": false, + "sameSite": "Lax" + }, + { + "name": "wordpress_23778236db82f19306f247e20a353a99", + "value": "admin%7C1711907943%7CtWifXsXSAry50DcXCuRr2JUWjlMvQRitNF73dQu8t9A%7C5cf6d0c3539dc80685926b0fe455287b51f3fd1bc9f599cdc93acde19854e155", + "domain": "localhost", + "path": "/wp-content/plugins", + "expires": -1, + "httpOnly": true, + "secure": false, + "sameSite": "Lax" + }, + { + "name": "wordpress_23778236db82f19306f247e20a353a99", + "value": "admin%7C1711907943%7CtWifXsXSAry50DcXCuRr2JUWjlMvQRitNF73dQu8t9A%7C5cf6d0c3539dc80685926b0fe455287b51f3fd1bc9f599cdc93acde19854e155", + "domain": "localhost", + "path": "/wp-admin", + "expires": -1, + "httpOnly": true, + "secure": false, + "sameSite": "Lax" + }, + { + "name": "wordpress_logged_in_23778236db82f19306f247e20a353a99", + "value": "admin%7C1711907943%7CtWifXsXSAry50DcXCuRr2JUWjlMvQRitNF73dQu8t9A%7C94b42f0b00ce0e5a542903b570e2259a2eeab00e57b6c073cb9ee3fc358644c5", + "domain": "localhost", + "path": "/", + "expires": -1, + "httpOnly": true, + "secure": false, + "sameSite": "Lax" + }, + { + "name": "wp-settings-time-1", + "value": "1711735143", + "domain": "localhost", + "path": "/", + "expires": 1743271143.643, + "httpOnly": false, + "secure": false, + "sameSite": "Lax" + } + ], + "nonce": "e0dc2a5e86", + "rootURL": "http://localhost:8889/index.php?rest_route=/" +} diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js index e720396afe5da..f3b3ddff6ae43 100644 --- a/test/performance/specs/post-editor.spec.js +++ b/test/performance/specs/post-editor.spec.js @@ -657,7 +657,7 @@ test.describe( 'Post Editor Performance', () => { const startTime = performance.now(); - await page.getByRole( 'button', { name: 'Test' } ).click(); + await page.getByRole( 'tab', { name: 'Test' } ).click(); await Promise.all( testPatterns.map( async ( pattern ) => { From 1ec4685ea1ae6aa2242ebaa934e1db81078e425a Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 2 Apr 2024 16:46:30 -0500 Subject: [PATCH 11/24] Fix useZoomOut mode hook to only run when showing and hiding the patterns panel --- packages/block-editor/README.md | 4 +++ .../pattern-category-preview-panel.js | 5 --- .../src/components/inserter/menu.js | 4 +++ .../block-editor/src/hooks/use-zoom-out.js | 35 ++++++++++++------- 4 files changed, 31 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 75f4d1143895e..154ea248ae651 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -1032,6 +1032,10 @@ _Returns_ A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. +_Parameters_ + +- _zoomOut_ `boolean`: If we should enter into zoomOut mode or not + ### Warning _Related_ diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js index 7e34bd963c383..04f25ade4880d 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js @@ -3,7 +3,6 @@ */ import { PatternCategoryPreviews } from './pattern-category-previews'; -import { useZoomOut } from '../../../hooks/use-zoom-out'; export function PatternCategoryPreviewPanel( { rootClientId, @@ -13,10 +12,6 @@ export function PatternCategoryPreviewPanel( { showTitlesAsTooltip, patternFilter, } ) { - // Move to zoom out mode when this component is mounted - // and back to the previous mode when unmounted. - useZoomOut(); - return ( {}; function InserterMenu( @@ -190,6 +191,9 @@ function InserterMenu( ! delayedFilterValue && selectedMediaCategory; + // When the pattern panel is showing, we want to use zoom out mode + useZoomOut( showPatternPanel ); + const handleSetSelectedTab = ( value ) => { // If no longer on patterns tab remove the category setting. if ( value !== 'patterns' ) { diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 84603c0161dd4..b060b71e52980 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; /** * Internal dependencies @@ -11,8 +11,10 @@ import { store as blockEditorStore } from '../store'; /** * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. + * + * @param {boolean} zoomOut If we should enter into zoomOut mode or not */ -export function useZoomOut() { +export function useZoomOut( zoomOut = true ) { const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const { mode } = useSelect( ( select ) => { return { @@ -20,17 +22,26 @@ export function useZoomOut() { }; }, [] ); - // Intentionality left without any dependency. - // This effect should only run when the component is rendered and unmounted. - // The effect opens the zoom-out view if it is not open before when applying a style variation. + const originalEditingMode = useRef( null ); + useEffect( () => { - if ( mode !== 'zoom-out' ) { - __unstableSetEditorMode( 'zoom-out' ); - return () => { - // Revert to original mode - __unstableSetEditorMode( mode ); - }; + // Only set this on mount so we know what to return to when we unmount. + if ( ! originalEditingMode.current ) { + originalEditingMode.current = mode; } - // eslint-disable-next-line react-hooks/exhaustive-deps + + return () => { + // Reset to original mode on unmount + __unstableSetEditorMode( originalEditingMode.current ); + }; }, [] ); + + // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode. + useEffect( () => { + if ( zoomOut && mode !== 'zoom-out' ) { + __unstableSetEditorMode( 'zoom-out' ); + } else if ( ! zoomOut && originalEditingMode.current !== mode ) { + __unstableSetEditorMode( originalEditingMode.current ); + } + }, [ zoomOut, mode ] ); } From 494e72d2b904bb5449b67e508817c3dc9d4738ab Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 2 Apr 2024 16:57:40 -0500 Subject: [PATCH 12/24] More tweaks to zoom out mode hook to simplify --- packages/block-editor/src/hooks/use-zoom-out.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index b060b71e52980..4716abf775c52 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -16,13 +16,10 @@ import { store as blockEditorStore } from '../store'; */ export function useZoomOut( zoomOut = true ) { const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); - const { mode } = useSelect( ( select ) => { - return { - mode: select( blockEditorStore ).__unstableGetEditorMode(), - }; - }, [] ); + const { __unstableGetEditorMode } = useSelect( blockEditorStore ); const originalEditingMode = useRef( null ); + const mode = __unstableGetEditorMode(); useEffect( () => { // Only set this on mount so we know what to return to when we unmount. @@ -31,8 +28,10 @@ export function useZoomOut( zoomOut = true ) { } return () => { - // Reset to original mode on unmount - __unstableSetEditorMode( originalEditingMode.current ); + // We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount + if ( __unstableGetEditorMode() !== originalEditingMode.current ) { + __unstableSetEditorMode( originalEditingMode.current ); + } }; }, [] ); From a405a756ac366c85998df58ad7ffb08d26edbe02 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 3 Apr 2024 15:38:24 -0500 Subject: [PATCH 13/24] Use tabs in controlled mode so there is no initial category set --- .../src/components/inserter/block-patterns-tab/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index e1f824a5082ae..34993fc6db87f 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -42,6 +42,9 @@ function BlockPatternsTab( {
{ // Pass the full category object From c2d2ecb3e55e63d1b668f84a3185c84f42425cb5 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Mon, 8 Apr 2024 15:40:31 -0500 Subject: [PATCH 14/24] Allow tab to be active but not selected If defaultSelectedId is undefined, it will automatically set the first tab as selected. --- packages/components/src/tabs/index.tsx | 22 ++++++++++++++++++---- packages/components/src/tabs/types.ts | 7 +++++++ 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index aaae3ed252750..2a0f9aafe802f 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -30,13 +30,18 @@ function Tabs( { orientation = 'horizontal', onSelect, children, + selectedOnMount = true, selectedTabId, }: TabsProps ) { const instanceId = useInstanceId( Tabs, 'tabs' ); + const store = Ariakit.useTabStore( { selectOnMove, orientation, - defaultSelectedId: defaultTabId && `${ instanceId }-${ defaultTabId }`, + defaultSelectedId: + defaultTabId && selectedOnMount + ? `${ instanceId }-${ defaultTabId }` + : null, setSelectedId: ( selectedId ) => { const strippedDownId = typeof selectedId === 'string' @@ -48,7 +53,6 @@ function Tabs( { } ); const isControlled = selectedTabId !== undefined; - const { items, selectedId, activeId } = store.useState(); const { setSelectedId, setActiveId } = store; @@ -83,17 +87,25 @@ function Tabs( { return; } + const setInitialTab = ( tabId: string | undefined ) => { + if ( selectedOnMount ) { + setSelectedId( tabId ); + } else { + setActiveId( tabId ); + } + }; + // If the currently selected tab is missing (i.e. removed from the DOM), // fall back to the initial tab or the first enabled tab if there is // one. Otherwise, no tab should be selected. if ( ! items.find( ( item ) => item.id === selectedId ) ) { if ( initialTab && ! initialTab.dimmed ) { - setSelectedId( initialTab?.id ); + setInitialTab( initialTab?.id ); return; } if ( firstEnabledTab ) { - setSelectedId( firstEnabledTab.id ); + setInitialTab( firstEnabledTab.id ); } else if ( tabsHavePopulated.current ) { setSelectedId( null ); } @@ -105,6 +117,8 @@ function Tabs( { isControlled, items, selectedId, + selectedOnMount, + setActiveId, setSelectedId, ] ); diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts index 1a9e6477385f6..f76e61e0154e0 100644 --- a/packages/components/src/tabs/types.ts +++ b/packages/components/src/tabs/types.ts @@ -44,6 +44,13 @@ export type TabsProps = { * provided. (Controlled Mode) */ defaultTabId?: string; + /** + * If the initial tab should show the tab pane (be selected) or only + * show the active tab. + * + * @default true + */ + selectedOnMount?: boolean; /** * The function called when a tab has been selected. * It is passed the id of the newly selected tab as an argument. From 00c5c20522e79e71a181bf69616229fcb4dee156 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Mon, 8 Apr 2024 15:42:26 -0500 Subject: [PATCH 15/24] Use selectedOnMount prop --- .../src/components/inserter/block-patterns-tab/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 34993fc6db87f..770861c1f39a9 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -42,9 +42,7 @@ function BlockPatternsTab( {
{ // Pass the full category object From 1a44230524829ca21ec019dae2ba96a7aac7db43 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 11 Apr 2024 10:51:31 -0500 Subject: [PATCH 16/24] Revert "Allow tab to be active but not selected" This reverts commit 4c6274fdf994f349f711bfc118f3ebeeb1733d81. --- packages/components/src/tabs/index.tsx | 22 ++++------------------ packages/components/src/tabs/types.ts | 7 ------- 2 files changed, 4 insertions(+), 25 deletions(-) diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index 2a0f9aafe802f..aaae3ed252750 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -30,18 +30,13 @@ function Tabs( { orientation = 'horizontal', onSelect, children, - selectedOnMount = true, selectedTabId, }: TabsProps ) { const instanceId = useInstanceId( Tabs, 'tabs' ); - const store = Ariakit.useTabStore( { selectOnMove, orientation, - defaultSelectedId: - defaultTabId && selectedOnMount - ? `${ instanceId }-${ defaultTabId }` - : null, + defaultSelectedId: defaultTabId && `${ instanceId }-${ defaultTabId }`, setSelectedId: ( selectedId ) => { const strippedDownId = typeof selectedId === 'string' @@ -53,6 +48,7 @@ function Tabs( { } ); const isControlled = selectedTabId !== undefined; + const { items, selectedId, activeId } = store.useState(); const { setSelectedId, setActiveId } = store; @@ -87,25 +83,17 @@ function Tabs( { return; } - const setInitialTab = ( tabId: string | undefined ) => { - if ( selectedOnMount ) { - setSelectedId( tabId ); - } else { - setActiveId( tabId ); - } - }; - // If the currently selected tab is missing (i.e. removed from the DOM), // fall back to the initial tab or the first enabled tab if there is // one. Otherwise, no tab should be selected. if ( ! items.find( ( item ) => item.id === selectedId ) ) { if ( initialTab && ! initialTab.dimmed ) { - setInitialTab( initialTab?.id ); + setSelectedId( initialTab?.id ); return; } if ( firstEnabledTab ) { - setInitialTab( firstEnabledTab.id ); + setSelectedId( firstEnabledTab.id ); } else if ( tabsHavePopulated.current ) { setSelectedId( null ); } @@ -117,8 +105,6 @@ function Tabs( { isControlled, items, selectedId, - selectedOnMount, - setActiveId, setSelectedId, ] ); diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts index f76e61e0154e0..1a9e6477385f6 100644 --- a/packages/components/src/tabs/types.ts +++ b/packages/components/src/tabs/types.ts @@ -44,13 +44,6 @@ export type TabsProps = { * provided. (Controlled Mode) */ defaultTabId?: string; - /** - * If the initial tab should show the tab pane (be selected) or only - * show the active tab. - * - * @default true - */ - selectedOnMount?: boolean; /** * The function called when a tab has been selected. * It is passed the id of the newly selected tab as an argument. From b7c495e9e115eb7dacea823cd4df3613994182d7 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 11 Apr 2024 10:53:35 -0500 Subject: [PATCH 17/24] Revert "Use selectedOnMount prop" This reverts commit eaef7d3d3173a80678fd780f2427e251f0c614a1. --- .../src/components/inserter/block-patterns-tab/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 770861c1f39a9..34993fc6db87f 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -42,7 +42,9 @@ function BlockPatternsTab( {
{ // Pass the full category object From 91fffabce544bd22df1843af9daa419e1bc6537d Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 16 Apr 2024 11:06:07 -0500 Subject: [PATCH 18/24] Remove artifacts from local e2e performance test --- .../post-editor.performance-results.json | 3 - .../post-editor.performance-results.raw.json | 23 -------- .../artifacts/storage-states/admin.json | 56 ------------------- 3 files changed, 82 deletions(-) delete mode 100644 test/performance/artifacts/post-editor.performance-results.json delete mode 100644 test/performance/artifacts/post-editor.performance-results.raw.json delete mode 100644 test/performance/artifacts/storage-states/admin.json diff --git a/test/performance/artifacts/post-editor.performance-results.json b/test/performance/artifacts/post-editor.performance-results.json deleted file mode 100644 index 7fcf1ac600e84..0000000000000 --- a/test/performance/artifacts/post-editor.performance-results.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "loadPatterns": 2157.14 -} diff --git a/test/performance/artifacts/post-editor.performance-results.raw.json b/test/performance/artifacts/post-editor.performance-results.raw.json deleted file mode 100644 index 0d6696acfb0bc..0000000000000 --- a/test/performance/artifacts/post-editor.performance-results.raw.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "serverResponse": [], - "firstPaint": [], - "domContentLoaded": [], - "loaded": [], - "firstContentfulPaint": [], - "firstBlock": [], - "type": [], - "typeWithoutInspector": [], - "typeWithTopToolbar": [], - "typeContainer": [], - "focus": [], - "listViewOpen": [], - "inserterOpen": [], - "inserterHover": [], - "inserterSearch": [], - "loadPatterns": [ - 6520.134291999999, 670.5597500000003, 506.68683299999975, - 719.2165410000016, 771.6043750000026, 10102.817540999997, - 641.4196670000092, 479.9243340000103, 664.5374169999996, - 494.4980829999986 - ] -} diff --git a/test/performance/artifacts/storage-states/admin.json b/test/performance/artifacts/storage-states/admin.json deleted file mode 100644 index 8d296a0b76ba7..0000000000000 --- a/test/performance/artifacts/storage-states/admin.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "cookies": [ - { - "name": "wordpress_test_cookie", - "value": "WP%20Cookie%20check", - "domain": "localhost", - "path": "/", - "expires": -1, - "httpOnly": false, - "secure": false, - "sameSite": "Lax" - }, - { - "name": "wordpress_23778236db82f19306f247e20a353a99", - "value": "admin%7C1711907943%7CtWifXsXSAry50DcXCuRr2JUWjlMvQRitNF73dQu8t9A%7C5cf6d0c3539dc80685926b0fe455287b51f3fd1bc9f599cdc93acde19854e155", - "domain": "localhost", - "path": "/wp-content/plugins", - "expires": -1, - "httpOnly": true, - "secure": false, - "sameSite": "Lax" - }, - { - "name": "wordpress_23778236db82f19306f247e20a353a99", - "value": "admin%7C1711907943%7CtWifXsXSAry50DcXCuRr2JUWjlMvQRitNF73dQu8t9A%7C5cf6d0c3539dc80685926b0fe455287b51f3fd1bc9f599cdc93acde19854e155", - "domain": "localhost", - "path": "/wp-admin", - "expires": -1, - "httpOnly": true, - "secure": false, - "sameSite": "Lax" - }, - { - "name": "wordpress_logged_in_23778236db82f19306f247e20a353a99", - "value": "admin%7C1711907943%7CtWifXsXSAry50DcXCuRr2JUWjlMvQRitNF73dQu8t9A%7C94b42f0b00ce0e5a542903b570e2259a2eeab00e57b6c073cb9ee3fc358644c5", - "domain": "localhost", - "path": "/", - "expires": -1, - "httpOnly": true, - "secure": false, - "sameSite": "Lax" - }, - { - "name": "wp-settings-time-1", - "value": "1711735143", - "domain": "localhost", - "path": "/", - "expires": 1743271143.643, - "httpOnly": false, - "secure": false, - "sameSite": "Lax" - } - ], - "nonce": "e0dc2a5e86", - "rootURL": "http://localhost:8889/index.php?rest_route=/" -} From c15acb27aca76da4920e32ee8c29692c2fb66e41 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 16 Apr 2024 11:06:28 -0500 Subject: [PATCH 19/24] update tests to use the new tab role instead of button role --- test/e2e/specs/editor/plugins/pattern-recursion.spec.js | 2 +- test/e2e/specs/editor/various/patterns.spec.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/plugins/pattern-recursion.spec.js b/test/e2e/specs/editor/plugins/pattern-recursion.spec.js index 069f33d671d68..9a8292271be8e 100644 --- a/test/e2e/specs/editor/plugins/pattern-recursion.spec.js +++ b/test/e2e/specs/editor/plugins/pattern-recursion.spec.js @@ -66,7 +66,7 @@ test.describe( 'Preventing Pattern Recursion (server)', () => { // Click the Patterns tab await page.getByRole( 'tab', { name: 'Patterns' } ).click(); // Click the Uncategorized tab - await page.getByRole( 'button', { name: 'Uncategorized' } ).click(); + await page.getByRole( 'tab', { name: 'Uncategorized' } ).click(); // Click the Evil recursive pattern await page.getByRole( 'option', { name: 'Evil recursive' } ).click(); // By simply checking the editor content, we know that the pattern diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js index 1d0807264413b..4c12847f93372 100644 --- a/test/e2e/specs/editor/various/patterns.spec.js +++ b/test/e2e/specs/editor/various/patterns.spec.js @@ -70,7 +70,7 @@ test.describe( 'Unsynced pattern', () => { } ) .click(); await page - .getByRole( 'button', { + .getByRole( 'tab', { name: newCategory, } ) .click(); @@ -185,7 +185,7 @@ test.describe( 'Synced pattern', () => { } ) .click(); await page - .getByRole( 'button', { + .getByRole( 'tab', { name: newCategory, } ) .click(); From 9918882c1d0d0bd37bdccd516b4091f2035a6540 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 16 Apr 2024 14:30:36 -0500 Subject: [PATCH 20/24] Temporary workaround for performance test --- test/performance/specs/post-editor.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js index f3b3ddff6ae43..c8010c79b1550 100644 --- a/test/performance/specs/post-editor.spec.js +++ b/test/performance/specs/post-editor.spec.js @@ -657,7 +657,7 @@ test.describe( 'Post Editor Performance', () => { const startTime = performance.now(); - await page.getByRole( 'tab', { name: 'Test' } ).click(); + await page.getByText( 'Test' ).click(); await Promise.all( testPatterns.map( async ( pattern ) => { From 18d63559bd235c7d270d5b8c764a13abcf8ccc4e Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 18 Apr 2024 10:05:02 -0500 Subject: [PATCH 21/24] Move some code back to its original location to make the review easier --- .../src/components/inserter/menu.js | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index d5b6b4bce67b5..f42a7f06019cc 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -69,7 +69,6 @@ function InserterMenu( insertionIndex: __experimentalInsertionIndex, shouldFocusBlock, } ); - const { showPatterns } = useSelect( ( select ) => { const { hasAllowedPatterns } = unlock( select( blockEditorStore ) ); @@ -127,6 +126,11 @@ function InserterMenu( [ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ] ); + const showPatternPanel = + selectedTab === 'patterns' && + ! delayedFilterValue && + selectedPatternCategory; + const blocksTab = useMemo( () => ( <> @@ -157,6 +161,35 @@ function InserterMenu( ] ); + const patternsTab = useMemo( + () => ( + + { showPatternPanel && ( + + ) } + + ), + [ + destinationRootClientId, + onInsertPattern, + onClickPatternCategory, + selectedPatternCategory, + showPatternPanel, + ] + ); + const mediaTab = useMemo( () => ( ( { + blocks: blocksTab, + patterns: patternsTab, + media: mediaTab, + } ), + [ blocksTab, mediaTab, patternsTab ] + ); + const searchRef = useRef(); useImperativeHandle( ref, () => ( { focusSearch: () => { @@ -181,10 +223,6 @@ function InserterMenu( }, } ) ); - const showPatternPanel = - selectedTab === 'patterns' && - ! delayedFilterValue && - selectedPatternCategory; const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia ); const showMediaPanel = selectedTab === 'media' && @@ -202,44 +240,6 @@ function InserterMenu( setSelectedTab( value ); }; - const patternsTab = useMemo( - () => ( - - { showPatternPanel && ( - - ) } - - ), - [ - destinationRootClientId, - onInsertPattern, - onClickPatternCategory, - selectedPatternCategory, - showPatternPanel, - ] - ); - - const inserterTabsContents = useMemo( - () => ( { - blocks: blocksTab, - patterns: patternsTab, - media: mediaTab, - } ), - [ blocksTab, mediaTab, patternsTab ] - ); - return (
Date: Thu, 18 Apr 2024 10:14:19 -0500 Subject: [PATCH 22/24] Add missing __unstableSetEditorMode to useZoomOut useEffect dependency Co-authored-by: Dave Smith --- packages/block-editor/src/hooks/use-zoom-out.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 4716abf775c52..ce20cb5bd7a17 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -42,5 +42,5 @@ export function useZoomOut( zoomOut = true ) { } else if ( ! zoomOut && originalEditingMode.current !== mode ) { __unstableSetEditorMode( originalEditingMode.current ); } - }, [ zoomOut, mode ] ); + }, [ __unstableSetEditorMode, zoomOut, mode ] ); } From bf2f485fe74696a8b8c1d5debb74302adf2728dc Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 18 Apr 2024 10:14:33 -0500 Subject: [PATCH 23/24] Update packages/block-editor/src/hooks/use-zoom-out.js Co-authored-by: Dave Smith --- packages/block-editor/src/hooks/use-zoom-out.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index ce20cb5bd7a17..a84b49ec2fe3d 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -33,7 +33,7 @@ export function useZoomOut( zoomOut = true ) { __unstableSetEditorMode( originalEditingMode.current ); } }; - }, [] ); + }, [ __unstableGetEditorMode, __unstableSetEditorMode, mode ] ); // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode. useEffect( () => { From a873e04c50739edcc0b588333800bad4fa8246e4 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 18 Apr 2024 10:54:02 -0500 Subject: [PATCH 24/24] Fix use-zoom-out hooks dependencies --- packages/block-editor/src/hooks/use-zoom-out.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index a84b49ec2fe3d..ce20cb5bd7a17 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -33,7 +33,7 @@ export function useZoomOut( zoomOut = true ) { __unstableSetEditorMode( originalEditingMode.current ); } }; - }, [ __unstableGetEditorMode, __unstableSetEditorMode, mode ] ); + }, [] ); // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode. useEffect( () => {