@wordpress/edit-site 5.28.2 → 5.29.0

package/src/components/global-styles/font-library-modal/fonts-grid.js

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalVStack as VStack,
-	__experimentalText as Text,
-	__experimentalSpacer as Spacer,
-} from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
-
-function FontsGrid( { title, children, pageSize = 32 } ) {
-	const [ lastItem, setLastItem ] = useState( null );
-	const [ page, setPage ] = useState( 1 );
-	const itemsLimit = page * pageSize;
-	const items = children.slice( 0, itemsLimit );
-
-	useEffect( () => {
-		if ( lastItem ) {
-			const observer = new window.IntersectionObserver( ( [ entry ] ) => {
-				if ( entry.isIntersecting ) {
-					setPage( ( prevPage ) => prevPage + 1 );
-				}
-			} );
-
-			observer.observe( lastItem );
-
-			return () => observer.disconnect();
-		}
-	}, [ lastItem ] );
-
-	return (
-		<div className="font-library-modal__fonts-grid">
-			<VStack spacing={ 0 }>
-				{ title && (
-					<>
-						<Text className="font-library-modal__subtitle">
-							{ title }
-						</Text>
-						<Spacer margin={ 2 } />
-					</>
-				) }
-				<div className="font-library-modal__fonts-grid__main">
-					{ items.map( ( child, i ) => {
-						if ( i === itemsLimit - 1 ) {
-							return (
-								<div key={ child.key } ref={ setLastItem }>
-									{ child }
-								</div>
-							);
-						}
-						return <div key={ child.key }>{ child }</div>;
-					} ) }
-				</div>
-			</VStack>
-		</div>
-	);
-}
-
-export default FontsGrid;

package/src/components/header-edit-mode/mode-switcher/index.js

@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-/**
- * Set of available mode options.
- *
- * @type {Array}
- */
-const MODES = [
-	{
-		value: 'visual',
-		label: __( 'Visual editor' ),
-	},
-	{
-		value: 'text',
-		label: __( 'Code editor' ),
-	},
-];
-
-function ModeSwitcher() {
-	const { shortcut, mode } = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
-			mode: select( editSiteStore ).getEditorMode(),
-		} ),
-		[]
-	);
-	const { switchEditorMode } = useDispatch( editSiteStore );
-
-	const choices = MODES.map( ( choice ) => {
-		if ( choice.value !== mode ) {
-			return { ...choice, shortcut };
-		}
-		return choice;
-	} );
-
-	return (
-		<MenuGroup label={ __( 'Editor' ) }>
-			<MenuItemsChoice
-				choices={ choices }
-				value={ mode }
-				onSelect={ switchEditorMode }
-			/>
-		</MenuGroup>
-	);
-}
-
-export default ModeSwitcher;

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

@@ -1,105 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuItem } from '@wordpress/components';
-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 } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-import CreateTemplatePartModal from '../create-template-part-modal';
-
-const { DuplicatePatternModal } = unlock( patternsPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
-
-export default function DuplicateMenuItem( {
-	categoryId,
-	item,
-	label = __( 'Duplicate' ),
-	onClose,
-} ) {
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const history = useHistory();
-
-	const closeModal = () => setIsModalOpen( false );
-
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const isThemePattern = item.type === PATTERN_TYPES.theme;
-
-	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-success',
-			}
-		);
-
-		history.push( {
-			postType: TEMPLATE_PART_POST_TYPE,
-			postId: templatePart?.id,
-			categoryType: TEMPLATE_PART_POST_TYPE,
-			categoryId,
-		} );
-
-		onClose();
-	}
-
-	function onPatternSuccess( { pattern } ) {
-		history.push( {
-			categoryType: PATTERN_TYPES.theme,
-			categoryId,
-			postType: PATTERN_TYPES.user,
-			postId: pattern.id,
-		} );
-
-		onClose();
-	}
-
-	return (
-		<>
-			<MenuItem
-				onClick={ () => setIsModalOpen( true ) }
-				aria-expanded={ isModalOpen }
-				aria-haspopup="dialog"
-			>
-				{ label }
-			</MenuItem>
-			{ isModalOpen && ! isTemplatePart && (
-				<DuplicatePatternModal
-					onClose={ closeModal }
-					onSuccess={ onPatternSuccess }
-					pattern={ isThemePattern ? item : item.patternPost }
-				/>
-			) }
-			{ 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

@@ -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>
-	);
-}