@wordpress/edit-site 5.14.0 → 5.16.0

package/src/components/page-patterns/use-patterns.js

@@ -4,7 +4,8 @@
 import { parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -15,7 +16,6 @@ import {
 	SYNC_TYPES,
 	TEMPLATE_PARTS,
 	USER_PATTERNS,
-	USER_PATTERN_CATEGORY,
 	filterOutDuplicatesByName,
 } from './utils';
 import { unlock } from '../../lock-unlock';
@@ -31,122 +31,98 @@ const templatePartToPattern = ( templatePart ) => ( {
 	blocks: parse( templatePart.content.raw ),
 	categories: [ templatePart.area ],
 	description: templatePart.description || '',
+	isCustom: templatePart.source === 'custom',
 	keywords: templatePart.keywords || [],
+	id: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
-	title: templatePart.title.rendered,
+	title: decodeEntities( templatePart.title.rendered ),
 	type: templatePart.type,
 	templatePart,
 } );
 
-const templatePartCategories = [ 'header', 'footer', 'sidebar' ];
-const templatePartHasCategory = ( item, category ) => {
-	if ( category === 'uncategorized' ) {
-		return ! templatePartCategories.includes( item.templatePart.area );
-	}
-
-	return item.templatePart.area === category;
-};
-
-const useTemplatePartsAsPatterns = (
-	categoryId,
-	postType = TEMPLATE_PARTS,
-	filterValue = ''
+const selectTemplatePartsAsPatterns = (
+	select,
+	{ categoryId, search = '' } = {}
 ) => {
-	const { templateParts, isResolving } = useSelect(
-		( select ) => {
-			if ( postType !== TEMPLATE_PARTS ) {
-				return {
-					templateParts: EMPTY_PATTERN_LIST,
-					isResolving: false,
-				};
-			}
-
-			const { getEntityRecords, isResolving: _isResolving } =
-				select( coreStore );
-			const query = { per_page: -1 };
-			const rawTemplateParts = getEntityRecords(
-				'postType',
-				postType,
-				query
-			);
-			const partsAsPatterns = rawTemplateParts?.map( ( templatePart ) =>
-				templatePartToPattern( templatePart )
-			);
-
-			return {
-				templateParts: partsAsPatterns,
-				isResolving: _isResolving( 'getEntityRecords', [
-					'postType',
-					'wp_template_part',
-					query,
-				] ),
-			};
-		},
-		[ postType ]
+	const { getEntityRecords, getIsResolving } = select( coreStore );
+	const { __experimentalGetDefaultTemplatePartAreas } = select( editorStore );
+	const query = { per_page: -1 };
+	const rawTemplateParts =
+		getEntityRecords( 'postType', TEMPLATE_PARTS, query ) ??
+		EMPTY_PATTERN_LIST;
+	const templateParts = rawTemplateParts.map( ( templatePart ) =>
+		templatePartToPattern( templatePart )
 	);
 
-	const filteredTemplateParts = useMemo( () => {
-		if ( ! templateParts ) {
-			return EMPTY_PATTERN_LIST;
-		}
+	// In the case where a custom template part area has been removed we need
+	// the current list of areas to cross check against so orphaned template
+	// parts can be treated as uncategorized.
+	const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
+	const templatePartAreas = knownAreas.map( ( area ) => area.area );
 
-		return searchItems( templateParts, filterValue, {
-			categoryId,
-			hasCategory: templatePartHasCategory,
-		} );
-	}, [ templateParts, filterValue, categoryId ] );
-
-	return { templateParts: filteredTemplateParts, isResolving };
-};
+	const templatePartHasCategory = ( item, category ) => {
+		if ( category !== 'uncategorized' ) {
+			return item.templatePart.area === category;
+		}
 
-const useThemePatterns = (
-	categoryId,
-	postType = PATTERNS,
-	filterValue = ''
-) => {
-	const blockPatterns = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-		const settings = getSettings();
 		return (
-			settings.__experimentalAdditionalBlockPatterns ??
-			settings.__experimentalBlockPatterns
+			item.templatePart.area === category ||
+			! templatePartAreas.includes( item.templatePart.area )
 		);
-	} );
+	};
 
-	const restBlockPatterns = useSelect( ( select ) =>
-		select( coreStore ).getBlockPatterns()
-	);
+	const isResolving = getIsResolving( 'getEntityRecords', [
+		'postType',
+		'wp_template_part',
+		query,
+	] );
 
-	const patterns = useMemo(
-		() =>
-			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
-				.filter(
-					( pattern ) =>
-						! CORE_PATTERN_SOURCES.includes( pattern.source )
-				)
-				.filter( filterOutDuplicatesByName )
-				.map( ( pattern ) => ( {
-					...pattern,
-					keywords: pattern.keywords || [],
-					type: 'pattern',
-					blocks: parse( pattern.content ),
-				} ) ),
-		[ blockPatterns, restBlockPatterns ]
-	);
+	const patterns = searchItems( templateParts, search, {
+		categoryId,
+		hasCategory: templatePartHasCategory,
+	} );
 
-	const filteredPatterns = useMemo( () => {
-		if ( postType !== PATTERNS ) {
-			return EMPTY_PATTERN_LIST;
-		}
+	return { patterns, isResolving };
+};
 
-		return searchItems( patterns, filterValue, {
+const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
+	const { getSettings } = unlock( select( editSiteStore ) );
+	const settings = getSettings();
+	const blockPatterns =
+		settings.__experimentalAdditionalBlockPatterns ??
+		settings.__experimentalBlockPatterns;
+
+	const restBlockPatterns = select( coreStore ).getBlockPatterns();
+
+	let patterns = [
+		...( blockPatterns || [] ),
+		...( restBlockPatterns || [] ),
+	]
+		.filter(
+			( pattern ) => ! CORE_PATTERN_SOURCES.includes( pattern.source )
+		)
+		.filter( filterOutDuplicatesByName )
+		.filter( ( pattern ) => pattern.inserter !== false )
+		.map( ( pattern ) => ( {
+			...pattern,
+			keywords: pattern.keywords || [],
+			type: 'pattern',
+			blocks: parse( pattern.content ),
+		} ) );
+
+	if ( categoryId ) {
+		patterns = searchItems( patterns, search, {
 			categoryId,
 			hasCategory: ( item, currentCategory ) =>
 				item.categories?.includes( currentCategory ),
 		} );
-	}, [ patterns, filterValue, categoryId, postType ] );
+	} else {
+		patterns = searchItems( patterns, search, {
+			hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+		} );
+	}
 
-	return filteredPatterns;
+	return { patterns, isResolving: false };
 };
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
@@ -160,88 +136,58 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	reusableBlock,
 } );
 
