From 38b3978a0f29a5570893e31ed91bc832f869b2b6 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 14 Mar 2023 12:09:56 +1100 Subject: [PATCH 01/28] Add static column number option --- lib/block-supports/layout.php | 1 - packages/block-editor/src/layouts/grid.js | 12 ++++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 87cc4a6cc5f18f..0870668f0d2a52 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -280,7 +280,6 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } } } elseif ( 'grid' === $layout_type ) { - $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; $layout_styles[] = array( 'selector' => $selector, diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 69347123fd4213..e256cab841b1fe 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -53,7 +53,11 @@ export default { hasBlockGapSupport, layoutDefinitions, } ) { - const { minimumColumnWidth = '12rem' } = layout; + const { + isResponsive = true, + minimumColumnWidth = '12rem', + numberOfColumns = 3, + } = layout; // If a block's block.json skips serialization for spacing or spacing.blockGap, // don't apply the user-defined value to the styles. @@ -66,10 +70,14 @@ export default { let output = ''; const rules = []; - if ( minimumColumnWidth ) { + if ( isResponsive && minimumColumnWidth ) { rules.push( `grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))` ); + } else if ( numberOfColumns ) { + rules.push( + `grid-template-columns: repeat(${ numberOfColumns }, 1fr)` + ); } if ( rules.length ) { From 0392956b27bf4da717768b301811947d315e41e4 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 14 Mar 2023 13:52:21 +1100 Subject: [PATCH 02/28] Address feedback and fix Group placeholder --- lib/block-supports/layout.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 0870668f0d2a52..87cc4a6cc5f18f 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -280,6 +280,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } } } elseif ( 'grid' === $layout_type ) { + $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; $layout_styles[] = array( 'selector' => $selector, From f9fc8a17385f44a5ccc8764ceaa647622d80dec2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 16 Mar 2023 13:51:58 +1100 Subject: [PATCH 03/28] Revert non-responsive option --- packages/block-editor/src/layouts/grid.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index e256cab841b1fe..69347123fd4213 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -53,11 +53,7 @@ export default { hasBlockGapSupport, layoutDefinitions, } ) { - const { - isResponsive = true, - minimumColumnWidth = '12rem', - numberOfColumns = 3, - } = layout; + const { minimumColumnWidth = '12rem' } = layout; // If a block's block.json skips serialization for spacing or spacing.blockGap, // don't apply the user-defined value to the styles. @@ -70,14 +66,10 @@ export default { let output = ''; const rules = []; - if ( isResponsive && minimumColumnWidth ) { + if ( minimumColumnWidth ) { rules.push( `grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))` ); - } else if ( numberOfColumns ) { - rules.push( - `grid-template-columns: repeat(${ numberOfColumns }, 1fr)` - ); } if ( rules.length ) { From 0c32a08159ec51b8262273c629b201d028304a61 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 14 Mar 2023 14:11:46 +1100 Subject: [PATCH 04/28] Try using grid layout in Post Template --- .../block-library/src/post-template/edit.js | 25 +++++++++++++------ .../query/edit/inspector-controls/index.js | 3 ++- .../src/query/edit/query-toolbar.js | 12 ++++++--- 3 files changed, 28 insertions(+), 12 deletions(-) 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 2222f7d2d1eff3..e102abd967a2d7 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -101,7 +101,8 @@ export default function QueryInspectorControls( props ) { 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 ( From 4650b732cf7056bdc446e7178a1de20a7a00a5b0 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 21 Mar 2023 15:07:55 +1100 Subject: [PATCH 05/28] Update Post Template to use auto-fill columns --- packages/block-library/src/post-template/edit.js | 7 +++---- .../src/query/edit/inspector-controls/index.js | 10 ++++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 9bd055f25520d0..5d207b0085aed1 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -96,7 +96,7 @@ export default function PostTemplateEdit( { } = {}, queryContext = [ { page: 1 } ], templateSlug, - displayLayout: { type: layoutType = 'grid', columns = 1 } = {}, + displayLayout: { type: layoutType = 'grid', columnWidth = 12 } = {}, previewPostType, }, __unstableLayoutClassNames, @@ -108,11 +108,10 @@ export default function PostTemplateEdit( { setAttributes( { layout: { type: updatedLayoutType, - isResponsive: false, - numberOfColumns: columns, + minimumColumnWidth: `${ columnWidth }rem`, }, } ); - }, [ updatedLayoutType, columns, setAttributes ] ); + }, [ updatedLayoutType, columnWidth, setAttributes ] ); const [ { page } ] = queryContext; const [ activeBlockContextId, setActiveBlockContextId ] = useState(); 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 e102abd967a2d7..84551249dfed41 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -167,13 +167,15 @@ export default function QueryInspectorControls( props ) { <> - setDisplayLayout( { columns: value } ) + setDisplayLayout( { + columnWidth: value, + } ) } min={ 2 } - max={ Math.max( 6, displayLayout.columns ) } + max={ 60 } /> { displayLayout.columns > 6 && ( Date: Tue, 11 Apr 2023 11:46:56 +1000 Subject: [PATCH 06/28] Add block spacing to post template --- docs/reference-guides/core-blocks.md | 3 +-- packages/block-library/src/post-template/block.json | 3 +++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index b84d8edb8e9d98..c572b91f3f629d 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -600,8 +600,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme -- **Parent:** core/query -- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ +- **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** ## Post Terms diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index 6c2056368d6449..2d0bdcc3ad3d2d 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -43,6 +43,9 @@ "__experimentalDefaultControls": { "fontSize": true } + }, + "spacing": { + "blockGap": true } }, "style": "wp-block-post-template", From b2ff8317d04f4d20dc946b954e9856955bebbf49 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 19 Apr 2023 15:58:06 +1000 Subject: [PATCH 07/28] Show gap control by default --- packages/block-library/src/post-template/block.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index 2d0bdcc3ad3d2d..d3625b5f5684ff 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -45,7 +45,10 @@ } }, "spacing": { - "blockGap": true + "blockGap": true, + "__experimentalDefaultControls": { + "blockGap": true + } } }, "style": "wp-block-post-template", From e6cccade48f3ead4d99f47797c90a986069bd476 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 24 Apr 2023 15:56:18 +1000 Subject: [PATCH 08/28] Add unstable columns grid property --- lib/block-supports/layout.php | 17 ++++++++++++----- packages/block-editor/src/layouts/grid.js | 9 +++++++-- .../block-library/src/post-template/edit.js | 6 +++--- .../src/query/edit/inspector-controls/index.js | 8 ++++---- 4 files changed, 26 insertions(+), 14 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 87cc4a6cc5f18f..35fa0a67dcdc96 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -280,12 +280,19 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } } } elseif ( 'grid' === $layout_type ) { - $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; + if ( ! empty( $layout['__unstableColumns'] ) ) { + $layout_styles[] = array( + 'selector' => $selector, + 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['__unstableColumns'] . ', 1fr)' ), + ); + } else { + $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; - $layout_styles[] = array( - 'selector' => $selector, - 'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ), - ); + $layout_styles[] = array( + 'selector' => $selector, + 'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ), + ); + } if ( $has_block_gap_support && isset( $gap_value ) ) { $combined_gap_value = ''; diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 69347123fd4213..4c4706981733cd 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -53,7 +53,8 @@ export default { hasBlockGapSupport, layoutDefinitions, } ) { - const { minimumColumnWidth = '12rem' } = layout; + const { minimumColumnWidth = '12rem', __unstableColumns = null } = + layout; // If a block's block.json skips serialization for spacing or spacing.blockGap, // don't apply the user-defined value to the styles. @@ -66,7 +67,11 @@ export default { let output = ''; const rules = []; - if ( minimumColumnWidth ) { + if ( __unstableColumns ) { + rules.push( + `grid-template-columns: repeat(${ __unstableColumns }, 1fr)` + ); + } else if ( minimumColumnWidth ) { rules.push( `grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))` ); diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 5d207b0085aed1..2cd746272a5164 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -96,7 +96,7 @@ export default function PostTemplateEdit( { } = {}, queryContext = [ { page: 1 } ], templateSlug, - displayLayout: { type: layoutType = 'grid', columnWidth = 12 } = {}, + displayLayout: { type: layoutType = 'grid', columns = 3 } = {}, previewPostType, }, __unstableLayoutClassNames, @@ -108,10 +108,10 @@ export default function PostTemplateEdit( { setAttributes( { layout: { type: updatedLayoutType, - minimumColumnWidth: `${ columnWidth }rem`, + __unstableColumns: columns, }, } ); - }, [ updatedLayoutType, columnWidth, setAttributes ] ); + }, [ updatedLayoutType, columns, setAttributes ] ); const [ { page } ] = queryContext; const [ activeBlockContextId, setActiveBlockContextId ] = useState(); 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 84551249dfed41..914c0ef9550cf0 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -167,15 +167,15 @@ export default function QueryInspectorControls( props ) { <> setDisplayLayout( { - columnWidth: value, + columns: value, } ) } min={ 2 } - max={ 60 } + max={ Math.max( 6, displayLayout.columns ) } /> { displayLayout.columns > 6 && ( Date: Thu, 27 Apr 2023 13:26:55 +1000 Subject: [PATCH 09/28] Rename layout column attribute. --- lib/block-supports/layout.php | 4 ++-- packages/block-editor/src/layouts/grid.js | 6 +++--- packages/block-library/src/post-template/edit.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 35fa0a67dcdc96..106376b6a7e982 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -280,10 +280,10 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } } } elseif ( 'grid' === $layout_type ) { - if ( ! empty( $layout['__unstableColumns'] ) ) { + if ( ! empty( $layout['_unstableColumnCount'] ) ) { $layout_styles[] = array( 'selector' => $selector, - 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['__unstableColumns'] . ', 1fr)' ), + 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['_unstableColumnCount'] . ', 1fr)' ), ); } else { $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 4c4706981733cd..0c81bde04297e9 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -53,7 +53,7 @@ export default { hasBlockGapSupport, layoutDefinitions, } ) { - const { minimumColumnWidth = '12rem', __unstableColumns = null } = + const { minimumColumnWidth = '12rem', _unstableColumnCount = null } = layout; // If a block's block.json skips serialization for spacing or spacing.blockGap, @@ -67,9 +67,9 @@ export default { let output = ''; const rules = []; - if ( __unstableColumns ) { + if ( _unstableColumnCount ) { rules.push( - `grid-template-columns: repeat(${ __unstableColumns }, 1fr)` + `grid-template-columns: repeat(${ _unstableColumnCount }, 1fr)` ); } else if ( minimumColumnWidth ) { rules.push( diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 2cd746272a5164..6a8bf4d2ddb097 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -108,7 +108,7 @@ export default function PostTemplateEdit( { setAttributes( { layout: { type: updatedLayoutType, - __unstableColumns: columns, + _unstableColumnCount: columns, }, } ); }, [ updatedLayoutType, columns, setAttributes ] ); From 0edf24b08791de247b6f35fc1b233d4f33ebc34b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 27 Apr 2023 13:38:50 +1000 Subject: [PATCH 10/28] Add a media query to reproduce current responsiveness --- packages/block-library/src/post-template/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-library/src/post-template/style.scss b/packages/block-library/src/post-template/style.scss index b1cdcf385e223c..0d92c05e504baa 100644 --- a/packages/block-library/src/post-template/style.scss +++ b/packages/block-library/src/post-template/style.scss @@ -30,3 +30,9 @@ } } } + +@media ( max-width: $break-small ) { + .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid { + grid-template-columns: 1fr; + } +} From 1a96536cbdad40d6d8a11f95c6f8fdedde7b73ea Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 27 Apr 2023 15:29:52 +1000 Subject: [PATCH 11/28] Move layout controls to Post Template block --- lib/block-supports/layout.php | 4 +- packages/block-editor/src/layouts/grid.js | 46 ++++++-- .../src/post-template/block.json | 4 +- .../block-library/src/post-template/edit.js | 103 +++++++++++------- .../query/edit/inspector-controls/index.js | 3 +- .../src/query/edit/query-content.js | 1 - .../src/query/edit/query-toolbar.js | 29 +---- 7 files changed, 112 insertions(+), 78 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 106376b6a7e982..30f7288f7ea7ca 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -280,10 +280,10 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } } } elseif ( 'grid' === $layout_type ) { - if ( ! empty( $layout['_unstableColumnCount'] ) ) { + if ( ! empty( $layout['__unstableColumnCount'] ) ) { $layout_styles[] = array( 'selector' => $selector, - 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['_unstableColumnCount'] . ', 1fr)' ), + 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['__unstableColumnCount'] . ', 1fr)' ), ); } else { $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 0c81bde04297e9..b5288c8e3f5f15 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -35,11 +35,23 @@ export default { layout = {}, onChange, } ) { + const { __unstableColumnCount = null } = layout; + return ( - + <> + { __unstableColumnCount && ( + + ) } + { ! __unstableColumnCount && ( + + ) } + ); }, toolBarControls: function DefaultLayoutToolbarControls() { @@ -53,7 +65,7 @@ export default { hasBlockGapSupport, layoutDefinitions, } ) { - const { minimumColumnWidth = '12rem', _unstableColumnCount = null } = + const { minimumColumnWidth = '12rem', __unstableColumnCount = null } = layout; // If a block's block.json skips serialization for spacing or spacing.blockGap, @@ -67,9 +79,9 @@ export default { let output = ''; const rules = []; - if ( _unstableColumnCount ) { + if ( __unstableColumnCount ) { rules.push( - `grid-template-columns: repeat(${ _unstableColumnCount }, 1fr)` + `grid-template-columns: repeat(${ __unstableColumnCount }, 1fr)` ); } else if ( minimumColumnWidth ) { rules.push( @@ -175,3 +187,23 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) { ); } + +// Enables setting number of grid columns +function GridLayoutColumnsControl( { layout, onChange } ) { + const { __unstableColumnCount = 3 } = layout; + + return ( + { + onChange( { + ...layout, + __unstableColumnCount: value, + } ); + } } + min={ 1 } + max={ 12 } + /> + ); +} diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index d3625b5f5684ff..7653fa3eba033a 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -20,9 +20,7 @@ "html": false, "align": [ "wide", "full" ], "anchor": true, - "__experimentalLayout": { - "allowEditing": false - }, + "__experimentalLayout": true, "color": { "gradients": true, "link": true, diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 6a8bf4d2ddb097..deb4ff3041adc7 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -6,18 +6,20 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { memo, useMemo, useState, useEffect } from '@wordpress/element'; +import { memo, useMemo, useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { + BlockControls, BlockContextProvider, __experimentalUseBlockPreview as useBlockPreview, useBlockProps, useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; -import { Spinner } from '@wordpress/components'; +import { Spinner, ToolbarGroup } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; +import { list, grid } from '@wordpress/icons'; const TEMPLATE = [ [ 'core/post-title' ], @@ -96,22 +98,17 @@ export default function PostTemplateEdit( { } = {}, queryContext = [ { page: 1 } ], templateSlug, - displayLayout: { type: layoutType = 'grid', columns = 3 } = {}, + displayLayout, previewPostType, }, + attributes: { layout }, __unstableLayoutClassNames, } ) { - const updatedLayoutType = + const { type: layoutType = 'grid' } = displayLayout || {}; + const legacyLayoutType = layoutType === 'list' || layoutType === 'default' ? 'default' : 'grid'; - useEffect( () => { - setAttributes( { - layout: { - type: updatedLayoutType, - _unstableColumnCount: columns, - }, - } ); - }, [ updatedLayoutType, columns, setAttributes ] ); + const updatedLayoutType = layout?.type || legacyLayoutType; const [ { page } ] = queryContext; const [ activeBlockContextId, setActiveBlockContextId ] = useState(); @@ -245,35 +242,67 @@ export default function PostTemplateEdit( { return

{ __( 'No results found.' ) }

; } + const setDisplayLayout = ( newDisplayLayout ) => + setAttributes( { + layout: { ...layout, ...newDisplayLayout }, + } ); + + const displayLayoutControls = [ + { + icon: list, + title: __( 'List view' ), + onClick: () => setDisplayLayout( { type: 'default' } ), + isActive: + updatedLayoutType === 'default' || updatedLayoutType === 'list', + }, + { + icon: grid, + title: __( 'Grid view' ), + onClick: () => + setDisplayLayout( { type: 'grid', __unstableColumnCount: 3 } ), + isActive: + updatedLayoutType === 'grid' || updatedLayoutType === 'flex', + }, + ]; + // To avoid flicker when switching active block contexts, a preview is rendered // for each block context, but the preview for the active block context is hidden. // This ensures that when it is displayed again, the cached rendering of the // block preview is used, instead of having to re-render the preview from scratch. return ( -
    - { blockContexts && - blockContexts.map( ( blockContext ) => ( - - { blockContext.postId === - ( activeBlockContextId || - blockContexts[ 0 ]?.postId ) ? ( - - ) : null } - - - ) ) } -
+ <> + + { ' ' } + + + +
    + { blockContexts && + blockContexts.map( ( blockContext ) => ( + + { blockContext.postId === + ( activeBlockContextId || + blockContexts[ 0 ]?.postId ) ? ( + + ) : null } + + + ) ) } +
+ ); } 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 914c0ef9550cf0..0061429f4af3b1 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -101,8 +101,7 @@ export default function QueryInspectorControls( props ) { const showInheritControl = isControlAllowed( allowedControls, 'inherit' ); const showPostTypeControl = ! inherit && isControlAllowed( allowedControls, 'postType' ); - const showColumnsControl = - displayLayout?.type === 'grid' || displayLayout?.type === 'flex'; + const showColumnsControl = false; const showOrderControl = ! inherit && isControlAllowed( allowedControls, 'order' ); const showStickyControl = diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js index 9563673917f57e..567199f38e1b34 100644 --- a/packages/block-library/src/query/edit/query-content.js +++ b/packages/block-library/src/query/edit/query-content.js @@ -107,7 +107,6 @@ export default function QueryContent( { clientId={ clientId } attributes={ attributes } setQuery={ updateQuery } - setDisplayLayout={ updateDisplayLayout } openPatternSelectionModal={ openPatternSelectionModal } /> diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index 5cfdf7bc00ac2b..7b02290ae4c76c 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/packages/block-library/src/query/edit/query-toolbar.js @@ -10,7 +10,7 @@ import { } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { settings, list, grid } from '@wordpress/icons'; +import { settings } from '@wordpress/icons'; /** * Internal dependencies @@ -18,9 +18,8 @@ import { settings, list, grid } from '@wordpress/icons'; import { usePatterns } from '../utils'; export default function QueryToolbar( { - attributes: { query, displayLayout }, + attributes: { query }, setQuery, - setDisplayLayout, openPatternSelectionModal, name, clientId, @@ -30,28 +29,7 @@ export default function QueryToolbar( { QueryToolbar, 'blocks-query-pagination-max-page-input' ); - const displayLayoutControls = [ - { - icon: list, - title: __( 'List view' ), - onClick: () => setDisplayLayout( { type: 'default' } ), - isActive: - displayLayout?.type === 'default' || - displayLayout?.type === 'list', - }, - { - icon: grid, - title: __( 'Grid view' ), - onClick: () => - setDisplayLayout( { - type: 'grid', - columns: displayLayout?.columns || 3, - } ), - isActive: - displayLayout?.type === 'grid' || - displayLayout?.type === 'flex', - }, - ]; + return ( <> { ! query.inherit && ( @@ -148,7 +126,6 @@ export default function QueryToolbar( { ) } - ); } From 75006ca14699c1eb0be4e42ccf053820c8b31d6c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 1 May 2023 13:25:22 +1000 Subject: [PATCH 12/28] Reduce max columns to 6. --- packages/block-editor/src/layouts/grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index b5288c8e3f5f15..da6b8b1429a34a 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -203,7 +203,7 @@ function GridLayoutColumnsControl( { layout, onChange } ) { } ); } } min={ 1 } - max={ 12 } + max={ 6 } /> ); } From e150eeafbe2a5d76f4e779211d61b78a1f0b1eae Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 1 May 2023 13:27:03 +1000 Subject: [PATCH 13/28] Remove unstable prefix --- lib/block-supports/layout.php | 4 ++-- packages/block-editor/src/layouts/grid.js | 19 +++++++++---------- .../block-library/src/post-template/edit.js | 3 +-- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 30f7288f7ea7ca..31352e5a8ff874 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -280,10 +280,10 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } } } elseif ( 'grid' === $layout_type ) { - if ( ! empty( $layout['__unstableColumnCount'] ) ) { + if ( ! empty( $layout['columnCount'] ) ) { $layout_styles[] = array( 'selector' => $selector, - 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['__unstableColumnCount'] . ', 1fr)' ), + 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', 1fr)' ), ); } else { $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index da6b8b1429a34a..f606f0d8036485 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -35,17 +35,17 @@ export default { layout = {}, onChange, } ) { - const { __unstableColumnCount = null } = layout; + const { columnCount = null } = layout; return ( <> - { __unstableColumnCount && ( + { columnCount && ( ) } - { ! __unstableColumnCount && ( + { ! columnCount && ( { onChange( { ...layout, - __unstableColumnCount: value, + columnCount: value, } ); } } min={ 1 } diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index deb4ff3041adc7..58a91994feced5 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -258,8 +258,7 @@ export default function PostTemplateEdit( { { icon: grid, title: __( 'Grid view' ), - onClick: () => - setDisplayLayout( { type: 'grid', __unstableColumnCount: 3 } ), + onClick: () => setDisplayLayout( { type: 'grid', columnCount: 3 } ), isActive: updatedLayoutType === 'grid' || updatedLayoutType === 'flex', }, From e178bce67ecbcd85ec07773ca4b553025ad3707b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 1 May 2023 15:09:45 +1000 Subject: [PATCH 14/28] fix cols breaking out of container --- lib/block-supports/layout.php | 2 +- packages/block-editor/src/layouts/grid.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 31352e5a8ff874..adb84caf40f932 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -283,7 +283,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( ! empty( $layout['columnCount'] ) ) { $layout_styles[] = array( 'selector' => $selector, - 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', 1fr)' ), + 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ), ); } else { $minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem'; diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index f606f0d8036485..508af5bc117988 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -80,7 +80,7 @@ export default { if ( columnCount ) { rules.push( - `grid-template-columns: repeat(${ columnCount }, 1fr)` + `grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))` ); } else if ( minimumColumnWidth ) { rules.push( From 2ad9d0202674a7b60bd9eced5904fbd52e789a01 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 3 May 2023 14:35:49 +1000 Subject: [PATCH 15/28] Try adding deprecation --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/post-template/edit.js | 19 +- packages/block-library/src/query/block.json | 6 - .../block-library/src/query/deprecated.js | 178 ++++++++++++++++-- .../blocks/core__query.serialized.html | 2 +- .../core__query__deprecated-1.serialized.html | 2 +- ...core__query__deprecated-2-with-colors.json | 11 +- ...__deprecated-2-with-colors.serialized.html | 4 +- .../blocks/core__query__deprecated-2.json | 11 +- .../core__query__deprecated-2.serialized.html | 4 +- .../core__query__deprecated-3.serialized.html | 2 +- .../blocks/core__query__deprecated-4.json | 3 - .../blocks/core__query__deprecated-5.html | 6 + .../blocks/core__query__deprecated-5.json | 46 +++++ .../core__query__deprecated-5.parsed.json | 51 +++++ .../core__query__deprecated-5.serialized.html | 7 + 16 files changed, 297 insertions(+), 57 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-5.html create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-5.json create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index c572b91f3f629d..3b23968618f23e 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -656,7 +656,7 @@ An advanced block that allows displaying post types based on different query par - **Name:** core/query - **Category:** theme - **Supports:** align (full, wide), anchor, ~~html~~ -- **Attributes:** displayLayout, namespace, query, queryId, tagName +- **Attributes:** namespace, query, queryId, tagName ## No results diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 58a91994feced5..12f6dc67fabf6b 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -98,17 +98,12 @@ export default function PostTemplateEdit( { } = {}, queryContext = [ { page: 1 } ], templateSlug, - displayLayout, previewPostType, }, attributes: { layout }, __unstableLayoutClassNames, } ) { - const { type: layoutType = 'grid' } = displayLayout || {}; - const legacyLayoutType = - layoutType === 'list' || layoutType === 'default' ? 'default' : 'grid'; - - const updatedLayoutType = layout?.type || legacyLayoutType; + const { type: layoutType, columnCount = 3 } = layout || {}; const [ { page } ] = queryContext; const [ activeBlockContextId, setActiveBlockContextId ] = useState(); @@ -252,15 +247,17 @@ export default function PostTemplateEdit( { icon: list, title: __( 'List view' ), onClick: () => setDisplayLayout( { type: 'default' } ), - isActive: - updatedLayoutType === 'default' || updatedLayoutType === 'list', + isActive: layoutType === 'default' || layoutType === 'constrained', }, { icon: grid, title: __( 'Grid view' ), - onClick: () => setDisplayLayout( { type: 'grid', columnCount: 3 } ), - isActive: - updatedLayoutType === 'grid' || updatedLayoutType === 'flex', + onClick: () => + setDisplayLayout( { + type: 'grid', + columnCount, + } ), + isActive: layoutType === 'grid', }, ]; diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index bcff0e3ac63b17..50733930b78dc5 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -32,12 +32,6 @@ "type": "string", "default": "div" }, - "displayLayout": { - "type": "object", - "default": { - "type": "list" - } - }, "namespace": { "type": "string" } diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js index 05ee6217a288d6..8f348e26bcd93d 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -126,6 +126,80 @@ const migrateColors = ( attributes, innerBlocks ) => { const hasSingleInnerGroupBlock = ( innerBlocks = [] ) => innerBlocks.length === 1 && innerBlocks[ 0 ].name === 'core/group'; +const migrateToConstrainedLayout = ( attributes ) => { + const { layout = null } = attributes; + if ( ! layout ) { + return attributes; + } + if ( layout.inherit || layout.contentSize ) { + return { + ...attributes, + layout: { + ...layout, + type: 'constrained', + }, + }; + } +}; + +const findPostTemplateBlock = ( innerBlocks = [] ) => { + let foundBlock = null; + innerBlocks.forEach( ( block ) => { + if ( block.name === 'core/post-template' ) { + foundBlock = block; + } else if ( block.innerBlocks.length ) { + foundBlock = findPostTemplateBlock( block.innerBlocks ); + } + } ); + return foundBlock; +}; + +const replacePostTemplateBlock = ( innerBlocks = [], replacementBlock ) => { + innerBlocks.forEach( ( block, index ) => { + if ( block.name === 'core/post-template' ) { + innerBlocks.splice( index, 1, replacementBlock ); + } else if ( block.innerBlocks.length ) { + block.innerBlocks = replacePostTemplateBlock( + block.innerBlocks, + replacementBlock + ); + } + } ); + return innerBlocks; +}; + +const migrateDisplayLayout = ( attributes, innerBlocks ) => { + const { displayLayout = null, ...newAttributes } = attributes; + if ( ! displayLayout ) { + return [ attributes, innerBlocks ]; + } + const postTemplateBlock = findPostTemplateBlock( innerBlocks ); + if ( ! postTemplateBlock ) { + return [ attributes, innerBlocks ]; + } + + const { type, columns } = displayLayout; + + // Convert custom displayLayout values to canonical layout types. + const updatedLayoutType = type === 'flex' ? 'grid' : 'default'; + + const newPostTemplateBlock = createBlock( + 'core/post-template', + { + ...postTemplateBlock.attributes, + layout: { + type: updatedLayoutType, + ...( columns && { columnCount: columns } ), + }, + }, + postTemplateBlock.innerBlocks + ); + return [ + newAttributes, + replacePostTemplateBlock( innerBlocks, newPostTemplateBlock ), + ]; +}; + // Version with NO wrapper `div` element. const v1 = { attributes: { @@ -160,13 +234,14 @@ const v1 = { supports: { html: false, }, - migrate( attributes ) { + migrate( attributes, innerBlocks ) { const withTaxQuery = migrateToTaxQuery( attributes ); const { layout, ...restWithTaxQuery } = withTaxQuery; - return { + const newAttributes = { ...restWithTaxQuery, displayLayout: withTaxQuery.layout, }; + return migrateDisplayLayout( newAttributes, innerBlocks ); }, save() { return ; @@ -221,7 +296,16 @@ const v2 = { categoryIds || tagIds, migrate( attributes, innerBlocks ) { const withTaxQuery = migrateToTaxQuery( attributes ); - return migrateColors( withTaxQuery, innerBlocks ); + const [ withColorAttributes, withColorInnerBlocks ] = migrateColors( + withTaxQuery, + innerBlocks + ); + const withConstrainedLayoutAttributes = + migrateToConstrainedLayout( withColorAttributes ); + return migrateDisplayLayout( + withConstrainedLayoutAttributes, + withColorInnerBlocks + ); }, save( { attributes: { tagName: Tag = 'div' } } ) { const blockProps = useBlockProps.save(); @@ -291,7 +375,18 @@ const v3 = { style?.elements?.link ); }, - migrate: migrateColors, + migrate( attributes, innerBlocks ) { + const [ withColorAttributes, withColorInnerBlocks ] = migrateColors( + attributes, + innerBlocks + ); + const withConstrainedLayoutAttributes = + migrateToConstrainedLayout( withColorAttributes ); + return migrateDisplayLayout( + withConstrainedLayoutAttributes, + withColorInnerBlocks + ); + }, save( { attributes: { tagName: Tag = 'div' } } ) { const blockProps = useBlockProps.save(); const innerBlocksProps = useInnerBlocksProps.save( blockProps ); @@ -358,23 +453,68 @@ const v4 = { ! layout || layout.inherit || ( layout.contentSize && layout.type !== 'constrained' ), - migrate: ( attributes ) => { - const { layout = null } = attributes; - if ( ! layout ) { - return attributes; - } - if ( layout.inherit || layout.contentSize ) { - return { - ...attributes, - layout: { - ...layout, - type: 'constrained', - }, - }; - } + migrate( attributes, innerBlocks ) { + const withConstrainedLayoutAttributes = + migrateToConstrainedLayout( attributes ); + return migrateDisplayLayout( + withConstrainedLayoutAttributes, + innerBlocks + ); + }, +}; + +const v5 = { + attributes: { + queryId: { + type: 'number', + }, + query: { + type: 'object', + default: { + perPage: null, + pages: 0, + offset: 0, + postType: 'post', + order: 'desc', + orderBy: 'date', + author: '', + search: '', + exclude: [], + sticky: '', + inherit: true, + taxQuery: null, + parents: [], + }, + }, + tagName: { + type: 'string', + default: 'div', + }, + displayLayout: { + type: 'object', + default: { + type: 'list', + }, + }, + namespace: { + type: 'string', + }, + }, + supports: { + align: [ 'wide', 'full' ], + anchor: true, + html: false, + __experimentalLayout: true, + }, + save( { attributes: { tagName: Tag = 'div' } } ) { + const blockProps = useBlockProps.save(); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + return ; }, + isEligible: ( { displayLayout } ) => !! displayLayout, + migrate: migrateDisplayLayout, }; -const deprecated = [ v4, v3, v2, v1 ]; +const deprecated = [ v5, v4, v3, v2, v1 ]; export default deprecated; diff --git a/test/integration/fixtures/blocks/core__query.serialized.html b/test/integration/fixtures/blocks/core__query.serialized.html index 049ea7dd2bb73d..9ddb9f2cfe6b6d 100644 --- a/test/integration/fixtures/blocks/core__query.serialized.html +++ b/test/integration/fixtures/blocks/core__query.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html index 39f889cfae97e1..915726d992a8f9 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json index 82bc41a40fb1b5..8a048667f55afd 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json @@ -21,10 +21,7 @@ "post_tag": [ 6 ] } }, - "tagName": "div", - "displayLayout": { - "type": "list" - } + "tagName": "div" }, "innerBlocks": [ { @@ -50,7 +47,11 @@ { "name": "core/post-template", "isValid": true, - "attributes": {}, + "attributes": { + "layout": { + "type": "default" + } + }, "innerBlocks": [ { "name": "core/post-title", diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html index f86b4f26ecc1d1..b9e6b50deb0677 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.serialized.html @@ -1,6 +1,6 @@ - +
-
+
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.json b/test/integration/fixtures/blocks/core__query__deprecated-2.json index a63ad1c007b6b1..b0a1aea41ea506 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-2.json @@ -21,16 +21,17 @@ "post_tag": [ 6 ] } }, - "tagName": "div", - "displayLayout": { - "type": "list" - } + "tagName": "div" }, "innerBlocks": [ { "name": "core/post-template", "isValid": true, - "attributes": {}, + "attributes": { + "layout": { + "type": "default" + } + }, "innerBlocks": [ { "name": "core/post-title", diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html index 5804c54e577f14..2016bea9635928 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html @@ -1,5 +1,5 @@ - -
+ +
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html index edbf5b1a0557b3..958c26f29caabe 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html @@ -1,4 +1,4 @@ - +
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.json b/test/integration/fixtures/blocks/core__query__deprecated-4.json index 2870009875a018..d0509a039dd763 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json @@ -18,9 +18,6 @@ "inherit": true }, "tagName": "main", - "displayLayout": { - "type": "list" - }, "layout": { "inherit": true } diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.html b/test/integration/fixtures/blocks/core__query__deprecated-5.html new file mode 100644 index 00000000000000..8fa06d5fdf2f5a --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.html @@ -0,0 +1,6 @@ + +
+ + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.json b/test/integration/fixtures/blocks/core__query__deprecated-5.json new file mode 100644 index 00000000000000..e42b7e50cd112c --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.json @@ -0,0 +1,46 @@ +[ + { + "name": "core/query", + "isValid": false, + "attributes": { + "queryId": 0, + "query": { + "perPage": 10, + "pages": 0, + "offset": 0, + "postType": "post", + "order": "desc", + "orderBy": "date", + "author": "", + "search": "", + "exclude": [], + "sticky": "", + "inherit": true + }, + "tagName": "main", + "layout": { + "type": "constrained" + } + }, + "innerBlocks": [ + { + "name": "core/post-template", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "name": "core/post-title", + "isValid": true, + "attributes": { + "level": 2, + "isLink": false, + "rel": "", + "linkTarget": "_self" + }, + "innerBlocks": [] + } + ] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json new file mode 100644 index 00000000000000..0fa19037d9ac5b --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json @@ -0,0 +1,51 @@ +[ + { + "blockName": "core/query", + "attrs": { + "queryId": 0, + "query": { + "perPage": 10, + "pages": 0, + "offset": 0, + "postType": "post", + "order": "desc", + "orderBy": "date", + "author": "", + "search": "", + "exclude": [], + "sticky": "", + "inherit": true + }, + "tagName": "main", + "displayLayout": { + "type": "list" + }, + "layout": { + "type": "constrained" + } + }, + "innerBlocks": [ + { + "blockName": "core/post-template", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/post-title", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } + ], + "innerHTML": "\n \n ", + "innerContent": [ "\n ", null, "\n " ] + } + ], + "innerHTML": "\n
\n
\n", + "innerContent": [ + "\n
", + null, + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html new file mode 100644 index 00000000000000..b1f2deb693952b --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html @@ -0,0 +1,7 @@ + +
+ + + +
+ From c16dd860711e0a25da7966974bfb8cdfc7da7eea Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 4 May 2023 11:29:18 +1000 Subject: [PATCH 16/28] Fix broken loop --- packages/block-library/src/query/deprecated.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js index 8f348e26bcd93d..de83ca94e41c04 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -144,13 +144,14 @@ const migrateToConstrainedLayout = ( attributes ) => { const findPostTemplateBlock = ( innerBlocks = [] ) => { let foundBlock = null; - innerBlocks.forEach( ( block ) => { + for ( const block of innerBlocks ) { if ( block.name === 'core/post-template' ) { foundBlock = block; + break; } else if ( block.innerBlocks.length ) { foundBlock = findPostTemplateBlock( block.innerBlocks ); } - } ); + } return foundBlock; }; @@ -511,7 +512,9 @@ const v5 = { const innerBlocksProps = useInnerBlocksProps.save( blockProps ); return ; }, - isEligible: ( { displayLayout } ) => !! displayLayout, + isEligible: ( { displayLayout } ) => { + return !! displayLayout; + }, migrate: migrateDisplayLayout, }; From 41f86d6cf3313d47dda036a503f69f3919a728c2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 4 May 2023 11:33:09 +1000 Subject: [PATCH 17/28] Update fixtures --- .../fixtures/blocks/core__query__deprecated-3.json | 10 +++++----- .../blocks/core__query__deprecated-3.serialized.html | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json index 2c682de49bdda6..0e4995e75be62e 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-3.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json @@ -18,10 +18,6 @@ "inherit": false }, "tagName": "div", - "displayLayout": { - "type": "flex", - "columns": 3 - }, "align": "wide" }, "innerBlocks": [ @@ -49,7 +45,11 @@ "name": "core/post-template", "isValid": true, "attributes": { - "fontSize": "large" + "fontSize": "large", + "layout": { + "type": "grid", + "columnCount": 3 + } }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html index 958c26f29caabe..86c87dde71c3bd 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-3.serialized.html @@ -1,6 +1,6 @@
-
+
From 5cc52b00f7a84297d474092bad698b9417009c37 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 5 May 2023 14:34:04 +1000 Subject: [PATCH 18/28] Code improvements --- packages/block-editor/src/layouts/grid.js | 30 +++++++------------ .../block-library/src/post-template/edit.js | 1 - 2 files changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 508af5bc117988..c2cda643baa703 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -35,23 +35,13 @@ export default { layout = {}, onChange, } ) { - const { columnCount = null } = layout; - - return ( - <> - { columnCount && ( - - ) } - { ! columnCount && ( - - ) } - + return layout?.columnCount ? ( + + ) : ( + ); }, toolBarControls: function DefaultLayoutToolbarControls() { @@ -195,12 +185,12 @@ function GridLayoutColumnsControl( { layout, onChange } ) { { + onChange={ ( value ) => onChange( { ...layout, columnCount: value, - } ); - } } + } ) + } min={ 1 } max={ 6 } /> diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 12f6dc67fabf6b..c5d59cd0a46dbf 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -268,7 +268,6 @@ export default function PostTemplateEdit( { return ( <> - { ' ' } From 51a4cdaa01b4be4802d20021b71624193958f3a3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 24 May 2023 14:20:19 +1000 Subject: [PATCH 19/28] Add some comments to the CSS. --- packages/block-library/src/post-template/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-template/style.scss b/packages/block-library/src/post-template/style.scss index 0d92c05e504baa..00305a17123369 100644 --- a/packages/block-library/src/post-template/style.scss +++ b/packages/block-library/src/post-template/style.scss @@ -9,7 +9,7 @@ &.wp-block-post-template { background: none; } - + // These rules no longer apply but should be kept for backwards compatibility. &.is-flex-container { flex-direction: row; display: flex; @@ -32,6 +32,7 @@ } @media ( max-width: $break-small ) { + // Temporary specificity bump until "wp-container" layout specificity is revisited. .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid { grid-template-columns: 1fr; } From d7929b34dc09a71967d246f5a8c0ace38e9f4ec3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 26 May 2023 11:08:54 +1000 Subject: [PATCH 20/28] Add back deleted line --- docs/reference-guides/core-blocks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3b23968618f23e..399667511ae047 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -600,6 +600,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme +- **Parent:** core/query - **Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** From 6297e8501ef2e5c3b0b50db19bb3b0cff890c821 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 26 May 2023 17:00:56 +1000 Subject: [PATCH 21/28] Remove legacy attributes in deprecation --- packages/block-library/src/query/deprecated.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js index de83ca94e41c04..0881647ffcae36 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -131,11 +131,14 @@ const migrateToConstrainedLayout = ( attributes ) => { if ( ! layout ) { return attributes; } - if ( layout.inherit || layout.contentSize ) { + const { inherit = null, contentSize = null, ...newLayout } = layout; + + if ( inherit || contentSize ) { return { ...attributes, layout: { - ...layout, + ...newLayout, + contentSize, type: 'constrained', }, }; From 2e89c29bc41b9304eaa53a4da02200d8caa59aba Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 30 May 2023 10:58:25 +1000 Subject: [PATCH 22/28] Fix deprecation logic --- packages/block-library/src/query/deprecated.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js index 0881647ffcae36..1b937498d3f223 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -454,9 +454,8 @@ const v4 = { return ; }, isEligible: ( { layout } ) => - ! layout || - layout.inherit || - ( layout.contentSize && layout.type !== 'constrained' ), + layout?.inherit || + ( layout?.contentSize && layout?.type !== 'constrained' ), migrate( attributes, innerBlocks ) { const withConstrainedLayoutAttributes = migrateToConstrainedLayout( attributes ); From 8adb657ea57dc8da4414a10cf0973c7174dfa004 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 30 May 2023 11:23:49 +1000 Subject: [PATCH 23/28] Update fixtures --- test/integration/fixtures/blocks/core__query.json | 5 +---- test/integration/fixtures/blocks/core__query.serialized.html | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/test/integration/fixtures/blocks/core__query.json b/test/integration/fixtures/blocks/core__query.json index 4c7ce920a04506..fb545c16ea6953 100644 --- a/test/integration/fixtures/blocks/core__query.json +++ b/test/integration/fixtures/blocks/core__query.json @@ -18,10 +18,7 @@ "taxQuery": null, "parents": [] }, - "tagName": "div", - "displayLayout": { - "type": "list" - } + "tagName": "div" }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__query.serialized.html b/test/integration/fixtures/blocks/core__query.serialized.html index 9ddb9f2cfe6b6d..3bc4085f4f090d 100644 --- a/test/integration/fixtures/blocks/core__query.serialized.html +++ b/test/integration/fixtures/blocks/core__query.serialized.html @@ -1,3 +1,3 @@ - +
From be98e3186172969ea07ab966b91551c849bbed80 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 1 Jun 2023 14:32:13 +1000 Subject: [PATCH 24/28] Fallback gap for classic themes --- lib/class-wp-theme-json-gutenberg.php | 9 ++++++++- packages/block-library/src/post-template/block.json | 4 +++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index c27572e735ee1e..4ccec899ce78f3 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1075,9 +1075,11 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' } elseif ( in_array( 'base-layout-styles', $types, true ) ) { $root_selector = static::ROOT_BLOCK_SELECTOR; $columns_selector = '.wp-block-columns'; + $post_template_selector = '.wp-block-post-template'; if ( ! empty( $options['scope'] ) ) { $root_selector = static::scope_selector( $options['scope'], $root_selector ); $columns_selector = static::scope_selector( $options['scope'], $columns_selector ); + $post_template_selector = static::scope_selector( $options['scope'], $post_template_selector ); } if ( ! empty( $options['root_selector'] ) ) { $root_selector = $options['root_selector']; @@ -1094,6 +1096,11 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' 'selector' => $columns_selector, 'name' => 'core/columns', ), + array( + 'path' => array( 'styles', 'blocks', 'core/post-template' ), + 'selector' => $post_template_selector, + 'name' => 'core/post-template', + ), ); foreach ( $base_styles_nodes as $base_style_node ) { @@ -1298,7 +1305,7 @@ protected function get_layout_styles( $block_metadata ) { if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) { foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) { // Allow outputting fallback gap styles for flex layout type when block gap support isn't available. - if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) { + if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key && 'grid' !== $layout_definition_key ) { continue; } diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index 7653fa3eba033a..f0b3b2ac7b35f6 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -43,7 +43,9 @@ } }, "spacing": { - "blockGap": true, + "blockGap": { + "__experimentalDefault": "1.5rem" + }, "__experimentalDefaultControls": { "blockGap": true } From 5c23ca9efe576db77fa25407baf073c12e1bd71e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 1 Jun 2023 14:42:07 +1000 Subject: [PATCH 25/28] fix spacing --- lib/class-wp-theme-json-gutenberg.php | 8 ++++---- .../components/global-styles/use-global-styles-output.js | 6 +++++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 4ccec899ce78f3..0c581154b62e85 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1073,12 +1073,12 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' } $stylesheet .= $this->get_block_classes( $style_nodes ); } elseif ( in_array( 'base-layout-styles', $types, true ) ) { - $root_selector = static::ROOT_BLOCK_SELECTOR; - $columns_selector = '.wp-block-columns'; + $root_selector = static::ROOT_BLOCK_SELECTOR; + $columns_selector = '.wp-block-columns'; $post_template_selector = '.wp-block-post-template'; if ( ! empty( $options['scope'] ) ) { - $root_selector = static::scope_selector( $options['scope'], $root_selector ); - $columns_selector = static::scope_selector( $options['scope'], $columns_selector ); + $root_selector = static::scope_selector( $options['scope'], $root_selector ); + $columns_selector = static::scope_selector( $options['scope'], $columns_selector ); $post_template_selector = static::scope_selector( $options['scope'], $post_template_selector ); } if ( ! empty( $options['root_selector'] ) ) { diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 55dbab06de1529..4ec833ced3de7d 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -448,7 +448,11 @@ export function getLayoutStyles( { Object.values( tree.settings.layout.definitions ).forEach( ( { className, name, spacingStyles } ) => { // Allow outputting fallback gap styles for flex layout type when block gap support isn't available. - if ( ! hasBlockGapSupport && 'flex' !== name ) { + if ( + ! hasBlockGapSupport && + 'flex' !== name && + 'grid' !== name + ) { return; } From 82b6193b128a940f62b0b2f8c4c257b9b084b633 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 1 Jun 2023 14:59:42 +1000 Subject: [PATCH 26/28] match old default value --- packages/block-library/src/post-template/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index f0b3b2ac7b35f6..1a5426253dbf3f 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -44,7 +44,7 @@ }, "spacing": { "blockGap": { - "__experimentalDefault": "1.5rem" + "__experimentalDefault": "1.25em" }, "__experimentalDefaultControls": { "blockGap": true From bb9695cf6f779328750ec8e1459a6269041cc3dc Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 1 Jun 2023 15:57:08 +1000 Subject: [PATCH 27/28] Update PHP test strings. --- phpunit/class-wp-theme-json-test.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 7d63f62a2c1f0e..043cd4916eac80 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -215,7 +215,7 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles( $ // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility. $this->assertEquals( - ':where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}', + ':where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}', $stylesheet ); } From 3392f83b86816252a9ddedf521d35a417b988333 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 2 Jun 2023 12:59:12 +1000 Subject: [PATCH 28/28] Fix tag discrepancy in fixtures --- .../fixtures/blocks/core__query__deprecated-4.html | 2 +- .../fixtures/blocks/core__query__deprecated-4.json | 13 +++++++++---- .../blocks/core__query__deprecated-4.parsed.json | 1 - .../core__query__deprecated-4.serialized.html | 8 +++----- .../fixtures/blocks/core__query__deprecated-5.html | 2 +- .../fixtures/blocks/core__query__deprecated-5.json | 10 +++++++--- .../blocks/core__query__deprecated-5.parsed.json | 1 - .../core__query__deprecated-5.serialized.html | 8 +++----- 8 files changed, 24 insertions(+), 21 deletions(-) diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.html b/test/integration/fixtures/blocks/core__query__deprecated-4.html index 20aec9638688e5..9a2b39db018f56 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.html @@ -1,4 +1,4 @@ - +
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.json b/test/integration/fixtures/blocks/core__query__deprecated-4.json index d0509a039dd763..620e1ecefef130 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json @@ -1,7 +1,7 @@ [ { "name": "core/query", - "isValid": false, + "isValid": true, "attributes": { "queryId": 0, "query": { @@ -17,16 +17,21 @@ "sticky": "", "inherit": true }, - "tagName": "main", + "tagName": "div", "layout": { - "inherit": true + "contentSize": null, + "type": "constrained" } }, "innerBlocks": [ { "name": "core/post-template", "isValid": true, - "attributes": {}, + "attributes": { + "layout": { + "type": "default" + } + }, "innerBlocks": [ { "name": "core/post-title", diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json index 529a440b12eeb2..1ce908fa81ac70 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json @@ -16,7 +16,6 @@ "sticky": "", "inherit": true }, - "tagName": "main", "displayLayout": { "type": "list" }, diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html index f86c70b104550d..1ab2470d36159a 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html @@ -1,7 +1,5 @@ - -
- + +
- -
+
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.html b/test/integration/fixtures/blocks/core__query__deprecated-5.html index 8fa06d5fdf2f5a..d040961172cb98 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-5.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.html @@ -1,4 +1,4 @@ - +
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.json b/test/integration/fixtures/blocks/core__query__deprecated-5.json index e42b7e50cd112c..f74e9496b23902 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-5.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.json @@ -1,7 +1,7 @@ [ { "name": "core/query", - "isValid": false, + "isValid": true, "attributes": { "queryId": 0, "query": { @@ -17,7 +17,7 @@ "sticky": "", "inherit": true }, - "tagName": "main", + "tagName": "div", "layout": { "type": "constrained" } @@ -26,7 +26,11 @@ { "name": "core/post-template", "isValid": true, - "attributes": {}, + "attributes": { + "layout": { + "type": "default" + } + }, "innerBlocks": [ { "name": "core/post-title", diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json index 0fa19037d9ac5b..54a9d08581cb90 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json @@ -16,7 +16,6 @@ "sticky": "", "inherit": true }, - "tagName": "main", "displayLayout": { "type": "list" }, diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html index b1f2deb693952b..a185cf3285299b 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html @@ -1,7 +1,5 @@ - -
- + +
- -
+