diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index a32d425129ed60..d5ce46f2696919 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -12,6 +12,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { Placeholder, Dropdown, Button, Spinner } from '@wordpress/components'; import { serialize } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -34,7 +35,16 @@ export default function TemplatePartPlaceholder( { const { saveEntityRecord } = useDispatch( coreStore ); const [ step, setStep ] = useState( PLACEHOLDER_STEPS.initial ); - const { areaIcon, areaLabel } = useSelect( + const blockNameWithArea = area + ? `core/template-part/${ area }` + : 'core/template-part'; + + const filterPatternsFn = ( pattern ) => + pattern?.blockTypes?.some?.( + ( blockType ) => blockType === blockNameWithArea + ); + + const { areaIcon, areaLabel, availablePatterns } = useSelect( ( select ) => { // FIXME: @wordpress/block-library should not depend on @wordpress/editor. // Blocks can be loaded into a *non-post* block editor. @@ -46,9 +56,14 @@ export default function TemplatePartPlaceholder( { const selectedArea = find( definedAreas, { area } ); const defaultArea = find( definedAreas, { area: 'uncategorized' } ); + const _availablePatterns = select( blockEditorStore ) + .__experimentalGetAllowedPatterns?.() + .filter( filterPatternsFn ); + return { areaIcon: selectedArea?.icon || defaultArea?.icon, areaLabel: selectedArea?.label || __( 'Template Part' ), + availablePatterns: _availablePatterns, }; }, [ area ] @@ -95,7 +110,7 @@ export default function TemplatePartPlaceholder( { enableSelection ? sprintf( // Translators: %s as template part area title ("Header", "Footer", etc.). - 'Choose an existing %s or create a new one.', + 'Connect this block to an existing %s or create a new one.', areaLabel.toLowerCase() ) : sprintf( @@ -114,32 +129,41 @@ export default function TemplatePartPlaceholder( { renderToggle={ ( { isOpen, onToggle } ) => ( <> { enableSelection && ( - + <> + + + ) } - ) } renderContent={ ( { onClose } ) => ( @@ -155,11 +179,11 @@ export default function TemplatePartPlaceholder( { ) } { step === PLACEHOLDER_STEPS.patterns && ( setStep( PLACEHOLDER_STEPS.initial ) } diff --git a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js index fc4f95e89756b8..05b46e28be9a6c 100644 --- a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js +++ b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js @@ -14,19 +14,13 @@ import { } from '@wordpress/components'; export default function PatternsSetup( { - area, areaLabel, areaIcon, clientId, onCreate, resetPlaceholder, + filterPatternsFn, } ) { - const blockNameWithArea = area - ? `core/template-part/${ area }` - : 'core/template-part'; - - // Restructure onCreate to set the blocks on local state. - // Add modal to confirm title and trigger onCreate. const [ title, setTitle ] = useState( __( 'Untitled Template Part' ) ); const [ startingBlocks, setStartingBlocks ] = useState( [] ); const [ isTitleStep, setIsTitleStep ] = useState( false ); @@ -53,11 +47,7 @@ export default function PatternsSetup( { /> } onBlockPatternSelect={ selectPattern } - filterPatternsFn={ ( pattern ) => - pattern?.blockTypes?.some?.( - ( blockType ) => blockType === blockNameWithArea - ) - } + filterPatternsFn={ filterPatternsFn } /> { isTitleStep && (