Fix layout for non viewable post types (#58962)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: glendaviesnz <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Feb 13, 2024 · 5bd036b · 5bd036b
1 parent 3f24947
commit 5bd036b
Showing 1 changed file with 24 additions and 5 deletions.
diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
@@ -40,6 +40,17 @@ const {
 
 const noop = () => {};
 
+/**
+ * These post types have a special editor where they don't allow you to fill the title
+ * and they don't apply the layout styles.
+ */
+const DESIGN_POST_TYPES = [
+	'wp_block',
+	'wp_template',
+	'wp_navigation',
+	'wp_template_part',
+];
+
 /**
  * Given an array of nested blocks, find the first Post Content
  * block inside it, recursing through any nesting levels,
@@ -93,6 +104,7 @@ function EditorCanvas( {
 		wrapperUniqueId,
 		deviceType,
 		showEditorPadding,
+		isDesignPostType,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -130,6 +142,7 @@ function EditorCanvas( {
 		return {
 			renderingMode: _renderingMode,
 			postContentAttributes: editorSettings.postContentAttributes,
+			isDesignPostType: DESIGN_POST_TYPES.includes( postTypeSlug ),
 			// Post template fetch returns a 404 on classic themes, which
 			// messes with e2e tests, so check it's a block theme first.
 			editedPostTemplate:
@@ -164,7 +177,7 @@ function EditorCanvas( {
 	// fallbackLayout is used if there is no Post Content,
 	// and for Post Title.
 	const fallbackLayout = useMemo( () => {
-		if ( renderingMode !== 'post-only' ) {
+		if ( renderingMode !== 'post-only' || isDesignPostType ) {
 			return { type: 'default' };
 		}
 
@@ -175,7 +188,12 @@ function EditorCanvas( {
 		}
 		// Set default layout for classic themes so all alignments are supported.
 		return { type: 'default' };
-	}, [ renderingMode, themeSupportsLayout, globalLayoutSettings ] );
+	}, [
+		renderingMode,
+		themeSupportsLayout,
+		globalLayoutSettings,
+		isDesignPostType,
+	] );
 
 	const newestPostContentAttributes = useMemo( () => {
 		if (
@@ -318,7 +336,8 @@ function EditorCanvas( {
 		>
 			{ themeSupportsLayout &&
 				! themeHasDisabledLayoutStyles &&
-				renderingMode === 'post-only' && (
+				renderingMode === 'post-only' &&
+				! isDesignPostType && (
 					<>
 						<LayoutStyle
 							selector=".editor-editor-canvas__post-title-wrapper"
@@ -337,7 +356,7 @@ function EditorCanvas( {
 						) }
 					</>
 				) }
-			{ renderingMode === 'post-only' && (
+			{ renderingMode === 'post-only' && ! isDesignPostType && (
 				<div
 					className={ classnames(
 						'editor-editor-canvas__post-title-wrapper',
@@ -367,7 +386,7 @@ function EditorCanvas( {
 					className={ classnames(
 						className,
 						'is-' + deviceType.toLowerCase() + '-preview',
-						renderingMode !== 'post-only'
+						renderingMode !== 'post-only' || isDesignPostType
 							? 'wp-site-blocks'
 							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 					) }