@wordpress/edit-site 5.12.0 → 5.12.1

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -15,13 +15,13 @@ import {
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
+import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
@@ -73,18 +73,6 @@ function SuggestionListItem( {
 	);
 }
 
-function useDebouncedInput() {
-	const [ input, setInput ] = useState( '' );
-	const [ debounced, setter ] = useState( '' );
-	const setDebounced = useDebounce( setter, 250 );
-	useEffect( () => {
-		if ( debounced !== input ) {
-			setDebounced( input );
-		}
-	}, [ debounced, input ] );
-	return [ input, setInput, debounced ];
-}
-
 function useSearchSuggestions( entityForSuggestions, search ) {
 	const { config } = entityForSuggestions;
 	const query = useMemo(

package/src/components/add-new-template/index.js

@@ -8,7 +8,6 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import NewTemplate from './new-template';
-import NewTemplatePart from './new-template-part';
 
 export default function AddNewTemplate( {
 	templateType = 'wp_template',
@@ -25,8 +24,6 @@ export default function AddNewTemplate( {
 
 	if ( templateType === 'wp_template' ) {
 		return <NewTemplate { ...props } postType={ postType } />;
-	} else if ( templateType === 'wp_template_part' ) {
-		return <NewTemplatePart { ...props } postType={ postType } />;
 	}
 
 	return null;

package/src/components/add-new-template/new-template.js

@@ -37,7 +37,7 @@ import {
 import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -52,7 +52,6 @@ const DEFAULT_TEMPLATE_SLUGS = [
 	'category',
 	'date',
 	'tag',
-	'taxonomy',
 	'search',
 	'404',
 ];

package/src/components/app/index.js

@@ -15,7 +15,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Layout from '../layout';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 

package/src/components/block-editor/back-button.js

@@ -9,7 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -17,9 +17,12 @@ function BackButton() {
 	const location = useLocation();
 	const history = useHistory();
 	const isTemplatePart = location.params.postType === 'wp_template_part';
+	const isNavigationMenu = location.params.postType === 'wp_navigation';
 	const previousTemplateId = location.state?.fromTemplateId;
 
-	if ( ! isTemplatePart || ! previousTemplateId ) {
+	const isFocusMode = isTemplatePart || isNavigationMenu;
+
+	if ( ! isFocusMode || ! previousTemplateId ) {
 		return null;
 	}
 

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

@@ -0,0 +1 @@
+export const FOCUSABLE_ENTITIES = [ 'wp_template_part', 'wp_navigation' ];

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

@@ -21,7 +21,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 function EditorCanvas( { enableResizing, settings, children, ...props } ) {

package/src/components/block-editor/get-block-editor-provider.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import DefaultBlockEditor from './providers/default-block-editor-provider';
+import NavigationBlockEditor from './providers/navigation-block-editor-provider';
+
+/**
+ * Factory to isolate choosing the appropriate block editor
+ * component to handle a given entity type.
+ *
+ * @param {string} entityType the entity type being edited
+ * @return {JSX.Element} the block editor component to use.
+ */
+export default function getBlockEditorProvider( entityType ) {
+	let Provider = null;
+
+	switch ( entityType ) {
+		case 'wp_navigation':
+			Provider = NavigationBlockEditor;
+			break;
+		case 'wp_template':
+		case 'wp_template_part':
+		default:
+			Provider = DefaultBlockEditor;
+			break;
+	}
+
+	return Provider;
+}

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