Try: Sync block context with store

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

@@ -12,12 +12,15 @@ import {
 	hasBlockSupport,
 	getBlockType,
 } from '@wordpress/blocks';
-import { useContext, useMemo } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { useContext, useLayoutEffect, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockContext from '../block-context';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Default value used for blocks which do not define their own context needs,
@@ -48,10 +51,18 @@ const Edit = ( props ) => {
 const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
 
 const EditWithGeneratedProps = ( props ) => {
-	const { attributes = {}, name } = props;
+	const { clientId, attributes = {}, name } = props;
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
 
+	// Sync the block context with the block editor store.
+	const { updateBlockContext } = unlock( useDispatch( blockEditorStore ) );
+	useLayoutEffect( () => {
+		if ( blockContext && Object.keys( blockContext ).length > 0 ) {
+			updateBlockContext( clientId, blockContext );
+		}
+	}, [ clientId, blockContext, updateBlockContext ] );
+
 	// Assign context values using the block type's declared context needs.
 	const context = useMemo( () => {
 		return blockType && blockType.usesContext

packages/block-editor/src/store/private-actions.js

@@ -415,3 +415,19 @@ export const modifyContentLockBlock =
 			focusModeToRevert
 		);
 	};
+
+/**
+ * Action that changes the block context of the given block in the store.
+ *
+ * @param {string } clientId Client ID of the block.
+ * @param {Object}  context  Object with the new context.
+ *
+ * @return {Object} Action object
+ */
+export function updateBlockContext( clientId, context ) {
+	return {
+		type: 'UPDATE_BLOCK_CONTEXT',
+		clientId,
+		context,
+	};
+}

packages/block-editor/src/store/private-selectors.js

@@ -511,3 +511,15 @@ export function getTemporarilyEditingAsBlocks( state ) {
 export function getTemporarilyEditingFocusModeToRevert( state ) {
 	return state.temporarilyEditingFocusModeRevert;
 }
+
+/**
+ * Returns the Block Context of a block, if any exist.
+ *
+ * @param {Object}  state    Editor state.
+ * @param {?string} clientId Block client ID.
+ *
+ * @return {?Object} Block context of the block if set.
+ */
+export function getBlockContext( state, clientId ) {
+	return state.blockContext[ clientId ];
+}

packages/block-editor/src/store/reducer.js

@@ -1786,6 +1786,34 @@ export const blockListSettings = ( state = {}, action ) => {
 	return state;
 };
 
+/**
+ * Reducer returning an object where each key is a block client ID, its value
+ * representing the block context.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export const blockContext = ( state = {}, action ) => {
+	if ( action.type === 'UPDATE_BLOCK_CONTEXT' ) {
+		const { clientId } = action;
+		if ( ! action.context ) {
+			return state;
+		}
+
+		if ( fastDeepEqual( state[ clientId ], action.context ) ) {
+			return state;
+		}
+
+		return {
+			...state,
+			[ clientId ]: action.context,
+		};
+	}
+	return state;
+};
+
 /**
  * Reducer returning which mode is enabled.
  *
@@ -2080,6 +2108,7 @@ const combinedReducers = combineReducers( {
 	initialPosition,
 	blocksMode,
 	blockListSettings,
+	blockContext,
 	insertionPoint,
 	template,
 	settings,

packages/block-editor/src/store/test/private-actions.js

@@ -9,6 +9,7 @@ import {
 	setOpenedBlockSettingsMenu,
 	startDragging,
 	stopDragging,
+	updateBlockContext,
 } from '../private-actions';
 
 describe( 'private actions', () => {
@@ -123,4 +124,24 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'updateBlockContext', () => {
+		it( 'should return the UPDATE_BLOCK_CONTEXT with undefined context', () => {
+			expect( updateBlockContext( 'chicken' ) ).toEqual( {
+				type: 'UPDATE_BLOCK_CONTEXT',
+				clientId: 'chicken',
+				context: undefined,
+			} );
+		} );
+
+		it( 'should return the UPDATE_BLOCK_CONTEXT action with the passed context', () => {
+			expect(
+				updateBlockContext( 'chicken', { chicken: 'ribs' } )
+			).toEqual( {
+				type: 'UPDATE_BLOCK_CONTEXT',
+				clientId: 'chicken',
+				context: { chicken: 'ribs' },
+			} );
+		} );
+	} );
 } );

packages/block-editor/src/store/test/private-selectors.js

@@ -9,6 +9,7 @@ import {
 	getEnabledBlockParents,
 	getExpandedBlock,
 	isDragging,
+	getBlockContext,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 
@@ -509,4 +510,31 @@ describe( 'private selectors', () => {
 			);
 		} );
 	} );
+
+	describe( 'getBlockContext', () => {
+		it( 'should return the context of a block', () => {
+			const state = {
+				blockContext: {
+					chicken: {
+						context1: false,
+					},
+					ribs: {
+						context2: true,
+					},
+				},
+			};
+
+			expect( getBlockContext( state, 'chicken' ) ).toEqual( {
+				context1: false,
+			} );
+		} );
+
+		it( 'should return undefined if context for the block doesn’t exist', () => {
+			const state = {
+				blockContext: {},
+			};
+
+			expect( getBlockContext( state, 'chicken' ) ).toBe( undefined );
+		} );
+	} );
 } );