From 0ab9d708352392fc1d35b0d393bcdf92fd2b4f06 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 15 Dec 2023 12:17:41 +0100 Subject: [PATCH 1/4] Block Editor: several little refactors --- .../pattern-category-previews.js | 16 +++++----- .../use-pattern-categories.js | 29 +++++++++---------- .../src/components/inserter/menu.js | 13 ++++----- .../src/components/inserter/tabs.js | 23 +++++---------- 4 files changed, 33 insertions(+), 48 deletions(-) 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 9e5b6373e54d8..eaa526564972c 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 @@ -70,27 +70,27 @@ export function PatternCategoryPreviews( { if ( category.name === allPatternsCategory.name ) { return true; } + if ( category.name === myPatternsCategory.name && pattern.type === PATTERN_TYPES.user ) { return true; } + if ( category.name !== 'uncategorized' ) { return pattern.categories?.includes( category.name ); } // The uncategorized category should show all the patterns without any category // or with no available category. - const availablePatternCategories = - pattern.categories?.filter( ( cat ) => - availableCategories.find( - ( availableCategory ) => - availableCategory.name === cat - ) - ) ?? []; + if ( pattern.categories ) { + return true; + } - return availablePatternCategories.length === 0; + return ! pattern.categories.some( ( catName ) => + availableCategories.some( ( cat ) => cat.name === catName ) + ); } ), [ allPatterns, diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js b/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js index 12e885954f4bf..9f4d598ce37cb 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useMemo, useCallback } from '@wordpress/element'; +import { useMemo } from '@wordpress/element'; import { _x, _n, sprintf } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; @@ -17,6 +17,16 @@ import { PATTERN_TYPES, } from './utils'; +function hasRegisteredCategory( pattern, allCategories ) { + if ( ! pattern.categories || ! pattern.categories.length ) { + return false; + } + + return pattern.categories.some( ( cat ) => + allCategories.some( ( category ) => category.name === cat ) + ); +} + export function usePatternCategories( rootClientId, sourceFilter = 'all' ) { const [ patterns, allCategories ] = usePatternsState( undefined, @@ -34,19 +44,6 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) { [ sourceFilter, patterns ] ); - const hasRegisteredCategory = useCallback( - ( pattern ) => { - if ( ! pattern.categories || ! pattern.categories.length ) { - return false; - } - - return pattern.categories.some( ( cat ) => - allCategories.some( ( category ) => category.name === cat ) - ); - }, - [ allCategories ] - ); - // Remove any empty categories. const populatedCategories = useMemo( () => { const categories = allCategories @@ -59,7 +56,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) { if ( filteredPatterns.some( - ( pattern ) => ! hasRegisteredCategory( pattern ) + ( pattern ) => ! hasRegisteredCategory( pattern, allCategories ) ) && ! categories.find( ( category ) => category.name === 'uncategorized' @@ -95,7 +92,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) { ) ); return categories; - }, [ allCategories, filteredPatterns, hasRegisteredCategory ] ); + }, [ allCategories, filteredPatterns ] ); return populatedCategories; } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index cd44b902f491a..5baa78eafb6e3 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -67,26 +67,23 @@ function InserterMenu( insertionIndex: __experimentalInsertionIndex, shouldFocusBlock, } ); - const { showPatterns, inserterItems } = useSelect( + const { showPatterns, hasReusableBlocks } = useSelect( ( select ) => { const { hasAllowedPatterns, getInserterItems } = unlock( select( blockEditorStore ) ); return { showPatterns: hasAllowedPatterns( destinationRootClientId ), - inserterItems: getInserterItems( destinationRootClientId ), + hasReusableBlocks: getInserterItems( + destinationRootClientId + ).some( ( item ) => item.category === 'reusable' ), }; }, [ destinationRootClientId ] ); - const hasReusableBlocks = useMemo( () => { - return inserterItems.some( - ( { category } ) => category === 'reusable' - ); - }, [ inserterItems ] ); const mediaCategories = useMediaCategories( destinationRootClientId ); - const showMedia = !! mediaCategories.length; + const showMedia = mediaCategories.length > 0; const onInsert = useCallback( ( blocks, meta, shouldForceFocusBlock ) => { diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js index 72b13425bbbe7..27a1c3f944f66 100644 --- a/packages/block-editor/src/components/inserter/tabs.js +++ b/packages/block-editor/src/components/inserter/tabs.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { useMemo } from '@wordpress/element'; import { privateApis as componentsPrivateApis } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -33,23 +32,15 @@ function InserterTabs( { showPatterns = false, showMedia = false, onSelect, - prioritizePatterns, + prioritizePatterns = false, tabsContents, } ) { - const tabs = useMemo( () => { - const tempTabs = []; - if ( prioritizePatterns && showPatterns ) { - tempTabs.push( patternsTab ); - } - tempTabs.push( blocksTab ); - if ( ! prioritizePatterns && showPatterns ) { - tempTabs.push( patternsTab ); - } - if ( showMedia ) { - tempTabs.push( mediaTab ); - } - return tempTabs; - }, [ prioritizePatterns, showPatterns, showMedia ] ); + const tabs = [ + prioritizePatterns && showPatterns && patternsTab, + blocksTab, + ! prioritizePatterns && showPatterns && patternsTab, + showMedia && mediaTab, + ].filter( Boolean ); return (
From 8e13fdc2c663948f29ff29a16cffd6df32da5af5 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 17:12:31 +1300 Subject: [PATCH 2/4] Remove check for reusable blocks as this tab is not shown in the block editor since this were merged with patterns. --- .../block-editor/src/components/inserter/menu.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 5baa78eafb6e3..24c099869ae0d 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -67,16 +67,11 @@ function InserterMenu( insertionIndex: __experimentalInsertionIndex, shouldFocusBlock, } ); - const { showPatterns, hasReusableBlocks } = useSelect( + const { showPatterns } = useSelect( ( select ) => { - const { hasAllowedPatterns, getInserterItems } = unlock( - select( blockEditorStore ) - ); + const { hasAllowedPatterns } = unlock( select( blockEditorStore ) ); return { showPatterns: hasAllowedPatterns( destinationRootClientId ), - hasReusableBlocks: getInserterItems( - destinationRootClientId - ).some( ( item ) => item.category === 'reusable' ), }; }, [ destinationRootClientId ] @@ -208,9 +203,7 @@ function InserterMenu( selectedTab === 'patterns' && ! delayedFilterValue && selectedPatternCategory; - const showAsTabs = - ! delayedFilterValue && - ( showPatterns || hasReusableBlocks || showMedia ); + const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia ); const showMediaPanel = selectedTab === 'media' && ! delayedFilterValue && @@ -264,7 +257,6 @@ function InserterMenu( { showAsTabs && ( Date: Mon, 18 Dec 2023 08:33:40 +0100 Subject: [PATCH 3/4] Flip the no-categories condition for uncategorized --- .../inserter/block-patterns-tab/pattern-category-previews.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 eaa526564972c..800ffa9867ef2 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 @@ -84,7 +84,7 @@ export function PatternCategoryPreviews( { // The uncategorized category should show all the patterns without any category // or with no available category. - if ( pattern.categories ) { + if ( ! pattern.categories ) { return true; } From 7b5408f02dc5d3b6cc04ccd1e77353f268fc8075 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 18 Dec 2023 08:44:48 +0100 Subject: [PATCH 4/4] Tidy up the uncategorized condition --- .../pattern-category-previews.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) 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 800ffa9867ef2..071a9c479003f 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 @@ -78,19 +78,19 @@ export function PatternCategoryPreviews( { return true; } - if ( category.name !== 'uncategorized' ) { - return pattern.categories?.includes( category.name ); - } + if ( category.name === 'uncategorized' ) { + // The uncategorized category should show all the patterns without any category... + if ( ! pattern.categories ) { + return true; + } - // The uncategorized category should show all the patterns without any category - // or with no available category. - if ( ! pattern.categories ) { - return true; + // ...or with no available category. + return ! pattern.categories.some( ( catName ) => + availableCategories.some( ( c ) => c.name === catName ) + ); } - return ! pattern.categories.some( ( catName ) => - availableCategories.some( ( cat ) => cat.name === catName ) - ); + return pattern.categories?.includes( category.name ); } ), [ allPatterns,