@wordpress/edit-site 5.28.5 → 5.30.0

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

@@ -1,331 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { paramCase as kebabCase } from 'change-case';
-
-/**
- * WordPress dependencies
- */
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	Button,
-	__experimentalConfirmDialog as ConfirmDialog,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	__experimentalHeading as Heading,
-	__experimentalHStack as HStack,
-	Tooltip,
-	Flex,
-} from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { useState, useId, memo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	Icon,
-	header,
-	footer,
-	symbolFilled as uncategorized,
-	symbol,
-	moreVertical,
-	lockSmall,
-} from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { downloadBlob } from '@wordpress/blob';
-
-/**
- * Internal dependencies
- */
-import RenameMenuItem from './rename-menu-item';
-import DuplicateMenuItem from './duplicate-menu-item';
-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 } =
-		useDispatch( reusableBlocksStore );
-	const { createErrorNotice, createSuccessNotice } =
-		useDispatch( noticesStore );
-
-	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: isTemplatePart ? item.type : PATTERN_TYPES.theme,
-	} );
-
-	const isEmpty = ! item.blocks?.length;
-	const patternClassNames = classnames( 'edit-site-patterns__pattern', {
-		'is-placeholder': isEmpty,
-	} );
-	const previewClassNames = classnames( 'edit-site-patterns__preview', {
-		'is-inactive': isNonUserPattern,
-	} );
-
-	const deletePattern = async () => {
-		try {
-			await __experimentalDeleteReusableBlock( item.id );
-			createSuccessNotice(
-				sprintf(
-					// translators: %s: The pattern's title e.g. 'Call to action'.
-					__( '"%s" deleted.' ),
-					item.title
-				),
-				{ type: 'snackbar', id: 'edit-site-patterns-success' }
-			);
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while deleting the pattern.' );
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-				id: 'edit-site-patterns-error',
-			} );
-		}
-	};
-	const deleteItem = () =>
-		isTemplatePart ? removeTemplate( item ) : deletePattern();
-	const exportAsJSON = () => {
-		const json = {
-			__file: item.type,
-			title: item.title || item.name,
-			content: item.patternPost.content.raw,
-			syncStatus: item.patternPost.wp_pattern_sync_status,
-		};
-
-		return downloadBlob(
-			`${ kebabCase( item.title || item.name ) }.json`,
-			JSON.stringify( json, null, 2 ),
-			'application/json'
-		);
-	};
-
-	// Only custom patterns or custom template parts can be renamed or deleted.
-	const isCustomPattern =
-		isUserPattern || ( isTemplatePart && item.isCustom );
-	const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
-	const ariaDescriptions = [];
-
-	if ( isCustomPattern ) {
-		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
-		ariaDescriptions.push(
-			__( 'Press Enter to edit, or Delete to delete the pattern.' )
-		);
-	} else if ( item.description ) {
-		ariaDescriptions.push( item.description );
-	}
-
-	if ( isNonUserPattern ) {
-		ariaDescriptions.push(
-			__( 'Theme & plugin patterns cannot be edited.' )
-		);
-	}
-
-	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
-		? __( 'Are you sure you want to clear these customizations?' )
-		: 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.name
-		  );
-
-	const additionalStyles = ! backgroundColor
-		? [ { css: 'body { background: #fff; }' } ]
-		: undefined;
-
-	return (
-		<li className={ patternClassNames }>
-			<button
-				className={ previewClassNames }
-				id={ `edit-site-patterns-${ item.name }` }
-				type="button"
-				{ ...props }
-				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
-						? ariaDescriptions
-								.map(
-									( _, index ) =>
-										`${ descriptionId }-${ index }`
-								)
-								.join( ' ' )
-						: undefined
-				}
-			>
-				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
-				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-				{ ! isEmpty && (
-					<BlockPreview
-						blocks={ item.blocks }
-						additionalStyles={ additionalStyles }
-						viewportWidth={ item.viewportWidth }
-					/>
-				) }
-			</button>
-			{ ariaDescriptions.map( ( ariaDescription, index ) => (
-				<div
-					key={ index }
-					hidden
-					id={ `${ descriptionId }-${ index }` }
-				>
-					{ ariaDescription }
-				</div>
-			) ) }
-			<HStack
-				className="edit-site-patterns__footer"
-				justify="space-between"
-			>
-				<HStack
-					alignment="center"
-					justify="left"
-					spacing={ 3 }
-					className="edit-site-patterns__pattern-title"
-				>
-					{ itemIcon && ! isNonUserPattern && (
-						<Tooltip
-							placement="top"
-							text={ __(
-								'Editing this pattern will also update anywhere it is used'
-							) }
-						>
-							<Icon
-								className="edit-site-patterns__pattern-icon"
-								icon={ itemIcon }
-							/>
-						</Tooltip>
-					) }
-					<Flex as="span" gap={ 0 } justify="left">
-						{ item.type === PATTERN_TYPES.theme ? (
-							item.title
-						) : (
-							<Heading level={ 5 }>
-								<Button
-									variant="link"
-									onClick={ onClick }
-									// Required for the grid's roving tab index system.
-									// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-									tabIndex="-1"
-								>
-									{ item.title || item.name }
-								</Button>
-							</Heading>
-						) }
-						{ item.type === PATTERN_TYPES.theme && (
-							<Tooltip
-								placement="top"
-								text={ __( 'This pattern cannot be edited.' ) }
-							>
-								<Icon
-									className="edit-site-patterns__pattern-lock-icon"
-									icon={ lockSmall }
-									size={ 24 }
-								/>
-							</Tooltip>
-						) }
-					</Flex>
-				</HStack>
-				<DropdownMenu
-					icon={ moreVertical }
-					label={ __( 'Actions' ) }
-					className="edit-site-patterns__dropdown"
-					popoverProps={ { placement: 'bottom-end' } }
-					toggleProps={ {
-						className: 'edit-site-patterns__button',
-						describedBy: sprintf(
-							/* translators: %s: pattern name */
-							__( 'Action menu for %s pattern' ),
-							item.title
-						),
-					} }
-				>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ isCustomPattern && ! hasThemeFile && (
-								<RenameMenuItem
-									item={ item }
-									onClose={ onClose }
-								/>
-							) }
-							<DuplicateMenuItem
-								categoryId={ categoryId }
-								item={ item }
-								onClose={ onClose }
-								label={ __( 'Duplicate' ) }
-							/>
-							{ item.type === PATTERN_TYPES.user && (
-								<MenuItem onClick={ () => exportAsJSON() }>
-									{ __( 'Export as JSON' ) }
-								</MenuItem>
-							) }
-
-							{ isCustomPattern && (
-								<MenuItem
-									isDestructive={ ! hasThemeFile }
-									onClick={ () =>
-										setIsDeleteDialogOpen( true )
-									}
-								>
-									{ hasThemeFile
-										? __( 'Clear customizations' )
-										: __( 'Delete' ) }
-								</MenuItem>
-							) }
-						</MenuGroup>
-					) }
-				</DropdownMenu>
-			</HStack>
-
-			{ isDeleteDialogOpen && (
-				<ConfirmDialog
-					confirmButtonText={ confirmButtonText }
-					onConfirm={ deleteItem }
-					onCancel={ () => setIsDeleteDialogOpen( false ) }
-				>
-					{ confirmPrompt }
-				</ConfirmDialog>
-			) }
-		</li>
-	);
-}
-
-export default memo( GridItem );

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