-const useUserPatterns = (
-	categoryId,
-	categoryType = PATTERNS,
-	filterValue = ''
-) => {
-	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
-	const unfilteredPatterns = useSelect(
-		( select ) => {
-			if (
-				postType !== USER_PATTERNS ||
-				categoryId !== USER_PATTERN_CATEGORY
-			) {
-				return EMPTY_PATTERN_LIST;
-			}
-
-			const { getEntityRecords } = select( coreStore );
-			const records = getEntityRecords( 'postType', postType, {
-				per_page: -1,
-			} );
-
-			if ( ! records ) {
-				return EMPTY_PATTERN_LIST;
-			}
-
-			return records.map( ( record ) =>
-				reusableBlockToPattern( record )
-			);
-		},
-		[ postType, categoryId ]
-	);
+const selectUserPatterns = ( select, { search = '', syncStatus } = {} ) => {
+	const { getEntityRecords, getIsResolving } = select( coreStore );
 
-	const filteredPatterns = useMemo( () => {
-		if ( ! unfilteredPatterns.length ) {
-			return EMPTY_PATTERN_LIST;
-		}
+	const query = { per_page: -1 };
+	const records = getEntityRecords( 'postType', USER_PATTERNS, query );
 
-		return searchItems( unfilteredPatterns, filterValue, {
-			// We exit user pattern retrieval early if we aren't in the
-			// catch-all category for user created patterns, so it has
-			// to be in the category.
-			hasCategory: () => true,
-		} );
-	}, [ unfilteredPatterns, filterValue ] );
+	let patterns = records
+		? records.map( ( record ) => reusableBlockToPattern( record ) )
+		: EMPTY_PATTERN_LIST;
+	const isResolving = getIsResolving( 'getEntityRecords', [
+		'postType',
+		USER_PATTERNS,
+		query,
+	] );
 
-	const patterns = { syncedPatterns: [], unsyncedPatterns: [] };
+	if ( syncStatus ) {
+		patterns = patterns.filter(
+			( pattern ) => pattern.syncStatus === syncStatus
+		);
+	}
 
-	filteredPatterns.forEach( ( pattern ) => {
-		if ( pattern.syncStatus === SYNC_TYPES.full ) {
-			patterns.syncedPatterns.push( pattern );
-		} else {
-			patterns.unsyncedPatterns.push( pattern );
-		}
+	patterns = searchItems( patterns, search, {
+		// We exit user pattern retrieval early if we aren't in the
+		// catch-all category for user created patterns, so it has
+		// to be in the category.
+		hasCategory: () => true,
 	} );
 
-	return patterns;
+	return { patterns, isResolving };
 };
 
-export const usePatterns = ( categoryType, categoryId, filterValue ) => {
-	const blockPatterns = useThemePatterns(
-		categoryId,
-		categoryType,
-		filterValue
-	);
-
-	const { syncedPatterns = [], unsyncedPatterns = [] } = useUserPatterns(
-		categoryId,
-		categoryType,
-		filterValue
-	);
-
-	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
-		categoryId,
-		categoryType,
-		filterValue
+export const usePatterns = (
+	categoryType,
+	categoryId,
+	{ search = '', syncStatus }
+) => {
+	return useSelect(
+		( select ) => {
+			if ( categoryType === TEMPLATE_PARTS ) {
+				return selectTemplatePartsAsPatterns( select, {
+					categoryId,
+					search,
+				} );
+			} else if ( categoryType === PATTERNS ) {
+				return selectThemePatterns( select, { categoryId, search } );
+			} else if ( categoryType === USER_PATTERNS ) {
+				return selectUserPatterns( select, { search, syncStatus } );
+			}
+			return { patterns: EMPTY_PATTERN_LIST, isResolving: false };
+		},
+		[ categoryId, categoryType, search, syncStatus ]
 	);
-
-	const patterns = {
-		syncedPatterns: [ ...templateParts, ...syncedPatterns ],
-		unsyncedPatterns: [ ...blockPatterns, ...unsyncedPatterns ],
-	};
-
-	return [ patterns, isResolving ];
 };
 
 export default usePatterns;

package/src/components/page-template-parts/add-new-template-part.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import CreateTemplatePartModal from '../create-template-part-modal';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function AddNewTemplatePart() {
+	const { canCreate, postType } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			canCreate: ! supportsTemplatePartsMode,
+			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+		};
+	}, [] );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const history = useHistory();
+
+	if ( ! canCreate || ! postType ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
+				{ postType.labels.add_new_item }
+			</Button>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => setIsModalOpen( false ) }
+					blocks={ [] }
+					onCreate={ ( templatePart ) => {
+						setIsModalOpen( false );
+						history.push( {
+							postId: templatePart.id,
+							postType: 'wp_template_part',
+							canvas: 'edit',
+						} );
+					} }
+					onError={ () => setIsModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/page-template-parts/index.js

@@ -7,8 +7,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -19,8 +18,7 @@ import Table from '../table';
 import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
-import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
+import AddNewTemplatePart from './add-new-template-part';
 
 export default function PageTemplateParts() {
 	const { records: templateParts } = useEntityRecords(
@@ -31,15 +29,6 @@ export default function PageTemplateParts() {
 		}
 	);
 
-	const { canCreate } = useSelect( ( select ) => {
-		const { supportsTemplatePartsMode } =
-			select( editSiteStore ).getSettings();
-		return {
-			postType: select( coreStore ).getPostType( 'wp_template_part' ),
-			canCreate: ! supportsTemplatePartsMode,
-		};
-	} );
-
 	const columns = [
 		{
 			header: __( 'Template Part' ),
@@ -50,7 +39,6 @@ export default function PageTemplateParts() {
 							params={ {
 								postId: templatePart.id,
 								postType: templatePart.type,
-								canvas: 'view',
 							} }
 							state={ { backPath: '/wp_template_part/all' } }
 						>
@@ -87,15 +75,7 @@ export default function PageTemplateParts() {
 	return (
 		<Page
 			title={ __( 'Template Parts' ) }
-			actions={
-				canCreate && (
-					<AddNewTemplate
-						templateType={ 'wp_template_part' }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
-				)
-			}
+			actions={ <AddNewTemplatePart /> }
 		>
 			{ templateParts && (
 				<Table data={ templateParts } columns={ columns } />

package/src/components/page-templates/index.js

@@ -8,8 +8,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -21,7 +20,6 @@ import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
 import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
 
 export default function PageTemplates() {
 	const { records: templates } = useEntityRecords(
@@ -32,15 +30,6 @@ export default function PageTemplates() {
 		}
 	);
 
-	const { canCreate } = useSelect( ( select ) => {
-		const { supportsTemplatePartsMode } =
-			select( editSiteStore ).getSettings();
-		return {
-			postType: select( coreStore ).getPostType( 'wp_template' ),
-			canCreate: ! supportsTemplatePartsMode,
-		};
-	} );
-
 	const columns = [
 		{
 			header: __( 'Template' ),
@@ -89,13 +78,11 @@ export default function PageTemplates() {
 		<Page
 			title={ __( 'Templates' ) }
 			actions={
-				canCreate && (
-					<AddNewTemplate
-						templateType={ 'wp_template' }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
-				)
+				<AddNewTemplate
+					templateType={ 'wp_template' }
+					showIcon={ false }
+					toggleProps={ { variant: 'primary' } }
+				/>
 			}
 		>
 			{ templates && <Table data={ templates } columns={ columns } /> }