@wordpress/edit-site 5.12.8 → 5.12.10

package/src/components/page-actions/{delete-page-menu-item.js → trash-page-menu-item.js}

@@ -3,17 +3,12 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { store as noticesStore } from '@wordpress/notices';
 
-export default function DeletePageMenuItem( { postId, onRemove } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
+export default function TrashPageMenuItem( { postId, onRemove } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
@@ -34,12 +29,12 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			createSuccessNotice(
 				sprintf(
 					/* translators: The page's title. */
-					__( '"%s" deleted.' ),
+					__( '"%s" moved to the Trash.' ),
 					decodeEntities( page.title.rendered )
 				),
 				{
 					type: 'snackbar',
-					id: 'edit-site-page-removed',
+					id: 'edit-site-page-trashed',
 				}
 			);
 			onRemove?.();
@@ -47,25 +42,18 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while deleting the page.' );
+					: __(
+							'An error occurred while moving the page to the trash.'
+					  );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		} finally {
-			setIsModalOpen( false );
 		}
 	}
 	return (
 		<>
-			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
-				{ __( 'Delete' ) }
+			<MenuItem onClick={ () => removePage() } isDestructive>
+				{ __( 'Move to Trash' ) }
 			</MenuItem>
-			<ConfirmDialog
-				isOpen={ isModalOpen }
-				onConfirm={ removePage }
-				onCancel={ () => setIsModalOpen( false ) }
-			>
-				{ __( 'Are you sure you want to delete this page?' ) }
-			</ConfirmDialog>
 		</>
 	);
 }

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

