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 && (