From 82c26710f91dc07880ee580cf384d2b030d6a5a0 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 11 Dec 2024 16:05:01 +0800
Subject: [PATCH] Update DisableNonPageContentBlocks to not set block editor
 modes on all blocks at once

---
 .../disable-non-page-content-blocks.js        | 64 +++++++++++++++----
 1 file changed, 52 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
index c47a7e5d7de7f2..95295574c56a86 100644
--- a/packages/editor/src/components/provider/disable-non-page-content-blocks.js
+++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
@@ -36,15 +36,49 @@ export default function DisableNonPageContentBlocks() {
 
 	const registry = useRegistry();
 
+	// The code here is split into multiple `useEffects` calls.
+	// This is done to avoid setting/unsetting block editing modes multiple times unnecessarily.
+	//
+	// For example, the block editing mode of the root block (clientId: '') only
+	// needs to be set once, not when `contentOnlyIds` or `disabledIds` change.
+	//
+	// It's also unlikely that these different types of blocks are being inserted
+	// or removed at the same time, so using different effects reflects that.
+	useEffect( () => {
+		const { setBlockEditingMode, unsetBlockEditingMode } =
+			registry.dispatch( blockEditorStore );
+
+		setBlockEditingMode( '', 'disabled' );
+
+		return () => {
+			unsetBlockEditingMode( '' );
+		};
+	}, [ registry ] );
+
 	useEffect( () => {
 		const { setBlockEditingMode, unsetBlockEditingMode } =
 			registry.dispatch( blockEditorStore );
 
 		registry.batch( () => {
-			setBlockEditingMode( '', 'disabled' );
 			for ( const clientId of contentOnlyIds ) {
 				setBlockEditingMode( clientId, 'contentOnly' );
 			}
+		} );
+
+		return () => {
+			registry.batch( () => {
+				for ( const clientId of contentOnlyIds ) {
+					unsetBlockEditingMode( clientId );
+				}
+			} );
+		};
+	}, [ contentOnlyIds, registry ] );
+
+	useEffect( () => {
+		const { setBlockEditingMode, unsetBlockEditingMode } =
+			registry.dispatch( blockEditorStore );
+
+		registry.batch( () => {
 			if ( ! isNavigationMode ) {
 				for ( const clientId of templateParts ) {
 					setBlockEditingMode( clientId, 'contentOnly' );
@@ -57,27 +91,33 @@ export default function DisableNonPageContentBlocks() {
 
 		return () => {
 			registry.batch( () => {
-				unsetBlockEditingMode( '' );
-				for ( const clientId of contentOnlyIds ) {
-					unsetBlockEditingMode( clientId );
-				}
 				if ( ! isNavigationMode ) {
 					for ( const clientId of templateParts ) {
 						unsetBlockEditingMode( clientId );
 					}
 				}
+			} );
+		};
+	}, [ templateParts, isNavigationMode, registry, disabledIds ] );
+
+	useEffect( () => {
+		const { setBlockEditingMode, unsetBlockEditingMode } =
+			registry.dispatch( blockEditorStore );
+
+		registry.batch( () => {
+			for ( const clientId of disabledIds ) {
+				setBlockEditingMode( clientId, 'disabled' );
+			}
+		} );
+
+		return () => {
+			registry.batch( () => {
 				for ( const clientId of disabledIds ) {
 					unsetBlockEditingMode( clientId );
 				}
 			} );
 		};
-	}, [
-		templateParts,
-		contentOnlyIds,
-		disabledIds,
-		isNavigationMode,
-		registry,
-	] );
+	}, [ disabledIds, registry ] );
 
 	return null;
 }