Skip to content

Commit

Permalink
Experimental Layout: pass the same object when no data changes (#32380)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gwwar @youknowriad
gwwar authored and youknowriad committed Jun 7, 2021
1 parent d9508b5 commit 1c07f00
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 58 deletions.
26 changes: 17 additions & 9 deletions packages/block-library/src/group/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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
Expand All @@ -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,
}
);

Expand Down
25 changes: 16 additions & 9 deletions packages/block-library/src/post-content/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) => {
Expand All @@ -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,
Expand All @@ -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 <div { ...props } />;
Expand Down
26 changes: 16 additions & 10 deletions packages/block-library/src/query/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 );
Expand Down
26 changes: 17 additions & 9 deletions packages/block-library/src/template-part/edit/inner-blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
Expand All @@ -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 <TagName { ...innerBlocksProps } />;
}
33 changes: 17 additions & 16 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 (
<div
className={ classnames( 'edit-post-visual-editor', {
Expand Down Expand Up @@ -225,17 +236,7 @@ export default function VisualEditor( { styles } ) {
) }
<RecursionProvider>
<BlockList
__experimentalLayout={
themeSupportsLayout
? {
type: 'default',
// Find a way to inject this in the support flag code (hooks).
alignments: themeSupportsLayout
? alignments
: undefined,
}
: undefined
}
__experimentalLayout={ layout }
/>
</RecursionProvider>
</WritingFlow>
Expand Down
12 changes: 7 additions & 5 deletions packages/edit-site/src/components/block-editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) => {
Expand Down Expand Up @@ -94,11 +100,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
<WritingFlow>
<BlockList
className="edit-site-block-editor__block-list"
__experimentalLayout={ {
type: 'default',
// At the root level of the site editor, no alignments should be allowed.
alignments: [],
} }
__experimentalLayout={ LAYOUT }
/>
</WritingFlow>
</Iframe>
Expand Down

0 comments on commit 1c07f00

Please sign in to comment.