Block editor: reduce appender sync! subscriptions (#58556)

WordPress · Feb 1, 2024 · c3358a5 · c3358a5
1 parent 73a6abc
commit c3358a5
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 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
@@ -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 ? (
-		<CustomAppender />
-	) : (
-		<DefaultAppender rootClientId={ rootClientId } />
-	);
-}
-
-function BlockListAppender( {
+export default function BlockListAppender( {
 	rootClientId,
-	renderAppender,
+	CustomAppender,
 	className,
 	tagName: TagName = 'div',
 } ) {
-	if ( renderAppender === false ) {
-		return null;
-	}
-
-	return (
-		<BlockListAppenderInner
-			rootClientId={ rootClientId }
-			renderAppender={ renderAppender }
-			className={ className }
-			tagName={ TagName }
-		/>
-	);
-}
-
-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 (
 		<TagName
 			// A `tabIndex` is used on the wrapping `div` element in order to
@@ -162,9 +93,11 @@ function BlockListAppenderInner( {
 			// have commonly targeted that attribute for margins.
 			data-block
 		>
-			{ appender }
+			{ CustomAppender ? (
+				<CustomAppender />
+			) : (
+				<DefaultAppender rootClientId={ rootClientId } />
+			) }
 		</TagName>
 	);
 }
-
-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
@@ -151,29 +151,51 @@ 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 ]
-		);
+	// 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,
+		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:
+					hasAppender &&
+					( hasCustomAppender
+						? ! getTemplateLock( rootClientId ) &&
+						  getBlockEditingMode( rootClientId ) !== 'disabled' &&
+						  __unstableGetEditorMode() !== 'zoom-out'
+						: rootClientId === selectedBlockClientId ||
+						  ( ! rootClientId && ! selectedBlockClientId ) ),
+			};
+		},
+		[ rootClientId, hasAppender, hasCustomAppender ]
+	);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -199,11 +221,13 @@ function Items( {
 					clientId={ temporarilyEditingAsBlocks }
 				/>
 			) }
-			<BlockListAppender
-				tagName={ __experimentalAppenderTagName }
-				rootClientId={ rootClientId }
-				renderAppender={ renderAppender }
-			/>
+			{ shouldRenderAppender && (
+				<BlockListAppender
+					tagName={ __experimentalAppenderTagName }
+					rootClientId={ rootClientId }
+					CustomAppender={ CustomAppender }
+				/>
+			) }
 		</LayoutProvider>
 	);
 }