Block edit: avoid memoized block context in favour of useSelect

packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap

@@ -1,15 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockControls should render a dynamic toolbar of controls 1`] = `
-<ContextProvider
-  value={
-    Object {
-      "clientId": undefined,
-      "isSelected": true,
-      "name": undefined,
-    }
-  }
->
+<ContextProvider>
   <WithFilters(Edit)
     isSelected={true}
   >

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

@@ -2,21 +2,36 @@
  * WordPress dependencies
  */
 import { createContext, useContext } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
-const Context = createContext( {
-	name: '',
-	isSelected: false,
-	clientId: null,
-} );
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+const Context = createContext();
 const { Provider } = Context;
 
 export { Provider as BlockEditContextProvider };
 
 /**
- * A hook that returns the block edit context.
+ * A hook that returns the block client ID, name and selected status.
  *
- * @return {Object} Block edit context
+ * @return {Object} Block client ID, name and selected status.
  */
 export function useBlockEditContext() {
-	return useContext( Context );
+	const clientId = useContext( Context );
+	return useSelect(
+		( select ) => {
+			const { getBlockName, isBlockSelected } = select(
+				blockEditorStore
+			);
+			return {
+				clientId,
+				name: getBlockName( clientId ),
+				isSelected: isBlockSelected( clientId ),
+			};
+		},
+		[ clientId ]
+	);
 }

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

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -12,19 +7,8 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {
-	const { name, isSelected, clientId } = props;
-	const context = {
-		name,
-		isSelected,
-		clientId,
-	};
 	return (
-		<BlockEditContextProvider
-			// It is important to return the same object if props haven't
-			// changed to avoid  unnecessary rerenders.
-			// See https://reactjs.org/docs/context.html#caveats.
-			value={ useMemo( () => context, Object.values( context ) ) }
-		>
+		<BlockEditContextProvider value={ props.clientId }>
 			<Edit { ...props } />
 		</BlockEditContextProvider>
 	);