Update layout type for legacy layouts.

WordPress · Sep 23, 2022 · 1b29729 · 1b29729
1 parent 7102ea3
commit 1b29729
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -112,7 +112,16 @@ export function useLayoutClasses( block = {} ) {
 export function useLayoutStyles( block = {}, selector ) {
 	const { attributes = {}, name } = block;
 	const { layout = {}, style = {} } = attributes;
-	const fullLayoutType = getLayoutType( layout?.type || 'default' );
+	// Update type for blocks using legacy layouts.
+	const usedLayout =
+		layout &&
+		( layout?.type === 'constrained' ||
+			layout?.inherit ||
+			layout?.contentSize ||
+			layout?.wideSize )
+			? { ...layout, type: 'constrained' }
+			: { ...layout, type: 'default' };
+	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
 	const globalLayoutSettings = useSetting( 'layout' ) || {};
 	const blockGapSupport = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -223,7 +223,7 @@ export default function VisualEditor( { styles } ) {
 	}, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] );
 
 	const postContentBlock = useMemo( () => {
-		return findPostContent( parse( templateContent ) );
+		return findPostContent( parse( templateContent ) ) || {};
 	}, [ templateContent ] );
 
 	const postContentLayoutClasses = useLayoutClasses( postContentBlock );
@@ -241,11 +241,23 @@ export default function VisualEditor( { styles } ) {
 		'.wp-container-visual-editor'
 	);
 
-	// If there is a Post Content block we use its layout, or 'default' layout
-	// if it doesn't have one. If no Post Content this must be a classic theme,
-	// in which case we use the fallback layout.
-	const postContentLayout = postContentBlock
-		? postContentBlock?.attributes?.layout || { type: 'default' }
+	const { attributes = {} } = postContentBlock;
+	const { layout = {} } = attributes;
+
+	// Update type for blocks using legacy layouts.
+	const postContentLayout =
+		layout &&
+		( layout?.type === 'constrained' ||
+			layout?.inherit ||
+			layout?.contentSize ||
+			layout?.wideSize )
+			? { ...globalLayoutSettings, ...layout, type: 'constrained' }
+			: { ...globalLayoutSettings, ...layout, type: 'default' };
+
+	// If there is a Post Content block we use its layout for the block list;
+	// if not, this must be a classic theme, in which case we use the fallback layout.
+	const blockListLayout = postContentBlock
+		? postContentLayout
 		: fallbackLayout;
 
 	const titleRef = useRef();
@@ -354,9 +366,9 @@ export default function VisualEditor( { styles } ) {
 								className={
 									isTemplateMode
 										? 'wp-site-blocks'
-										: blockListLayoutClass
+										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
-								__experimentalLayout={ postContentLayout }
+								__experimentalLayout={ blockListLayout }
 							/>
 						</RecursionProvider>
 					</MaybeIframe>