@wordpress/edit-site 5.12.0 → 5.12.2

package/src/components/block-editor/index.js

@@ -1,228 +1,44 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useRef } from '@wordpress/element';
-import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
-import {
-	BlockList,
-	BlockInspector,
-	BlockTools,
-	__unstableUseClipboardHandler as useClipboardHandler,
-	__unstableUseTypingObserver as useTypingObserver,
-	BlockEditorKeyboardShortcuts,
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	useMergeRefs,
-	useViewportMatch,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { BlockInspector } from '@wordpress/block-editor';
+
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies
  */
-import inserterMediaCategories from './inserter-media-categories';
 import TemplatePartConverter from '../template-part-converter';
 import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
-import BackButton from './back-button';
-import ResizableEditor from './resizable-editor';
-import EditorCanvas from './editor-canvas';
-import { unlock } from '../../private-apis';
-import EditorCanvasContainer from '../editor-canvas-container';
-import {
-	PageContentLock,
-	usePageContentLockNotifications,
-} from '../page-content-lock';
-
-const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-
-const LAYOUT = {
-	type: 'default',
-	// At the root level of the site editor, no alignments should be allowed.
-	alignments: [],
-};
+import SiteEditorCanvas from './site-editor-canvas';
+import getBlockEditorProvider from './get-block-editor-provider';
 
 export default function BlockEditor() {
-	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, templateType, canvasMode, hasPageContentLock } =
-		useSelect(
-			( select ) => {
-				const {
-					getSettings,
-					getEditedPostType,
-					getCanvasMode,
-					hasPageContentLock: _hasPageContentLock,
-				} = unlock( select( editSiteStore ) );
-
-				return {
-					storedSettings: getSettings( setIsInserterOpened ),
-					templateType: getEditedPostType(),
-					canvasMode: getCanvasMode(),
-					hasPageContentLock: _hasPageContentLock(),
-				};
-			},
-			[ setIsInserterOpened ]
-		);
-
-	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 entityType = useSelect(
+		( select ) => select( editSiteStore ).getEditedPostType(),
 		[]
 	);
 
-	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 ]
-	);
-
-	const settings = useMemo( () => {
-		const {
-			__experimentalAdditionalBlockPatterns,
-			__experimentalAdditionalBlockPatternCategories,
-			...restStoredSettings
-		} = storedSettings;
-
-		return {
-			...restStoredSettings,
-			inserterMediaCategories,
-			__experimentalBlockPatterns: blockPatterns,
-			__experimentalBlockPatternCategories: blockPatternCategories,
-		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
-
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		templateType
-	);
-
-	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [
-		contentRef,
-		useClipboardHandler(),
-		useTypingObserver(),
-		usePageContentLockNotifications(),
-	] );
-	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const [ resizeObserver, sizes ] = useResizeObserver();
-
-	const isTemplatePart = templateType === 'wp_template_part';
-
-	const hasBlocks = blocks.length !== 0;
-	const enableResizing =
-		isTemplatePart &&
-		canvasMode !== 'view' &&
-		// Disable resizing in mobile viewport.
-		! isMobileViewport;
-	const isViewMode = canvasMode === 'view';
-	const showBlockAppender =
-		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
+	// Choose the provider based on the entity type currently
+	// being edited.
+	const BlockEditorProvider = getBlockEditorProvider( entityType );
 
 	return (
-		<ExperimentalBlockEditorProvider
-			settings={ settings }
-			value={ blocks }
-			onInput={ onInput }
-			onChange={ onChange }
-			useSubRegistry={ false }
-		>
-			{ hasPageContentLock && <PageContentLock /> }
+		<BlockEditorProvider>
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<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':
-									isTemplatePart || !! 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={ canvasMode === 'view' }
-								>
-									{ resizeObserver }
-									<BlockList
-										className="edit-site-block-editor__block-list wp-site-blocks"
-										__experimentalLayout={ LAYOUT }
-										renderAppender={ showBlockAppender }
-									/>
-								</EditorCanvas>
-							</ResizableEditor>
-						</BlockTools>
-					)
-				}
-			</EditorCanvasContainer.Slot>
+
+			<SiteEditorCanvas />
+
 			<ReusableBlocksMenuItems />
