@wordpress/edit-site 5.14.0 → 5.16.0

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

@@ -1,118 +1,219 @@
 /**
  * WordPress dependencies
  */
-
+import { useState, useDeferredValue, useId, useMemo } from '@wordpress/element';
 import {
 	SearchControl,
-	__experimentalHeading as Heading,
-	__experimentalText as Text,
 	__experimentalVStack as VStack,
 	Flex,
 	FlexBlock,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
 } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
-import { symbol, chevronLeft, chevronRight } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useViewportMatch } from '@wordpress/compose';
+import { useAsyncList, useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import PatternsHeader from './header';
 import Grid from './grid';
 import NoPatterns from './no-patterns';
 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 Pagination from './pagination';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
+const SYNC_FILTERS = {
+	all: __( 'All' ),
+	[ SYNC_TYPES.full ]: __( 'Synced' ),
+	[ SYNC_TYPES.unsynced ]: __( 'Standard' ),
+};
+
+const SYNC_DESCRIPTIONS = {
+	all: '',
+	[ SYNC_TYPES.full ]: __(
+		'Patterns that are kept in sync across the site.'
+	),
+	[ SYNC_TYPES.unsynced ]: __(
+		'Patterns that can be changed freely without affecting the site.'
+	),
+};
+
+const PAGE_SIZE = 20;
+
 export default function PatternsList( { categoryId, type } ) {
 	const location = useLocation();
 	const history = useHistory();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( '' );
+	const deferredFilterValue = useDeferredValue( delayedFilterValue );
 
-	const [ patterns, isResolving ] = usePatterns(
+	const [ syncFilter, setSyncFilter ] = useState( 'all' );
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+
+	const deferredSyncedFilter = useDeferredValue( syncFilter );
+
+	const isUncategorizedThemePatterns =
+		type === PATTERNS && categoryId === 'uncategorized';
+
+	const { patterns, isResolving } = usePatterns(
 		type,
-		categoryId,
-		delayedFilterValue
+		isUncategorizedThemePatterns ? '' : categoryId,
+		{
+			search: deferredFilterValue,
+			syncStatus:
+				deferredSyncedFilter === 'all'
+					? undefined
+					: deferredSyncedFilter,
+		}
 	);
 
-	const { syncedPatterns, unsyncedPatterns } = patterns;
-	const hasPatterns = !! syncedPatterns.length || !! unsyncedPatterns.length;
+	const updateSearchFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setFilterValue( value );
+	};
+
+	const updateSyncFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setSyncFilter( value );
+	};
+
+	const id = useId();
+	const titleId = `${ id }-title`;
+	const descriptionId = `${ id }-description`;
+
+	const hasPatterns = patterns.length;
+	const title = SYNC_FILTERS[ syncFilter ];
+	const description = SYNC_DESCRIPTIONS[ syncFilter ];
+
+	const totalItems = patterns.length;
+	const pageIndex = currentPage - 1;
+	const numPages = Math.ceil( patterns.length / PAGE_SIZE );
+
+	const list = useMemo( () => {
+		return patterns.slice(
+			pageIndex * PAGE_SIZE,
+			pageIndex * PAGE_SIZE + PAGE_SIZE
+		);
+	}, [ pageIndex, patterns ] );
+
+	const asyncList = useAsyncList( list, { step: 10 } );
+
+	const changePage = ( page ) => {
+		const scrollContainer = document.querySelector( '.edit-site-patterns' );
+		scrollContainer?.scrollTo( 0, 0 );
+
+		setCurrentPage( page );
+	};
 
 	return (
-		<VStack spacing={ 6 }>
-			<Flex>
-				{ isMobileViewport && (
-					<SidebarButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						label={ __( 'Back' ) }
-						onClick={ () => {
-							// Go back in history if we came from the Patterns page.
-							// Otherwise push a stack onto the history.
-							if ( location.state?.backPath === '/patterns' ) {
-								history.back();
-							} else {
-								history.push( { path: '/patterns' } );
+		<>
+			<VStack className="edit-site-patterns__header" spacing={ 6 }>
+				<PatternsHeader
+					categoryId={ categoryId }
+					type={ type }
+					titleId={ titleId }
+					descriptionId={ descriptionId }
+				/>
+				<Flex alignment="stretch" wrap>
+					{ isMobileViewport && (
+						<SidebarButton
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							label={ __( 'Back' ) }
+							onClick={ () => {
+								// Go back in history if we came from the Patterns page.
+								// Otherwise push a stack onto the history.
+								if (
+									location.state?.backPath === '/patterns'
+								) {
+									history.back();
+								} else {
+									history.push( { path: '/patterns' } );
+								}
+							} }
+						/>
+					) }
+					<FlexBlock className="edit-site-patterns__search-block">
+						<SearchControl
+							className="edit-site-patterns__search"
+							onChange={ ( value ) =>
+								updateSearchFilter( value )
 							}
-						} }
-					/>
-				) }
-				<FlexBlock>
-					<SearchControl
-						className="edit-site-patterns__search"
-						onChange={ ( value ) => setFilterValue( value ) }
-						placeholder={ __( 'Search patterns' ) }
-						label={ __( 'Search patterns' ) }
-						value={ filterValue }
-						__nextHasNoMarginBottom
-					/>
-				</FlexBlock>
-			</Flex>
-			{ isResolving && __( 'Loading' ) }
-			{ ! isResolving && !! syncedPatterns.length && (
-				<>
-					<VStack className="edit-site-patterns__section-header">
-						<Heading as="h2" level={ 4 }>
-							{ __( 'Synced' ) }
-						</Heading>
-						<Text variant="muted" as="p">
-							{ __(
-								'Patterns that are kept in sync across your site'
+							placeholder={ __( 'Search patterns' ) }
+							label={ __( 'Search patterns' ) }
+							value={ filterValue }
+							__nextHasNoMarginBottom
+						/>
+					</FlexBlock>
+					{ categoryId === USER_PATTERN_CATEGORY && (
+						<ToggleGroupControl
+							className="edit-site-patterns__sync-status-filter"
+							hideLabelFromVision
+							label={ __( 'Filter by sync status' ) }
+							value={ syncFilter }
+							isBlock
+							onChange={ ( value ) => updateSyncFilter( value ) }
+							__nextHasNoMarginBottom
+						>
+							{ Object.entries( SYNC_FILTERS ).map(
+								( [ key, label ] ) => (
+									<ToggleGroupControlOption
+										className="edit-site-patterns__sync-status-filter-option"
+										key={ key }
+										value={ key }
+										label={ label }
+									/>
+								)
 							) }
-						</Text>
-					</VStack>
-					<Grid
-						icon={ symbol }
-						categoryId={ categoryId }
-						label={ __( 'Synced' ) }
-						items={ syncedPatterns }
-					/>
-				</>
-			) }
-			{ ! isResolving && !! unsyncedPatterns.length && (
-				<>
+						</ToggleGroupControl>
+					) }
+				</Flex>
+			</VStack>
+			<VStack
+				className="edit-site-patterns__section"
+				justify="flex-start"
+				spacing={ 6 }
+			>
+				{ syncFilter !== 'all' && (
 					<VStack className="edit-site-patterns__section-header">
-						<Heading as="h2" level={ 4 }>
-							{ __( 'Standard' ) }
+						<Heading as="h3" level={ 5 } id={ titleId }>
+							{ title }
 						</Heading>
-						<Text variant="muted" as="p">
-							{ __(
-								'Patterns that can be changed freely without affecting your site'
-							) }
-						</Text>
+						{ description ? (
+							<Text variant="muted" as="p" id={ descriptionId }>
+								{ description }
+							</Text>
+						) : null }
 					</VStack>
+				) }
+				{ hasPatterns && (
 					<Grid
 						categoryId={ categoryId }
-						label={ __( 'Standard patterns' ) }
-						items={ unsyncedPatterns }
+						items={ asyncList }
+						aria-labelledby={ titleId }
+						aria-describedby={ descriptionId }
 					/>
-				</>
+				) }
+				{ ! isResolving && ! hasPatterns && <NoPatterns /> }
+			</VStack>
+			{ numPages > 1 && (
+				<Pagination
+					currentPage={ currentPage }
+					numPages={ numPages }
+					changePage={ changePage }
+					totalItems={ totalItems }
+				/>
 			) }
-			{ ! isResolving && ! hasPatterns && <NoPatterns /> }
-		</VStack>
+		</>
 	);
 }

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

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	MenuItem,
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PARTS } from './utils';
+
+export default function RenameMenuItem( { item, onClose } ) {
+	const [ title, setTitle ] = useState( () => item.title );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	if ( item.type === TEMPLATE_PARTS && ! item.isCustom ) {
+		return null;
+	}
+
+	async function onRename( event ) {
+		event.preventDefault();
+
+		try {
+			await editEntityRecord( 'postType', item.type, item.id, { title } );
+
+			// Update state before saving rerenders the list.
+			setTitle( '' );
+			setIsModalOpen( false );
+			onClose();
+
+			// Persist edited entity.
+			await saveEditedEntityRecord( 'postType', item.type, item.id, {
+				throwOnError: true,
+			} );
+
+			createSuccessNotice( __( 'Entity renamed.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while renaming the entity.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setIsModalOpen( true );
+					setTitle( item.title );
+				} }
+			>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Rename' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+						onClose();
+					} }
+					overlayClassName="edit-site-list__rename_modal"
+				>
+					<form onSubmit={ onRename }>
+						<VStack spacing="5">
+							<TextControl
+								__nextHasNoMarginBottom
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								required
+							/>
+
+							<HStack justify="right">
+								<Button
+									variant="tertiary"
+									onClick={ () => {
+										setIsModalOpen( false );
+										onClose();
+									} }
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+
+								<Button variant="primary" type="submit">
+									{ __( 'Save' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}

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

@@ -1,6 +1,18 @@
 .edit-site-patterns {
-	background: rgba(0, 0, 0, 0.05);
+	border-left: 1px solid $gray-800;
+	background: none;
 	margin: $header-height 0 0;
+	border-radius: 0;
+	padding: 0;
+	overflow-x: auto;
+
+	.components-base-control {
+		width: 100%;
+		@include break-medium {
+			width: auto;
+		}
+	}
+
 	.components-text {
 		color: $gray-600;
 	}
@@ -12,33 +24,127 @@
 	@include break-medium {
 		margin: 0;
 	}
-}
 
-.edit-site-patterns__grid {
-	column-gap: $grid-unit-30;
-	@include break-large() {
-		column-count: 2;
+	.edit-site-patterns__search-block {
+		min-width: fit-content;
+		flex-grow: 1;
+	}
+
+	// The increased specificity here is to overcome component styles
+	// without relying on internal component class names.
+	.edit-site-patterns__search {
+		input[type="search"] {
+			height: $button-size-next-default-40px;
+			background: $gray-800;
+			color: $gray-200;
+
+			&:focus {
+				background: $gray-800;
+			}
+		}
+
+		svg {
+			fill: $gray-600;
+		}
+	}
+
+	.edit-site-patterns__sync-status-filter {
+		background: $gray-800;
+		border: none;
+		height: $button-size-next-default-40px;
+		min-width: max-content;
+		width: 100%;
+		max-width: 100%;
+
+		@include break-medium {
+			width: 300px;
+		}
+	}
+	.edit-site-patterns__sync-status-filter-option:not([aria-checked="true"]) {
+		color: $gray-600;
+	}
+	.edit-site-patterns__sync-status-filter-option:active {
+		background: $gray-700;
+		color: $gray-100;
+	}
+
+	.edit-site-patterns__grid-pagination {
+		border-top: 1px solid $gray-800;
+		background: $gray-900;
+		padding: $grid-unit-30 $grid-unit-40;
+		position: sticky;
+		bottom: 0;
+		z-index: z-index(".edit-site-patterns__grid-pagination");
+
+		.components-button.is-tertiary {
+			width: $button-size-compact;
+			height: $button-size-compact;
+			color: $gray-100;
+			background-color: $gray-800;
+			justify-content: center;
+
+			&:disabled {
+				color: $gray-600;
+				background: none;
+			}
+
+			&:hover:not(:disabled) {
+				background-color: $gray-700;
+			}
+		}
 	}
+}
+
+.edit-site-patterns__header {
+	position: sticky;
+	top: 0;
+	background: $gray-900;
+	padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
+	z-index: z-index(".edit-site-patterns__header");
+}
+
+.edit-site-patterns__section {
+	padding: $grid-unit-30 $grid-unit-40;
+	flex: 1;
+}
 
-	// Small top padding required to avoid cutting off the visible outline
-	// when hovering items.
-	padding-top: $border-width-focus-fallback;
-	margin-bottom: $grid-unit-40;
+.edit-site-patterns__section-header {
+	.screen-reader-shortcut:focus {
+		top: 0;
+	}
+}
 
+.edit-site-patterns__grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: $grid-unit-40;
+	margin-top: 0;
+	margin-bottom: 0;
+	@include break-large {
+		grid-template-columns: 1fr 1fr;
+	}
+	@include break-huge {
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+	@include break-xhuge {
+		grid-template-columns: 1fr 1fr 1fr 1fr;
+	}
 	.edit-site-patterns__pattern {
 		break-inside: avoid-column;
 		display: flex;
 		flex-direction: column;
-		margin-bottom: $grid-unit-60;
-
 		.edit-site-patterns__preview {
-			border-radius: $radius-block-ui;
+			box-shadow: none;
+			border: none;
+			padding: 0;
+			background-color: unset;
+			box-sizing: border-box;
+			border-radius: 4px;
 			cursor: pointer;
 			overflow: hidden;
 
 			&:focus {
-				box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
+				box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
 			}
@@ -46,6 +152,10 @@
 			&.is-inactive {
 				cursor: default;
 			}
+			&.is-inactive:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
+				opacity: 0.8;
+			}
 		}
 
 		.edit-site-patterns__footer,
@@ -68,31 +178,28 @@
 	}
 
 	.edit-site-patterns__preview {
-		flex: 1;
+		flex: 0 1 auto;
 		margin-bottom: $grid-unit-20;
 	}
 }
 
-// The increased specificity here is to overcome component styles
-// without relying on internal component class names.
-.edit-site-patterns__search {
-	&#{&} input[type="search"] {
-		background: $gray-800;
+.edit-site-patterns__load-more {
+	align-self: center;
+}
+
+.edit-site-patterns__pattern-title {
+	color: $gray-200;
+
+	.is-link {
+		text-decoration: none;
 		color: $gray-200;
 
+		&:hover,
 		&:focus {
-			background: $gray-800;
+			color: $white;
 		}
 	}
 
-	svg {
-		fill: $gray-600;
-	}
-}
-
-.edit-site-patterns__pattern-title {
-	color: $gray-200;
-
 	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);
@@ -101,6 +208,10 @@
 
 	.edit-site-patterns__pattern-lock-icon {
 		display: inline-flex;
+
+		svg {
+			fill: currentcolor;
+		}
 	}
 }