create a function to share the code that creates block patterns from …

…template parts'
WordPress · Feb 20, 2024 · e84292a · e84292a
1 parent 20cb955
commit e84292a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
 	useBlockProps,
@@ -12,12 +12,12 @@ import {
 	InspectorControls,
 	__experimentalBlockPatternsList as BlockPatternsList,
 } from '@wordpress/block-editor';
-import { parse } from '@wordpress/blocks';
 import { PanelBody, Spinner, Modal, MenuItem } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -27,6 +27,7 @@ import TemplatePartSelectionModal from './selection-modal';
 import { TemplatePartAdvancedControls } from './advanced-controls';
 import TemplatePartInnerBlocks from './inner-blocks';
 import { createTemplatePartId } from './utils/create-template-part-id';
+import { mapTemplatePartToBlockPattern } from './utils/map-template-part-to-block-pattern';
 import {
 	useAlternativeBlockPatterns,
 	useAlternativeTemplateParts,
@@ -91,6 +92,7 @@ export default function TemplatePartEdit( {
 	setAttributes,
 	clientId,
 } ) {
+	const { createSuccessNotice } = useDispatch( noticesStore );
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
 		[]
@@ -184,15 +186,11 @@ export default function TemplatePartEdit( {
 		);
 	}
 
-	const partsAsPatterns = templateParts.map( ( templatePart ) => ( {
-		name: createTemplatePartId( templatePart.theme, templatePart.slug ),
-		title: templatePart.title.rendered,
-		blocks: parse( templatePart.content.raw ),
-		templatePart,
-	} ) );
+	const partsAsPatterns = templateParts.map( ( templatePart ) =>
+		mapTemplatePartToBlockPattern( templatePart )
+	);
 	const patternsAndParts = [ ...blockPatterns, ...partsAsPatterns ];
 
-	// TODO - de dupe
 	const onTemplatePartSelect = ( { templatePart } ) => {
 		setAttributes( {
 			slug: templatePart.slug,
@@ -202,7 +200,7 @@ export default function TemplatePartEdit( {
 		createSuccessNotice(
 			sprintf(
 				/* translators: %s: template part title. */
-				__( 'Template Part "%s" inserted.' ),
+				__( 'Template Part "%s" replaceed.' ),
 				templatePart.title?.rendered || templatePart.slug
 			),
 			{

diff --git a/packages/block-library/src/template-part/edit/selection-modal.js b/packages/block-library/src/template-part/edit/selection-modal.js
@@ -5,7 +5,6 @@ import { useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
-import { parse } from '@wordpress/blocks';
 import { useAsyncList } from '@wordpress/compose';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import {
@@ -21,7 +20,7 @@ import {
 	useAlternativeTemplateParts,
 	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
-import { createTemplatePartId } from './utils/create-template-part-id';
+import { mapTemplatePartToBlockPattern } from './utils/map-template-part-to-block-pattern';
 import { searchPatterns } from '../../utils/search-patterns';
 
 export default function TemplatePartSelectionModal( {
@@ -39,12 +38,9 @@ export default function TemplatePartSelectionModal( {
 	);
 	// We can map template parts to block patters to reuse the BlockPatternsList UI
 	const filteredTemplateParts = useMemo( () => {
-		const partsAsPatterns = templateParts.map( ( templatePart ) => ( {
-			name: createTemplatePartId( templatePart.theme, templatePart.slug ),
-			title: templatePart.title.rendered,
-			blocks: parse( templatePart.content.raw ),
-			templatePart,
-		} ) );
+		const partsAsPatterns = templateParts.map( ( templatePart ) =>
+			mapTemplatePartToBlockPattern( templatePart )
+		);
 
 		return searchPatterns( partsAsPatterns, searchValue );
 	}, [ templateParts, searchValue ] );

diff --git a/packages/block-library/src/template-part/edit/utils/map-template-part-to-block-pattern.js b/packages/block-library/src/template-part/edit/utils/map-template-part-to-block-pattern.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { createTemplatePartId } from './create-template-part-id';
+
+/**
+ * This maps the properties of a template part to those of a block pattern.
+ * @param {Object} templatePart
+ * @return {Object} The template part in the shape of block pattern.
+ */
+export function mapTemplatePartToBlockPattern( templatePart ) {
+	return {
+		name: createTemplatePartId( templatePart.theme, templatePart.slug ),
+		title: templatePart.title.rendered,
+		blocks: parse( templatePart.content.raw ),
+		templatePart,
+	};
+}