@wordpress/edit-site 5.11.0 → 5.12.1

package/src/components/page-actions/delete-page-menu-item.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+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 { store as noticesStore } from '@wordpress/notices';
+
+export default function DeletePageMenuItem( { postId, onRemove } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const page = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'postType', 'page', postId ),
+		[ postId ]
+	);
+	async function removePage() {
+		try {
+			await deleteEntityRecord(
+				'postType',
+				'page',
+				postId,
+				{},
+				{ throwOnError: true }
+			);
+			createSuccessNotice(
+				sprintf(
+					/* translators: The page's title. */
+					__( '"%s" deleted.' ),
+					decodeEntities( page.title.rendered )
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-page-removed',
+				}
+			);
+			onRemove?.();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the page.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			setIsModalOpen( false );
+		}
+	}
+	return (
+		<>
+			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
+				{ __( 'Delete' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ removePage }
+				onCancel={ () => setIsModalOpen( false ) }
+			>
+				{ __( 'Are you sure you want to delete this page?' ) }
+			</ConfirmDialog>
+		</>
+	);
+}

package/src/components/page-actions/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DeletePageMenuItem from './delete-page-menu-item';
+
+export default function PageActions( {
+	postId,
+	className,
+	toggleProps,
+	onRemove,
+} ) {
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className={ className }
+			toggleProps={ toggleProps }
+		>
+			{ () => (
+				<MenuGroup>
+					<DeletePageMenuItem
+						postId={ postId }
+						onRemove={ onRemove }
+					/>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/page-content-focus-manager/back-to-page-notification.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Component that displays a 'You are editing a template' notification when the
+ * user switches from focusing on editing page content to editing a template.
+ */
+export default function BackToPageNotification() {
+	useBackToPageNotification();
+	return null;
+}
+
+/**
+ * Hook that displays a 'You are editing a template' notification when the user
+ * switches from focusing on editing page content to editing a template.
+ */
+export function useBackToPageNotification() {
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
+		[]
+	);
+
+	const alreadySeen = useRef( false );
+	const prevHasPageContentFocus = useRef( false );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if (
+			! alreadySeen.current &&
+			prevHasPageContentFocus.current &&
+			! hasPageContentFocus
+		) {
+			createInfoNotice( __( 'You are editing a template.' ), {
+				isDismissible: true,
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Back to page' ),
+						onClick: () => setHasPageContentFocus( true ),
+					},
+				],
+			} );
+			alreadySeen.current = true;
+		}
+		prevHasPageContentFocus.current = hasPageContentFocus;
+	}, [
+		alreadySeen,
+		prevHasPageContentFocus,
+		hasPageContentFocus,
+		createInfoNotice,
+		setHasPageContentFocus,
+	] );
+}

package/src/components/page-content-focus-manager/constants.js

@@ -0,0 +1,5 @@
+export const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
+
+/**
+ * Component that when rendered, makes it so that the site editor allows only
+ * page content to be edited.
+ */
+export default function DisableNonPageContentBlocks() {
+	useDisableNonPageContentBlocks();
+}
+
+/**
+ * Disables non-content blocks using the `useBlockEditingMode` hook.
+ */
+export function useDisableNonPageContentBlocks() {
+	useBlockEditingMode( 'disabled' );
+	useEffect( () => {
+		addFilter(
+			'editor.BlockEdit',
+			'core/edit-site/disable-non-content-blocks',
+			withDisableNonPageContentBlocks
+		);
+		return () =>
+			removeFilter(
+				'editor.BlockEdit',
+				'core/edit-site/disable-non-content-blocks'
+			);
+	}, [] );
+}
+
+const withDisableNonPageContentBlocks = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
+		const mode = isContent ? 'contentOnly' : undefined;
+		useBlockEditingMode( mode );
+		return <BlockEdit { ...props } />;
+	},
+	'withDisableNonPageContentBlocks'
+);

