@wordpress/editor 13.22.0 → 13.24.0

package/src/components/provider/index.js

@@ -9,9 +9,11 @@ import {
 	BlockEditorProvider,
 	BlockContextProvider,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,26 +22,205 @@ import withRegistryProvider from './with-registry-provider';
 import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
+import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
+import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
+const noop = () => {};
+
+/**
+ * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
+ *
+ * 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.
+ *
+ * @param {string} navigationBlockClientId ClientId.
+ */
+function useForceFocusModeForNavigation( navigationBlockClientId ) {
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( ! navigationBlockClientId ) {
+			return;
+		}
+
+		setBlockEditingMode( navigationBlockClientId, 'contentOnly' );
+
+		return () => {
+			unsetBlockEditingMode( navigationBlockClientId );
+		};
+	}, [
+		navigationBlockClientId,
+		unsetBlockEditingMode,
+		setBlockEditingMode,
+	] );
+}
+
+/**
+ * Helper method to extract the post content block types from a template.
+ *
+ * @param {Array} blocks Template blocks.
+ *
+ * @return {Array} Flattened object.
+ */
+function extractPageContentBlockTypesFromTemplateBlocks( blocks ) {
+	const result = [];
+	for ( let i = 0; i < blocks.length; i++ ) {
+		// Since the Query Block could contain PAGE_CONTENT_BLOCK_TYPES block types,
+		// we skip it because we only want to render stand-alone page content blocks in the block list.
+		if ( blocks[ i ].name === 'core/query' ) {
+			continue;
+		}
+		if ( PAGE_CONTENT_BLOCK_TYPES.includes( blocks[ i ].name ) ) {
+			result.push( createBlock( blocks[ i ].name ) );
+		}
+		if ( blocks[ i ].innerBlocks.length ) {
+			result.push(
+				...extractPageContentBlockTypesFromTemplateBlocks(
+					blocks[ i ].innerBlocks
+				)
+			);
+		}
+	}
+
+	return result;
+}
+
+/**
+ * Depending on the post, template and template mode,
+ * returns the appropriate blocks and change handlers for the block editor provider.
+ *
+ * @param {Array}   post     Block list.
+ * @param {boolean} template Whether the page content has focus (and the surrounding template is inert). If `true` return page content blocks. Default `false`.
+ * @param {string}  mode     Rendering mode.
+ * @return {Array} Block editor props.
+ */
+function useBlockEditorProps( post, template, mode ) {
+	const rootLevelPost =
+		mode === 'post-only' || ! template ? 'post' : 'template';
+	const [ postBlocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		post.type,
+		{ id: post.id }
+	);
+	const [ templateBlocks, onInputTemplate, onChangeTemplate ] =
+		useEntityBlockEditor( 'postType', template?.type, {
+			id: template?.id,
+		} );
+	const blocks = useMemo( () => {
+		if ( post.type === 'wp_navigation' ) {
+			return [
+				createBlock( 'core/navigation', {
+					ref: post.id,
+					// 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,
+				} ),
+			];
+		}
+
+		if ( mode === 'post-only' ) {
+			const postContentBlocks =
+				extractPageContentBlockTypesFromTemplateBlocks(
+					templateBlocks
+				);
+			return [
+				createBlock(
+					'core/group',
+					{
+						layout: { type: 'constrained' },
+						style: {
+							spacing: {
+								margin: {
+									top: '4em', // Mimics the post editor.
+								},
+							},
+						},
+					},
+					postContentBlocks.length
+						? postContentBlocks
+						: [
+								createBlock( 'core/post-title' ),
+								createBlock( 'core/post-content' ),
+						  ]
+				),
+			];
+		}
+
+		if ( rootLevelPost === 'template' ) {
+			return templateBlocks;
+		}
+
+		return postBlocks;
+	}, [
+		templateBlocks,
+		postBlocks,
+		rootLevelPost,
+		post.type,
+		post.id,
+		mode,
+	] );
+	const disableRootLevelChanges =
+		( !! template && mode === 'template-locked' ) ||
+		post.type === 'wp_navigation' ||
+		mode === 'post-only';
+	const navigationBlockClientId =
+		post.type === 'wp_navigation' && blocks && blocks[ 0 ]?.clientId;
+	useForceFocusModeForNavigation( navigationBlockClientId );
+	if ( disableRootLevelChanges ) {
+		return [ blocks, noop, noop ];
+	}
+
+	return [
+		blocks,
+		rootLevelPost === 'post' ? onInput : onInputTemplate,
+		rootLevelPost === 'post' ? onChange : onChangeTemplate,
+	];
+}
+
 export const ExperimentalEditorProvider = withRegistryProvider(
 	( {
-		__unstableTemplate,
 		post,
 		settings,
 		recovery,
 		initialEdits,
 		children,
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
+		__unstableTemplate: template,
 	} ) => {
+		const mode = useSelect(
+			( select ) => select( editorStore ).getRenderingMode(),
+			[]
+		);
+		const shouldRenderTemplate = !! template && mode !== 'post-only';
+		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
-			if ( post.type === 'wp_template' ) {
-				return {};
-			}
-			return { postId: post.id, postType: post.type };
-		}, [ post.id, post.type ] );
+			const postContext =
+				rootLevelPost.type !== 'wp_template' ||
+				( shouldRenderTemplate && mode !== 'template-only' )
+					? { postId: post.id, postType: post.type }
+					: {};
+
+			return {
+				...postContext,
+				templateSlug:
+					rootLevelPost.type === 'wp_template'
+						? rootLevelPost.slug
+						: undefined,
+			};
+		}, [
+			mode,
+			post.id,
+			post.type,
+			rootLevelPost.type,
+			rootLevelPost?.slug,
+			shouldRenderTemplate,
+		] );
 		const { editorSettings, selection, isReady } = useSelect(
 			( select ) => {
 				const {
@@ -55,16 +236,18 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			},
 			[]
 		);
-		const { id, type } = __unstableTemplate ?? post;
-		const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-			'postType',
-			type,
-			{ id }
-		);
+		const { id, type } = rootLevelPost;
 		const blockEditorSettings = useBlockEditorSettings(
 			editorSettings,
-			!! __unstableTemplate
+			type,
+			id
 		);
