diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index 747e25b820847d..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 */ @@ -20,11 +21,24 @@ 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 layoutSupport = hasBlockSupport( + name, + '__experimentalLayout', + false + ); const context = { name, isSelected, clientId, + layout: layoutSupport ? layout : null, __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..d83f62cf2b45cd 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -29,6 +29,9 @@ 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'; + +const EMPTY_OBJECT = {}; /** * InnerBlocks is a component which allows a single block to have multiple blocks @@ -53,7 +56,7 @@ function UncontrolledInnerBlocks( props ) { renderAppender, orientation, placeholder, - __experimentalLayout, + layout, } = props; useNestedSettingsUpdate( @@ -64,7 +67,7 @@ function UncontrolledInnerBlocks( props ) { templateLock, captureToolbars, orientation, - __experimentalLayout + layout ); useInnerBlockTemplateSync( @@ -82,17 +85,25 @@ function UncontrolledInnerBlocks( props ) { [ clientId ] ); - const { allowSizingOnChildren = false } = - getBlockSupport( name, '__experimentalLayout' ) || {}; + const defaultLayoutBlockSupport = + getBlockSupport( name, '__experimentalLayout' ) || EMPTY_OBJECT; + + const { allowSizingOnChildren = false } = defaultLayoutBlockSupport; + + const defaultLayout = useSetting( 'layout' ) || EMPTY_OBJECT; - const layout = useMemo( + 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 +114,7 @@ function UncontrolledInnerBlocks( props ) { rootClientId={ clientId } renderAppender={ renderAppender } __experimentalAppenderTagName={ __experimentalAppenderTagName } - __experimentalLayout={ layout } + __experimentalLayout={ memoedLayout } wrapperRef={ wrapperRef } placeholder={ placeholder } /> @@ -152,8 +163,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 +213,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/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/group/edit.js b/packages/block-library/src/group/edit.js index 1604d429fc6d67..452da6e7f32386 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..89a8c38b204dce 100644 --- a/packages/block-library/src/query/deprecated.js +++ b/packages/block-library/src/query/deprecated.js @@ -296,6 +296,82 @@ 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 && layout.type !== 'constrained' ), + 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 055fe036ce4160..9563673917f57e 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 9ea51799c0fd54..d7bdf8ff7dc4f8 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 = { 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..20aec9638688e5 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.html @@ -0,0 +1,6 @@ + +
+ + +
+ \ 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..2870009875a018 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json @@ -0,0 +1,49 @@ +[ + { + "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", + "displayLayout": { + "type": "list" + }, + "layout": { + "inherit": true + } + }, + "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-4.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json new file mode 100644 index 00000000000000..529a440b12eeb2 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.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": { + "inherit": true + } + }, + "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-4.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html new file mode 100644 index 00000000000000..f86c70b104550d --- /dev/null +++ b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html @@ -0,0 +1,7 @@ + +
+ + + +
+