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

…rdPress#51078)

* 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 (WordPress#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 (WordPress#51558)

* Remove obselete TODO comments

* Use extracted useDebouncedInput hook

* Fix clicking browser's back button in edit mode from the Library (WordPress#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 <glen.davies@automattic.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: Kai Hao <kai@kaihao.dev>

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.

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,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 }
+				/>
+			) }
+		</>
+	);
+}

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;