From f76948de1b6b1d7e0ff41df77549e5532d68c927 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 26 Jun 2023 14:31:56 +1200 Subject: [PATCH 1/6] Add custom patterns to pattern explorer --- .../block-patterns-explorer/patterns-list.js | 32 +++++++++++++++++-- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js index a4e3c91cba4ba2..76c17e6d48f15f 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js @@ -6,6 +6,7 @@ import { _n, sprintf } from '@wordpress/i18n'; import { useDebounce, useAsyncList } from '@wordpress/compose'; import { __experimentalHeading as Heading } from '@wordpress/components'; import { speak } from '@wordpress/a11y'; +import { parse } from '@wordpress/blocks'; /** * Internal dependencies @@ -14,6 +15,7 @@ import BlockPatternsList from '../../block-patterns-list'; import InserterNoResults from '../no-results'; import useInsertionPoint from '../hooks/use-insertion-point'; import usePatternsState from '../hooks/use-patterns-state'; +import useBlockTypesState from '../hooks/use-block-types-state'; import InserterListbox from '../../inserter-listbox'; import { searchItems } from '../search-items'; @@ -52,6 +54,25 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) { onInsertBlocks, destinationRootClientId ); + const [ unsyncedPatterns ] = useBlockTypesState( + destinationRootClientId, + onInsertBlocks, + 'unsynced' + ); + const filteredUnsyncedPatterns = useMemo( () => { + return unsyncedPatterns + .filter( + ( { category: unsyncedPatternCategory } ) => + unsyncedPatternCategory === 'reusable' + ) + .map( ( syncedPattern ) => ( { + ...syncedPattern, + blocks: parse( syncedPattern.content, { + __unstableSkipMigrationLogs: true, + } ), + } ) ); + }, [ unsyncedPatterns ] ); + const registeredPatternCategories = useMemo( () => patternCategories.map( @@ -91,11 +112,16 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) { debouncedSpeak( resultsFoundMessage ); }, [ filterValue, debouncedSpeak ] ); - const currentShownPatterns = useAsyncList( filteredBlockPatterns, { + const patterns = + selectedCategory === 'reusable' + ? filteredUnsyncedPatterns + : filteredBlockPatterns; + + const currentShownPatterns = useAsyncList( patterns, { step: INITIAL_INSERTER_RESULTS, } ); - const hasItems = !! filteredBlockPatterns?.length; + const hasItems = !! patterns?.length; return (
{ hasItems && ( @@ -109,7 +135,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) { { hasItems && ( From 11bf435aece284426e455ef3daf95c6d17ef5b4f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 26 Jun 2023 16:33:20 +1200 Subject: [PATCH 2/6] show custom patterns in the patterns explorer dialog --- .../src/components/block-patterns-list/index.js | 8 +++++++- .../block-patterns-explorer/patterns-list.js | 16 ++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index f38108e948b3f1..62ee0ca35f05c2 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -150,7 +150,13 @@ function BlockPatternList( { showTooltip={ showTitlesAsTooltip } /> ) : ( - + ); } ) } diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js index 76c17e6d48f15f..c90ddd2be40bf8 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js @@ -112,16 +112,16 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) { debouncedSpeak( resultsFoundMessage ); }, [ filterValue, debouncedSpeak ] ); - const patterns = - selectedCategory === 'reusable' - ? filteredUnsyncedPatterns - : filteredBlockPatterns; - - const currentShownPatterns = useAsyncList( patterns, { + const blockPatterns = useAsyncList( filteredBlockPatterns, { step: INITIAL_INSERTER_RESULTS, } ); - const hasItems = !! patterns?.length; + const currentShownPatterns = + selectedCategory === 'reusable' + ? filteredUnsyncedPatterns + : blockPatterns; + + const hasItems = !! currentShownPatterns?.length; return (
{ hasItems && ( @@ -135,7 +135,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) { { hasItems && ( From fba73ad4b9c695ef2f68dfa5e549f444f45d5302 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 26 Jun 2023 16:36:32 +1200 Subject: [PATCH 3/6] remove changes from 51877 --- .../src/components/block-patterns-list/index.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index 62ee0ca35f05c2..ec2aad3da2b7a4 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -137,11 +137,7 @@ function BlockPatternList( { const isShown = shownPatterns.includes( pattern ); return isShown ? ( ) : ( - + ); } ) } From 6f3bea4bfb64fa6dc3376a18b089c09f25781b0d Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 26 Jun 2023 16:47:48 +1200 Subject: [PATCH 4/6] Fix up use of async lists --- .../inserter/block-patterns-explorer/patterns-list.js | 8 +++++--- .../src/components/inserter/block-patterns-tab.js | 9 ++++++++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js index c90ddd2be40bf8..b8dfde0496f082 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js @@ -116,10 +116,12 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) { step: INITIAL_INSERTER_RESULTS, } ); + const blockPatternsUnsynced = useAsyncList( filteredUnsyncedPatterns, { + step: INITIAL_INSERTER_RESULTS, + } ); + const currentShownPatterns = - selectedCategory === 'reusable' - ? filteredUnsyncedPatterns - : blockPatterns; + selectedCategory === 'reusable' ? blockPatternsUnsynced : blockPatterns; const hasItems = !! currentShownPatterns?.length; return ( diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js index 578791e8802692..354f03349b18e8 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js @@ -214,7 +214,14 @@ export function BlockPatternsCategoryPanel( { category.name === 'reusable' ? filteredUnsyncedPatterns : currentCategoryPatterns; - const currentShownPatterns = useAsyncList( patterns ); + + const unsyncedPatternsList = useAsyncList( filteredUnsyncedPatterns ); + const categoryPatternsList = useAsyncList( currentCategoryPatterns ); + + const currentShownPatterns = + category.name === 'reusable' + ? unsyncedPatternsList + : categoryPatternsList; // Hide block pattern preview on unmount. useEffect( () => () => onHover( null ), [] ); From 7c94907836ab7e7c48b883c9e2902d28a2495750 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 26 Jun 2023 17:08:16 +1200 Subject: [PATCH 5/6] remove a bit of code duplication by adding a new hook --- .../block-patterns-explorer/patterns-list.js | 21 ++-------- .../components/inserter/block-patterns-tab.js | 32 ++-------------- .../inserter/hooks/use-unsynced-patterns.js | 38 +++++++++++++++++++ 3 files changed, 46 insertions(+), 45 deletions(-) create mode 100644 packages/block-editor/src/components/inserter/hooks/use-unsynced-patterns.js diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js index b8dfde0496f082..52f3591e221b20 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js @@ -6,7 +6,6 @@ import { _n, sprintf } from '@wordpress/i18n'; import { useDebounce, useAsyncList } from '@wordpress/compose'; import { __experimentalHeading as Heading } from '@wordpress/components'; import { speak } from '@wordpress/a11y'; -import { parse } from '@wordpress/blocks'; /** * Internal dependencies @@ -15,7 +14,7 @@ import BlockPatternsList from '../../block-patterns-list'; import InserterNoResults from '../no-results'; import useInsertionPoint from '../hooks/use-insertion-point'; import usePatternsState from '../hooks/use-patterns-state'; -import useBlockTypesState from '../hooks/use-block-types-state'; +import useUnsyncedPatterns from '../hooks/use-unsynced-patterns'; import InserterListbox from '../../inserter-listbox'; import { searchItems } from '../search-items'; @@ -54,24 +53,12 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) { onInsertBlocks, destinationRootClientId ); - const [ unsyncedPatterns ] = useBlockTypesState( + + const filteredUnsyncedPatterns = useUnsyncedPatterns( destinationRootClientId, onInsertBlocks, - 'unsynced' + true ); - const filteredUnsyncedPatterns = useMemo( () => { - return unsyncedPatterns - .filter( - ( { category: unsyncedPatternCategory } ) => - unsyncedPatternCategory === 'reusable' - ) - .map( ( syncedPattern ) => ( { - ...syncedPattern, - blocks: parse( syncedPattern.content, { - __unstableSkipMigrationLogs: true, - } ), - } ) ); - }, [ unsyncedPatterns ] ); const registeredPatternCategories = useMemo( () => diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js index 354f03349b18e8..34e264b967af16 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js @@ -18,7 +18,6 @@ import { Button, } from '@wordpress/components'; import { Icon, chevronRight, chevronLeft } from '@wordpress/icons'; -import { parse } from '@wordpress/blocks'; import { focus } from '@wordpress/dom'; /** @@ -28,7 +27,7 @@ import usePatternsState from './hooks/use-patterns-state'; import BlockPatternList from '../block-patterns-list'; import PatternsExplorerModal from './block-patterns-explorer/explorer'; import MobileTabNavigation from './mobile-tab-navigation'; -import useBlockTypesState from './hooks/use-block-types-state'; +import useUnsyncedPatterns from './hooks/use-unsynced-patterns'; const noop = () => {}; @@ -51,18 +50,8 @@ function usePatternsCategories( rootClientId ) { rootClientId ); - const [ unsyncedPatterns ] = useBlockTypesState( - rootClientId, - undefined, - 'unsynced' - ); + const filteredUnsyncedPatterns = useUnsyncedPatterns( rootClientId ); - const filteredUnsyncedPatterns = useMemo( () => { - return unsyncedPatterns.filter( - ( { category: unsyncedPatternCategory } ) => - unsyncedPatternCategory === 'reusable' - ); - }, [ unsyncedPatterns ] ); const hasRegisteredCategory = useCallback( ( pattern ) => { if ( ! pattern.categories || ! pattern.categories.length ) { @@ -169,24 +158,11 @@ export function BlockPatternsCategoryPanel( { onInsert, rootClientId ); - const [ unsyncedPatterns ] = useBlockTypesState( + const filteredUnsyncedPatterns = useUnsyncedPatterns( rootClientId, onInsert, - 'unsynced' + true ); - const filteredUnsyncedPatterns = useMemo( () => { - return unsyncedPatterns - .filter( - ( { category: unsyncedPatternCategory } ) => - unsyncedPatternCategory === 'reusable' - ) - .map( ( syncedPattern ) => ( { - ...syncedPattern, - blocks: parse( syncedPattern.content, { - __unstableSkipMigrationLogs: true, - } ), - } ) ); - }, [ unsyncedPatterns ] ); const availableCategories = usePatternsCategories( rootClientId ); const currentCategoryPatterns = useMemo( diff --git a/packages/block-editor/src/components/inserter/hooks/use-unsynced-patterns.js b/packages/block-editor/src/components/inserter/hooks/use-unsynced-patterns.js new file mode 100644 index 00000000000000..77a02c10860e78 --- /dev/null +++ b/packages/block-editor/src/components/inserter/hooks/use-unsynced-patterns.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; +import { parse } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import useBlockTypesState from '../hooks/use-block-types-state'; + +export default function useUnsyncedPatterns( + rootClientId, + onInsert, + withBlocks +) { + const [ unsyncedPatterns ] = useBlockTypesState( + rootClientId, + onInsert, + 'unsynced' + ); + const filteredUnsyncedPatterns = useMemo( () => { + return unsyncedPatterns + .filter( + ( { category: unsyncedPatternCategory } ) => + unsyncedPatternCategory === 'reusable' + ) + .map( ( syncedPattern ) => ( { + ...syncedPattern, + blocks: withBlocks + ? parse( syncedPattern.content, { + __unstableSkipMigrationLogs: true, + } ) + : undefined, + } ) ); + }, [ unsyncedPatterns, withBlocks ] ); + return filteredUnsyncedPatterns; +} From 720d30fabfc7a8494e2d142938af0fea552e0634 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 26 Jun 2023 17:10:23 +1200 Subject: [PATCH 6/6] add 51877 fix back to make testing easier --- .../src/components/block-patterns-list/index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index ec2aad3da2b7a4..f15b71f13f5872 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -137,7 +137,12 @@ function BlockPatternList( { const isShown = shownPatterns.includes( pattern ); return isShown ? ( ) : ( - + ); } ) }