+		const [ blocks, onInput, onChange ] = useBlockEditorProps(
+			post,
+			template,
+			mode
+		);
+
 		const {
 			updatePostLock,
 			setupEditor,
@@ -108,7 +291,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		// Synchronize the editor settings as they change.
 		useEffect( () => {
 			updateEditorSettings( settings );
-		}, [ settings ] );
+		}, [ settings, updateEditorSettings ] );
 
 		if ( ! isReady ) {
 			return null;
@@ -132,6 +315,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 						>
 							{ children }
 							<PatternsMenuItems />
+							{ [ 'post-only', 'template-locked' ].includes(
+								mode
+							) && <DisableNonPageContentBlocks /> }
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>

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

@@ -67,8 +67,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'postsPerPage',
 	'readOnly',
 	'styles',
-	'template',
-	'templateLock',
 	'titlePlaceholder',
 	'supportsLayout',
 	'widgetTypesToHideFromLegacyWidgetBlock',
@@ -76,17 +74,20 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__unstableIsPreviewMode',
 	'__unstableResolvedAssets',
 	'__unstableIsBlockBasedTheme',
+	'__experimentalArchiveTitleTypeLabel',
+	'__experimentalArchiveTitleNameLabel',
 ];
 
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
- * @param {Object}  settings    EditorProvider settings prop.
- * @param {boolean} hasTemplate Whether template mode is enabled.
+ * @param {Object} settings EditorProvider settings prop.
+ * @param {string} postType Editor root level post type.
+ * @param {string} postId   Editor root level post ID.
  *
  * @return {Object} Block Editor Settings.
  */
