@wordpress/edit-site 5.20.1 → 5.21.0

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

@@ -2,217 +2,104 @@
  * WordPress dependencies
  */
 import { MenuItem } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_TYPES,
-	PATTERN_SYNC_TYPES,
-} from '../../utils/constants';
-import {
-	useExistingTemplateParts,
-	getUniqueTemplatePartTitle,
-	getCleanTemplatePartSlug,
-} from '../../utils/template-part-create';
+import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
+import CreateTemplatePartModal from '../create-template-part-modal';
 
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
-function getPatternMeta( item ) {
-	if ( item.type === PATTERN_TYPES.theme ) {
-		return { wp_pattern_sync_status: PATTERN_SYNC_TYPES.unsynced };
-	}
-
-	const syncStatus = item.patternBlock.wp_pattern_sync_status;
-	const isUnsynced = syncStatus === PATTERN_SYNC_TYPES.unsynced;
-
-	return {
-		...item.patternBlock.meta,
-		wp_pattern_sync_status: isUnsynced ? syncStatus : undefined,
-	};
-}
-
 export default function DuplicateMenuItem( {
 	categoryId,
 	item,
 	label = __( 'Duplicate' ),
 	onClose,
 } ) {
-	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
-	const { createErrorNotice, createSuccessNotice } =
-		useDispatch( noticesStore );
-
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const history = useHistory();
-	const existingTemplateParts = useExistingTemplateParts();
-	const { patternCategories } = usePatternCategories();
 
-	async function createTemplatePart() {
-		try {
-			const copiedTitle = sprintf(
-				/* translators: %s: Existing template part title */
-				__( '%s (Copy)' ),
-				item.title
-			);
-			const title = getUniqueTemplatePartTitle(
-				copiedTitle,
-				existingTemplateParts
-			);
-			const slug = getCleanTemplatePartSlug( title );
-			const { area, content } = item.templatePart;
-
-			const result = await saveEntityRecord(
-				'postType',
-				TEMPLATE_PART_POST_TYPE,
-				{ slug, title, content, area },
-				{ throwOnError: true }
-			);
-
-			createSuccessNotice(
-				sprintf(
-					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
-					__( '"%s" duplicated.' ),
-					item.title
-				),
-				{
-					type: 'snackbar',
-					id: 'edit-site-patterns-success',
-				}
-			);
+	const closeModal = () => setIsModalOpen( false );
 
-			history.push( {
-				postType: TEMPLATE_PART_POST_TYPE,
-				postId: result?.id,
-				categoryType: TEMPLATE_PART_POST_TYPE,
-				categoryId,
-			} );
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const isThemePattern = item.type === PATTERN_TYPES.theme;
 
-			onClose();
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __(
-							'An error occurred while creating the template part.'
-					  );
-
-			createErrorNotice( errorMessage, {
+	async function onTemplatePartSuccess( templatePart ) {
+		createSuccessNotice(
+			sprintf(
+				// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+				__( '"%s" duplicated.' ),
+				item.title
+			),
+			{
 				type: 'snackbar',
-				id: 'edit-site-patterns-error',
-			} );
-			onClose();
-		}
-	}
-
-	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;
+				id: 'edit-site-patterns-success',
 			}
+		);
 
-			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 );
+		history.push( {
+			postType: TEMPLATE_PART_POST_TYPE,
+			postId: templatePart?.id,
+			categoryType: TEMPLATE_PART_POST_TYPE,
+			categoryId,
 		} );
 
-		return Promise.all( terms );
+		onClose();
 	}
 
-	async function createPattern() {
-		try {
-			const isThemePattern = item.type === PATTERN_TYPES.theme;
-			const title = sprintf(
-				/* translators: %s: Existing pattern title */
-				__( '%s (Copy)' ),
-				item.title || item.name
-			);
-			const categories = await getCategories( item.categories || [] );
-
-			const result = await saveEntityRecord(
-				'postType',
-				PATTERN_TYPES.user,
-				{
-					content: isThemePattern
-						? item.content
-						: item.patternBlock.content,
-					meta: getPatternMeta( item ),
-					status: 'publish',
-					title,
-					wp_pattern_category: categories,
-				},
-				{ throwOnError: true }
-			);
-
-			createSuccessNotice(
-				sprintf(
-					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
-					__( '"%s" duplicated.' ),
-					item.title || item.name
-				),
-				{
-					type: 'snackbar',
-					id: 'edit-site-patterns-success',
-				}
-			);
-
-			history.push( {
-				categoryType: PATTERN_TYPES.theme,
-				categoryId,
-				postType: PATTERN_TYPES.user,
-				postId: result?.id,
-			} );
-
-			onClose();
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while creating the pattern.' );
+	function onPatternSuccess( { pattern } ) {
+		history.push( {
+			categoryType: PATTERN_TYPES.theme,
+			categoryId,
+			postType: PATTERN_TYPES.user,
+			postId: pattern.id,
+		} );
 
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-				id: 'edit-site-patterns-error',
-			} );
-			onClose();
-		}
+		onClose();
 	}
 