package/src/components/page-content-focus-manager/edit-template-notification.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Component that:
+ *
+ * - Displays a 'Edit your template to edit this block' notification when the
+ *   user is focusing on editing page content and clicks on a disabled template
+ *   block.
+ * - Displays a 'Edit your template to edit this block' dialog when the user
+ *   is focusing on editing page conetnt and double clicks on a disabled
+ *   template block.
+ *
+ * @param {Object}                                 props
+ * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
+ *                                                                  editor iframe canvas.
+ */
+export default function EditTemplateNotification( { contentRef } ) {
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
+		[]
+	);
+	const { getNotices } = useSelect( noticesStore );
+
+	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
+
+	const lastNoticeId = useRef( 0 );
+
+	useEffect( () => {
+		const handleClick = async ( event ) => {
+			if ( ! hasPageContentFocus ) {
+				return;
+			}
+			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
+				return;
+			}
+			const isNoticeAlreadyShowing = getNotices().some(
+				( notice ) => notice.id === lastNoticeId.current
+			);
+			if ( isNoticeAlreadyShowing ) {
+				return;
+			}
+			const { notice } = await createInfoNotice(
+				__( 'Edit your template to edit this block.' ),
+				{
+					isDismissible: true,
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Edit template' ),
+							onClick: () => setHasPageContentFocus( false ),
+						},
+					],
+				}
+			);
+			lastNoticeId.current = notice.id;
+		};
+
+		const handleDblClick = ( event ) => {
+			if ( ! hasPageContentFocus ) {
+				return;
+			}
+			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
+				return;
+			}
+			if ( lastNoticeId.current ) {
+				removeNotice( lastNoticeId.current );
+			}
+			setIsDialogOpen( true );
+		};
+
+		const canvas = contentRef.current;
+		canvas?.addEventListener( 'click', handleClick );
+		canvas?.addEventListener( 'dblclick', handleDblClick );
+		return () => {
+			canvas?.removeEventListener( 'click', handleClick );
+			canvas?.removeEventListener( 'dblclick', handleDblClick );
+		};
+	}, [ lastNoticeId, hasPageContentFocus, contentRef.current ] );
+
+	return (
+		<ConfirmDialog
+			isOpen={ isDialogOpen }
+			confirmButtonText={ __( 'Edit template' ) }
+			onConfirm={ () => {
+				setIsDialogOpen( false );
+				setHasPageContentFocus( false );
+			} }
+			onCancel={ () => setIsDialogOpen( false ) }
+		>
+			{ __( 'Edit your template to edit this block.' ) }
+		</ConfirmDialog>
+	);
+}

package/src/components/page-content-focus-manager/index.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
+import EditTemplateNotification from './edit-template-notification';
+import BackToPageNotification from './back-to-page-notification';
+
+export default function PageContentFocusManager( { contentRef } ) {
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
+		[]
+	);
+	return (
+		<>
+			{ hasPageContentFocus && <DisableNonPageContentBlocks /> }
+			<EditTemplateNotification contentRef={ contentRef } />
+			<BackToPageNotification />
+		</>
+	);
+}

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

