Support BlockContext between different blocks

block-hydration-experiments.php

@@ -9,8 +9,8 @@
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
  * Text Domain:       block-hydration-experiments
  */
-
 function block_hydration_experiments_init() {
-	register_block_type( __DIR__ . '/build' );
+	register_block_type( plugin_dir_path( __FILE__ ) . 'build/blocks/block-hydration-experiments-child/' );
+	register_block_type( plugin_dir_path( __FILE__ ) . 'build/blocks/block-hydration-experiments-parent/' );
 }
-add_action( 'init', 'block_hydration_experiments_init' );
+add_action( 'init', 'block_hydration_experiments_init' );

src/blocks/block-hydration-experiments-child/block.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "luisherranz/block-hydration-experiments-child",
+	"version": "0.1.0",
+	"title": "BHE - Child",
+	"category": "text",
+	"icon": "flag",
+	"description": "",
+	"usesContext": ["message"],
+	"supports": {
+		"color": {
+			"text": true
+		},
+		"html": true
+	},
+	"textdomain": "block-hydration-experiments-child",
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css",
+	"viewScript": "file:./view.js"
+}

src/blocks/block-hydration-experiments-child/edit.js

@@ -0,0 +1,19 @@
+// This import is needed to ensure that the `wp.blockEditor` global is available
+// by the time this component gets loaded. The `Title` component consumes the
+// global but cannot import it because it shouldn't be loaded on the frontend of
+// the site.
+import '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
+
+const Text = ( { context } ) => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div {...blockProps}>
+			<p>Child element</p>
+			{context?.message}
+		</div>
+	);
+};
+
+export default Text;

src/blocks/block-hydration-experiments-child/index.js

@@ -0,0 +1,10 @@
+import Text from '../../frontend/text';
+import { registerBlockType } from '../../gutenberg-packages/wordpress-blocks';
+import Edit from './edit';
+import './style.scss';
+
+registerBlockType( 'luisherranz/block-hydration-experiments-child', {
+	edit: Edit,
+	// The Save component is derived from the Frontend component.
+	frontend: Text,
+} );

src/style.scss → src/blocks/block-hydration-experiments-child/style.scss

@@ -1,4 +1,4 @@
-.wp-block-luisherranz-block-hydration-experiments {
+.wp-block-luisherranz-block-hydration-experiments-child {
   padding: 15px 10px 15px 50px;
   background-color: rgb(238, 237, 237);
 }

src/blocks/block-hydration-experiments-child/view.js

@@ -0,0 +1,4 @@
+import Text from '../../frontend/text';
+import { registerBlockType } from '../../gutenberg-packages/frontend';
+
+registerBlockType( 'luisherranz/block-hydration-experiments-child', Text );

src/block.json → src/blocks/block-hydration-experiments-parent/block.json

@@ -1,9 +1,9 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "luisherranz/block-hydration-experiments",
+	"name": "luisherranz/block-hydration-experiments-parent",
 	"version": "0.1.0",
-	"title": "Block Hydration Experiments",
+	"title": "BHE - Parent",
 	"category": "text",
 	"icon": "flag",
 	"description": "",
@@ -21,7 +21,10 @@
 		},
 		"html": true
 	},
-	"textdomain": "block-hydration-experiments",
+	"providesContext": {
+		"message": "message"
+	},
+	"textdomain": "block-hydration-experiments-parent",
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",

src/edit/index.js → src/blocks/block-hydration-experiments-parent/edit.js

