@wordpress/edit-site 5.12.0 → 5.12.1

package/src/components/block-editor/site-editor-canvas.js

@@ -0,0 +1,155 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
+import {
+	BlockList,
+	BlockTools,
+	__unstableUseClipboardHandler as useClipboardHandler,
+	__unstableUseTypingObserver as useTypingObserver,
+	BlockEditorKeyboardShortcuts,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import {
+	useMergeRefs,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import BackButton from './back-button';
+import ResizableEditor from './resizable-editor';
+import EditorCanvas from './editor-canvas';
+import EditorCanvasContainer from '../editor-canvas-container';
+import useSiteEditorSettings from './use-site-editor-settings';
+import { store as editSiteStore } from '../../store';
+import { FOCUSABLE_ENTITIES } from './constants';
+import { unlock } from '../../lock-unlock';
+import PageContentFocusManager from '../page-content-focus-manager';
+
+const LAYOUT = {
+	type: 'default',
+	// At the root level of the site editor, no alignments should be allowed.
+	alignments: [],
+};
+
+export default function SiteEditorCanvas() {
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+
+	const { templateType, isFocusMode, isViewMode } = useSelect( ( select ) => {
+		const { getEditedPostType, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+
+		const _templateType = getEditedPostType();
+
+		return {
+			templateType: _templateType,
+			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+			isViewMode: getCanvasMode() === 'view',
+		};
+	}, [] );
+
+	const [ resizeObserver, sizes ] = useResizeObserver();
+
+	const settings = useSiteEditorSettings();
+
+	const { hasBlocks } = useSelect( ( select ) => {
+		const { getBlockCount } = select( blockEditorStore );
+
+		const blocks = getBlockCount();
+
+		return {
+			hasBlocks: !! blocks,
+		};
+	}, [] );
+
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const enableResizing =
+		isFocusMode &&
+		! isViewMode &&
+		// Disable resizing in mobile viewport.
+		! isMobileViewport;
+
+	const contentRef = useRef();
+	const mergedRefs = useMergeRefs( [
+		contentRef,
+		useClipboardHandler(),
+		useTypingObserver(),
+	] );
+
+	const isTemplateTypeNavigation = templateType === 'wp_navigation';
+
+	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
+
+	// Hide the appender when:
+	// - In navigation focus mode (should only allow the root Nav block).
+	// - In view mode (i.e. not editing).
+	const showBlockAppender =
+		( isNavigationFocusMode && hasBlocks ) || isViewMode
+			? false
+			: undefined;
+
+	return (
+		<>
+			<EditorCanvasContainer.Slot>
+				{ ( [ editorCanvasView ] ) =>
+					editorCanvasView ? (
+						<div className="edit-site-visual-editor is-focus-mode">
+							{ editorCanvasView }
+						</div>
+					) : (
+						<BlockTools
+							className={ classnames( 'edit-site-visual-editor', {
+								'is-focus-mode':
+									isFocusMode || !! editorCanvasView,
+								'is-view-mode': isViewMode,
+							} ) }
+							__unstableContentRef={ contentRef }
+							onClick={ ( event ) => {
+								// Clear selected block when clicking on the gray background.
+								if ( event.target === event.currentTarget ) {
+									clearSelectedBlock();
+								}
+							} }
+						>
+							<BlockEditorKeyboardShortcuts.Register />
+							<BackButton />
+							<ResizableEditor
+								enableResizing={ enableResizing }
+								height={ sizes.height ?? '100%' }
+							>
+								<EditorCanvas
+									enableResizing={ enableResizing }
+									settings={ settings }
+									contentRef={ mergedRefs }
+									readonly={ isViewMode }
+								>
+									{ resizeObserver }
+									<BlockList
+										className={ classnames(
+											'edit-site-block-editor__block-list wp-site-blocks',
+											{
+												'is-navigation-block':
+													isTemplateTypeNavigation,
+											}
+										) }
+										layout={ LAYOUT }
+										renderAppender={ showBlockAppender }
+									/>
+								</EditorCanvas>
+							</ResizableEditor>
+						</BlockTools>
+					)
+				}
+			</EditorCanvasContainer.Slot>
+			<PageContentFocusManager contentRef={ contentRef } />
+		</>
+	);
+}

package/src/components/block-editor/style.scss

@@ -12,6 +12,12 @@
 	}
 }
 
+// Navigation focus mode requires padding around the root Navigation block
+// for presentational purposes.
+.edit-site-block-editor__block-list.is-navigation-block {
+	padding: $grid-unit-30;
+}
+
 .edit-site-visual-editor {
 	position: relative;
 	height: 100%;

package/src/components/block-editor/use-site-editor-settings.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import inserterMediaCategories from './inserter-media-categories';
+
+export default function useSiteEditorSettings( templateType ) {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings(),
+		};
+	}, [] );
+
+	const settingsBlockPatterns =
+		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
+		storedSettings.__experimentalBlockPatterns; // WP 5.9
+	const settingsBlockPatternCategories =
+		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
+		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
+
+	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
+		( select ) => ( {
+			restBlockPatterns: select( coreStore ).getBlockPatterns(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
+		} ),
+		[]
+	);
+	const blockPatterns = useMemo(
+		() =>
+			[
+				...( settingsBlockPatterns || [] ),
+				...( restBlockPatterns || [] ),
+			]
+				.filter(
+					( x, index, arr ) =>
+						index === arr.findIndex( ( y ) => x.name === y.name )
+				)
+				.filter( ( { postTypes } ) => {
+					return (
+						! postTypes ||
+						( Array.isArray( postTypes ) &&
+							postTypes.includes( templateType ) )
+					);
+				} ),
+		[ settingsBlockPatterns, restBlockPatterns, templateType ]
+	);
+
+	const blockPatternCategories = useMemo(
+		() =>
+			[
+				...( settingsBlockPatternCategories || [] ),
+				...( restBlockPatternCategories || [] ),
+			].filter(
+				( x, index, arr ) =>
+					index === arr.findIndex( ( y ) => x.name === y.name )
+			),
+		[ settingsBlockPatternCategories, restBlockPatternCategories ]
+	);
+	return useMemo( () => {
+		const {
+			__experimentalAdditionalBlockPatterns,
+			__experimentalAdditionalBlockPatternCategories,
+			...restStoredSettings
+		} = storedSettings;
+
+		return {
+			...restStoredSettings,
+			inserterMediaCategories,
+			__experimentalBlockPatterns: blockPatterns,
+			__experimentalBlockPatternCategories: blockPatternCategories,
+			// Temporary fix for bug in Block Editor Provider:
+			// see: https://github.com/WordPress/gutenberg/issues/51489.
+			// Some Site Editor entities (e.g. `wp_navigation`) may utilise
+			// template locking in their settings. Therefore this must be
+			// explicitly "unset" to avoid the template locking UI remaining
+			// active for all entities.
+			templateLock: false,
+			template: false,
+		};
+	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
+}

package/src/components/canvas-spinner/index.js

@@ -2,11 +2,21 @@
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function CanvasSpinner() {
+	const [ textColor ] = useGlobalStyle( 'color.text' );
+
 	return (
 		<div className="edit-site-canvas-spinner">
-			<Spinner />
+			<Spinner style={ { color: textColor } } />
 		</div>
 	);
 }

package/src/components/create-pattern-modal/index.js

@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	TextControl,
+	Button,
+	Modal,
+	ToggleControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-library/utils';
+
+export default function CreatePatternModal( {
+	closeModal,
+	onCreate,
+	onError,
+} ) {
+	const [ name, setName ] = useState( '' );
+	const [ syncType, setSyncType ] = useState( SYNC_TYPES.full );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+
+	const onSyncChange = () => {
+		setSyncType(
+			syncType === SYNC_TYPES.full ? SYNC_TYPES.unsynced : SYNC_TYPES.full
+		);
+	};
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	async function createPattern() {
+		if ( ! name ) {
+			createErrorNotice( __( 'Please enter a pattern name.' ), {
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		try {
+			const pattern = await saveEntityRecord(
+				'postType',
+				'wp_block',
+				{
+					title: name || __( 'Untitled Pattern' ),
+					content: '',
+					status: 'publish',
+					meta: { sync_status: syncType },
+				},
+				{ throwOnError: true }
+			);
+
+			onCreate( { pattern, categoryId: USER_PATTERN_CATEGORY } );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the pattern.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+			onError();
+		}
+	}
+
+	return (
+		<Modal
+			title={ __( 'Create a pattern' ) }
+			onRequestClose={ closeModal }
+			overlayClassName="edit-site-create-pattern-modal"
+		>
+			<p>{ __( 'Turn this block into a pattern to reuse later' ) }</p>
+
+			<form
+				onSubmit={ async ( event ) => {
+					event.preventDefault();
+					if ( ! name ) {
+						return;
+					}
+					setIsSubmitting( true );
+					await createPattern();
+				} }
+			>
+				<VStack spacing="4">
+					<TextControl
+						className="edit-site-create-pattern-modal__input"
+						label={ __( 'Name' ) }
+						onChange={ setName }
+						placeholder={ __( 'My pattern' ) }
+						required
+						value={ name }
+						__nextHasNoMarginBottom
+					/>
+					<ToggleControl
+						label={ __( 'Synced' ) }
+						onChange={ onSyncChange }
+						help={
+							syncType === SYNC_TYPES.full
+								? __( 'Content is synced' )
+								: __( 'Content is not synced' )
+						}
+						checked={ syncType === SYNC_TYPES.full }
+					/>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! name }
+							isBusy={ isSubmitting }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

package/src/components/create-pattern-modal/style.scss

@@ -0,0 +1,3 @@
+.edit-site-create-pattern-modal__input input {
+	height: 40px;
+}

package/src/components/create-template-part-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Icon,
 	BaseControl,
@@ -20,14 +20,31 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { store as editorStore } from '@wordpress/editor';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
+
+export default function CreateTemplatePartModal( {
+	closeModal,
+	blocks = [],
+	onCreate,
+	onError,
+} ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const existingTemplateParts = useExistingTemplateParts();
 
-export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 	const [ title, setTitle ] = useState( '' );
 	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
@@ -39,6 +56,49 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 		[]
 	);
 
+	async function createTemplatePart() {
+		if ( ! title ) {
+			createErrorNotice( __( 'Please enter a title.' ), {
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		try {
+			const uniqueTitle = getUniqueTemplatePartTitle(
+				title,
+				existingTemplateParts
+			);
+			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
+
+			const templatePart = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{
+					slug: cleanSlug,
+					title: uniqueTitle,
+					content: serialize( blocks ),
+					area,
+				},
+				{ throwOnError: true }
+			);
+			await onCreate( templatePart );
+
+			// TODO: Add a success notice?
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+
+			onError?.();
+		}
+	}
+
 	return (
 		<Modal
 			title={ __( 'Create a template part' ) }
@@ -52,7 +112,7 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 						return;
 					}
 					setIsSubmitting( true );
-					await onCreate( { title, area } );
+					await createTemplatePart();
 				} }
 			>
 				<VStack spacing="4">

package/src/components/editor/index.js

@@ -15,6 +15,7 @@ import {
 	BlockContextProvider,
 	BlockBreadcrumb,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
@@ -39,10 +40,12 @@ import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
 
+const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
+
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
 	body: __( 'Editor content' ),
@@ -54,6 +57,12 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
+const typeLabels = {
+	wp_template: __( 'Template Part' ),
+	wp_template_part: __( 'Template Part' ),
+	wp_block: __( 'Pattern' ),
+};
+
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -73,7 +82,7 @@ export default function Editor( { isLoading } ) {
 		isListViewOpen,
 		showIconLabels,
 		showBlockBreadcrumbs,
-		hasPageContentLock,
+		hasPageContentFocus,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
@@ -81,7 +90,7 @@ export default function Editor( { isLoading } ) {
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
-			hasPageContentLock: _hasPageContentLock,
+			hasPageContentFocus: _hasPageContentFocus,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
@@ -106,7 +115,7 @@ export default function Editor( { isLoading } ) {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
-			hasPageContentLock: _hasPageContentLock(),
+			hasPageContentFocus: _hasPageContentFocus(),
 		};
 	}, [] );
 	const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -114,7 +123,7 @@ export default function Editor( { isLoading } ) {
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
-	const shouldShowBlockBreakcrumbs =
+	const shouldShowBlockBreadcrumbs =
 		showBlockBreadcrumbs &&
 		isEditMode &&
 		showVisualEditor &&
@@ -127,7 +136,7 @@ export default function Editor( { isLoading } ) {
 	const blockContext = useMemo( () => {
 		const { postType, postId, ...nonPostFields } = context ?? {};
 		return {
-			...( hasPageContentLock ? context : nonPostFields ),
+			...( hasPageContentFocus ? context : nonPostFields ),
 			queryContext: [
 				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
@@ -140,14 +149,11 @@ export default function Editor( { isLoading } ) {
 					} ),
 			],
 		};
-	}, [ hasPageContentLock, context, setEditedPostContext ] );
+	}, [ hasPageContentFocus, context, setEditedPostContext ] );
 
 	let title;
 	if ( hasLoadedPost ) {
-		const type =
-			editedPostType === 'wp_template'
-				? __( 'Template' )
-				: __( 'Template Part' );
+		const type = typeLabels[ editedPostType ] ?? __( 'Template' );
 		title = sprintf(
 			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
 			__( '%1$s ‹ %2$s ‹ Editor' ),
@@ -157,7 +163,7 @@ export default function Editor( { isLoading } ) {
 	}
 
 	// Only announce the title once the editor is ready to prevent "Replace"
-	// action in <URlQueryController> from double-announcing.
+	// action in <URLQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
 	return (
@@ -188,7 +194,10 @@ export default function Editor( { isLoading } ) {
 									<GlobalStylesRenderer />
 									{ isEditMode && <EditorNotices /> }
 									{ showVisualEditor && editedPost && (
-										<BlockEditor />
+										<>
+											<BlockEditor />
+											<BlockRemovalWarningModal />
+										</>
 									) }
 									{ editorMode === 'text' &&
 										editedPost &&
@@ -227,10 +236,10 @@ export default function Editor( { isLoading } ) {
 								)
 							}
 							footer={
-								shouldShowBlockBreakcrumbs && (
+								shouldShowBlockBreadcrumbs && (
 									<BlockBreadcrumb
 										rootLabelText={
-											hasPageContentLock
+											hasPageContentFocus
 												? __( 'Page' )
 												: __( 'Template' )
 										}

package/src/components/editor-canvas-container/index.js

@@ -12,11 +12,12 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import ResizableEditor from '../block-editor/resizable-editor';
 
@@ -53,9 +54,22 @@ function EditorCanvasContainer( {
 	onClose,
 	enableResizing = false,
 } ) {
-	const editorCanvasContainerView = useSelect(
-		( select ) =>
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+	const { editorCanvasContainerView, showListViewByDefault } = useSelect(
+		( select ) => {
+			const _editorCanvasContainerView = unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView();
+
+			const _showListViewByDefault = select( preferencesStore ).get(
+				'core/edit-site',
+				'showListViewByDefault'
+			);
+
+			return {
+				editorCanvasContainerView: _editorCanvasContainerView,
+				showListViewByDefault: _showListViewByDefault,
+			};
+		},
 		[]
 	);
 	const [ isClosed, setIsClosed ] = useState( false );
@@ -69,10 +83,13 @@ function EditorCanvasContainer( {
 		[ editorCanvasContainerView ]
 	);
 
+	const { setIsListViewOpened } = useDispatch( editSiteStore );
+
 	function onCloseContainer() {
 		if ( typeof onClose === 'function' ) {
 			onClose();
 		}
+		setIsListViewOpened( showListViewByDefault );
 		setEditorCanvasContainerView( undefined );
 		setIsClosed( true );
 	}