@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

package/src/components/page-patterns/duplicate-menu-item.js

@@ -12,31 +12,30 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import {
-	TEMPLATE_PARTS,
-	PATTERNS,
-	SYNC_TYPES,
-	USER_PATTERNS,
-	USER_PATTERN_CATEGORY,
-} from './utils';
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_TYPES,
+	PATTERN_SYNC_TYPES,
+} from '../../utils/constants';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
 } from '../../utils/template-part-create';
 import { unlock } from '../../lock-unlock';
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 
 const { useHistory } = unlock( routerPrivateApis );
 
 function getPatternMeta( item ) {
-	if ( item.type === PATTERNS ) {
-		return { wp_pattern_sync_status: SYNC_TYPES.unsynced };
+	if ( item.type === PATTERN_TYPES.theme ) {
+		return { wp_pattern_sync_status: PATTERN_SYNC_TYPES.unsynced };
 	}
 
-	const syncStatus = item.reusableBlock.wp_pattern_sync_status;
-	const isUnsynced = syncStatus === SYNC_TYPES.unsynced;
+	const syncStatus = item.patternBlock.wp_pattern_sync_status;
+	const isUnsynced = syncStatus === PATTERN_SYNC_TYPES.unsynced;
 
 	return {
-		...item.reusableBlock.meta,
+		...item.patternBlock.meta,
 		wp_pattern_sync_status: isUnsynced ? syncStatus : undefined,
 	};
 }
@@ -47,12 +46,13 @@ export default function DuplicateMenuItem( {
 	label = __( 'Duplicate' ),
 	onClose,
 } ) {
-	const { saveEntityRecord } = useDispatch( coreStore );
+	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 
 	const history = useHistory();
 	const existingTemplateParts = useExistingTemplateParts();
+	const { patternCategories } = usePatternCategories();
 
 	async function createTemplatePart() {
 		try {
@@ -70,7 +70,7 @@ export default function DuplicateMenuItem( {
 
 			const result = await saveEntityRecord(
 				'postType',
-				'wp_template_part',
+				TEMPLATE_PART_POST_TYPE,
 				{ slug, title, content, area },
 				{ throwOnError: true }
 			);
@@ -88,9 +88,9 @@ export default function DuplicateMenuItem( {
 			);
 
 			history.push( {
-				postType: TEMPLATE_PARTS,
+				postType: TEMPLATE_PART_POST_TYPE,
 				postId: result?.id,
-				categoryType: TEMPLATE_PARTS,
+				categoryType: TEMPLATE_PART_POST_TYPE,
 				categoryId,
 			} );
 
@@ -111,25 +111,66 @@ export default function DuplicateMenuItem( {
 		}
 	}
 
+	async function findOrCreateTerm( term ) {
+		try {
+			const newTerm = await saveEntityRecord(
+				'taxonomy',
+				'wp_pattern_category',
+				{
+					name: term.label,
+					slug: term.name,
+					description: term.description,
+				},
+				{
+					throwOnError: true,
+				}
+			);
+			invalidateResolution( 'getUserPatternCategories' );
+			return newTerm.id;
+		} catch ( error ) {
+			if ( error.code !== 'term_exists' ) {
+				throw error;
+			}
+
+			return error.data.term_id;
+		}
+	}
+
+	async function getCategories( categories ) {
+		const terms = categories.map( ( category ) => {
+			const fullCategory = patternCategories.find(
+				( cat ) => cat.name === category
+			);
+			if ( fullCategory.id ) {
+				return fullCategory.id;
+			}
+			return findOrCreateTerm( fullCategory );
+		} );
+
+		return Promise.all( terms );
+	}
+
 	async function createPattern() {
 		try {
-			const isThemePattern = item.type === PATTERNS;
+			const isThemePattern = item.type === PATTERN_TYPES.theme;
 			const title = sprintf(
 				/* translators: %s: Existing pattern title */
 				__( '%s (Copy)' ),
-				item.title
+				item.title || item.name
 			);
+			const categories = await getCategories( item.categories || [] );
 
 			const result = await saveEntityRecord(
 				'postType',
-				'wp_block',
+				PATTERN_TYPES.user,
 				{
 					content: isThemePattern
 						? item.content
-						: item.reusableBlock.content,
+						: item.patternBlock.content,
 					meta: getPatternMeta( item ),
 					status: 'publish',
 					title,
+					wp_pattern_category: categories,
 				},
 				{ throwOnError: true }
 			);
@@ -138,7 +179,7 @@ export default function DuplicateMenuItem( {
 				sprintf(
 					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
 					__( '"%s" duplicated.' ),
-					item.title
+					item.title || item.name
 				),
 				{
 					type: 'snackbar',
@@ -147,9 +188,9 @@ export default function DuplicateMenuItem( {
 			);
 
 			history.push( {
-				categoryType: USER_PATTERNS,
-				categoryId: USER_PATTERN_CATEGORY,
-				postType: USER_PATTERNS,
+				categoryType: PATTERN_TYPES.theme,
+				categoryId,
+				postType: PATTERN_TYPES.user,
 				postId: result?.id,
 			} );
 
@@ -169,7 +210,9 @@ export default function DuplicateMenuItem( {
 	}
 
 	const createItem =
-		item.type === TEMPLATE_PARTS ? createTemplatePart : createPattern;
+		item.type === TEMPLATE_PART_POST_TYPE
+			? createTemplatePart
+			: createPattern;
 
 	return <MenuItem onClick={ createItem }>{ label }</MenuItem>;
 }

package/src/components/page-patterns/grid-item.js

@@ -2,11 +2,16 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import downloadjs from 'downloadjs';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies
  */
-import { BlockPreview } from '@wordpress/block-editor';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import {
 	Button,
 	__experimentalConfirmDialog as ConfirmDialog,
@@ -38,15 +43,23 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
  */
 import RenameMenuItem from './rename-menu-item';
 import DuplicateMenuItem from './duplicate-menu-item';
-import { PATTERNS, TEMPLATE_PARTS, USER_PATTERNS, SYNC_TYPES } from './utils';
+import {
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_SYNC_TYPES,
+} from '../../utils/constants';
 import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const templatePartIcons = { header, footer, uncategorized };
 
 function GridItem( { categoryId, item, ...props } ) {
 	const descriptionId = useId();
 	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 
 	const { removeTemplate } = useDispatch( editSiteStore );
 	const { __experimentalDeleteReusableBlock } =
@@ -54,15 +67,15 @@ function GridItem( { categoryId, item, ...props } ) {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 
-	const isUserPattern = item.type === USER_PATTERNS;
-	const isNonUserPattern = item.type === PATTERNS;
-	const isTemplatePart = item.type === TEMPLATE_PARTS;
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 
 	const { onClick } = useLink( {
 		postType: item.type,
 		postId: isUserPattern ? item.id : item.name,
 		categoryId,
-		categoryType: item.type,
+		categoryType: isTemplatePart ? item.type : PATTERN_TYPES.theme,
 	} );
 
 	const isEmpty = ! item.blocks?.length;
@@ -97,6 +110,20 @@ function GridItem( { categoryId, item, ...props } ) {
 	};
 	const deleteItem = () =>
 		isTemplatePart ? removeTemplate( item ) : deletePattern();
+	const exportAsJSON = () => {
+		const json = {
+			__file: item.type,
+			title: item.title || item.name,
+			content: item.patternBlock.content.raw,
+			syncStatus: item.patternBlock.wp_pattern_sync_status,
+		};
+
+		return downloadjs(
+			JSON.stringify( json, null, 2 ),
+			`${ kebabCase( item.title || item.name ) }.json`,
+			'application/json'
+		);
+	};
 
 	// Only custom patterns or custom template parts can be renamed or deleted.
 	const isCustomPattern =
@@ -119,9 +146,13 @@ function GridItem( { categoryId, item, ...props } ) {
 		);
 	}
 
-	const itemIcon =
-		templatePartIcons[ categoryId ] ||
-		( item.syncStatus === SYNC_TYPES.full ? symbol : undefined );
+	let itemIcon;
+	if ( ! isUserPattern && templatePartIcons[ categoryId ] ) {
+		itemIcon = templatePartIcons[ categoryId ];
+	} else {
+		itemIcon =
+			item.syncStatus === PATTERN_SYNC_TYPES.full ? symbol : undefined;
+	}
 
 	const confirmButtonText = hasThemeFile ? __( 'Clear' ) : __( 'Delete' );
 	const confirmPrompt = hasThemeFile
@@ -129,9 +160,13 @@ function GridItem( { categoryId, item, ...props } ) {
 		: sprintf(
 				// translators: %s: The pattern or template part's title e.g. 'Call to action'.
 				__( 'Are you sure you want to delete "%s"?' ),
-				item.title
+				item.title || item.name
 		  );
 
+	const additionalStyles = ! backgroundColor
+		? [ { css: 'body { background: #fff; }' } ]
+		: undefined;
+
 	return (
 		<li className={ patternClassNames }>
 			<button
@@ -140,8 +175,12 @@ function GridItem( { categoryId, item, ...props } ) {
 				// @see https://reakit.io/docs/composite/#performance.
 				id={ `edit-site-patterns-${ item.name }` }
 				{ ...props }
-				onClick={ item.type !== PATTERNS ? onClick : undefined }
-				aria-disabled={ item.type !== PATTERNS ? 'false' : 'true' }
+				onClick={
+					item.type !== PATTERN_TYPES.theme ? onClick : undefined
+				}
+				aria-disabled={
+					item.type !== PATTERN_TYPES.theme ? 'false' : 'true'
+				}
 				aria-label={ item.title }
 				aria-describedby={
 					ariaDescriptions.length
@@ -154,8 +193,14 @@ function GridItem( { categoryId, item, ...props } ) {
 						: undefined
 				}
 			>
-				{ isEmpty && __( 'Empty pattern' ) }
-				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+				{ ! isEmpty && (
+					<BlockPreview
+						blocks={ item.blocks }
+						additionalStyles={ additionalStyles }
+					/>
+				) }
 			</button>
 			{ ariaDescriptions.map( ( ariaDescription, index ) => (
 				<div
@@ -178,21 +223,19 @@ function GridItem( { categoryId, item, ...props } ) {
 				>
 					{ itemIcon && ! isNonUserPattern && (
 						<Tooltip
-							position="top center"
+							placement="top"
 							text={ __(
 								'Editing this pattern will also update anywhere it is used'
 							) }
 						>
-							<span>
-								<Icon
-									className="edit-site-patterns__pattern-icon"
-									icon={ itemIcon }
-								/>
-							</span>
+							<Icon
+								className="edit-site-patterns__pattern-icon"
+								icon={ itemIcon }
+							/>
 						</Tooltip>
 					) }
 					<Flex as="span" gap={ 0 } justify="left">
-						{ item.type === PATTERNS ? (
+						{ item.type === PATTERN_TYPES.theme ? (
 							item.title
 						) : (
 							<Heading level={ 5 }>
@@ -203,18 +246,20 @@ function GridItem( { categoryId, item, ...props } ) {
 									// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
 									tabIndex="-1"
 								>
-									{ item.title }
+									{ item.title || item.name }
 								</Button>
 							</Heading>
 						) }
-						{ item.type === PATTERNS && (
+						{ item.type === PATTERN_TYPES.theme && (
 							<Tooltip
-								position="top center"
+								placement="top"
 								text={ __( 'This pattern cannot be edited.' ) }
 							>
-								<span className="edit-site-patterns__pattern-lock-icon">
-									<Icon icon={ lockSmall } size={ 24 } />
-								</span>
+								<Icon
+									className="edit-site-patterns__pattern-lock-icon"
+									icon={ lockSmall }
+									size={ 24 }
+								/>
 							</Tooltip>
 						) }
 					</Flex>
@@ -245,12 +290,14 @@ function GridItem( { categoryId, item, ...props } ) {
 								categoryId={ categoryId }
 								item={ item }
 								onClose={ onClose }
-								label={
-									isNonUserPattern
-										? __( 'Copy to My patterns' )
-										: __( 'Duplicate' )
-								}
+								label={ __( 'Duplicate' ) }
 							/>
+							{ item.type === PATTERN_TYPES.user && (
+								<MenuItem onClick={ () => exportAsJSON() }>
+									{ __( 'Export as JSON' ) }
+								</MenuItem>
+							) }
+
 							{ isCustomPattern && (
 								<MenuItem
 									isDestructive={ ! hasThemeFile }

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

@@ -6,7 +6,6 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 
@@ -14,12 +13,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
-import {
-	USER_PATTERN_CATEGORY,
-	USER_PATTERNS,
-	TEMPLATE_PARTS,
-	PATTERNS,
-} from './utils';
+import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
 
 export default function PatternsHeader( {
 	categoryId,
@@ -35,16 +29,13 @@ export default function PatternsHeader( {
 	);
 
 	let title, description;
-	if ( categoryId === USER_PATTERN_CATEGORY && type === USER_PATTERNS ) {
-		title = __( 'My Patterns' );
-		description = '';
-	} else if ( type === TEMPLATE_PARTS ) {
+	if ( type === TEMPLATE_PART_POST_TYPE ) {
 		const templatePartArea = templatePartAreas.find(
 			( area ) => area.area === categoryId
 		);
 		title = templatePartArea?.label;
 		description = templatePartArea?.description;
-	} else if ( type === PATTERNS ) {
+	} else if ( type === PATTERN_TYPES.theme ) {
 		const patternCategory = patternCategories.find(
 			( category ) => category.name === categoryId
 		);

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

@@ -8,7 +8,7 @@ import { getQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './utils';
+import { PATTERN_DEFAULT_CATEGORY, PATTERN_TYPES } from '../../utils/constants';
 import Page from '../page';
 import PatternsList from './patterns-list';
 import usePatternSettings from './use-pattern-settings';
@@ -18,8 +18,8 @@ const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
 export default function PagePatterns() {
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
-	const type = categoryType || DEFAULT_TYPE;
-	const category = categoryId || DEFAULT_CATEGORY;
+	const type = categoryType || PATTERN_TYPES.theme;
+	const category = categoryId || PATTERN_DEFAULT_CATEGORY;
 	const settings = usePatternSettings();
 
 	// Wrap everything in a block editor provider.

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

@@ -27,23 +27,23 @@ import usePatterns from './use-patterns';
 import SidebarButton from '../sidebar-button';
 import useDebouncedInput from '../../utils/use-debounced-input';
 import { unlock } from '../../lock-unlock';
-import { SYNC_TYPES, USER_PATTERN_CATEGORY, PATTERNS } from './utils';
+import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../../utils/constants';
 import Pagination from './pagination';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const SYNC_FILTERS = {
 	all: __( 'All' ),
-	[ SYNC_TYPES.full ]: __( 'Synced' ),
-	[ SYNC_TYPES.unsynced ]: __( 'Standard' ),
+	[ PATTERN_SYNC_TYPES.full ]: __( 'Synced' ),
+	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Standard' ),
 };
 
 const SYNC_DESCRIPTIONS = {
 	all: '',
-	[ SYNC_TYPES.full ]: __(
+	[ PATTERN_SYNC_TYPES.full ]: __(
 		'Patterns that are kept in sync across the site.'
 	),
-	[ SYNC_TYPES.unsynced ]: __(
+	[ PATTERN_SYNC_TYPES.unsynced ]: __(
 		'Patterns that can be changed freely without affecting the site.'
 	),
 };
@@ -64,7 +64,7 @@ export default function PatternsList( { categoryId, type } ) {
 	const deferredSyncedFilter = useDeferredValue( syncFilter );
 
 	const isUncategorizedThemePatterns =
-		type === PATTERNS && categoryId === 'uncategorized';
+		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
 
 	const { patterns, isResolving } = usePatterns(
 		type,
@@ -155,7 +155,7 @@ export default function PatternsList( { categoryId, type } ) {
 							__nextHasNoMarginBottom
 						/>
 					</FlexBlock>
-					{ categoryId === USER_PATTERN_CATEGORY && (
+					{ type === PATTERN_TYPES.theme && (
 						<ToggleGroupControl
 							className="edit-site-patterns__sync-status-filter"
 							hideLabelFromVision

package/src/components/page-patterns/rename-menu-item.js

@@ -18,7 +18,7 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import { TEMPLATE_PARTS } from './utils';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 export default function RenameMenuItem( { item, onClose } ) {
 	const [ title, setTitle ] = useState( () => item.title );
@@ -29,7 +29,7 @@ export default function RenameMenuItem( { item, onClose } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	if ( item.type === TEMPLATE_PARTS && ! item.isCustom ) {
+	if ( item.type === TEMPLATE_PART_POST_TYPE && ! item.isCustom ) {
 		return null;
 	}
 
@@ -49,14 +49,25 @@ export default function RenameMenuItem( { item, onClose } ) {
 				throwOnError: true,
 			} );
 
-			createSuccessNotice( __( 'Entity renamed.' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				item.type === TEMPLATE_PART_POST_TYPE
+					? __( 'Template part renamed.' )
+					: __( 'Pattern renamed.' ),
+				{
+					type: 'snackbar',
+				}
+			);
 		} catch ( error ) {
+			const fallbackErrorMessage =
+				item.type === TEMPLATE_PART_POST_TYPE
+					? __(
+							'An error occurred while reverting the template part.'
+					  )
+					: __( 'An error occurred while reverting the pattern.' );
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while renaming the entity.' );
+					: fallbackErrorMessage;
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
@@ -79,7 +90,7 @@ export default function RenameMenuItem( { item, onClose } ) {
 						setIsModalOpen( false );
 						onClose();
 					} }
-					overlayClassName="edit-site-list__rename_modal"
+					overlayClassName="edit-site-list__rename-modal"
 				>
 					<form onSubmit={ onRename }>
 						<VStack spacing="5">

package/src/components/page-patterns/search-items.js

@@ -4,6 +4,15 @@
 import removeAccents from 'remove-accents';
 import { noCase } from 'change-case';
 
+/**
+ * Internal dependencies
+ */
+import {
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	PATTERN_TYPES,
+} from '../../utils/constants';
+
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
 const defaultGetTitle = ( item ) => item.title;
@@ -84,7 +93,10 @@ const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
  */
 export const searchItems = ( items = [], searchInput = '', config = {} ) => {
 	const normalizedSearchTerms = getNormalizedSearchTerms( searchInput );
-	const onlyFilterByCategory = ! normalizedSearchTerms.length;
+	// Filter patterns by category: the default category indicates that all patterns will be shown.
+	const onlyFilterByCategory =
+		config.categoryId !== PATTERN_DEFAULT_CATEGORY &&
+		! normalizedSearchTerms.length;
 	const searchRankConfig = { ...config, onlyFilterByCategory };
 
 	// If we aren't filtering on search terms, matching on category is satisfactory.
@@ -131,7 +143,13 @@ function getItemSearchRank( item, searchTerm, config ) {
 		onlyFilterByCategory,
 	} = config;
 
-	let rank = hasCategory( item, categoryId ) ? 1 : 0;
+	let rank =
+		categoryId === PATTERN_DEFAULT_CATEGORY ||
+		( categoryId === PATTERN_USER_CATEGORY &&
+			item.type === PATTERN_TYPES.user ) ||
+		hasCategory( item, categoryId )
+			? 1
+			: 0;
 
 	// If an item doesn't belong to the current category or we don't have
 	// search terms to filter by, return the initial rank value.

package/src/components/page-patterns/style.scss

@@ -211,11 +211,7 @@
 	}
 
 	.edit-site-patterns__pattern-lock-icon {
-		display: inline-flex;
-
-		svg {
-			fill: currentcolor;
-		}
+		fill: currentcolor;
 	}
 }