-function useBlockEditorSettings( settings, hasTemplate ) {
+function useBlockEditorSettings( settings, postType, postId ) {
 	const {
 		reusableBlocks,
 		hasUploadPermissions,
@@ -94,36 +95,42 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		userCanCreatePages,
 		pageOnFront,
 		pageForPosts,
-		postType,
 		userPatternCategories,
-	} = useSelect( ( select ) => {
-		const { canUserUseUnfilteredHTML, getCurrentPostType } =
-			select( editorStore );
-		const isWeb = Platform.OS === 'web';
-		const { canUser, getEntityRecord, getUserPatternCategories } =
-			select( coreStore );
+	} = useSelect(
+		( select ) => {
+			const isWeb = Platform.OS === 'web';
+			const {
+				canUser,
+				getRawEntityRecord,
+				getEntityRecord,
+				getUserPatternCategories,
+				getEntityRecords,
+			} = select( coreStore );
 
-		const siteSettings = canUser( 'read', 'settings' )
-			? getEntityRecord( 'root', 'site' )
-			: undefined;
+			const siteSettings = canUser( 'read', 'settings' )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
 
-		return {
-			canUseUnfilteredHTML: canUserUseUnfilteredHTML(),
-			reusableBlocks: isWeb
-				? select( coreStore ).getEntityRecords(
-						'postType',
-						'wp_block',
-						{ per_page: -1 }
-				  )
-				: EMPTY_BLOCKS_LIST, // Reusable blocks are fetched in the native version of this hook.
-			hasUploadPermissions: canUser( 'create', 'media' ) ?? true,
-			userCanCreatePages: canUser( 'create', 'pages' ),
-			pageOnFront: siteSettings?.page_on_front,
-			pageForPosts: siteSettings?.page_for_posts,
-			postType: getCurrentPostType(),
-			userPatternCategories: getUserPatternCategories(),
-		};
-	}, [] );
+			return {
+				canUseUnfilteredHTML: getRawEntityRecord(
+					'postType',
+					postType,
+					postId
+				)?._links?.hasOwnProperty( 'wp:action-unfiltered-html' ),
+				reusableBlocks: isWeb
+					? getEntityRecords( 'postType', 'wp_block', {
+							per_page: -1,
+					  } )
+					: EMPTY_BLOCKS_LIST, // Reusable blocks are fetched in the native version of this hook.
+				hasUploadPermissions: canUser( 'create', 'media' ) ?? true,
+				userCanCreatePages: canUser( 'create', 'pages' ),
+				pageOnFront: siteSettings?.page_on_front,
+				pageForPosts: siteSettings?.page_for_posts,
+				userPatternCategories: getUserPatternCategories(),
+			};
+		},
+		[ postType, postId ]
+	);
 
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -214,14 +221,26 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				fetchLinkSuggestions( search, searchOptions, settings ),
 			inserterMediaCategories,
 			__experimentalFetchRichUrlData: fetchUrlData,
+			// Todo: This only checks the top level post, not the post within a template or any other entity that can be edited.
+			// This might be better as a generic "canUser" selector.
 			__experimentalCanUserUseUnfilteredHTML: canUseUnfilteredHTML,
+			//Todo: this is only needed for native and should probably be removed.
 			__experimentalUndo: undo,
-			outlineMode: hasTemplate,
+			// Check whether we want all site editor frames to have outlines
+			// including the navigation / pattern / parts editors.
+			outlineMode: postType === 'wp_template',
+			// Check these two properties: they were not present in the site editor.
 			__experimentalCreatePageEntity: createPageEntity,
 			__experimentalUserCanCreatePages: userCanCreatePages,
 			pageOnFront,
 			pageForPosts,
-			__experimentalPreferPatternsOnRoot: hasTemplate,
+			__experimentalPreferPatternsOnRoot: postType === 'wp_template',
+			templateLock:
+				postType === 'wp_navigation' ? 'insert' : settings.templateLock,
+			template:
+				postType === 'wp_navigation'
+					? [ [ 'core/navigation', {}, [] ] ]
+					: settings.template,
 		} ),
 		[
 			settings,
@@ -232,11 +251,11 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			blockPatternCategories,
 			canUseUnfilteredHTML,
 			undo,
-			hasTemplate,
 			createPageEntity,
 			userCanCreatePages,
 			pageOnFront,
 			pageForPosts,
+			postType,
 		]
 	);
 }

