diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index b84d8edb8e9d98..399667511ae047 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -601,7 +601,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 @@ -657,7 +657,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/lib/block-supports/layout.php b/lib/block-supports/layout.php index 87cc4a6cc5f18f..adb84caf40f932 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['columnCount'] ) ) { + $layout_styles[] = array( + 'selector' => $selector, + 'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 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/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index c27572e735ee1e..0c581154b62e85 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1073,11 +1073,13 @@ 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'] ) ) { $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-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; } diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index 69347123fd4213..c2cda643baa703 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -35,7 +35,9 @@ export default { layout = {}, onChange, } ) { - return ( + return layout?.columnCount ? ( + + ) : ( ); } + +// Enables setting number of grid columns +function GridLayoutColumnsControl( { layout, onChange } ) { + const { columnCount = 3 } = layout; + + return ( + + onChange( { + ...layout, + columnCount: value, + } ) + } + min={ 1 } + max={ 6 } + /> + ); +} diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index 6c2056368d6449..1a5426253dbf3f 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, @@ -43,6 +41,14 @@ "__experimentalDefaultControls": { "fontSize": true } + }, + "spacing": { + "blockGap": { + "__experimentalDefault": "1.25em" + }, + "__experimentalDefaultControls": { + "blockGap": true + } } }, "style": "wp-block-post-template", diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 1acb3e57191758..c5d59cd0a46dbf 100644 --- a/packages/block-library/src/post-template/edit.js +++ b/packages/block-library/src/post-template/edit.js @@ -10,14 +10,16 @@ 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' ], @@ -70,6 +72,7 @@ function PostTemplateBlockPreview( { const MemoizedPostTemplateBlockPreview = memo( PostTemplateBlockPreview ); export default function PostTemplateEdit( { + setAttributes, clientId, context: { query: { @@ -95,11 +98,13 @@ export default function PostTemplateEdit( { } = {}, queryContext = [ { page: 1 } ], templateSlug, - displayLayout: { type: layoutType = 'flex', columns = 1 } = {}, previewPostType, }, + attributes: { layout }, __unstableLayoutClassNames, } ) { + const { type: layoutType, columnCount = 3 } = layout || {}; + const [ { page } ] = queryContext; const [ activeBlockContextId, setActiveBlockContextId ] = useState(); const { posts, blocks } = useSelect( @@ -215,12 +220,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 ) { @@ -235,35 +237,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: layoutType === 'default' || layoutType === 'constrained', + }, + { + icon: grid, + title: __( 'Grid view' ), + onClick: () => + setDisplayLayout( { + type: 'grid', + columnCount, + } ), + isActive: layoutType === 'grid', + }, + ]; + // 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/post-template/style.scss b/packages/block-library/src/post-template/style.scss index b1cdcf385e223c..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; @@ -30,3 +30,10 @@ } } } + +@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; + } +} 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..1b937498d3f223 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -126,6 +126,84 @@ 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; + } + const { inherit = null, contentSize = null, ...newLayout } = layout; + + if ( inherit || contentSize ) { + return { + ...attributes, + layout: { + ...newLayout, + contentSize, + type: 'constrained', + }, + }; + } +}; + +const findPostTemplateBlock = ( innerBlocks = [] ) => { + let foundBlock = null; + 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; +}; + +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 +238,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 +300,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 +379,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 ); @@ -355,26 +454,72 @@ const v4 = { return ; }, isEligible: ( { layout } ) => - ! 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', - }, - }; - } + layout?.inherit || + ( layout?.contentSize && 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 } ) => { + return !! displayLayout; }, + migrate: migrateDisplayLayout, }; -const deprecated = [ v4, v3, v2, v1 ]; +const deprecated = [ v5, v4, v3, v2, v1 ]; export default deprecated; 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..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,7 +101,7 @@ export default function QueryInspectorControls( props ) { const showInheritControl = isControlAllowed( allowedControls, 'inherit' ); const showPostTypeControl = ! inherit && isControlAllowed( allowedControls, 'postType' ); - const showColumnsControl = displayLayout?.type === 'flex'; + const showColumnsControl = false; const showOrderControl = ! inherit && isControlAllowed( allowedControls, 'order' ); const showStickyControl = @@ -169,7 +169,9 @@ export default function QueryInspectorControls( props ) { label={ __( 'Columns' ) } value={ displayLayout.columns } onChange={ ( value ) => - setDisplayLayout( { columns: value } ) + setDisplayLayout( { + columns: value, + } ) } min={ 2 } max={ Math.max( 6, displayLayout.columns ) } 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 1d079eb399fb80..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,24 +29,7 @@ export default function QueryToolbar( { QueryToolbar, 'blocks-query-pagination-max-page-input' ); - const displayLayoutControls = [ - { - icon: list, - title: __( 'List view' ), - onClick: () => setDisplayLayout( { type: 'list' } ), - isActive: displayLayout?.type === 'list', - }, - { - icon: grid, - title: __( 'Grid view' ), - onClick: () => - setDisplayLayout( { - type: 'flex', - columns: displayLayout?.columns || 3, - } ), - isActive: displayLayout?.type === 'flex', - }, - ]; + return ( <> { ! query.inherit && ( @@ -144,7 +126,6 @@ export default function QueryToolbar( { ) } - ); } 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 ); } 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 049ea7dd2bb73d..3bc4085f4f090d 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.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 edbf5b1a0557b3..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 @@ - +
-
+
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 2870009875a018..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,19 +17,21 @@ "sticky": "", "inherit": true }, - "tagName": "main", - "displayLayout": { - "type": "list" - }, + "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 new file mode 100644 index 00000000000000..d040961172cb98 --- /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..f74e9496b23902 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.json @@ -0,0 +1,50 @@ +[ + { + "name": "core/query", + "isValid": true, + "attributes": { + "queryId": 0, + "query": { + "perPage": 10, + "pages": 0, + "offset": 0, + "postType": "post", + "order": "desc", + "orderBy": "date", + "author": "", + "search": "", + "exclude": [], + "sticky": "", + "inherit": true + }, + "tagName": "div", + "layout": { + "type": "constrained" + } + }, + "innerBlocks": [ + { + "name": "core/post-template", + "isValid": true, + "attributes": { + "layout": { + "type": "default" + } + }, + "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..54a9d08581cb90 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json @@ -0,0 +1,50 @@ +[ + { + "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 + }, + "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..a185cf3285299b --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html @@ -0,0 +1,5 @@ + +
+ +
+