Site Editor: Add Library for Template Parts & Patterns Management (#5…

…1078) * Add placeholder Library page * Add placeholder Library nav screen * Use placeholder library page and nav screen * Add dodgy placeholder display for patterns or template parts * Temporarily add category type and name to query params * Try displaying patterns and template parts * Highlight active category nav item * Add placeholder dropdown for deleting patterns * Try making pattern previews clickable * Add placeholder create pattern modal and action * Add category select to create pattern modal * Remove the library url params when existing library * Fix pattern styles not loading on fresh reload of Library page (#51114) * Hook up template part preview to existing edit page This also adds a temporary hack to the sidebar-navigation-screen so the back button from the existing template part editing will return to the previously selected category in the library. * Fix template part pattern display in library * Try retrieving user created patterns from wp_block CPT * Update now user created patterns have category arrays * Update user created patterns based of new meta wp_block property * Remove new template part screen as it was covered by pattern screen * Allow user created patterns to be clicked on * Fix typos * Fix classnames * Hook up reusable block editing * Try adding delete for user patterns * Add snackbar notices for user-created pattern deletion * Hook up pattern creation modal * Make new patterns return to correct category * Try updating the Library to use pattern category taxonomy * Fix theme pattern display in Grid * Fix selected pattern category detection * Use invalidateResolution to clear taxonomy cache Not sure if this will be better than manual counts as we'll likely still need to get userPatterns back to collect an Uncategorized group. * Include uncategorized reusable block patterns in Library * Make pattern category selection option and add sync toggle * Separate display of synced/unsynced patterns * Add placeholder search control. * Update to use new Page components added along with Table * Fix private apis imports * style changes to library * copy change * svg colour * add template part and pattern dialog * fix template part modal close * Try filtering of patterns in library * search input patterns style * responsive pattern grid * Use only default block pattern categories The removal of the pattern category taxonomy changes will be done once that related PR has been updated. * Fix Library routing in mobile (#51558) * Remove obselete TODO comments * Use extracted useDebouncedInput hook * Fix clicking browser's back button in edit mode from the Library (#51566) * Rename Your Patterns to Custom patterns * Remove arrow functions for internal Grid components * Fix linting error * Add dependencies to package-lock.json * Update core pattern filtering * Consolidate and reuse constants * Clean up comments and unused styles * Rename manage all link for custom patterns * Remove `wp_block` property from post meta for patterns * Update conversion of reusable block to pattern after sync_status moved * Rename setReusableBlock to setEditedEntity * Improve wording * Add aria description for pattern action menu * Refactor filtering out duplicate patterns by name * Add focus style for patterns * Add empty pattern placeholder * Fix tests and converter flow * Tweak focused placeholder styles * Make the action menu unfocusable and use a keyboard shortcut for deletion * Add confirm step for deleting * Add a more descriptive aria-description * Ensure pattern lists are announced with the correct number of items * Improve labelling of pattern lists --------- Co-authored-by: Glen Davies <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Saxon Fletcher <[email protected]> Co-authored-by: Kai Hao <[email protected]> Co-authored-by: Kai Hao <[email protected]>
WordPress · Jun 21, 2023 · a5dd662 · a5dd662
1 parent 4d6900f
commit a5dd662
Show file tree

Hide file tree

Showing 51 changed files with 1,914 additions and 629 deletions.
diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
@@ -268,6 +268,19 @@ _Parameters_
 -   _options_ `[Object]`:
 -   _options.allowUndo_ `[boolean]`: Whether to allow the user to undo reverting the template. Default true.
 
+### setEditedEntity
+
+Action that sets an edited entity.
+
+_Parameters_
+
+-   _postType_ `string`: The entity's post type.
+-   _postId_ `string`: The entity's ID.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setEditedPostContext
 
 Set's the current block editor context.

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-site/package.json b/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",

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -0,0 +1,94 @@
+/**
+ * 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 ) }
+					blocks={ [] }
+					onCreate={ handleCreateTemplatePart }
+					onError={ handleError }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/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(

diff --git a/packages/edit-site/src/components/add-new-template/index.js b/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;