package/src/components/provider/use-block-editor-settings.native.js

@@ -13,8 +13,8 @@ import { store as editorStore } from '../../store';
 
 const EMPTY_BLOCKS_LIST = [];
 
-function useNativeBlockEditorSettings( settings, hasTemplate ) {
-	const editorSettings = useBlockEditorSettings( settings, hasTemplate );
+function useNativeBlockEditorSettings( settings, postType, postId ) {
+	const editorSettings = useBlockEditorSettings( settings, postType, postId );
 	const supportReusableBlock = settings.capabilities?.reusableBlock === true;
 
 	const { reusableBlocks, isTitleSelected } = useSelect(

package/src/private-apis.js

@@ -4,9 +4,15 @@
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import PostPanelRow from './components/post-panel-row';
 
 export const privateApis = {};
 lock( privateApis, {
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+	PostPanelRow,
+
+	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	useBlockEditorSettings,
 } );

package/src/store/actions.js

@@ -548,6 +548,27 @@ export function updateEditorSettings( settings ) {
 	};
 }
 
+/**
+ * Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:
+ *
+ * -   `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post.
+ * -   `template-only`: This mode renders the editor with only the template blocks visible.
+ * -   `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template.
+ * -   `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable.
+ *
+ * @param {string} mode Mode (one of 'template-only', 'post-only', 'template-locked' or 'all').
+ */
+export const setRenderingMode =
+	( mode ) =>
+	( { dispatch, registry } ) => {
+		registry.dispatch( blockEditorStore ).clearSelectedBlock();
+
+		dispatch( {
+			type: 'SET_RENDERING_MODE',
+			mode,
+		} );
+	};
+
 /**
  * Backward compatibility
  */

package/src/store/reducer.js

@@ -279,6 +279,15 @@ export function editorSettings( state = EDITOR_SETTINGS_DEFAULTS, action ) {
 	return state;
 }
 
+export function renderingMode( state = 'all', action ) {
+	switch ( action.type ) {
+		case 'SET_RENDERING_MODE':
+			return action.mode;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
@@ -290,4 +299,5 @@ export default combineReducers( {
 	isReady,
 	editorSettings,
 	postAutosavingLock,
+	renderingMode,
 } );

package/src/store/selectors.js

@@ -1188,6 +1188,17 @@ export function getEditorSettings( state ) {
 	return state.editorSettings;
 }
 
+/**
+ * Returns the post editor's rendering mode.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {string} Rendering mode.
+ */
+export function getRenderingMode( state ) {
+	return state.renderingMode;
+}
+
 /*
  * Backward compatibility
  */

package/src/style.scss

@@ -3,17 +3,21 @@
 @import "./components/editor-notices/style.scss";
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";
+@import "./components/post-author/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
+@import "./components/post-panel-row/style.scss";
 @import "./components/post-publish-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
+@import "./components/post-schedule/style.scss";
 @import "./components/post-sync-status/style.scss";
 @import "./components/post-taxonomies/style.scss";
 @import "./components/post-text-editor/style.scss";
+@import "./components/post-title/style.scss";
 @import "./components/post-url/style.scss";
 @import "./components/post-visibility/style.scss";
 @import "./components/post-trash/style.scss";