From 19017d79663cff654076612e3c493e95cc5c928d Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Wed, 2 Jun 2021 08:28:17 -0700 Subject: [PATCH] Experimental Layout: pass the same object when no data changes (#32380) --- packages/block-library/src/group/edit.js | 26 ++++++++++----- .../block-library/src/post-content/edit.js | 25 +++++++++----- .../block-library/src/query/edit/index.js | 26 +++++++++------ .../src/template-part/edit/inner-blocks.js | 26 ++++++++++----- .../src/components/visual-editor/index.js | 33 ++++++++++--------- .../src/components/block-editor/index.js | 12 ++++--- 6 files changed, 90 insertions(+), 58 deletions(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index bcc3273771f493..4814c173afe7a8 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -12,6 +12,7 @@ import { } from '@wordpress/block-editor'; import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { useMemo } from '@wordpress/element'; function GroupEdit( { attributes, setAttributes, clientId } ) { const { hasInnerBlocks, themeSupportsLayout } = useSelect( @@ -29,10 +30,21 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { const { tagName: TagName = 'div', templateLock, layout = {} } = attributes; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; - const alignments = - contentSize || wideSize - ? [ 'wide', 'full' ] - : [ 'left', 'center', 'right' ]; + const _layout = useMemo( () => { + if ( themeSupportsLayout ) { + const alignments = + contentSize || wideSize + ? [ 'wide', 'full' ] + : [ 'left', 'center', 'right' ]; + return { + type: 'default', + // Find a way to inject this in the support flag code (hooks). + alignments, + }; + } + return undefined; + }, [ themeSupportsLayout, contentSize, wideSize ] ); + const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( themeSupportsLayout @@ -43,11 +55,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { renderAppender: hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender, - __experimentalLayout: { - type: 'default', - // Find a way to inject this in the support flag code (hooks). - alignments: themeSupportsLayout ? alignments : undefined, - }, + __experimentalLayout: _layout, } ); diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 146ba624df7778..2d39dae73a0b26 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -12,6 +12,7 @@ import { Warning, } from '@wordpress/block-editor'; import { useEntityBlockEditor } from '@wordpress/core-data'; +import { useMemo } from '@wordpress/element'; function Content( { layout, postType, postId } ) { const themeSupportsLayout = useSelect( ( select ) => { @@ -21,10 +22,20 @@ function Content( { layout, postType, postId } ) { const defaultLayout = useSetting( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; - const alignments = - contentSize || wideSize - ? [ 'wide', 'full' ] - : [ 'left', 'center', 'right' ]; + const _layout = useMemo( () => { + if ( themeSupportsLayout ) { + const alignments = + contentSize || wideSize + ? [ 'wide', 'full' ] + : [ 'left', 'center', 'right' ]; + return { + type: 'default', + // Find a way to inject this in the support flag code (hooks). + alignments, + }; + } + return undefined; + }, [ themeSupportsLayout, contentSize, wideSize ] ); const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', postType, @@ -36,11 +47,7 @@ function Content( { layout, postType, postId } ) { value: blocks, onInput, onChange, - __experimentalLayout: { - type: 'default', - // Find a way to inject this in the support flag code (hooks). - alignments: themeSupportsLayout ? alignments : undefined, - }, + __experimentalLayout: _layout, } ); return
; diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index 82a1bc5825d92a..4612033981426f 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -3,7 +3,7 @@ */ import { useSelect, useDispatch } from '@wordpress/data'; import { useInstanceId } from '@wordpress/compose'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useMemo } from '@wordpress/element'; import { BlockControls, InspectorAdvancedControls, @@ -44,18 +44,24 @@ export function QueryContent( { attributes, setAttributes } ) { const defaultLayout = useSetting( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; - const alignments = - contentSize || wideSize - ? [ 'wide', 'full' ] - : [ 'left', 'center', 'right' ]; const blockProps = useBlockProps(); + const _layout = useMemo( () => { + if ( themeSupportsLayout ) { + const alignments = + contentSize || wideSize + ? [ 'wide', 'full' ] + : [ 'left', 'center', 'right' ]; + return { + type: 'default', + // Find a way to inject this in the support flag code (hooks). + alignments, + }; + } + return undefined; + }, [ themeSupportsLayout, contentSize, wideSize ] ); const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, - __experimentalLayout: { - type: 'default', - // Find a way to inject this in the support flag code (hooks). - alignments: themeSupportsLayout ? alignments : undefined, - }, + __experimentalLayout: _layout, } ); const { postsPerPage } = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index ab08775d01c940..ae25b10bf401a9 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -9,6 +9,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; export default function TemplatePartInnerBlocks( { postId: id, @@ -24,10 +25,21 @@ export default function TemplatePartInnerBlocks( { const defaultLayout = useSetting( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; - const alignments = - contentSize || wideSize - ? [ 'wide', 'full' ] - : [ 'left', 'center', 'right' ]; + const _layout = useMemo( () => { + if ( themeSupportsLayout ) { + const alignments = + contentSize || wideSize + ? [ 'wide', 'full' ] + : [ 'left', 'center', 'right' ]; + return { + type: 'default', + // Find a way to inject this in the support flag code (hooks). + alignments, + }; + } + return undefined; + }, [ themeSupportsLayout, contentSize, wideSize ] ); + const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', 'wp_template_part', @@ -40,11 +52,7 @@ export default function TemplatePartInnerBlocks( { renderAppender: hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender, - __experimentalLayout: { - type: 'default', - // Find a way to inject this in the support flag code (hooks). - alignments: themeSupportsLayout ? alignments : undefined, - }, + __experimentalLayout: _layout, } ); return ; } diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index e7fd72736bc8b4..a1bd43cd8cca0b 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -31,7 +31,7 @@ import { __unstableIframe as Iframe, __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, } from '@wordpress/block-editor'; -import { useRef } from '@wordpress/element'; +import { useRef, useMemo } from '@wordpress/element'; import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; @@ -137,10 +137,6 @@ export default function VisualEditor( { styles } ) { const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode ); const defaultLayout = useSetting( 'layout' ); const { contentSize, wideSize } = defaultLayout || {}; - const alignments = - contentSize || wideSize - ? [ 'wide', 'full' ] - : [ 'left', 'center', 'right' ]; let animatedStyles = isTemplateMode ? templateModeStyles @@ -174,6 +170,21 @@ export default function VisualEditor( { styles } ) { wrapperBlockName ); + const layout = useMemo( () => { + if ( themeSupportsLayout ) { + const alignments = + contentSize || wideSize + ? [ 'wide', 'full' ] + : [ 'left', 'center', 'right' ]; + return { + type: 'default', + // Find a way to inject this in the support flag code (hooks). + alignments, + }; + } + return undefined; + }, [ themeSupportsLayout, contentSize, wideSize ] ); + return (
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index ebe97e3e7ea7b5..701941770a0451 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -30,6 +30,12 @@ import { SidebarInspectorFill } from '../sidebar'; import { store as editSiteStore } from '../../store'; import BlockInspectorButton from './block-inspector-button'; +const LAYOUT = { + type: 'default', + // At the root level of the site editor, no alignments should be allowed. + alignments: [], +}; + export default function BlockEditor( { setIsInserterOpen } ) { const { settings, templateType, page, deviceType } = useSelect( ( select ) => { @@ -94,11 +100,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {