Try using grid layout in Post Template

WordPress · Mar 14, 2023 · cbae2a9 · cbae2a9
1 parent 1652c62
commit cbae2a9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { memo, useMemo, useState } from '@wordpress/element';
+import { memo, useMemo, useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
@@ -70,6 +70,7 @@ function PostTemplateBlockPreview( {
 const MemoizedPostTemplateBlockPreview = memo( PostTemplateBlockPreview );
 
 export default function PostTemplateEdit( {
+	setAttributes,
 	clientId,
 	context: {
 		query: {
@@ -95,11 +96,24 @@ export default function PostTemplateEdit( {
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
-		displayLayout: { type: layoutType = 'flex', columns = 1 } = {},
+		displayLayout: { type: layoutType = 'grid', columns = 1 } = {},
 		previewPostType,
 	},
 	__unstableLayoutClassNames,
 } ) {
+	const updatedLayoutType =
+		layoutType === 'list' || layoutType === 'default' ? 'default' : 'grid';
+
+	useEffect( () => {
+		setAttributes( {
+			layout: {
+				type: updatedLayoutType,
+				isResponsive: false,
+				numberOfColumns: columns,
+			},
+		} );
+	}, [ updatedLayoutType, columns, setAttributes ] );
+
 	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 	const { posts, blocks } = useSelect(
@@ -215,12 +229,9 @@ export default function PostTemplateEdit( {
 			} ) ),
 		[ posts ]
 	);
-	const hasLayoutFlex = layoutType === 'flex' && columns > 1;
+
 	const blockProps = useBlockProps( {
-		className: classnames( __unstableLayoutClassNames, {
-			'is-flex-container': hasLayoutFlex,
-			[ `columns-${ columns }` ]: hasLayoutFlex,
-		} ),
+		className: classnames( __unstableLayoutClassNames ),
 	} );
 
 	if ( ! posts ) {

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -97,7 +97,8 @@ export default function QueryInspectorControls( {
 	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
-	const showColumnsControl = displayLayout?.type === 'flex';
+	const showColumnsControl =
+		displayLayout?.type === 'grid' || displayLayout?.type === 'flex';
 	const showOrderControl =
 		! inherit && isControlAllowed( allowedControls, 'order' );
 	const showStickyControl =

diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
@@ -34,18 +34,22 @@ export default function QueryToolbar( {
 		{
 			icon: list,
 			title: __( 'List view' ),
-			onClick: () => setDisplayLayout( { type: 'list' } ),
-			isActive: displayLayout?.type === 'list',
+			onClick: () => setDisplayLayout( { type: 'default' } ),
+			isActive:
+				displayLayout?.type === 'default' ||
+				displayLayout?.type === 'list',
 		},
 		{
 			icon: grid,
 			title: __( 'Grid view' ),
 			onClick: () =>
 				setDisplayLayout( {
-					type: 'flex',
+					type: 'grid',
 					columns: displayLayout?.columns || 3,
 				} ),
-			isActive: displayLayout?.type === 'flex',
+			isActive:
+				displayLayout?.type === 'grid' ||
+				displayLayout?.type === 'flex',
 		},
 	];
 	return (