Try updating the Library to use pattern category taxonomy

WordPress · Jun 7, 2023 · 74abc10 · 74abc10
1 parent 20a5e0f
commit 74abc10
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 126 deletions.
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -24,16 +24,16 @@ export default function AddNewPattern( { toggleProps } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 
-	async function createPattern( { name, categoryName } ) {
+	async function createPattern( { name, categoryId } ) {
 		if ( ! name ) {
 			createErrorNotice( __( 'Name is not defined.' ), {
 				type: 'snackbar',
 			} );
 			return;
 		}
 
-		if ( ! categoryName ) {
-			createErrorNotice( __( 'Category is not defined.' ), {
+		if ( ! categoryId ) {
+			createErrorNotice( __( 'Category has not been selected.' ), {
 				type: 'snackbar',
 			} );
 			return;
@@ -49,12 +49,8 @@ export default function AddNewPattern( { toggleProps } ) {
 					title: name || __( 'Untitled Pattern' ),
 					content: '',
 					status: 'publish',
-					meta: {
-						wp_block: {
-							sync_status: 'notSynced',
-							categories: [ categoryName ],
-						},
-					},
+					meta: { wp_block: { sync_status: 'notSynced' } },
+					wp_pattern: [ categoryId ],
 				},
 				{ throwOnError: true }
 			);
@@ -65,7 +61,7 @@ export default function AddNewPattern( { toggleProps } ) {
 				postId: pattern.id,
 				postType: 'wp_block',
 				categoryType: 'wp_block',
-				categoryName,
+				categoryId,
 				canvas: 'edit',
 			} );
 		} catch ( error ) {

diff --git a/packages/edit-site/src/components/create-pattern-modal/index.js b/packages/edit-site/src/components/create-pattern-modal/index.js
@@ -9,25 +9,25 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
+import { useEntityRecords } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import usePatternCategories from '../sidebar-navigation-screen-library/use-pattern-categories';
-
 export default function CreatePatternModal( { closeModal, onCreate } ) {
 	const [ name, setName ] = useState( '' );
-	const [ categoryName, setCategoryName ] = useState( '' );
+	const [ categoryId, setCategoryId ] = useState( '' );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 
-	const { patternCategories } = usePatternCategories();
+	const { records: categories } = useEntityRecords(
+		'taxonomy',
+		'wp_pattern',
+		{ per_page: -1, hide_empty: false, context: 'view' }
+	);
 
-	const options = patternCategories
+	const options = ( categories || [] )
 		.map( ( category ) => ( {
-			label: category.label,
-			value: category.name,
+			label: category.name,
+			value: category.id,
 		} ) )
 		.concat( [
 			{ value: '', label: __( 'Select a category' ), disabled: true },
@@ -52,7 +52,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						return;
 					}
 					setIsSubmitting( true );
-					await onCreate( { name, categoryName } );
+					await onCreate( { name, categoryId } );
 				} }
 			>
 				<VStack spacing="4">
@@ -67,10 +67,10 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 					/>
 					<SelectControl
 						label={ __( 'Category' ) }
-						onChange={ setCategoryName }
+						onChange={ setCategoryId }
 						options={ options }
 						size="__unstable-large"
-						value={ categoryName }
+						value={ categoryId }
 					/>
 					<HStack justify="right">
 						<Button
@@ -84,7 +84,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
 						<Button
 							variant="primary"
 							type="submit"
-							disabled={ ! name || ! categoryName }
+							disabled={ ! name || ! categoryId }
 							isBusy={ isSubmitting }
 						>
 							{ __( 'Create' ) }

diff --git a/packages/edit-site/src/components/library/grid.js b/packages/edit-site/src/components/library/grid.js
@@ -57,15 +57,15 @@ const DeleteMenuItem = ( { item, onClose } ) => {
 	);
 };
 
-const GridItem = ( { category, composite, item } ) => {
+const GridItem = ( { categoryId, composite, item } ) => {
 	const instanceId = useInstanceId( GridItem );
 	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
 
 	const { onClick } = useLink( {
 		path: '/library',
 		postType: item.type,
 		postId: item.type === USER_PATTERNS ? item.id : item.name,
-		categoryName: category,
+		categoryId,
 		categoryType: item.type,
 		canvas: 'edit',
 	} );
@@ -121,16 +121,15 @@ const GridItem = ( { category, composite, item } ) => {
 	);
 };
 
-export default function Grid( { category, label, type } ) {
-	const [ patterns, isResolving ] = usePatterns( type, category );
+export default function Grid( { categoryId, label, type } ) {
+	const [ patterns, isResolving ] = usePatterns( type, categoryId );
 	const composite = useCompositeState( { orientation: 'vertical' } );
 
 	if ( ! patterns ) {
 		return null;
 	}
 
 	if ( ! patterns.length ) {
-		// TODO: Implement redirecting to root library page or proper empty state.
 		return (
 			<div
 				style={ {
@@ -159,7 +158,7 @@ export default function Grid( { category, label, type } ) {
 					<GridItem
 						key={ pattern.name }
 						item={ pattern }
-						category={ category }
+						categoryId={ categoryId }
 						composite={ composite }
 					/>
 				) ) }

diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js
@@ -23,9 +23,9 @@ const DEFAULT_TYPE = 'wp_template_part';
 const DEFAULT_CATEGORY = 'header';
 
 export default function Library() {
-	const { categoryType, categoryName } = getQueryArgs( window.location.href );
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const type = categoryType || DEFAULT_TYPE;
-	const category = categoryName || DEFAULT_CATEGORY;
+	const category = categoryId || DEFAULT_CATEGORY;
 	const settings = useLibrarySettings();
 
 	// Do we need shortcuts if we aren't displaying a header?
@@ -58,7 +58,7 @@ export default function Library() {
 				<ExperimentalBlockEditorProvider settings={ settings }>
 					<Grid
 						type={ type }
-						category={ category }
+						categoryId={ category }
 						label={ __( 'Patterns list' ) }
 					/>
 				</ExperimentalBlockEditorProvider>

diff --git a/packages/edit-site/src/components/library/use-library-settings.js b/packages/edit-site/src/components/library/use-library-settings.js
@@ -35,7 +35,7 @@ export default function useLibrarySettings() {
 				( x, index, arr ) =>
 					index === arr.findIndex( ( y ) => x.name === y.name )
 			),
-		[ ( settingsBlockPatterns, restBlockPatterns ) ]
+		[ settingsBlockPatterns, restBlockPatterns ]
 	);
 
 	const settings = useMemo( () => {

diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/library/use-patterns.js
@@ -3,7 +3,7 @@
  */
 import { parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -73,7 +73,7 @@ const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
 	return { templateParts: filteredTemplateParts, isResolving };
 };
 
-const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
+const useBlockPatternsByCategory = ( categoryId, postType = PATTERNS ) => {
 	const blockPatterns = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 		const settings = getSettings();
@@ -90,6 +90,7 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 	const patterns = useMemo(
 		() =>
 			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
+				.filter( ( pattern ) => pattern.source !== 'core' )
 				.filter(
 					( x, index, arr ) =>
 						index === arr.findIndex( ( y ) => x.name === y.name )
@@ -102,31 +103,37 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
 		[ blockPatterns, restBlockPatterns ]
 	);
 
-	if ( postType !== PATTERNS ) {
-		return EMPTY_PATTERN_LIST;
-	}
+	// Non-user-created patterns (e.g. theme patterns ) will have string
+	// category names in their assigned categories array. We'll need to
+	// to retrieve the current category's name to match them.
+	const { record: category } = useEntityRecord(
+		'taxonomy',
+		'wp_pattern',
+		categoryId
+	);
 
-	if ( ! category ) {
-		return patterns || EMPTY_PATTERN_LIST;
+	if ( postType !== PATTERNS || ! category ) {
+		return EMPTY_PATTERN_LIST;
 	}
 
 	return patterns.filter( ( pattern ) =>
-		pattern.categories?.includes( category )
+		pattern.categories?.includes( category.name )
 	);
 };
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
 	blocks: parse( reusableBlock.content.raw ),
-	categories: reusableBlock.meta?.wp_block?.categories,
+	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
 	reusableBlock,
 } );
 
-const useUserPatterns = ( category, categoryType = PATTERNS ) => {
+const useUserPatterns = ( categoryId, categoryType = PATTERNS ) => {
 	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
+	const currentId = parseInt( categoryId );
 	const userPatterns = useSelect(
 		( select ) => {
 			if ( postType !== USER_PATTERNS ) {
@@ -150,15 +157,15 @@ const useUserPatterns = ( category, categoryType = PATTERNS ) => {
 	);
 
 	return userPatterns.filter( ( pattern ) =>
-		pattern.categories?.includes( category )
+		pattern.categories?.includes( currentId )
 	);
 };
 
-export const usePatterns = ( categoryType, categoryName ) => {
-	const patterns = useBlockPatternsByCategory( categoryName, categoryType );
-	const userPatterns = useUserPatterns( categoryName, categoryType );
+export const usePatterns = ( categoryType, categoryId ) => {
+	const patterns = useBlockPatternsByCategory( categoryId, categoryType );
+	const userPatterns = useUserPatterns( categoryId, categoryType );
 	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
-		categoryName,
+		categoryId,
 		categoryType
 	);
 

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -7,15 +7,15 @@ import { useLink } from '../routes/link';
 export default function CategoryItem( {
 	count,
 	icon,
+	id,
 	isActive,
 	label,
-	name,
 	type,
 } ) {
 	const linkInfo = useLink( {
 		path: '/library',
 		categoryType: type,
-		categoryName: name,
+		categoryId: id,
 	} );
 
 	if ( ! count ) {

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -35,8 +35,8 @@ const templatePartAreaLabels = {
 
 export default function SidebarNavigationScreenLibrary() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { categoryType, categoryName } = getQueryArgs( window.location.href );
-	const currentCategory = categoryName || DEFAULT_CATEGORY;
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const currentCategory = categoryId || DEFAULT_CATEGORY;
 	const currentType = categoryType || DEFAULT_TYPE;
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
@@ -92,7 +92,7 @@ export default function SidebarNavigationScreenLibrary() {
 														area
 													]
 												}
-												name={ area }
+												id={ area }
 												type="wp_template_part"
 												isActive={
 													currentCategory === area &&
@@ -110,12 +110,12 @@ export default function SidebarNavigationScreenLibrary() {
 										<CategoryItem
 											key={ category.name }
 											count={ category.count }
-											label={ category.label }
-											name={ category.name }
+											label={ category.name }
+											id={ category.id }
 											type="pattern"
 											isActive={
 												currentCategory ===
-													category.name &&
+													category.id &&
 												currentType === 'pattern'
 											}
 										/>