wip

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

@@ -117,9 +117,18 @@ function BlockPopover( {
 	const [ lastSelectedElement, setLastSelectedElement ] = useState();
 	const [ capturingElement, setCapturingElement ] = useState();
 
-	useBlockRef( clientId, setSelectedElement );
-	useBlockRef( lastClientId, setLastSelectedElement );
-	useBlockRef( capturingClientId, setCapturingElement );
+	useBlockRef(
+		clientId,
+		useCallback( ( node ) => node && setSelectedElement( node ), [] )
+	);
+	useBlockRef(
+		lastClientId,
+		useCallback( ( node ) => node && setLastSelectedElement( node ), [] )
+	);
+	useBlockRef(
+		capturingClientId,
+		useCallback( ( node ) => node && setCapturingElement( node ), [] )
+	);
 
 	if (
 		! shouldShowBreadcrumb &&

packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js

@@ -1,54 +1,34 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useReducer } from '@wordpress/element';
+import { useContext, useLayoutEffect, useReducer } from '@wordpress/element';
 
-const store = {
-	add( clientId, ref ) {
-		store[ clientId ] = store[ clientId ] || new Set();
-		store[ clientId ].add( ref );
-
-		if ( listeners[ clientId ] ) {
-			listeners[ clientId ]();
-		}
-	},
-	remove( clientId, ref ) {
-		store[ clientId ].delete( ref );
-
-		if ( listeners[ clientId ] ) {
-			listeners[ clientId ]();
-		}
-	},
-};
-
-const listeners = {
-	add( clientId, fn ) {
-		listeners[ clientId ] = fn;
-	},
-	remove( clientId ) {
-		delete listeners[ clientId ];
-	},
-};
+/**
+ * Internal dependencies
+ */
+import { BlockRefs } from '../../provider/block-refs-provider';
 
-function useUpdate( object, key, value ) {
+export function useRegisteredBlockRefs( clientId ) {
+	const { listeners, store } = useContext( BlockRefs );
+	const [ , forceRender ] = useReducer( ( s ) => ! s );
 	useLayoutEffect( () => {
-		if ( ! key ) {
-			return;
-		}
-
-		object.add( key, value );
+		listeners.add( clientId, forceRender );
 		return () => {
-			object.remove( key, value );
+			listeners.remove( clientId, forceRender );
 		};
-	}, [ key, value ] );
-}
-
-export function useRegisteredBlockRefs( clientId ) {
-	const [ , forceRender ] = useReducer( ( s ) => ! s );
-	useUpdate( listeners, clientId, forceRender );
+	}, [ listeners, clientId, forceRender ] );
 	return store[ clientId ] ? Array.from( store[ clientId ] ) : [];
 }
 
 export function useBlockRef( clientId, ref ) {
-	useUpdate( store, clientId, ref );
+	const { listeners, store } = useContext( BlockRefs );
+	const [ , forceRender ] = useReducer( ( s ) => ! s );
+	useLayoutEffect( () => {
+		store.add( clientId, ref );
+		listeners.add( clientId, forceRender );
+		return () => {
+			store.remove( clientId, ref );
+			listeners.remove( clientId, forceRender );
+		};
+	}, [ listeners, store, clientId, ref, forceRender ] );
 }

packages/block-editor/src/components/provider/block-refs-provider.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useMemo } from '@wordpress/element';
+
+export const BlockRefs = createContext();
+
+function createStore() {
+	const listeners = {
+		add( clientId, fn ) {
+			listeners[ clientId ] = fn;
+		},
+		remove( clientId ) {
+			delete listeners[ clientId ];
+		},
+	};
+	const store = {
+		add( clientId, ref ) {
+			store[ clientId ] = store[ clientId ] || new Set();
+			store[ clientId ].add( ref );
+
+			if ( listeners[ clientId ] ) {
+				listeners[ clientId ]();
+			}
+		},
+		remove( clientId, ref ) {
+			store[ clientId ].delete( ref );
+
+			if ( listeners[ clientId ] ) {
+				listeners[ clientId ]();
+			}
+		},
+	};
+	return { listeners, store };
+}
+
+export function BlockRefsProvider( { children } ) {
+	const value = useMemo( () => createStore(), [] );
+	return (
+		<BlockRefs.Provider value={ value }>{ children }</BlockRefs.Provider>
+	);
+}

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

@@ -10,6 +10,7 @@ import { useEffect } from '@wordpress/element';
 import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
+import { BlockRefsProvider } from './block-refs-provider';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
@@ -24,7 +25,7 @@ function BlockEditorProvider( props ) {
 	// Syncs the entity provider with changes in the block-editor store.
 	useBlockSync( props );
 
-	return children;
+	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
 }
 
 export default withRegistryProvider( BlockEditorProvider );