Site Editor: Add Library for Template Parts & Patterns Management

docs/reference-guides/data/data-core-edit-site.md

@@ -366,6 +366,18 @@ _Returns_
 
 -   `number`: The resolved template ID for the page route.
 
+### setReusableBlock
+
+Action that sets a reusable block.
+
+_Parameters_
+
+-   _reusableBlockId_ `string`: The reusable block ID.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setTemplate
 
 Action that sets a template, optionally fetching it from REST API.

packages/edit-site/package.json

@@ -64,6 +64,7 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/widgets": "file:../widgets",
 		"@wordpress/wordcount": "file:../wordcount",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"deepmerge": "^4.3.0",
@@ -73,7 +74,8 @@
 		"lodash": "^4.17.21",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^4.0.2"
+		"rememo": "^4.0.2",
+		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

packages/edit-site/src/components/add-new-pattern/index.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { plus, header, file } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import CreatePatternModal from '../create-pattern-modal';
+import CreateTemplatePartModal from '../create-template-part-modal';
+import { unlock } from '../../lock-unlock';
+import SidebarButton from '../sidebar-button';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function AddNewPattern() {
+	const history = useHistory();
+	const [ showPatternModal, setShowPatternModal ] = useState( false );
+	const [ showTemplatePartModal, setShowTemplatePartModal ] =
+		useState( false );
+
+	function handleCreatePattern( { pattern, categoryId } ) {
+		setShowPatternModal( false );
+
+		history.push( {
+			postId: pattern.id,
+			postType: 'wp_block',
+			categoryType: 'wp_block',
+			categoryId,
+			canvas: 'edit',
+		} );
+	}
+
+	function handleCreateTemplatePart( templatePart ) {
+		setShowTemplatePartModal( false );
+
+		// Navigate to the created template part editor.
+		history.push( {
+			postId: templatePart.id,
+			postType: 'wp_template_part',
+			canvas: 'edit',
+		} );
+	}
+
+	function handleError() {
+		setShowPatternModal( false );
+		setShowTemplatePartModal( false );
+	}
+
+	return (
+		<>
+			<DropdownMenu
+				controls={ [
+					{
+						icon: header,
+						onClick: () => setShowTemplatePartModal( true ),
+						title: 'Create a template part',
+					},
+					{
+						icon: file,
+						onClick: () => setShowPatternModal( true ),
+						title: 'Create a pattern',
+					},
+				] }
+				icon={
+					<SidebarButton
+						icon={ plus }
+						label={ __( 'Create a pattern' ) }
+					/>
+				}
+				label="Create a pattern."
+			/>
+			{ showPatternModal && (
+				<CreatePatternModal
+					closeModal={ () => setShowPatternModal( false ) }
+					onCreate={ handleCreatePattern }
+					onError={ handleError }
+				/>
+			) }
+			{ showTemplatePartModal && (
+				<CreateTemplatePartModal
+					closeModal={ () => setShowTemplatePartModal( false ) }
+					onCreate={ handleCreateTemplatePart }
+					onError={ handleError }
+				/>
+			) }
+		</>
+	);
+}

packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js

@@ -15,13 +15,13 @@ import {
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
+import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
@@ -73,18 +73,6 @@ function SuggestionListItem( {
 	);
 }
 
-function useDebouncedInput() {
-	const [ input, setInput ] = useState( '' );
-	const [ debounced, setter ] = useState( '' );
-	const setDebounced = useDebounce( setter, 250 );
-	useEffect( () => {
-		if ( debounced !== input ) {
-			setDebounced( input );
-		}
-	}, [ debounced, input ] );
-	return [ input, setInput, debounced ];
-}
-
 function useSearchSuggestions( entityForSuggestions, search ) {
 	const { config } = entityForSuggestions;
 	const query = useMemo(

packages/edit-site/src/components/add-new-template/index.js

@@ -8,7 +8,6 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import NewTemplate from './new-template';
-import NewTemplatePart from './new-template-part';
 
 export default function AddNewTemplate( {
 	templateType = 'wp_template',
@@ -25,8 +24,6 @@ export default function AddNewTemplate( {
 
 	if ( templateType === 'wp_template' ) {
 		return <NewTemplate { ...props } postType={ postType } />;
-	} else if ( templateType === 'wp_template_part' ) {
-		return <NewTemplatePart { ...props } postType={ postType } />;
 	}
 
 	return null;