Block editor: fix performance regression after #57950 (#57971)

Author: ellatrix

packages/block-editor/src/components/block-edit/context.js

@@ -5,6 +5,7 @@ import { createContext, useContext } from '@wordpress/element';
 
 export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
 export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
+export const blockEditingModeKey = Symbol( 'blockEditingMode' );
 
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',

packages/block-editor/src/components/block-edit/index.js

@@ -13,6 +13,7 @@ import {
 	useBlockEditContext,
 	mayDisplayControlsKey,
 	mayDisplayParentControlsKey,
+	blockEditingModeKey,
 } from './context';
 
 /**
@@ -28,6 +29,7 @@ export { useBlockEditContext };
 export default function BlockEdit( {
 	mayDisplayControls,
 	mayDisplayParentControls,
+	blockEditingMode,
 	// The remaining props are passed through the BlockEdit filters and are thus
 	// public API!
 	...props
@@ -59,6 +61,7 @@ export default function BlockEdit( {
 					// usage outside of the package (this context is exposed).
 					[ mayDisplayControlsKey ]: mayDisplayControls,
 					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
+					[ blockEditingModeKey ]: blockEditingMode,
 				} ),
 				[
 					name,
@@ -69,6 +72,7 @@ export default function BlockEdit( {
 					__unstableLayoutClassNames,
 					mayDisplayControls,
 					mayDisplayParentControls,
+					blockEditingMode,
 				]
 			) }
 		>

packages/block-editor/src/components/block-editing-mode/index.js

@@ -2,13 +2,16 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useContext } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { PrivateBlockContext } from '../block-list/private-block-context';
+import {
+	useBlockEditContext,
+	blockEditingModeKey,
+} from '../block-edit/context';
 
 /**
  * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
@@ -45,8 +48,8 @@ import { PrivateBlockContext } from '../block-list/private-block-context';
  * @return {BlockEditingMode} The current editing mode.
  */
 export function useBlockEditingMode( mode ) {
-	const { clientId = '', blockEditingMode } =
-		useContext( PrivateBlockContext );
+	const context = useBlockEditContext();
+	const { clientId = '' } = context;
 	const { setBlockEditingMode, unsetBlockEditingMode } =
 		useDispatch( blockEditorStore );
 	const globalBlockEditingMode = useSelect(
@@ -65,5 +68,5 @@ export function useBlockEditingMode( mode ) {
 			}
 		};
 	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
-	return clientId ? blockEditingMode : globalBlockEditingMode;
+	return clientId ? context[ blockEditingModeKey ] : globalBlockEditingMode;
 }

packages/block-editor/src/components/block-list/block.js

@@ -133,6 +133,7 @@ function BlockListBlock( {
 			}
 			mayDisplayControls={ mayDisplayControls }
 			mayDisplayParentControls={ mayDisplayParentControls }
+			blockEditingMode={ context.blockEditingMode }
 		/>
 	);
 

packages/block-editor/src/components/block-list/block.native.js

@@ -42,7 +42,6 @@ import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import useScrollUponInsertion from './use-scroll-upon-insertion';
 import { useSettings } from '../use-settings';
-import { PrivateBlockContext } from './private-block-context';
 
 const EMPTY_ARRAY = [];
 
@@ -345,7 +344,7 @@ function BlockListBlock( {
 		order + 1
 	);
 
-	const block = (
+	return (
 		<BlockWrapper
 			accessibilityLabel={ accessibilityLabel }
 			blockCategory={ blockCategory }
@@ -397,24 +396,14 @@ function BlockListBlock( {
 							}
 							wrapperProps={ wrapperProps }
 							mayDisplayControls={ mayDisplayControls }
+							blockEditingMode={ blockEditingMode }
 						/>
 						<View onLayout={ onLayout } />
 					</GlobalStylesContext.Provider>
 				)
 			}
 		</BlockWrapper>
 	);
-
-	return (
-		<PrivateBlockContext.Provider
-			value={ {
-				clientId,
-				blockEditingMode,
-			} }
-		>
-			{ block }
-		</PrivateBlockContext.Provider>
-	);
 }
 
 const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {

packages/block-library/src/cover/test/edit.native.js

@@ -32,7 +32,6 @@ import {
 import { IMAGE_BACKGROUND_TYPE } from '../shared';
 import * as paragraph from '../../paragraph';
 import * as cover from '..';
-import { PrivateBlockContext } from '../../../../block-editor/src/components/block-list/private-block-context';
 
 // Avoid errors due to mocked stylesheet files missing required selectors.
 jest.mock( '@wordpress/compose', () => ( {
@@ -81,20 +80,14 @@ const MEDIA_OPTIONS = [
 // Simplified tree to render Cover edit within slot.
 const CoverEdit = ( props ) => (
 	<SlotFillProvider>
-		<PrivateBlockContext.Provider
-			value={ {
-				clientId: 0,
-			} }
-		>
-			<BlockEdit
-				isSelected
-				mayDisplayControls
-				name={ cover.name }
-				clientId={ 0 }
-				{ ...props }
-			/>
-			<BottomSheetSettings isVisible />
-		</PrivateBlockContext.Provider>
+		<BlockEdit
+			isSelected
+			mayDisplayControls
+			name={ cover.name }
+			clientId={ 0 }
+			{ ...props }
+		/>
+		<BottomSheetSettings isVisible />
 	</SlotFillProvider>
 );