From 5b578471c296f2fc2802999ec337bb3d75173dcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 7 Mar 2023 21:29:02 +0200 Subject: [PATCH 1/4] Block editor: hooks: fix rules of hooks violations --- packages/block-editor/src/hooks/layout.js | 8 +++++--- packages/block-editor/src/hooks/position.js | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 0497edf74eea13..6b3a3124843642 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -50,6 +50,10 @@ export function useLayoutClasses( blockAttributes = {}, blockName ) { const { layout } = blockAttributes; + if ( ! hasBlockSupport( blockName, layoutBlockSupportKey ) ) { + return []; + } + const { default: defaultBlockLayout } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; const usedLayout = @@ -372,9 +376,7 @@ export const withLayoutStyles = createHigherOrderComponent( layout?.inherit || layout?.contentSize || layout?.wideSize ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; - const layoutClasses = hasLayoutBlockSupport - ? useLayoutClasses( attributes, name ) - : null; + const layoutClasses = useLayoutClasses( attributes, name ); // Higher specificity to override defaults from theme.json. const selector = `.wp-container-${ id }.wp-container-${ id }`; const blockGapSupport = useSetting( 'spacing.blockGap' ); diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 2c5589c1920bbd..c92cd280d67c27 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -322,8 +322,8 @@ export const withInspectorControls = createHigherOrderComponent( blockName, POSITION_SUPPORT_KEY ); - const showPositionControls = - positionSupport && ! useIsPositionDisabled( props ); + const isPositionDisabled = useIsPositionDisabled( props ); + const showPositionControls = positionSupport && ! isPositionDisabled; return [ showPositionControls && ( From e427d424fe852c9be070030753756823bb412ab8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 7 Mar 2023 23:07:10 +0200 Subject: [PATCH 2/4] Fix another instance --- packages/block-editor/src/hooks/position.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index c92cd280d67c27..ac3e459744a85a 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -349,8 +349,9 @@ export const withPositionStyles = createHigherOrderComponent( name, POSITION_SUPPORT_KEY ); + const isPositionDisabled = useIsPositionDisabled( props ); const allowPositionStyles = - hasPositionBlockSupport && ! useIsPositionDisabled( props ); + hasPositionBlockSupport && ! isPositionDisabled; const id = useInstanceId( BlockListBlock ); const element = useContext( BlockList.__unstableElementContext ); From 2919bbbc83321dbf3a572508370426f00661aea1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 8 Mar 2023 22:20:58 +0200 Subject: [PATCH 3/4] Reduce useSetting calls --- packages/block-editor/src/hooks/layout.js | 18 +++++++++++++----- .../src/components/visual-editor/index.js | 3 ++- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 6b3a3124843642..de09f424995b6b 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -35,18 +35,22 @@ const layoutBlockSupportKey = '__experimentalLayout'; /** * Generates the utility classnames for the given block's layout attributes. * - * @param { Object } blockAttributes Block attributes. - * @param { string } blockName Block name. + * @param {Object} blockAttributes Block attributes. + * @param {string} blockName Block name. + * @param {Object} globalLayoutSettings Global layout settings. * * @return { Array } Array of CSS classname strings. */ -export function useLayoutClasses( blockAttributes = {}, blockName ) { +export function useLayoutClasses( + blockAttributes = {}, + blockName, + globalLayoutSettings +) { const rootPaddingAlignment = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().__experimentalFeatures ?.useRootPaddingAwareAlignments; }, [] ); - const globalLayoutSettings = useSetting( 'layout' ) || {}; const { layout } = blockAttributes; @@ -376,7 +380,11 @@ export const withLayoutStyles = createHigherOrderComponent( layout?.inherit || layout?.contentSize || layout?.wideSize ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; - const layoutClasses = useLayoutClasses( attributes, name ); + const layoutClasses = useLayoutClasses( + attributes, + name, + defaultThemeLayout + ); // Higher specificity to override defaults from theme.json. const selector = `.wp-container-${ id }.wp-container-${ id }`; const blockGapSupport = useSetting( 'spacing.blockGap' ); diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 973d28a5ec9d36..d8883e6c752a81 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -259,7 +259,8 @@ export default function VisualEditor( { styles } ) { const postContentLayoutClasses = useLayoutClasses( newestPostContentAttributes, - 'core/post-content' + 'core/post-content', + globalLayoutSettings ); const blockListLayoutClass = classnames( From f600a0a67f26cb71576802b2fdc4f118b1ba0a3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 8 Mar 2023 23:12:46 +0200 Subject: [PATCH 4/4] Revert some changes to find perf regression --- packages/block-editor/src/hooks/position.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index ac3e459744a85a..2c5589c1920bbd 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -322,8 +322,8 @@ export const withInspectorControls = createHigherOrderComponent( blockName, POSITION_SUPPORT_KEY ); - const isPositionDisabled = useIsPositionDisabled( props ); - const showPositionControls = positionSupport && ! isPositionDisabled; + const showPositionControls = + positionSupport && ! useIsPositionDisabled( props ); return [ showPositionControls && ( @@ -349,9 +349,8 @@ export const withPositionStyles = createHigherOrderComponent( name, POSITION_SUPPORT_KEY ); - const isPositionDisabled = useIsPositionDisabled( props ); const allowPositionStyles = - hasPositionBlockSupport && ! isPositionDisabled; + hasPositionBlockSupport && ! useIsPositionDisabled( props ); const id = useInstanceId( BlockListBlock ); const element = useContext( BlockList.__unstableElementContext );