diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 1acb3e57191758..9bd055f25520d0 100644 --- 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 index 95ccb43e58452a..fd3875e1ca48a6 100644 --- 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 index 1d079eb399fb80..5cfdf7bc00ac2b 100644 --- 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 (