@wordpress/edit-site 5.12.0 → 5.12.2

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

@@ -0,0 +1,70 @@
+/**
+ * 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 { isPage, hasPageContentFocus } = useSelect(
+		( select ) => ( {
+			isPage: select( editSiteStore ).isPage(),
+			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
+		} ),
+		[]
+	);
+
+	const alreadySeen = useRef( false );
+	const prevHasPageContentFocus = useRef( false );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if (
+			! alreadySeen.current &&
+			isPage &&
+			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,
+		isPage,
+		prevHasPageContentFocus,
+		hasPageContentFocus,
+		createInfoNotice,
+		setHasPageContentFocus,
+	] );
+}

package/src/components/{page-content-lock → page-content-focus-manager}/constants.js

@@ -1,4 +1,4 @@
-export const CONTENT_BLOCK_TYPES = [
+export const PAGE_CONTENT_BLOCK_TYPES = [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',

package/src/components/{page-content-lock/use-disable-non-content-blocks.js → page-content-focus-manager/disable-non-page-content-blocks.js}

@@ -9,21 +9,29 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
-import { CONTENT_BLOCK_TYPES } from './constants';
+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 useDisableNonContentBlocks() {
+export function useDisableNonPageContentBlocks() {
 	useBlockEditingMode( 'disabled' );
 	useEffect( () => {
 		addFilter(
 			'editor.BlockEdit',
 			'core/edit-site/disable-non-content-blocks',
-			withDisableNonContentBlocks
+			withDisableNonPageContentBlocks
 		);
 		return () =>
 			removeFilter(
@@ -33,12 +41,12 @@ export function useDisableNonContentBlocks() {
 	}, [] );
 }
 
-const withDisableNonContentBlocks = createHigherOrderComponent(
+const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isContent = CONTENT_BLOCK_TYPES.includes( props.name );
+		const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
 		const mode = isContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;
 	},
-	'withBlockEditingMode'
+	'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 onKeyDown = ( event ) => {
+		if ( DELETE === event.keyCode || BACKSPACE === event.keyCode ) {
+			setIsDeleteDialogOpen( true );
+		}
+	};
+
+	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' } );
+		}
+	};
+
+	const isUserPattern = item.type === USER_PATTERNS;
+	let ariaDescription;
+	if ( isUserPattern ) {
+		// 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 }
+					onKeyDown={ isUserPattern ? onKeyDown : undefined }
+					aria-label={ item.title }
+					aria-describedby={
+						ariaDescription ? descriptionId : undefined
+					}
+				>
+					{ 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>
+	);
+}

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

@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	SearchControl,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Flex,
+	FlexBlock,
+} from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { symbol, chevronLeft, chevronRight } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+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';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+export default function PatternsList( { categoryId, type } ) {
+	const location = useLocation();
+	const history = useHistory();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ filterValue, setFilterValue, delayedFilterValue ] =
+		useDebouncedInput( '' );
+
+	const [ patterns, isResolving ] = usePatterns(
+		type,
+		categoryId,
+		delayedFilterValue
+	);
+
+	const { syncedPatterns, unsyncedPatterns } = patterns;
+	const hasPatterns = !! syncedPatterns.length || !! unsyncedPatterns.length;
+
+	return (
+		<VStack spacing={ 6 }>
+			<Flex>
+				{ isMobileViewport && (
+					<SidebarButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						label={ __( 'Back' ) }
+						onClick={ () => {
+							// Go back in history if we came from the library page.
+							// Otherwise push a stack onto the history.
+							if ( location.state?.backPath === '/library' ) {
+								history.back();
+							} else {
+								history.push( { path: '/library' } );
+							}
+						} }
+					/>
+				) }
+				<FlexBlock>
+					<SearchControl
+						className="edit-site-library__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-library__section-header">
+						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
+						<Text variant="muted" as="p">
+							{ __(
+								'Patterns that are kept in sync across your site'
+							) }
+						</Text>
+					</VStack>
+					<Grid
+						icon={ symbol }
+						categoryId={ categoryId }
+						label={ __( 'Synced patterns' ) }
+						items={ syncedPatterns }
+					/>
+				</>
+			) }
+			{ ! isResolving && !! unsyncedPatterns.length && (
+				<>
+					<VStack className="edit-site-library__section-header">
+						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
+						<Text variant="muted" as="p">
+							{ __(
+								'Patterns that can be changed freely without affecting your site'
+							) }
+						</Text>
+					</VStack>
+					<Grid
+						categoryId={ categoryId }
+						label={ __( 'Standard patterns' ) }
+						items={ unsyncedPatterns }
+					/>
+				</>
+			) }
+			{ ! isResolving && ! hasPatterns && <NoPatterns /> }
+		</VStack>
+	);
+}