-	const createItem =
-		item.type === TEMPLATE_PART_POST_TYPE
-			? createTemplatePart
-			: createPattern;
-
-	return <MenuItem onClick={ createItem }>{ label }</MenuItem>;
+	return (
+		<>
+			<MenuItem
+				onClick={ () => setIsModalOpen( true ) }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
+			>
+				{ label }
+			</MenuItem>
+			{ isModalOpen && ! isTemplatePart && (
+				<DuplicatePatternModal
+					onClose={ closeModal }
+					onSuccess={ onPatternSuccess }
+					pattern={ isThemePattern ? item : item.patternBlock }
+				/>
+			) }
+			{ isModalOpen && isTemplatePart && (
+				<CreateTemplatePartModal
+					blocks={ item.blocks }
+					closeModal={ closeModal }
+					confirmLabel={ __( 'Duplicate' ) }
+					defaultArea={ item.templatePart.area }
+					defaultTitle={ sprintf(
+						/* translators: %s: Existing template part title */
+						__( '%s (Copy)' ),
+						item.title
+					) }
+					modalTitle={ __( 'Duplicate template part' ) }
+					onCreate={ onTemplatePartSuccess }
+					onError={ closeModal }
+				/>
+			) }
+		</>
+	);
 }

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

@@ -174,6 +174,7 @@ function GridItem( { categoryId, item, ...props } ) {
 				// Even though still incomplete, passing ids helps performance.
 				// @see https://reakit.io/docs/composite/#performance.
 				id={ `edit-site-patterns-${ item.name }` }
+				type="button"
 				{ ...props }
 				onClick={
 					item.type !== PATTERN_TYPES.theme ? onClick : undefined

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

@@ -2,16 +2,23 @@
  * WordPress dependencies
  */
 import {
-	__experimentalVStack as VStack,
+	DropdownMenu,
+	MenuGroup,
+	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
+import RenameCategoryMenuItem from './rename-category-menu-item';
+import DeleteCategoryMenuItem from './delete-category-menu-item';
 import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
 
@@ -28,7 +35,7 @@ export default function PatternsHeader( {
 		[]
 	);
 
-	let title, description;
+	let title, description, patternCategory;
 	if ( type === TEMPLATE_PART_POST_TYPE ) {
 		const templatePartArea = templatePartAreas.find(
 			( area ) => area.area === categoryId
@@ -36,7 +43,7 @@ export default function PatternsHeader( {
 		title = templatePartArea?.label;
 		description = templatePartArea?.description;
 	} else if ( type === PATTERN_TYPES.theme ) {
-		const patternCategory = patternCategories.find(
+		patternCategory = patternCategories.find(
 			( category ) => category.name === categoryId
 		);
 		title = patternCategory?.label;
@@ -47,9 +54,38 @@ export default function PatternsHeader( {
 
 	return (
 		<VStack className="edit-site-patterns__section-header">
-			<Heading as="h2" level={ 4 } id={ titleId }>
-				{ title }
-			</Heading>
+			<HStack justify="space-between">
+				<Heading as="h2" level={ 4 } id={ titleId }>
+					{ title }
+				</Heading>
+				{ !! patternCategory?.id && (
+					<DropdownMenu
+						icon={ moreVertical }
+						label={ __( 'Actions' ) }
+						toggleProps={ {
+							className: 'edit-site-patterns__button',
+							describedBy: sprintf(
+								/* translators: %s: pattern category name */
+								__( 'Action menu for %s pattern category' ),
+								title
+							),
+						} }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								<RenameCategoryMenuItem
+									category={ patternCategory }
+									onClose={ onClose }
+								/>
+								<DeleteCategoryMenuItem
+									category={ patternCategory }
+									onClose={ onClose }
+								/>
+							</MenuGroup>
+						) }
+					</DropdownMenu>
+				) }
+			</HStack>
 			{ description ? (
 				<Text variant="muted" as="p" id={ descriptionId }>
 					{ description }

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

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { RenamePatternCategoryModal } = unlock( patternsPrivateApis );
+
+export default function RenameCategoryMenuItem( { category, onClose } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	// User created pattern categories have their properties updated when
+	// retrieved via `getUserPatternCategories`. The rename modal expects an
+	// object that will match the pattern category entity.
+	const normalizedCategory = {
+		id: category.id,
+		slug: category.slug,
+		name: category.label,
+	};
+
+	return (
+		<>
+			<MenuItem onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<RenamePatternCategoryModal
+					category={ normalizedCategory }
+					onClose={ () => {
+						setIsModalOpen( false );
+						onClose();
+					} }
+					overlayClassName="edit-site-list__rename-modal"
+				/>
+			) }
+		</>
+	);
+}

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

@@ -61,9 +61,9 @@ export default function RenameMenuItem( { item, onClose } ) {
 			const fallbackErrorMessage =
 				item.type === TEMPLATE_PART_POST_TYPE
 					? __(
-							'An error occurred while reverting the template part.'
+							'An error occurred while renaming the template part.'
 					  )
-					: __( 'An error occurred while reverting the pattern.' );
+					: __( 'An error occurred while renaming the pattern.' );
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message

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

@@ -101,6 +101,10 @@
 	background: $gray-900;
 	padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
 	z-index: z-index(".edit-site-patterns__header");
+
+	.edit-site-patterns__button {
+		color: $gray-600;
+	}
 }
 
 .edit-site-patterns__section {
@@ -218,3 +222,7 @@
 .edit-site-patterns__no-results {
 	color: $gray-600;
 }
+
+.edit-site-patterns__delete-modal {
+	width: $modal-width-small;
+}

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

@@ -195,6 +195,11 @@ const patternBlockToPattern = ( patternBlock, categories ) => ( {
 					: patternCategoryId
 		),
 	} ),
+	termLabels: patternBlock.wp_pattern_category.map( ( patternCategoryId ) =>
+		categories?.get( patternCategoryId )
+			? categories.get( patternCategoryId ).label
+			: patternCategoryId
+	),
 	id: patternBlock.id,
 	name: patternBlock.slug,
 	syncStatus: patternBlock.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,

package/src/components/pattern-modal/duplicate.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { getQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_MODALS } from './';
+import { PATTERN_TYPES } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function PatternDuplicateModal() {
+	const { record } = useEditedEntityRecord();
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const { closeModal } = useDispatch( interfaceStore );
+	const history = useHistory();
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate )
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	function onSuccess( { pattern: newPattern } ) {
+		history.push( {
+			categoryType,
+			categoryId,
+			postType: PATTERN_TYPES.user,
+			postId: newPattern.id,
+		} );
+
+		closeModal();
+	}
+
+	return (
+		<DuplicatePatternModal
+			onClose={ closeModal }
+			onSuccess={ onSuccess }
+			pattern={ record }
+		/>
+	);
+}

package/src/components/pattern-modal/index.js

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import PatternRenameModal from './rename';
+import PatternDuplicateModal from './duplicate';
+
+export const PATTERN_MODALS = {
+	rename: 'edit-site/pattern-rename',
+	duplicate: 'edit-site/pattern-duplicate',
+};
+
+export default function PatternModal() {
+	return (
+		<>
+			<PatternDuplicateModal />
+			<PatternRenameModal />
+		</>
+	);
+}

package/src/components/pattern-modal/rename.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_MODALS } from './';
+import { unlock } from '../../lock-unlock';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+const { RenamePatternModal } = unlock( patternsPrivateApis );
+
+export default function PatternRenameModal() {
+	const { record: pattern } = useEditedEntityRecord();
+	const { closeModal } = useDispatch( interfaceStore );
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( PATTERN_MODALS.rename )
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return <RenamePatternModal onClose={ closeModal } pattern={ pattern } />;
+}

package/src/components/sidebar-edit-mode/template-panel/last-revision.js

@@ -31,6 +31,10 @@ const useRevisionData = () => {
 function PostLastRevisionCheck( { children } ) {
 	const { lastRevisionId, revisionsCount } = useRevisionData();
 
+	if ( ! process.env.IS_GUTENBERG_PLUGIN ) {
+		return null;
+	}
+
 	if ( ! lastRevisionId || revisionsCount < 2 ) {
 		return null;
 	}

package/src/components/sidebar-navigation-screen/style.scss

@@ -76,18 +76,30 @@
 }
 
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+	@include break-medium() {
+		// Safari does not currently support `scrollbar-gutter: stable`, so at
+		// particular viewport sizes it's possible for previews to render prior to a
+		// scrollbar appearing. This then causes a scrollbar to appear, which reduces
+		// the width of the container and can cause the preview's width to change.
+		// As a result, the preview can go into an endless loop of resizing, causing
+		// the preview elements to appear to "dance". A workaround is to provide a
+		// max-width for the container, which prevents the introduction of the scrollbar
+		// from causing the preview's width to change.
+		// See: https://github.com/WordPress/gutenberg/issues/55112
+		max-width: 292px;
+	}
+
 	.edit-site-global-styles-variations_item-preview {
-		border: $gray-900 $border-width solid;
+		box-shadow: 0 0 0 $border-width $gray-900;
 	}
 	.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
-		border: $gray-100 $border-width solid;
+		box-shadow: 0 0 0 $border-width $gray-100;
 	}
 	.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) $border-width solid;
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 	}
-
 	.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 }
 

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js

@@ -1,23 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
+import useNavigationMenuTitle from './use-navigation-menu-title';
 import { useLink } from '../routes/link';
 import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 
 export default function TemplatePartNavigationMenuListItem( { id } ) {
-	const [ title ] = useEntityProp(
-		'postType',
-		NAVIGATION_POST_TYPE,
-		'title',
-		id
-	);
+	const title = useNavigationMenuTitle( id );
 
 	const linkInfo = useLink( {
 		postId: id,

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js

@@ -3,21 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalHeading as Heading } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import useNavigationMenuTitle from './use-navigation-menu-title';
 
 export default function TemplatePartNavigationMenu( { id } ) {
-	const [ title ] = useEntityProp(
-		'postType',
-		NAVIGATION_POST_TYPE,
-		'title',
-		id
-	);
+	const title = useNavigationMenuTitle( id );
 
 	if ( ! id || title === undefined ) {
 		return null;