-		</ExperimentalBlockEditorProvider>
+		</BlockEditorProvider>
 	);
 }

package/src/components/block-editor/providers/default-block-editor-provider.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+import useSiteEditorSettings from '../use-site-editor-settings';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+
+export default function DefaultBlockEditorProvider( { children } ) {
+	const settings = useSiteEditorSettings();
+
+	const { templateType } = useSelect( ( select ) => {
+		const { getEditedPostType } = unlock( select( editSiteStore ) );
+
+		return {
+			templateType: getEditedPostType(),
+		};
+	}, [] );
+
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		templateType
+	);
+
+	return (
+		<ExperimentalBlockEditorProvider
+			settings={ settings }
+			value={ blocks }
+			onInput={ onInput }
+			onChange={ onChange }
+			useSubRegistry={ false }
+		>
+			{ children }
+		</ExperimentalBlockEditorProvider>
+	);
+}

package/src/components/block-editor/providers/navigation-block-editor-provider.js

@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useEffect } from '@wordpress/element';
+import { useEntityId } from '@wordpress/core-data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+import useSiteEditorSettings from '../use-site-editor-settings';
+import { store as editSiteStore } from '../../../store';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+
+const noop = () => {};
+
+/**
+ * Block editor component for editing navigation menus.
+ *
+ * Note: Navigation entities require a wrapping Navigation block to provide
+ * them with some basic layout and styling. Therefore we create a "ghost" block
+ * and provide it will a reference to the navigation entity ID being edited.
+ *
+ * In this scenario it is the **block** that handles syncing the entity content
+ * whereas for other entities this is handled by entity block editor.
+ *
+ * @param {number} navigationMenuId the navigation menu ID
+ * @return {[WPBlock[], Function, Function]} The block array and setters.
+ */
+export default function NavigationBlockEditorProvider( { children } ) {
+	const defaultSettings = useSiteEditorSettings();
+
+	const navigationMenuId = useEntityId( 'postType', 'wp_navigation' );
+
+	const blocks = useMemo( () => {
+		return [
+			createBlock( 'core/navigation', {
+				ref: navigationMenuId,
+				// As the parent editor is locked with `templateLock`, the template locking
+				// must be explicitly "unset" on the block itself to allow the user to modify
+				// the block's content.
+				templateLock: false,
+			} ),
+		];
+	}, [ navigationMenuId ] );
+
+	const { isEditMode } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+
+		return {
+			isEditMode: getCanvasMode() === 'edit',
+		};
+	}, [] );
+
+	const { selectBlock, setBlockEditingMode, unsetBlockEditingMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	const navigationBlockClientId = blocks && blocks[ 0 ]?.clientId;
+
+	const settings = useMemo( () => {
+		return {
+			...defaultSettings,
+			// Lock the editor to allow the root ("ghost") Navigation block only.
+			templateLock: 'insert',
+			template: [ [ 'core/navigation', {}, [] ] ],
+		};
+	}, [ defaultSettings ] );
+
+	// Auto-select the Navigation block when entering Navigation focus mode.
+	useEffect( () => {
+		if ( navigationBlockClientId && isEditMode ) {
+			selectBlock( navigationBlockClientId );
+		}
+	}, [ navigationBlockClientId, isEditMode, selectBlock ] );
+
+	// Set block editing mode to contentOnly when entering Navigation focus mode.
+	// This ensures that non-content controls on the block will be hidden and thus
+	// the user can focus on editing the Navigation Menu content only.
+	useEffect( () => {
+		if ( ! navigationBlockClientId ) {
+			return;
+		}
+
+		setBlockEditingMode( navigationBlockClientId, 'contentOnly' );
+
+		return () => {
+			unsetBlockEditingMode( navigationBlockClientId );
+		};
+	}, [
+		navigationBlockClientId,
+		unsetBlockEditingMode,
+		setBlockEditingMode,
+	] );
+
+	return (
+		<ExperimentalBlockEditorProvider
+			settings={ settings }
+			value={ blocks }
+			onInput={ noop }
+			onChange={ noop }
+			useSubRegistry={ false }
+		>
+			{ children }
+		</ExperimentalBlockEditorProvider>
+	);
+}

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