@@ -0,0 +1,179 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+	__experimentalConfirmDialog as ConfirmDialog,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+	__unstableCompositeItem as CompositeItem,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, moreHorizontal } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERNS, USER_PATTERNS } from './utils';
+import { useLink } from '../routes/link';
+
+export default function GridItem( { categoryId, composite, icon, item } ) {
+	const instanceId = useInstanceId( GridItem );
+	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
+	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
+
+	const { __experimentalDeleteReusableBlock } =
+		useDispatch( reusableBlocksStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	const { onClick } = useLink( {
+		postType: item.type,
+		postId: item.type === USER_PATTERNS ? item.id : item.name,
+		categoryId,
+		categoryType: item.type,
+		canvas: 'edit',
+	} );
+
+	const isEmpty = ! item.blocks?.length;
+	const patternClassNames = classnames( 'edit-site-library__pattern', {
+		'is-placeholder': isEmpty,
+	} );
+	const previewClassNames = classnames( 'edit-site-library__preview', {
+		'is-inactive': item.type === PATTERNS,
+	} );
+
+	const deletePattern = async () => {
+		try {
+			await __experimentalDeleteReusableBlock( item.id );
+			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the pattern.' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	};
+
+	let ariaDescription;
+	if ( item.type === USER_PATTERNS ) {
+		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
+		ariaDescription = __(
+			'Press Enter to edit, or Delete to delete the pattern.'
+		);
+	} else if ( item.description ) {
+		ariaDescription = item.description;
+	}
+
+	return (
+		<>
+			<div className={ patternClassNames }>
+				<CompositeItem
+					className={ previewClassNames }
+					role="option"
+					as="div"
+					{ ...composite }
+					onClick={ item.type !== PATTERNS ? onClick : undefined }
+					aria-label={ item.title }
+					aria-describedby={
+						ariaDescription ? descriptionId : undefined
+					}
+					onKeyDown={ ( event ) => {
+						if (
+							DELETE === event.keyCode ||
+							BACKSPACE === event.keyCode
+						) {
+							setIsDeleteDialogOpen( true );
+						}
+					} }
+				>
+					{ isEmpty && __( 'Empty pattern' ) }
+					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+				</CompositeItem>
+				{ ariaDescription && (
+					<div
+						aria-hidden="true"
+						style={ { display: 'none' } }
+						id={ descriptionId }
+					>
+						{ ariaDescription }
+					</div>
+				) }
+				<HStack
+					aria-hidden="true"
+					className="edit-site-library__footer"
+					justify="space-between"
+				>
+					<HStack
+						alignment="center"
+						justify="left"
+						spacing={ 3 }
+						className="edit-site-library__pattern-title"
+					>
+						{ icon && <Icon icon={ icon } /> }
+						<Heading level={ 5 }>{ item.title }</Heading>
+					</HStack>
+					{ item.type === USER_PATTERNS && (
+						<DropdownMenu
+							icon={ moreHorizontal }
+							label={ __( 'Actions' ) }
+							className="edit-site-library__dropdown"
+							popoverProps={ { placement: 'bottom-end' } }
+							toggleProps={ {
+								className: 'edit-site-library__button',
+								isSmall: true,
+								describedBy: sprintf(
+									/* translators: %s: pattern name */
+									__( 'Action menu for %s pattern' ),
+									item.title
+								),
+								// The dropdown menu is not focusable using the
+								// keyboard as this would interfere with the grid's
+								// roving tab index system. Instead, keyboard users
+								// use keyboard shortcuts to trigger actions.
+								tabIndex: -1,
+							} }
+						>
+							{ () => (
+								<MenuGroup>
+									<MenuItem
+										onClick={ () =>
+											setIsDeleteDialogOpen( true )
+										}
+									>
+										{ __( 'Delete' ) }
+									</MenuItem>
+								</MenuGroup>
+							) }
+						</DropdownMenu>
+					) }
+				</HStack>
+			</div>
+			{ isDeleteDialogOpen && (
+				<ConfirmDialog
+					onConfirm={ deletePattern }
+					onCancel={ () => setIsDeleteDialogOpen( false ) }
+				>
+					{ __( 'Are you sure you want to delete this pattern?' ) }
+				</ConfirmDialog>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import GridItem from './grid-item';
+
+export default function Grid( { categoryId, label, icon, items } ) {
+	const composite = useCompositeState( { orientation: 'vertical' } );
+
+	if ( ! items?.length ) {
+		return null;
+	}
+
+	return (
+		<Composite
+			{ ...composite }
+			role="listbox"
+			className="edit-site-library__grid"
+			aria-label={ label }
+		>
+			{ items.map( ( item ) => (
+				<GridItem
+					key={ item.name }
+					icon={ icon }
+					item={ item }
+					categoryId={ categoryId }
+					composite={ composite }
+				/>
+			) ) }
+		</Composite>
+	);
+}

package/src/components/page-library/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { getQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './utils';
+import Page from '../page';
+import PatternsList from './patterns-list';
+import useLibrarySettings from './use-library-settings';
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+
+export default function PageLibrary() {
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const type = categoryType || DEFAULT_TYPE;
+	const category = categoryId || DEFAULT_CATEGORY;
+	const settings = useLibrarySettings();
+
+	// Wrap everything in a block editor provider.
+	// This ensures 'styles' that are needed for the previews are synced
+	// from the site editor store to the block editor store.
+	return (
+		<ExperimentalBlockEditorProvider settings={ settings }>
+			<Page
+				className="edit-site-library"
+				title={ __( 'Library content' ) }
+				hideTitleFromUI
+			>
+				<PatternsList type={ type } categoryId={ category } />
+			</Page>
+		</ExperimentalBlockEditorProvider>
+	);
+}

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

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