@@ -5,7 +5,7 @@
 import '@wordpress/block-editor';
 
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-import Title from '../shared/title';
+import Title from '../../shared/title';
 
 export default function Edit( { attributes, setAttributes } ) {
 	const blockProps = useBlockProps();

src/blocks/block-hydration-experiments-parent/index.js

@@ -0,0 +1,10 @@
+import Frontend from '../../frontend';
+import { registerBlockType } from '../../gutenberg-packages/wordpress-blocks';
+import Edit from './edit';
+import './style.scss';
+
+registerBlockType( 'luisherranz/block-hydration-experiments-parent', {
+	edit: Edit,
+	// The Save component is derived from the Frontend component.
+	frontend: Frontend,
+} );

src/blocks/block-hydration-experiments-parent/style.scss

@@ -0,0 +1,9 @@
+.wp-block-luisherranz-block-hydration-experiments-parent {
+  padding: 15px 10px 15px 50px;
+  background-color: rgb(238, 237, 237);
+}
+
+gutenberg-block,
+gutenberg-inner-blocks {
+  display: contents;
+}

src/blocks/block-hydration-experiments-parent/view.js

@@ -0,0 +1,4 @@
+import Frontend from '../../frontend';
+import { registerBlockType } from '../../gutenberg-packages/frontend';
+
+registerBlockType( 'luisherranz/block-hydration-experiments-parent', Frontend );

src/frontend/text.js

@@ -0,0 +1,10 @@
+const Text = ( { blockProps, context } ) => {
+	return (
+		<div {...blockProps}>
+			<p>Child element</p>
+			{context?.message}
+		</div>
+	);
+};
+
+export default Text;

src/gutenberg-packages/frontend.js

@@ -1,17 +1,37 @@
+import { pickKeys } from './utils';
 import { EnvContext, hydrate } from './wordpress-element';
 
-const blockTypes = new Map();
+// We assign `blockTypes` to window to make sure it's a global singleton.
+//
+// Have to do this because of the way we are currently bundling the code
+// in this repo, each block gets its own copy of this file.
+//
+// We COULD fix this by doing some webpack magic to spit out the code in
+// `gutenberg-packages` to a shared chunk but assigning `blockTypes` to window
+// is a cheap hack for now that will be fixed once we can merge this code into Gutenberg.
+if ( typeof window.blockTypes === 'undefined' ) {
+	window.blockTypes = new Map();
+}
 
 export const registerBlockType = ( name, Comp ) => {
-	blockTypes.set( name, Comp );
+	window.blockTypes.set( name, Comp );
 };
 
-const Children = ( { value } ) => {
+const Children = ( { value, providedContext } ) => {
 	if ( !value ) {
 		return null;
 	}
 	return (
 		<gutenberg-inner-blocks
+			ref={( el ) => {
+				if ( el !== null ) {
+					// listen for the ping from the child
+					el.addEventListener( 'gutenberg-context', ( event ) => {
+						event.stopPropagation();
+						event.detail.context = providedContext;
+					} );
+				}
+			}}
 			suppressHydrationWarning={true}
 			dangerouslySetInnerHTML={{ __html: value }}
 		/>
@@ -22,17 +42,42 @@ Children.shouldComponentUpdate = () => false;
 class GutenbergBlock extends HTMLElement {
 	connectedCallback() {
 		setTimeout( () => {
-			const blockType = this.getAttribute( 'data-gutenberg-block-type' );
+			// ping the parent for the context
+			const event = new CustomEvent( 'gutenberg-context', {
+				detail: {},
+				bubbles: true,
+				cancelable: true,
+			} );
+			this.dispatchEvent( event );
+
+			const usesContext = JSON.parse(
+				this.getAttribute( 'data-gutenberg-context-used' ),
+			);
+			const providesContext = JSON.parse(
+				this.getAttribute( 'data-gutenberg-context-provided' ),
+			);
 			const attributes = JSON.parse(
 				this.getAttribute( 'data-gutenberg-attributes' ),
 			);
+
+			// pass the context to children if needed
+			const providedContext = pickKeys(
+				attributes,
+				Object.keys( providesContext ),
+			);
+
+			// select only the parts of the context that the block declared in
+			// the `usesContext` of its block.json
+			const context = pickKeys( event.detail.context, usesContext );
+
+			const blockType = this.getAttribute( 'data-gutenberg-block-type' );
 			const blockProps = JSON.parse(
 				this.getAttribute( 'data-gutenberg-block-props' ),
 			);
 			const innerBlocks = this.querySelector(
 				'template.gutenberg-inner-blocks',
 			);
-			const Comp = blockTypes.get( blockType );
+			const Comp = window.blockTypes.get( blockType );
 			const technique = this.getAttribute( 'data-gutenberg-hydrate' );
 			const media = this.getAttribute( 'data-gutenberg-media' );
 			const hydrationOptions = { technique, media };
@@ -42,10 +87,12 @@ class GutenbergBlock extends HTMLElement {
 						attributes={attributes}
 						blockProps={blockProps}
 						suppressHydrationWarning={true}
+						context={context}
 					>
 						<Children
 							value={innerBlocks && innerBlocks.innerHTML}
 							suppressHydrationWarning={true}
+							providedContext={providedContext}
 						/>
 					</Comp>
 					<template
@@ -60,4 +107,11 @@ class GutenbergBlock extends HTMLElement {
 	}
 }
 
-customElements.define( 'gutenberg-interactive-block', GutenbergBlock );
+// We need to wrap the element registration code in a conditional for the same
+// reason we assing `blockTypes` to window (see top of the file).
+//
+// We need to ensure that the component registration code is only run once
+// because it throws if you try to register an element with the same name twice.
+if ( customElements.get( 'gutenberg-interactive-block' ) === undefined ) {
+	customElements.define( 'gutenberg-interactive-block', GutenbergBlock );
+}

src/gutenberg-packages/utils.js

@@ -20,3 +20,28 @@ export const getFrontendAttributes = ( blockName, attributes ) => {
 
 	return frontendAttributes;
 };
+
+export const getBlockContext = ( blockName ) => {
+	const blockType = getBlockType( blockName );
+	const { usesContext, providesContext } = blockType;
+	return { usesContext, providesContext };
+};
+
+/**
+ * Pick the keys of an object that are present in the provided array.
+ * @param {Object} obj
+ * @param {Array} arr
+ */
+export const pickKeys = ( obj, arr ) => {
+	if ( obj === undefined ) {
+		return;
+	}
+
+	const result = {};
+	for ( const key of arr ) {
+		if ( obj[key] !== undefined ) {
+			result[key] = obj[key];
+		}
+	}
+	return result;
+};

src/gutenberg-packages/wordpress-blockeditor.js

@@ -1,3 +1,4 @@
+import '@wordpress/block-editor';
 import { useBlockEnvironment } from './wordpress-element';
 
 export const RichText = ( { tagName: Tag, children, ...props } ) => {

src/gutenberg-packages/wordpress-blocks.js

@@ -1,14 +1,17 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { registerBlockType as gutenbergRegisterBlockType } from '@wordpress/blocks';
-import { getFrontendAttributes } from './utils';
+import { getBlockContext, getFrontendAttributes } from './utils';
 
 const save = ( name, Comp ) =>
 	( { attributes } ) => {
 		const blockProps = useBlockProps.save();
 		const frontendAttributes = getFrontendAttributes( name, attributes );
+		const { usesContext, providesContext } = getBlockContext( name );
 		return (
 			<gutenberg-interactive-block
 				data-gutenberg-block-type={name}
+				data-gutenberg-context-used={JSON.stringify( usesContext )}
+				data-gutenberg-context-provided={JSON.stringify( providesContext )}
 				data-gutenberg-attributes={JSON.stringify( frontendAttributes )}
 				data-gutenberg-block-props={JSON.stringify( blockProps )}
 				data-gutenberg-hydrate='idle'