Site Editor: Apply the right post content layout in the "post only" mode

packages/editor/src/components/provider/index.js

@@ -24,6 +24,7 @@ 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';
+import { usePostEditorLayout } from './use-post-editor-layout';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -60,6 +61,41 @@ function useForceFocusModeForNavigation( navigationBlockClientId ) {
 	] );
 }
 
+/**
+ * Helper method to extract the post content block from a template.
+ *
+ * @param {Array} blocks Template blocks.
+ *
+ * @return {Object?} Post content block.
+ */
+function extractPostContentBlockFromTemplateBlocks( blocks ) {
+	if ( ! blocks ) {
+		return undefined;
+	}
+	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 ( blocks[ i ].name === 'core/post-content' ) {
+			return blocks[ i ];
+		}
+
+		if ( blocks[ i ].innerBlocks.length ) {
+			const postContentBlock = extractPostContentBlockFromTemplateBlocks(
+				blocks[ i ].innerBlocks
+			);
+
+			if ( postContentBlock ) {
+				return postContentBlock;
+			}
+		}
+	}
+
+	return undefined;
+}
+
 /**
  * Helper method to extract the post content block types from a template.
  *
@@ -111,45 +147,79 @@ function useBlockEditorProps( post, template, mode ) {
 		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,
-				} ),
-			];
+	const postContentBlock =
+		extractPostContentBlockFromTemplateBlocks( templateBlocks );
+	const postContentLayout = usePostEditorLayout( postContentBlock );
+
+	const maybeNavigationBlock = useMemo( () => {
+		if ( post.type !== 'wp_navigation' ) {
+			return undefined;
 		}
+		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,
+			} ),
+		];
+	}, [ post.type, post.id ] );
 
-		if ( mode === 'post-only' ) {
-			const postContentBlocks =
-				extractPageContentBlockTypesFromTemplateBlocks(
-					templateBlocks
-				);
-			return [
-				createBlock(
-					'core/group',
-					{
-						layout: { type: 'constrained' },
-						style: {
-							spacing: {
-								margin: {
-									top: '4em', // Mimics the post editor.
-								},
+	const maybePostOnlyModeBlocks = useMemo( () => {
+		if ( mode !== 'post-only' ) {
+			return undefined;
+		}
+		const postContentBlocks =
+			extractPageContentBlockTypesFromTemplateBlocks( templateBlocks );
+		const innerBlocks = postContentBlocks.length
+			? postContentBlocks
+			: [
+					createBlock( 'core/post-title' ),
+					createBlock( 'core/post-content' ),
+			  ];
+		const innerBlocksWithLayout = innerBlocks.map( ( block ) => {
+			if ( block.name === 'core/post-content' ) {
+				return createBlock( 'core/post-content', {
+					layout: postContentLayout,
+				} );
+			}
+			return createBlock(
+				'core/group',
+				{
+					layout: postContentLayout,
+				},
+				[ block ]
+			);
+		} );
+
+		// This group block is only here to leave some space at the top of the canvas.
+		return [
+			createBlock(
+				'core/group',
+				{
+					style: {
+						spacing: {
+							margin: {
+								top: '4em',
 							},
 						},
 					},
-					postContentBlocks.length
-						? postContentBlocks
-						: [
-								createBlock( 'core/post-title' ),
-								createBlock( 'core/post-content' ),
-						  ]
-				),
-			];
+				},
+				innerBlocksWithLayout
+			),
+		];
+	}, [ mode, templateBlocks, postContentLayout ] );
+
+	// It is important that we don't create a new instance of blocks on every change
+	// We should only create a new instance if the blocks them selves change, not a dependency of them.
+	const blocks = useMemo( () => {
+		if ( maybeNavigationBlock ) {
+			return maybeNavigationBlock;
+		}
+
+		if ( maybePostOnlyModeBlocks ) {
+			return maybePostOnlyModeBlocks;
 		}
 
 		if ( rootLevelPost === 'template' ) {
@@ -158,13 +228,13 @@ function useBlockEditorProps( post, template, mode ) {
 
 		return postBlocks;
 	}, [
-		templateBlocks,
-		postBlocks,
+		maybeNavigationBlock,
+		maybePostOnlyModeBlocks,
 		rootLevelPost,
-		post.type,
-		post.id,
-		mode,
+		postBlocks,
+		templateBlocks,
 	] );
+
 	const disableRootLevelChanges =
 		( !! template && mode === 'template-locked' ) ||
 		post.type === 'wp_navigation' ||

packages/editor/src/components/provider/use-post-editor-layout.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSettings } from '@wordpress/block-editor';
+
+export function usePostEditorLayout( templatePostContentBlock ) {
+	const [ globalStylesLayout ] = useSettings( 'layout' );
+	const { layout: templateLayoutDefinition } =
+		templatePostContentBlock?.attributes ?? {};
+	const layout = useMemo( () => {
+		if ( ! templateLayoutDefinition ) {
+			return globalStylesLayout;
+		}
+		return templateLayoutDefinition &&
+			( templateLayoutDefinition?.type === 'constrained' ||
+				templateLayoutDefinition?.inherit ||
+				templateLayoutDefinition?.contentSize ||
+				templateLayoutDefinition?.wideSize )
+			? {
+					...globalStylesLayout,
+					...templateLayoutDefinition,
+					type: 'constrained',
+			  }
+			: { ...globalStylesLayout, ...layout, type: 'default' };
+	}, [ templateLayoutDefinition, globalStylesLayout ] );
+
+	return layout;
+}