From 6bd0112a50d8b8924928b8006673920c8f9696db Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 27 Jan 2023 14:26:00 +1100 Subject: [PATCH 1/7] Always pass layout to inner blocks --- .../src/components/block-edit/index.js | 10 ++- .../src/components/inner-blocks/index.js | 32 +++++--- packages/block-editor/src/layouts/flow.js | 9 --- packages/block-library/src/buttons/edit.js | 4 +- .../src/comments-pagination/edit.js | 14 +--- packages/block-library/src/gallery/edit.js | 2 - packages/block-library/src/group/edit.js | 1 - .../src/navigation/edit/inner-blocks.js | 6 -- .../block-library/src/post-content/edit.js | 15 +--- .../src/query-pagination/edit.js | 14 +--- .../block-library/src/query/deprecated.js | 76 ++++++++++++++++++- .../src/query/edit/query-content.js | 11 --- .../block-library/src/social-links/edit.js | 13 ---- 13 files changed, 112 insertions(+), 95 deletions(-) diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index 747e25b820847d..38ba4150a36c9c 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -20,11 +20,19 @@ import { BlockEditContextProvider, useBlockEditContext } from './context'; export { useBlockEditContext }; export default function BlockEdit( props ) { - const { name, isSelected, clientId, __unstableLayoutClassNames } = props; + const { + name, + isSelected, + clientId, + attributes = {}, + __unstableLayoutClassNames, + } = props; + const { layout = null } = attributes; const context = { name, isSelected, clientId, + layout, __unstableLayoutClassNames, }; return ( diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 6be5ae690f7243..929eadb5c1334b 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -29,7 +29,7 @@ import { useBlockEditContext } from '../block-edit/context'; import useBlockSync from '../provider/use-block-sync'; import { store as blockEditorStore } from '../../store'; import useBlockDropZone from '../use-block-drop-zone'; - +import useSetting from '../use-setting'; /** * InnerBlocks is a component which allows a single block to have multiple blocks * as children. The UncontrolledInnerBlocks component is used whenever the inner @@ -53,7 +53,7 @@ function UncontrolledInnerBlocks( props ) { renderAppender, orientation, placeholder, - __experimentalLayout, + layout, } = props; useNestedSettingsUpdate( @@ -64,7 +64,7 @@ function UncontrolledInnerBlocks( props ) { templateLock, captureToolbars, orientation, - __experimentalLayout + layout ); useInnerBlockTemplateSync( @@ -82,17 +82,25 @@ function UncontrolledInnerBlocks( props ) { [ clientId ] ); - const { allowSizingOnChildren = false } = + const defaultLayoutBlockSupport = getBlockSupport( name, '__experimentalLayout' ) || {}; - const layout = useMemo( + const { allowSizingOnChildren = false } = defaultLayoutBlockSupport; + + const defaultLayout = useSetting( 'layout' ) || {}; + + const usedLayout = layout || defaultLayoutBlockSupport; + + const memoedLayout = useMemo( () => ( { - ...__experimentalLayout, + // Default layout will know about any content/wide size defined by the theme. + ...defaultLayout, + ...usedLayout, ...( allowSizingOnChildren && { allowSizingOnChildren: true, } ), } ), - [ __experimentalLayout, allowSizingOnChildren ] + [ defaultLayout, usedLayout, allowSizingOnChildren ] ); // This component needs to always be synchronous as it's the one changing @@ -103,7 +111,7 @@ function UncontrolledInnerBlocks( props ) { rootClientId={ clientId } renderAppender={ renderAppender } __experimentalAppenderTagName={ __experimentalAppenderTagName } - __experimentalLayout={ layout } + __experimentalLayout={ memoedLayout } wrapperRef={ wrapperRef } placeholder={ placeholder } /> @@ -152,8 +160,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => { export function useInnerBlocksProps( props = {}, options = {} ) { const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } = options; - const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } = - useBlockEditContext(); + const { + clientId, + layout = null, + __unstableLayoutClassNames: layoutClassNames = '', + } = useBlockEditContext(); const isSmallScreen = useViewportMatch( 'medium', '<' ); const { __experimentalCaptureToolbars, hasOverlay } = useSelect( ( select ) => { @@ -199,6 +210,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) { const innerBlocksProps = { __experimentalCaptureToolbars, + layout, ...options, }; const InnerBlocks = diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index ecc6779b9128dd..9367d5b91508a7 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -67,7 +67,6 @@ export default { info: alignmentInfo[ alignment ], } ) ); } - const { contentSize, wideSize } = layout; const alignments = [ { name: 'left' }, @@ -75,14 +74,6 @@ export default { { name: 'right' }, ]; - if ( contentSize ) { - alignments.unshift( { name: 'full' } ); - } - - if ( wideSize ) { - alignments.unshift( { name: 'wide', info: alignmentInfo.wide } ); - } - alignments.unshift( { name: 'none', info: alignmentInfo.none } ); return alignments; diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index f60f65b372214a..869968e5951a8f 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -36,7 +36,7 @@ const DEFAULT_BLOCK = { }; function ButtonsEdit( { attributes, className } ) { - const { fontSize, layout = {}, style } = attributes; + const { fontSize, style } = attributes; const blockProps = useBlockProps( { className: classnames( className, { 'has-custom-font-size': fontSize || style?.typography?.fontSize, @@ -59,7 +59,7 @@ function ButtonsEdit( { attributes, className } ) { { className: preferredStyle && `is-style-${ preferredStyle }` }, ], ], - __experimentalLayout: layout, + templateInsertUpdatesSelection: true, } ); diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js index de07a678395b35..9837dda14e6810 100644 --- a/packages/block-library/src/comments-pagination/edit.js +++ b/packages/block-library/src/comments-pagination/edit.js @@ -10,7 +10,6 @@ import { Warning, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; -import { getBlockSupport } from '@wordpress/blocks'; import { PanelBody } from '@wordpress/components'; /** @@ -29,21 +28,11 @@ const ALLOWED_BLOCKS = [ 'core/comments-pagination-next', ]; -const getDefaultBlockLayout = ( blockTypeOrName ) => { - const layoutBlockSupportConfig = getBlockSupport( - blockTypeOrName, - '__experimentalLayout' - ); - return layoutBlockSupportConfig?.default; -}; - export default function QueryPaginationEdit( { - attributes: { paginationArrow, layout }, + attributes: { paginationArrow }, setAttributes, clientId, - name, } ) { - const usedLayout = layout || getDefaultBlockLayout( name ); const hasNextPreviousBlocks = useSelect( ( select ) => { const { getBlocks } = select( blockEditorStore ); const innerBlocks = getBlocks( clientId ); @@ -64,7 +53,6 @@ export default function QueryPaginationEdit( { const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, allowedBlocks: ALLOWED_BLOCKS, - __experimentalLayout: usedLayout, } ); // Get the Discussion settings diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index eae1bfe610e27c..dc2be8ee34f3d5 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -73,7 +73,6 @@ const linkOptions = [ ]; const ALLOWED_MEDIA_TYPES = [ 'image' ]; const allowedBlocks = [ 'core/image' ]; -const LAYOUT = { type: 'default', alignments: [] }; const PLACEHOLDER_TEXT = Platform.isNative ? __( 'ADD MEDIA' ) @@ -531,7 +530,6 @@ function GalleryEdit( props ) { allowedBlocks, orientation: 'horizontal', renderAppender: false, - __experimentalLayout: LAYOUT, ...nativeInnerBlockProps, } ); diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index a2cd8bd8cbaf22..dd0b24ed2639d6 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -117,7 +117,6 @@ function GroupEdit( { renderAppender: hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender, - __experimentalLayout: layoutSupportEnabled ? usedLayout : undefined, __unstableDisableLayoutClassNames: ! layoutSupportEnabled, } ); diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js index cb7f9a171f72ad..7ad9667bb98d9e 100644 --- a/packages/block-library/src/navigation/edit/inner-blocks.js +++ b/packages/block-library/src/navigation/edit/inner-blocks.js @@ -31,11 +31,6 @@ const DEFAULT_BLOCK = { name: 'core/navigation-link', }; -const LAYOUT = { - type: 'default', - alignments: [], -}; - export default function NavigationInnerBlocks( { clientId, hasCustomPlaceholder, @@ -131,7 +126,6 @@ export default function NavigationInnerBlocks( { parentOrChildHasSelection ? InnerBlocks.ButtonBlockAppender : false, - __experimentalLayout: LAYOUT, placeholder: showPlaceholder ? placeholder : undefined, } ); diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index e190101aa05155..7b41baf0fbae21 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -2,14 +2,11 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; import { useBlockProps, useInnerBlocksProps, - useSetting, __experimentalRecursionProvider as RecursionProvider, __experimentalUseHasRecursion as useHasRecursion, - store as blockEditorStore, Warning, } from '@wordpress/block-editor'; import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data'; @@ -39,16 +36,9 @@ function ReadOnlyContent( { userCanEdit, postType, postId } ) { ); } -function EditableContent( { layout, context = {} } ) { +function EditableContent( { context = {} } ) { const { postType, postId } = context; - const themeSupportsLayout = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return getSettings()?.supportsLayout; - }, [] ); - const defaultLayout = useSetting( 'layout' ) || {}; - const usedLayout = ! layout?.type - ? { ...defaultLayout, ...layout, type: 'default' } - : { ...defaultLayout, ...layout }; + const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', postType, @@ -61,7 +51,6 @@ function EditableContent( { layout, context = {} } ) { value: blocks, onInput, onChange, - __experimentalLayout: themeSupportsLayout ? usedLayout : undefined, } ); return
; diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js index 287dc83d99b4b0..28e6af19ace347 100644 --- a/packages/block-library/src/query-pagination/edit.js +++ b/packages/block-library/src/query-pagination/edit.js @@ -9,7 +9,6 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; -import { getBlockSupport } from '@wordpress/blocks'; import { PanelBody } from '@wordpress/components'; /** @@ -28,21 +27,11 @@ const ALLOWED_BLOCKS = [ 'core/query-pagination-next', ]; -const getDefaultBlockLayout = ( blockTypeOrName ) => { - const layoutBlockSupportConfig = getBlockSupport( - blockTypeOrName, - '__experimentalLayout' - ); - return layoutBlockSupportConfig?.default; -}; - export default function QueryPaginationEdit( { - attributes: { paginationArrow, layout }, + attributes: { paginationArrow }, setAttributes, clientId, - name, } ) { - const usedLayout = layout || getDefaultBlockLayout( name ); const hasNextPreviousBlocks = useSelect( ( select ) => { const { getBlocks } = select( blockEditorStore ); const innerBlocks = getBlocks( clientId ); @@ -61,7 +50,6 @@ export default function QueryPaginationEdit( { const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, allowedBlocks: ALLOWED_BLOCKS, - __experimentalLayout: usedLayout, } ); return ( <> diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js index b23455d50489b5..fa3706457981b5 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -296,6 +296,80 @@ const v3 = { }, }; -const deprecated = [ v3, v2, v1 ]; +const v4 = { + 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' ], + html: false, + color: { + gradients: true, + link: true, + __experimentalDefaultControls: { + background: true, + text: true, + }, + }, + __experimentalLayout: true, + }, + save( { attributes: { tagName: Tag = 'div' } } ) { + const blockProps = useBlockProps.save(); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + return ; + }, + isEligible: ( { layout } ) => + ! layout || layout.inherit || layout.contentSize, + migrate: ( attributes ) => { + const { layout = null } = attributes; + if ( ! layout ) { + return attributes; + } + if ( layout.inherit || layout.contentSize ) { + return { + ...attributes, + layout: { + ...layout, + type: 'constrained', + }, + }; + } + }, +}; + +const deprecated = [ v4, v3, v2, v1 ]; export default deprecated; diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js index 193499709d0689..655cfc8dce4c34 100644 --- a/packages/block-library/src/query/edit/query-content.js +++ b/packages/block-library/src/query/edit/query-content.js @@ -8,7 +8,6 @@ import { BlockControls, InspectorControls, useBlockProps, - useSetting, store as blockEditorStore, useInnerBlocksProps, } from '@wordpress/block-editor'; @@ -36,23 +35,13 @@ export default function QueryContent( { query, displayLayout, tagName: TagName = 'div', - layout = {}, } = attributes; const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); const instanceId = useInstanceId( QueryContent ); - const { themeSupportsLayout } = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return { themeSupportsLayout: getSettings()?.supportsLayout }; - }, [] ); - const defaultLayout = useSetting( 'layout' ) || {}; - const usedLayout = ! layout?.type - ? { ...defaultLayout, ...layout, type: 'default' } - : { ...defaultLayout, ...layout }; const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, - __experimentalLayout: themeSupportsLayout ? usedLayout : undefined, } ); const { postsPerPage } = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 91d688d50d8ec2..ce2f23650bc9e1 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -6,7 +6,6 @@ import classNames from 'classnames'; /** * WordPress dependencies */ -import { getBlockSupport } from '@wordpress/blocks'; import { useEffect, useRef } from '@wordpress/element'; import { BlockControls, @@ -37,18 +36,9 @@ const sizeOptions = [ { name: __( 'Huge' ), value: 'has-huge-icon-size' }, ]; -const getDefaultBlockLayout = ( blockTypeOrName ) => { - const layoutBlockSupportConfig = getBlockSupport( - blockTypeOrName, - '__experimentalLayout' - ); - return layoutBlockSupportConfig?.default; -}; - export function SocialLinksEdit( props ) { const { clientId, - name, attributes, iconBackgroundColor, iconColor, @@ -65,9 +55,7 @@ export function SocialLinksEdit( props ) { openInNewTab, showLabels, size, - layout, } = attributes; - const usedLayout = layout || getDefaultBlockLayout( name ); const logosOnly = attributes.className?.includes( 'is-style-logos-only' ); @@ -122,7 +110,6 @@ export function SocialLinksEdit( props ) { placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder, templateLock: false, __experimentalAppenderTagName: 'li', - __experimentalLayout: usedLayout, } ); const POPOVER_PROPS = { From b5cc279dbaf82ffb72d3c4293bc145e871efe175 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 30 Jan 2023 13:48:46 +1100 Subject: [PATCH 2/7] Fix migration eligibility rule. --- packages/block-library/src/group/deprecated.js | 4 +++- packages/block-library/src/query/deprecated.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js index 2a3ec02c5ed962..dc523d9d512a32 100644 --- a/packages/block-library/src/group/deprecated.js +++ b/packages/block-library/src/group/deprecated.js @@ -108,7 +108,9 @@ const deprecated = [ ); }, isEligible: ( { layout } ) => - ! layout || layout.inherit || layout.contentSize, + ! layout || + layout.inherit || + ( layout.contentSize && layout.type !== 'constrained' ), migrate: ( attributes ) => { const { layout = null } = attributes; if ( ! layout ) { diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js index fa3706457981b5..89a8c38b204dce 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -352,7 +352,9 @@ const v4 = { return ; }, isEligible: ( { layout } ) => - ! layout || layout.inherit || layout.contentSize, + ! layout || + layout.inherit || + ( layout.contentSize && layout.type !== 'constrained' ), migrate: ( attributes ) => { const { layout = null } = attributes; if ( ! layout ) { From f30132753bdcb6fe2085af0f72ac004b8d79d9fb Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 30 Jan 2023 13:55:45 +1100 Subject: [PATCH 3/7] Use stable fallback object. --- packages/block-editor/src/components/inner-blocks/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 929eadb5c1334b..bec315c5d0dd23 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -82,12 +82,15 @@ function UncontrolledInnerBlocks( props ) { [ clientId ] ); + // Avoid creating new objects if there is no layout defined. + const emptyLayout = {}; + const defaultLayoutBlockSupport = - getBlockSupport( name, '__experimentalLayout' ) || {}; + getBlockSupport( name, '__experimentalLayout' ) || emptyLayout; const { allowSizingOnChildren = false } = defaultLayoutBlockSupport; - const defaultLayout = useSetting( 'layout' ) || {}; + const defaultLayout = useSetting( 'layout' ) || emptyLayout; const usedLayout = layout || defaultLayoutBlockSupport; From 7dde4892f5613477c548db994eca37859f42d7e1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 30 Jan 2023 14:07:32 +1100 Subject: [PATCH 4/7] Add deprecation fixture. --- .../blocks/core__query.serialized.html | 2 +- .../blocks/core__query__deprecated-4.html | 25 +++ .../blocks/core__query__deprecated-4.json | 136 ++++++++++++++++ .../core__query__deprecated-4.parsed.json | 149 ++++++++++++++++++ .../core__query__deprecated-4.serialized.html | 25 +++ 5 files changed, 336 insertions(+), 1 deletion(-) create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-4.html create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-4.json create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json create mode 100644 test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html diff --git a/test/integration/fixtures/blocks/core__query.serialized.html b/test/integration/fixtures/blocks/core__query.serialized.html index 3bc4085f4f090d..049ea7dd2bb73d 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-4.html b/test/integration/fixtures/blocks/core__query__deprecated-4.html new file mode 100644 index 00000000000000..63a39d0abb7033 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.html @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.json b/test/integration/fixtures/blocks/core__query__deprecated-4.json new file mode 100644 index 00000000000000..2989dd734164ca --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json @@ -0,0 +1,136 @@ +[ + { + "name": "core/query", + "isValid": true, + "attributes": { + "queryId": 3, + "query": { + "perPage": 3, + "pages": 0, + "offset": 0, + "postType": "post", + "order": "desc", + "orderBy": "date", + "author": "", + "search": "", + "exclude": [], + "sticky": "", + "inherit": false + }, + "tagName": "div", + "displayLayout": { + "type": "flex", + "columns": 3 + }, + "align": "wide", + "layout": { + "inherit": true + } + }, + "innerBlocks": [ + { + "name": "core/group", + "isValid": true, + "attributes": { + "tagName": "div", + "textColor": "pale-cyan-blue", + "style": { + "color": { + "background": "#284d5f" + }, + "elements": { + "link": { + "color": { + "text": "var:preset|color|luminous-vivid-amber" + } + } + } + } + }, + "innerBlocks": [ + { + "name": "core/post-template", + "isValid": true, + "attributes": { + "fontSize": "large" + }, + "innerBlocks": [ + { + "name": "core/post-title", + "isValid": true, + "attributes": { + "level": 2, + "isLink": false, + "rel": "", + "linkTarget": "_self" + }, + "innerBlocks": [] + }, + { + "name": "core/post-date", + "isValid": true, + "attributes": { + "isLink": false, + "displayType": "date" + }, + "innerBlocks": [] + }, + { + "name": "core/post-excerpt", + "isValid": true, + "attributes": { + "showMoreOnNewLine": true + }, + "innerBlocks": [] + } + ] + }, + { + "name": "core/query-pagination", + "isValid": true, + "attributes": { + "paginationArrow": "none" + }, + "innerBlocks": [ + { + "name": "core/query-pagination-previous", + "isValid": true, + "attributes": {}, + "innerBlocks": [] + }, + { + "name": "core/query-pagination-numbers", + "isValid": true, + "attributes": {}, + "innerBlocks": [] + }, + { + "name": "core/query-pagination-next", + "isValid": true, + "attributes": {}, + "innerBlocks": [] + } + ] + }, + { + "name": "core/query-no-results", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "No results found.", + "dropCap": false, + "placeholder": "Add text or blocks that will display when a query returns no results." + }, + "innerBlocks": [] + } + ] + } + ] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json new file mode 100644 index 00000000000000..7ff9a14f0764c1 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json @@ -0,0 +1,149 @@ +[ + { + "blockName": "core/query", + "attrs": { + "queryId": 3, + "query": { + "perPage": 3, + "pages": 0, + "offset": 0, + "postType": "post", + "order": "desc", + "orderBy": "date", + "author": "", + "search": "", + "exclude": [], + "sticky": "", + "inherit": false + }, + "displayLayout": { + "type": "flex", + "columns": 3 + }, + "align": "wide", + "style": { + "color": { + "background": "#284d5f" + }, + "elements": { + "link": { + "color": { + "text": "var:preset|color|luminous-vivid-amber" + } + } + } + }, + "textColor": "pale-cyan-blue", + "layout": { + "inherit": true + } + }, + "innerBlocks": [ + { + "blockName": "core/post-template", + "attrs": { + "fontSize": "large" + }, + "innerBlocks": [ + { + "blockName": "core/post-title", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/post-date", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/post-excerpt", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } + ], + "innerHTML": "\n \n\n \n\n \n ", + "innerContent": [ + "\n ", + null, + "\n\n ", + null, + "\n\n ", + null, + "\n " + ] + }, + { + "blockName": "core/query-pagination", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/query-pagination-previous", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/query-pagination-numbers", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/query-pagination-next", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } + ], + "innerHTML": "\n \n\n \n\n \n ", + "innerContent": [ + "\n ", + null, + "\n\n ", + null, + "\n\n ", + null, + "\n " + ] + }, + { + "blockName": "core/query-no-results", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "placeholder": "Add text or blocks that will display when a query returns no results." + }, + "innerBlocks": [], + "innerHTML": "\n

No results found.

\n ", + "innerContent": [ + "\n

No results found.

\n " + ] + } + ], + "innerHTML": "\n \n ", + "innerContent": [ "\n ", null, "\n " ] + } + ], + "innerHTML": "\n
\n\n \n\n \n
\n", + "innerContent": [ + "\n
", + null, + "\n\n ", + null, + "\n\n ", + null, + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html new file mode 100644 index 00000000000000..161c71a46868b8 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html @@ -0,0 +1,25 @@ + +
+ +
+ From ebe258d2a6ac268a73e867b6285e7e01e43a0227 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 31 Jan 2023 09:58:21 +1100 Subject: [PATCH 5/7] Use existing EMPTY_OBJECT pattern --- .../block-editor/src/components/inner-blocks/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index bec315c5d0dd23..d83f62cf2b45cd 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -30,6 +30,9 @@ import useBlockSync from '../provider/use-block-sync'; import { store as blockEditorStore } from '../../store'; import useBlockDropZone from '../use-block-drop-zone'; import useSetting from '../use-setting'; + +const EMPTY_OBJECT = {}; + /** * InnerBlocks is a component which allows a single block to have multiple blocks * as children. The UncontrolledInnerBlocks component is used whenever the inner @@ -82,15 +85,12 @@ function UncontrolledInnerBlocks( props ) { [ clientId ] ); - // Avoid creating new objects if there is no layout defined. - const emptyLayout = {}; - const defaultLayoutBlockSupport = - getBlockSupport( name, '__experimentalLayout' ) || emptyLayout; + getBlockSupport( name, '__experimentalLayout' ) || EMPTY_OBJECT; const { allowSizingOnChildren = false } = defaultLayoutBlockSupport; - const defaultLayout = useSetting( 'layout' ) || emptyLayout; + const defaultLayout = useSetting( 'layout' ) || EMPTY_OBJECT; const usedLayout = layout || defaultLayoutBlockSupport; From f1acfb5c5c32a39e559e565d82f6bb972aff4af1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 31 Jan 2023 14:39:22 +1100 Subject: [PATCH 6/7] Check if block has layout support before adding layout to context. --- packages/block-editor/src/components/block-edit/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index 38ba4150a36c9c..d24f8301c85fb8 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -3,6 +3,7 @@ */ import { useMemo } from '@wordpress/element'; +import { hasBlockSupport } from '@wordpress/blocks'; /** * Internal dependencies */ @@ -28,11 +29,16 @@ export default function BlockEdit( props ) { __unstableLayoutClassNames, } = props; const { layout = null } = attributes; + const layoutSupport = hasBlockSupport( + name, + '__experimentalLayout', + false + ); const context = { name, isSelected, clientId, - layout, + layout: layoutSupport ? layout : null, __unstableLayoutClassNames, }; return ( From e28c0d75a1c28d45866b79ff690dd78881c511f7 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 31 Jan 2023 14:58:30 +1100 Subject: [PATCH 7/7] Simplify deprecation fixture markup. --- .../blocks/core__query__deprecated-4.html | 23 +--- .../blocks/core__query__deprecated-4.json | 115 +++--------------- .../core__query__deprecated-4.parsed.json | 114 ++--------------- .../core__query__deprecated-4.serialized.html | 26 +--- 4 files changed, 28 insertions(+), 250 deletions(-) diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.html b/test/integration/fixtures/blocks/core__query__deprecated-4.html index 63a39d0abb7033..20aec9638688e5 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-4.html +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.html @@ -1,25 +1,6 @@ - -