@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import GridItem from './grid-item';
-
-export default function Grid( { categoryId, items, ...props } ) {
-	if ( ! items?.length ) {
-		return null;
-	}
-
-	return (
-		<ul className="edit-site-patterns__grid" { ...props }>
-			{ items.map( ( item ) => (
-				<GridItem
-					key={ item.name }
-					item={ item }
-					categoryId={ categoryId }
-				/>
-			) ) }
-		</ul>
-	);
-}

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

@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export default function NoPatterns() {
-	return (
-		<div className="edit-site-patterns__no-results">
-			{ __( 'No patterns found.' ) }
-		</div>
-	);
-}

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

@@ -1,229 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useDeferredValue, useId, useMemo } from '@wordpress/element';
-import {
-	SearchControl,
-	__experimentalVStack as VStack,
-	Flex,
-	FlexBlock,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalHeading as Heading,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { __, _x, isRTL } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import {
-	useAsyncList,
-	useViewportMatch,
-	useDebouncedInput,
-} 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 { unlock } from '../../lock-unlock';
-import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../../utils/constants';
-import Pagination from '../pagination';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-const SYNC_FILTERS = {
-	all: _x( 'All', 'Option that shows all patterns' ),
-	[ PATTERN_SYNC_TYPES.full ]: _x(
-		'Synced',
-		'Option that shows all synchronized patterns'
-	),
-	[ PATTERN_SYNC_TYPES.unsynced ]: _x(
-		'Not synced',
-		'Option that shows all patterns that are not synchronized'
-	),
-};
-
-const SYNC_DESCRIPTIONS = {
-	all: '',
-	[ PATTERN_SYNC_TYPES.full ]: __(
-		'Patterns that are kept in sync across the site.'
-	),
-	[ PATTERN_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 [ syncFilter, setSyncFilter ] = useState( 'all' );
-	const [ currentPage, setCurrentPage ] = useState( 1 );
-
-	const deferredSyncedFilter = useDeferredValue( syncFilter );
-
-	const isUncategorizedThemePatterns =
-		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
-
-	const { patterns, isResolving } = usePatterns(
-		type,
-		isUncategorizedThemePatterns ? '' : categoryId,
-		{
-			search: deferredFilterValue,
-			syncStatus:
-				deferredSyncedFilter === 'all'
-					? undefined
-					: deferredSyncedFilter,
-		}
-	);
-
-	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 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 )
-							}
-							placeholder={ __( 'Search patterns' ) }
-							label={ __( 'Search patterns' ) }
-							value={ filterValue }
-							__nextHasNoMarginBottom
-						/>
-					</FlexBlock>
-					{ type === PATTERN_TYPES.theme && (
-						<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 }
-									/>
-								)
-							) }
-						</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="h3" level={ 5 } id={ titleId }>
-							{ title }
-						</Heading>
-						{ description ? (
-							<Text variant="muted" as="p" id={ descriptionId }>
-								{ description }
-							</Text>
-						) : null }
-					</VStack>
-				) }
-				{ hasPatterns && (
-					<Grid
-						categoryId={ categoryId }
-						items={ asyncList }
-						aria-labelledby={ titleId }
-						aria-describedby={ descriptionId }
-					/>
-				) }
-				{ ! isResolving && ! hasPatterns && <NoPatterns /> }
-			</VStack>
-			{ numPages > 1 && (
-				<Pagination
-					className="edit-site-patterns__pagination"
-					currentPage={ currentPage }
-					numPages={ numPages }
-					changePage={ changePage }
-					totalItems={ totalItems }
-				/>
-			) }
-		</>
-	);
-}