@@ -174,7 +174,7 @@ function GridItem( { categoryId, item, ...props } ) {
 					spacing={ 3 }
 					className="edit-site-patterns__pattern-title"
 				>
-					{ itemIcon && (
+					{ itemIcon && ! isNonUserPattern && (
 						<Tooltip
 							position="top center"
 							text={ __(

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

@@ -1,26 +1,115 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalText as Text } from '@wordpress/components';
-import { useRef } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	Button,
+} from '@wordpress/components';
+import { useRef, useState, useMemo } from '@wordpress/element';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import GridItem from './grid-item';
 
-const PAGE_SIZE = 100;
+const PAGE_SIZE = 20;
+
+function Pagination( { currentPage, numPages, changePage, totalItems } ) {
+	return (
+		<HStack
+			expanded={ false }
+			spacing={ 3 }
+			className="edit-site-patterns__grid-pagination"
+		>
+			<Text variant="muted">
+				{
+					// translators: %s: Total number of patterns.
+					sprintf(
+						// translators: %s: Total number of patterns.
+						_n( '%s item', '%s items', totalItems ),
+						totalItems
+					)
+				}
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( 1 ) }
+					disabled={ currentPage === 1 }
+					aria-label={ __( 'First page' ) }
+				>
+					«
+				</Button>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( currentPage - 1 ) }
+					disabled={ currentPage === 1 }
+					aria-label={ __( 'Previous page' ) }
+				>
+					‹
+				</Button>
+			</HStack>
+			<Text variant="muted">
+				{ sprintf(
+					// translators: %1$s: Current page number, %2$s: Total number of pages.
+					_x( '%1$s of %2$s', 'paging' ),
+					currentPage,
+					numPages
+				) }
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( currentPage + 1 ) }
+					disabled={ currentPage === numPages }
+					aria-label={ __( 'Next page' ) }
+				>
+					›
+				</Button>
+				<Button
+					variant="tertiary"
+					onClick={ () => changePage( numPages ) }
+					disabled={ currentPage === numPages }
+					aria-label={ __( 'Last page' ) }
+				>
+					»
+				</Button>
+			</HStack>
+		</HStack>
+	);
+}
 
 export default function Grid( { categoryId, items, ...props } ) {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
 	const gridRef = useRef();
+	const totalItems = items.length;
+	const pageIndex = currentPage - 1;
 
-	if ( ! items?.length ) {
+	const list = useMemo(
+		() =>
+			items.slice(
+				pageIndex * PAGE_SIZE,
+				pageIndex * PAGE_SIZE + PAGE_SIZE
+			),
+		[ pageIndex, items ]
+	);
+
+	const asyncList = useAsyncList( list, { step: 10 } );
+
+	if ( ! list?.length ) {
 		return null;
 	}
 
-	const list = items.slice( 0, PAGE_SIZE );
-	const restLength = items.length - PAGE_SIZE;
+	const numPages = Math.ceil( items.length / PAGE_SIZE );
+	const changePage = ( page ) => {
+		const scrollContainer = document.querySelector( '.edit-site-patterns' );
+		scrollContainer?.scrollTo( 0, 0 );
+
+		setCurrentPage( page );
+	};
 
 	return (
 		<>
@@ -30,7 +119,7 @@ export default function Grid( { categoryId, items, ...props } ) {
 				{ ...props }
 				ref={ gridRef }
 			>
-				{ list.map( ( item ) => (
+				{ asyncList.map( ( item ) => (
 					<GridItem
 						key={ item.name }
 						item={ item }
@@ -38,14 +127,10 @@ export default function Grid( { categoryId, items, ...props } ) {
 					/>
 				) ) }
 			</ul>
-			{ restLength > 0 && (
-				<Text variant="muted" as="p" align="center">
-					{ sprintf(
-						/* translators: %d: number of patterns */
-						__( '+ %d more patterns discoverable by searching' ),
-						restLength
-					) }
-				</Text>
+			{ numPages > 1 && (
+				<Pagination
+					{ ...{ currentPage, numPages, changePage, totalItems } }
+				/>
 			) }
 		</>
 	);

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

@@ -15,7 +15,7 @@ import {
 import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useViewportMatch, useAsyncList } from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -57,11 +57,18 @@ export default function PatternsList( { categoryId, type } ) {
 
 	const [ syncFilter, setSyncFilter ] = useState( 'all' );
 	const deferredSyncedFilter = useDeferredValue( syncFilter );
-	const { patterns, isResolving } = usePatterns( type, categoryId, {
-		search: deferredFilterValue,
-		syncStatus:
-			deferredSyncedFilter === 'all' ? undefined : deferredSyncedFilter,
-	} );
+
+	const { patterns, isResolving } = usePatterns(
+		type,
+		categoryId !== 'uncategorized' ? categoryId : '',
+		{
+			search: deferredFilterValue,
+			syncStatus:
+				deferredSyncedFilter === 'all'
+					? undefined
+					: deferredSyncedFilter,
+		}
+	);
 
 	const id = useId();
 	const titleId = `${ id }-title`;
@@ -70,7 +77,6 @@ export default function PatternsList( { categoryId, type } ) {
 	const hasPatterns = patterns.length;
 	const title = SYNC_FILTERS[ syncFilter ];
 	const description = SYNC_DESCRIPTIONS[ syncFilter ];
-	const shownPatterns = useAsyncList( patterns );
 
 	return (
 		<VStack spacing={ 6 }>
@@ -132,7 +138,7 @@ export default function PatternsList( { categoryId, type } ) {
 			</Flex>
 			{ syncFilter !== 'all' && (
 				<VStack className="edit-site-patterns__section-header">
-					<Heading as="h3" level={ 4 } id={ titleId }>
+					<Heading as="h3" level={ 5 } id={ titleId }>
 						{ title }
 					</Heading>
 					{ description ? (
@@ -145,7 +151,7 @@ export default function PatternsList( { categoryId, type } ) {
 			{ hasPatterns && (
 				<Grid
 					categoryId={ categoryId }
-					items={ shownPatterns }
+					items={ patterns }
 					aria-labelledby={ titleId }
 					aria-describedby={ descriptionId }
 				/>

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

@@ -1,6 +1,8 @@
 .edit-site-patterns {
-	background: rgba(0, 0, 0, 0.15);
+	border: 1px solid $gray-800;
+	background: none;
 	margin: $header-height 0 0;
+	border-radius: 0;
 	.components-base-control {
 		width: 100%;
 		@include break-medium {
@@ -59,6 +61,23 @@
 		background: $gray-700;
 		color: $gray-100;
 	}
+
+	.edit-site-patterns__grid-pagination {
+		width: fit-content;
+		.components-button.is-tertiary {
+			width: $button-size-compact;
+			height: $button-size-compact;
+			color: $gray-100;
+			background-color: $gray-800;
+			&:disabled {
+				color: $gray-600;
+				background: none;
+			}
+			&:hover:not(:disabled) {
+				background-color: $gray-700;
+			}
+		}
+	}
 }
 
 .edit-site-patterns__section-header {
@@ -74,6 +93,7 @@
 	// Small top padding required to avoid cutting off the visible outline
 	// when hovering items.
 	padding-top: $border-width-focus-fallback;
+	margin-top: 0;
 	margin-bottom: $grid-unit-40;
 	@include break-large {
 		grid-template-columns: 1fr 1fr;

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

@@ -93,11 +93,17 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 			blocks: parse( pattern.content ),
 		} ) );
 
-	patterns = searchItems( patterns, search, {
-		categoryId,
-		hasCategory: ( item, currentCategory ) =>
-			item.categories?.includes( currentCategory ),
-	} );
+	if ( categoryId ) {
+		patterns = searchItems( patterns, search, {
+			categoryId,
+			hasCategory: ( item, currentCategory ) =>
+				item.categories?.includes( currentCategory ),
+		} );
+	} else {
+		patterns = searchItems( patterns, search, {
+			hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+		} );
+	}
 
 	return { patterns, isResolving: false };
 };

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' ),
@@ -87,15 +76,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/resizable-frame/index.js

@@ -9,9 +9,12 @@ import classnames from 'classnames';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import {
 	ResizableBox,
+	Tooltip,
 	__unstableMotion as motion,
 } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -33,7 +36,7 @@ const HANDLE_STYLES_OVERRIDE = {
 };
 
 // The minimum width of the frame (in px) while resizing.
-const FRAME_MIN_WIDTH = 340;
+const FRAME_MIN_WIDTH = 320;
 // The reference width of the frame (in px) used to calculate the aspect ratio.
 const FRAME_REFERENCE_WIDTH = 1300;
 // 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.
@@ -42,6 +45,8 @@ const FRAME_TARGET_ASPECT_RATIO = 9 / 19.5;
 // viewport's edge. If the frame is resized to be closer to the viewport's edge
 // than this distance, then "canvas mode" will be enabled.
 const SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;
+// Default size for the `frameSize` state.
+const INITIAL_FRAME_SIZE = { width: '100%', height: '100%' };
 
 function calculateNewHeight( width, initialAspectRatio ) {
 	const lerp = ( a, b, amount ) => {
@@ -78,22 +83,27 @@ function ResizableFrame( {
 	oversizedClassName,
 	innerContentStyle,
 } ) {
-	const [ frameSize, setFrameSize ] = useState( {
-		width: '100%',
-		height: '100%',
-	} );
+	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
 	const [ startingWidth, setStartingWidth ] = useState();
 	const [ isResizing, setIsResizing ] = useState( false );
-	const [ isHovering, setIsHovering ] = useState( false );
+	const [ shouldShowHandle, setShouldShowHandle ] = useState( false );
 	const [ isOversized, setIsOversized ] = useState( false );
 	const [ resizeRatio, setResizeRatio ] = useState( 1 );
+	const canvasMode = useSelect(
+		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
+		[]
+	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const initialAspectRatioRef = useRef( null );
 	// The width of the resizable frame on initial render.
 	const initialComputedWidthRef = useRef( null );
 	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
 	const frameRef = useRef( null );
+	const resizableHandleHelpId = useInstanceId(
+		ResizableFrame,
+		'edit-site-resizable-frame-handle-help'
+	);
 
 	// Remember frame dimensions on initial render.
 	useEffect( () => {
@@ -154,13 +164,40 @@ function ResizableFrame( {
 		if ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {
 			// Reset the initial aspect ratio if the frame is resized slightly
 			// above the sidebar but not far enough to trigger full screen.
-			setFrameSize( { width: '100%', height: '100%' } );
+			setFrameSize( INITIAL_FRAME_SIZE );
 		} else {
 			// Trigger full screen if the frame is resized far enough to the left.
 			setCanvasMode( 'edit' );
 		}
 	};
 
+	// Handle resize by arrow keys
+	const handleResizableHandleKeyDown = ( event ) => {
+		if ( ! [ 'ArrowLeft', 'ArrowRight' ].includes( event.key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const step = 20 * ( event.shiftKey ? 5 : 1 );
+		const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 );
+		const newWidth = Math.min(
+			Math.max(
+				FRAME_MIN_WIDTH,
+				frameRef.current.resizable.offsetWidth + delta
+			),
+			initialComputedWidthRef.current
+		);
+
+		setFrameSize( {
+			width: newWidth,
+			height: calculateNewHeight(
+				newWidth,
+				initialAspectRatioRef.current
+			),
+		} );
+	};
+
 	const frameAnimationVariants = {
 		default: {
 			flexGrow: 0,
@@ -173,16 +210,26 @@ function ResizableFrame( {
 	};
 
 	const resizeHandleVariants = {
-		default: {
+		hidden: {
+			opacity: 0,
+			left: 0,
+		},
+		visible: {
 			opacity: 1,
 			left: -16,
 		},
-		resizing: {
+		active: {
 			opacity: 1,
 			left: -16,
 			scaleY: 1.3,
 		},
 	};
+	const currentResizeHandleVariant = ( () => {
+		if ( isResizing ) {
+			return 'active';
+		}
+		return shouldShowHandle ? 'visible' : 'hidden';
+	} )();
 
 	return (
 		<ResizableBox
@@ -217,28 +264,50 @@ function ResizableFrame( {
 			minWidth={ FRAME_MIN_WIDTH }
 			maxWidth={ isFullWidth ? '100%' : '150%' }
 			maxHeight={ '100%' }
-			onMouseOver={ () => setIsHovering( true ) }
-			onMouseOut={ () => setIsHovering( false ) }
+			onFocus={ () => setShouldShowHandle( true ) }
+			onBlur={ () => setShouldShowHandle( false ) }
+			onMouseOver={ () => setShouldShowHandle( true ) }
+			onMouseOut={ () => setShouldShowHandle( false ) }
 			handleComponent={ {
-				left:
-					isHovering || isResizing ? (
-						<motion.div
-							key="handle"
-							className="edit-site-resizable-frame__handle"
-							variants={ resizeHandleVariants }
-							animate={ isResizing ? 'resizing' : 'default' }
-							title="Drag to resize"
-							initial={ {
-								opacity: 0,
-								left: 0,
-							} }
-							exit={ {
-								opacity: 0,
-								left: 0,
-							} }
-							whileHover={ { scaleY: 1.3 } }
-						/>
-					) : null,
+				left: canvasMode === 'view' && (
+					<>
+						<Tooltip text={ __( 'Drag to resize' ) }>
+							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
+							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
+							<motion.button
+								key="handle"
+								role="separator"
+								aria-orientation="vertical"
+								className={ classnames(
+									'edit-site-resizable-frame__handle',
+									{ 'is-resizing': isResizing }
+								) }
+								variants={ resizeHandleVariants }
+								animate={ currentResizeHandleVariant }
+								aria-label={ __( 'Drag to resize' ) }
+								aria-describedby={ resizableHandleHelpId }
+								aria-valuenow={
+									frameRef.current?.resizable?.offsetWidth ||
+									undefined
+								}
+								aria-valuemin={ FRAME_MIN_WIDTH }
+								aria-valuemax={
+									initialComputedWidthRef.current
+								}
+								onKeyDown={ handleResizableHandleKeyDown }
+								initial="hidden"
+								exit="hidden"
+								whileFocus="active"
+								whileHover="active"
+							/>
+						</Tooltip>
+						<div hidden id={ resizableHandleHelpId }>
+							{ __(
+								'Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.'
+							) }
+						</div>
+					</>
+				),
 			} }
 			onResizeStart={ handleResizeStart }
 			onResize={ handleResize }