From 484a79d55a1372ec40101e09db3e8d5d19c056bf Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 1 Feb 2024 14:37:38 +0200 Subject: [PATCH 1/2] Block editor: reduce addpender sync! subscriptions --- .../components/block-list-appender/index.js | 81 ++----------------- .../src/components/block-list/index.js | 71 ++++++++++------ 2 files changed, 53 insertions(+), 99 deletions(-) diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index 68f36f7dd2505..928f9fc29d170 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -39,77 +39,12 @@ function DefaultAppender( { rootClientId } ) { ); } -function useAppender( rootClientId, CustomAppender ) { - const isVisible = useSelect( - ( select ) => { - const { - getTemplateLock, - getSelectedBlockClientId, - __unstableGetEditorMode, - getBlockEditingMode, - } = select( blockEditorStore ); - - if ( ! CustomAppender ) { - const selectedBlockClientId = getSelectedBlockClientId(); - const isParentSelected = - rootClientId === selectedBlockClientId || - ( ! rootClientId && ! selectedBlockClientId ); - if ( ! isParentSelected ) { - return false; - } - } - - if ( - getTemplateLock( rootClientId ) || - getBlockEditingMode( rootClientId ) === 'disabled' || - __unstableGetEditorMode() === 'zoom-out' - ) { - return false; - } - - return true; - }, - [ rootClientId, CustomAppender ] - ); - - if ( ! isVisible ) { - return null; - } - - return CustomAppender ? ( - - ) : ( - - ); -} - -function BlockListAppender( { +export default function BlockListAppender( { rootClientId, - renderAppender, + CustomAppender, className, tagName: TagName = 'div', } ) { - if ( renderAppender === false ) { - return null; - } - - return ( - - ); -} - -function BlockListAppenderInner( { - rootClientId, - renderAppender, - className, - tagName: TagName, -} ) { - const appender = useAppender( rootClientId, renderAppender ); const isDragOver = useSelect( ( select ) => { const { @@ -130,10 +65,6 @@ function BlockListAppenderInner( { [ rootClientId ] ); - if ( ! appender ) { - return null; - } - return ( - { appender } + { CustomAppender ? ( + + ) : ( + + ) } ); } - -export default BlockListAppender; diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 09a4712a3dd6d..2596d77cea737 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -151,29 +151,48 @@ export default function BlockList( settings ) { function Items( { placeholder, rootClientId, - renderAppender, + renderAppender: CustomAppender, __experimentalAppenderTagName, layout = defaultLayout, } ) { - const { order, selectedBlocks, visibleBlocks, temporarilyEditingAsBlocks } = - useSelect( - ( select ) => { - const { - getBlockOrder, - getSelectedBlockClientIds, - __unstableGetVisibleBlocks, - __unstableGetTemporarilyEditingAsBlocks, - } = select( blockEditorStore ); - return { - order: getBlockOrder( rootClientId ), - selectedBlocks: getSelectedBlockClientIds(), - visibleBlocks: __unstableGetVisibleBlocks(), - temporarilyEditingAsBlocks: - __unstableGetTemporarilyEditingAsBlocks(), - }; - }, - [ rootClientId ] - ); + const { + order, + selectedBlocks, + visibleBlocks, + temporarilyEditingAsBlocks, + shouldRenderAppender, + } = useSelect( + ( select ) => { + const { + getBlockOrder, + getSelectedBlockClientId, + getSelectedBlockClientIds, + __unstableGetVisibleBlocks, + __unstableGetTemporarilyEditingAsBlocks, + getTemplateLock, + getBlockEditingMode, + __unstableGetEditorMode, + } = select( blockEditorStore ); + const selectedBlockClientId = getSelectedBlockClientId(); + return { + order: getBlockOrder( rootClientId ), + selectedBlocks: getSelectedBlockClientIds(), + visibleBlocks: __unstableGetVisibleBlocks(), + temporarilyEditingAsBlocks: + __unstableGetTemporarilyEditingAsBlocks(), + shouldRenderAppender: + CustomAppender !== false && + ( CustomAppender + ? ! getTemplateLock( rootClientId ) && + ! getBlockEditingMode( rootClientId ) === + 'disabled' && + ! __unstableGetEditorMode() === 'zoom-out' + : rootClientId === selectedBlockClientId || + ( ! rootClientId && ! selectedBlockClientId ) ), + }; + }, + [ rootClientId, CustomAppender ] + ); return ( @@ -199,11 +218,13 @@ function Items( { clientId={ temporarilyEditingAsBlocks } /> ) } - + { shouldRenderAppender && ( + + ) } ); } From 4744c992aeb9073dad49d6381ab84ef51d5bc06a Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 1 Feb 2024 15:13:00 +0200 Subject: [PATCH 2/2] Fix condition --- .../src/components/block-list/index.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 2596d77cea737..a966c2850289d 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -155,6 +155,10 @@ function Items( { __experimentalAppenderTagName, layout = defaultLayout, } ) { + // Avoid passing CustomAppender to useSelect because it could be a new + // function on every render. + const hasAppender = CustomAppender !== false; + const hasCustomAppender = !! CustomAppender; const { order, selectedBlocks, @@ -181,17 +185,16 @@ function Items( { temporarilyEditingAsBlocks: __unstableGetTemporarilyEditingAsBlocks(), shouldRenderAppender: - CustomAppender !== false && - ( CustomAppender + hasAppender && + ( hasCustomAppender ? ! getTemplateLock( rootClientId ) && - ! getBlockEditingMode( rootClientId ) === - 'disabled' && - ! __unstableGetEditorMode() === 'zoom-out' + getBlockEditingMode( rootClientId ) !== 'disabled' && + __unstableGetEditorMode() !== 'zoom-out' : rootClientId === selectedBlockClientId || ( ! rootClientId && ! selectedBlockClientId ) ), }; }, - [ rootClientId, CustomAppender ] + [ rootClientId, hasAppender, hasCustomAppender ] ); return (