Block Editor: Add a new hook for getting a stable block context object

Author: Mamaduka

packages/block-editor/src/components/inner-blocks/index.js

@@ -11,7 +11,6 @@ import { forwardRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
 	getBlockSupport,
-	getBlockType,
 	store as blocksStore,
 	__unstableGetInnerBlocksProps as getInnerBlocksProps,
 } from '@wordpress/blocks';
@@ -23,7 +22,7 @@ import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
 import useNestedSettingsUpdate from './use-nested-settings-update';
 import useInnerBlockTemplateSync from './use-inner-block-template-sync';
-import getBlockContext from './get-block-context';
+import useBlockContext from './use-block-context';
 import { BlockListItems } from '../block-list';
 import { BlockContextProvider } from '../block-context';
 import { useBlockEditContext } from '../block-edit/context';
@@ -75,28 +74,10 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const { context, name } = useSelect(
+	const context = useBlockContext( clientId );
+	const name = useSelect(
 		( select ) => {
-			const block = select( blockEditorStore ).getBlock( clientId );
-
-			// This check is here to avoid the Redux zombie bug where a child subscription
-			// is called before a parent, causing potential JS errors when the child has been removed.
-			if ( ! block ) {
-				return {};
-			}
-
-			const blockType = getBlockType( block.name );
-
-			if (
-				Object.keys( blockType?.providesContext ?? {} ).length === 0
-			) {
-				return { name: block.name };
-			}
-
-			return {
-				context: getBlockContext( block.attributes, blockType ),
-				name: block.name,
-			};
+			return select( blockEditorStore ).getBlock( clientId )?.name;
 		},
 		[ clientId ]
 	);

packages/block-editor/src/components/inner-blocks/use-block-context.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Returns a context object for a given block.
+ *
+ * @param {string} clientId The block client ID.
+ *
+ * @return {Record<string,*>} Context value.
+ */
+export default function useBlockContext( clientId ) {
+	return useSelect(
+		( select ) => {
+			const block = select( blockEditorStore ).getBlock( clientId );
+			const blockType = getBlockType( block.name );
+
+			if (
+				Object.keys( blockType?.providesContext ?? {} ).length === 0
+			) {
+				return undefined;
+			}
+
+			return mapValues(
+				blockType.providesContext,
+				( attributeName ) => block.attributes[ attributeName ]
+			);
+		},
+		[ clientId ]
+	);
+}