⚛️ Hydrate the blocks with Directives Hydration (using wp-block and wp-inner-blocks)

block-hydration-experiments.php

@@ -11,6 +11,8 @@
  */
 function block_hydration_experiments_init()
 {
+	wp_enqueue_script('vendors', plugin_dir_url(__FILE__) . 'build/vendors.js');
+
 	wp_register_script(
 		'hydration',
 		plugin_dir_url(__FILE__) . 'build/gutenberg-packages/hydration.js',

package.json

@@ -42,6 +42,7 @@
 	},
 	"dependencies": {
 		"hpq": "^1.3.0",
-		"preact": "^10.10.6"
+		"preact": "^10.10.6",
+		"preact-markup": "^2.1.1"
 	}
 }

src/blocks/interactive-child/register-view.js

@@ -1,3 +1,5 @@
+import 'preact/debug';
+
 import registerBlockView from '../../gutenberg-packages/register-block-view';
 import View from './view';
 

src/blocks/interactive-child/view.js

@@ -1,6 +1,10 @@
+import CounterContext from '../../context/counter';
+import ThemeContext from '../../context/theme';
+import { useContext } from '../../gutenberg-packages/wordpress-element';
+
 const View = ({ blockProps, context }) => {
-	const theme = 'cool theme';
-	const counter = 0;
+	const theme = useContext(ThemeContext);
+	const counter = useContext(CounterContext);
 
 	return (
 		<div {...blockProps}>

src/blocks/interactive-parent/edit.js

@@ -4,20 +4,22 @@
 // the site.
 import '@wordpress/block-editor';
 
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-import Button from './shared/button';
-import Title from './shared/title';
+import { InnerBlocks, useBlockProps, RichText } from '@wordpress/block-editor';
 
-const Edit = ({ attributes: { counter, title, secret }, setAttributes }) => (
+const Edit = ({
+	attributes: { counter = 0, title, secret },
+	setAttributes,
+}) => (
 	<>
 		<div {...useBlockProps()}>
-			<Title
+			<RichText
+				tagName="h2"
+				className="title"
+				value={title}
 				onChange={(val) => setAttributes({ title: val })}
 				placeholder="This will be passed through context to child blocks"
-			>
-				{title}
-			</Title>
-			<Button>Show</Button>
+			/>
+			<button>Show</button>
 			<button onClick={() => setAttributes({ counter: counter + 1 })}>
 				{counter}
 			</button>

src/blocks/interactive-parent/register-view.js

@@ -1,3 +1,5 @@
+import 'preact/debug';
+
 import registerBlockView from '../../gutenberg-packages/register-block-view';
 import View from './view';
 

src/blocks/interactive-parent/view.js

@@ -1,9 +1,6 @@
-import { createContext, useState } from 'preact/compat';
-import Button from './shared/button';
-import Title from './shared/title';
-
-const Counter = createContext(null);
-const Theme = createContext(null);
+import Counter from '../../context/counter';
+import Theme from '../../context/theme';
+import { useState } from '../../gutenberg-packages/wordpress-element';
 
 const View = ({
 	blockProps: {
@@ -27,9 +24,9 @@ const View = ({
 						fontWeight: bold ? 900 : fontWeight,
 					}}
 				>
-					<Title>{title}</Title>
-					<Button handler={() => setShow(!show)}>Show</Button>
-					<Button handler={() => setBold(!bold)}>Bold</Button>
+					<h2 className="title">{title}</h2>
+					<button onClick={() => setShow(!show)}>Show</button>
+					<button onClick={() => setBold(!bold)}>Bold</button>
 					<button onClick={() => setCounter(counter + 1)}>
 						{counter}
 					</button>

src/blocks/non-interactive-parent/edit.js

@@ -1,5 +1,4 @@
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-import { RichText } from '../../gutenberg-packages/wordpress-blockeditor';
+import { InnerBlocks, useBlockProps, RichText } from '@wordpress/block-editor';
 
 const Edit = ({ attributes, setAttributes }) => (
 	<div {...useBlockProps()}>
@@ -9,9 +8,7 @@ const Edit = ({ attributes, setAttributes }) => (
 			onChange={(val) => setAttributes({ title: val })}
 			placeholder="This will be passed through context to child blocks"
 			value={attributes.title}
-		>
-			{attributes.title}
-		</RichText>
+		/>
 		<InnerBlocks />
 	</div>
 );

src/blocks/non-interactive-parent/view.js

@@ -1,6 +1,6 @@
 const View = ({ attributes, blockProps, children }) => (
 	<div {...blockProps}>
-		<p className="title">{attributes.title}</p>
+		<h4 className="title">{attributes.title}</h4>
 		{children}
 	</div>
 );

src/context/counter.js

@@ -1,7 +1,11 @@
-import { createContext } from '@wordpress/element';
+import { createContext } from 'preact/compat';
 
-if (typeof window.reactContext === 'undefined') {
-	window.reactContext = createContext(null);
+if (typeof window.counterContext === 'undefined') {
+	window.counterContext = window.wp.element
+		? window.wp.element.createContext(null)
+		: createContext(null);
+
+	window.counterContext.displayName = 'CounterContext';
 }
-window.reactContext.displayName = 'CounterContext';
-export default window.reactContext;
+
+export default window.counterContext;

src/context/theme.js

@@ -1,7 +1,11 @@
-import { createContext } from '@wordpress/element';
+import { createContext } from 'preact/compat';
 
-if (typeof window.themeReactContext === 'undefined') {
-	window.themeReactContext = createContext(null);
+if (typeof window.themeContext === 'undefined') {
+	window.themeContext = window.wp.element
+		? window.wp.element.createContext('initial')
+		: createContext('initial');
+
+	window.themeContext.displayName = 'ThemeContext';
 }
-window.themeReactContext.displayName = 'ThemeContext';
-export default window.themeReactContext;
+
+export default window.themeContext;

src/gutenberg-packages/hydration.js

@@ -1,3 +1,16 @@
+import { hydrate, createElement } from 'preact/compat';
 import { createGlobal } from './utils';
+import toVdom from './to-vdom';
+import visitor from './visitor';
 
 const blockViews = createGlobal('blockViews', new Map());
+
+const components = Object.fromEntries(
+	[...blockViews.entries()].map(([k, v]) => [k, v.Component])
+);
+
+visitor.map = components;
+
+const dom = document.querySelector('.wp-site-blocks');
+const vdom = toVdom(dom, visitor, createElement, {}).props.children;
+hydrate(vdom, dom);

src/gutenberg-packages/to-vdom.js

@@ -0,0 +1,68 @@
+const EMPTY_OBJ = {};
+
+// deeply convert an XML DOM to VDOM
+export default function toVdom(node, visitor, h, options) {
+	walk.visitor = visitor;
+	walk.h = h;
+	walk.options = options || EMPTY_OBJ;
+	return walk(node);
+}
+
+function walk(n, index, arr) {
+	if (n.nodeType === 3) {
+		let text = 'textContent' in n ? n.textContent : n.nodeValue || '';
+
+		if (walk.options.trim !== false) {
+			let isFirstOrLast = index === 0 || index === arr.length - 1;
+
+			// trim strings but don't entirely collapse whitespace
+			if (text.match(/^[\s\n]+$/g) && walk.options.trim !== 'all') {
+				text = ' ';
+			} else {
+				text = text.replace(
+					/(^[\s\n]+|[\s\n]+$)/g,
+					walk.options.trim === 'all' || isFirstOrLast ? '' : ' '
+				);
+			}
+			// skip leading/trailing whitespace
+			if ((!text || text === ' ') && arr.length > 1 && isFirstOrLast)
+				return null;
+		}
+		return text;
+	}
+	if (n.nodeType !== 1) return null;
+	let nodeName = String(n.nodeName).toLowerCase();
+
+	// Do not allow script tags unless explicitly specified
+	if (nodeName === 'script' && !walk.options.allowScripts) return null;
+
+	let out = walk.h(
+		nodeName,
+		getProps(n.attributes),
+		walkChildren(n.childNodes)
+	);
+	if (walk.visitor) walk.visitor(out, n);
+
+	return out;
+}
+
+function getProps(attrs) {
+	let len = attrs && attrs.length;
+	if (!len) return null;
+	let props = {};
+	for (let i = 0; i < len; i++) {
+		let { name, value } = attrs[i];
+		if (name.substring(0, 2) === 'on' && walk.options.allowEvents) {
+			value = new Function(value); // eslint-disable-line no-new-func
+		}
+		props[name] = value;
+	}
+	return props;
+}
+
+function walkChildren(children) {
+	let c = children && Array.prototype.map.call(children, walk).filter(exists);
+	return c && c.length ? c : null;
+}
+
+let exists = (x) => x;

src/gutenberg-packages/visitor.js

@@ -0,0 +1,100 @@
+import { createElement as h } from "preact/compat";
+import { matcherFromSource } from './utils';
+
+export default function visitor(vNode, domNode) {
+	const name = (vNode.type || '').toLowerCase();
+	const map = visitor.map;
+
+	if (name === 'wp-block' && map) {
+		processWpBlock({ vNode, domNode, map });
+	} else {
+		vNode.type = name.replace(/[^a-z0-9-]/i, '');
+	}
+}
+
+function processWpBlock({ vNode, domNode, map }) {
+	const blockType = vNode.props['data-wp-block-type'];
+	const Component = map[blockType];
+
+	if (!Component) return vNode;
+
+	const block = h(Component, {
+		attributes: getAttributes(vNode, domNode),
+		context: {},
+		blockProps: getBlockProps(vNode),
+		children: getChildren(vNode),
+	}); 
+
+	vNode.props = {
+		...vNode.props,
+		children: [block]
+	};
+}
+
+function getBlockProps(vNode) {
+	const { class: className, style } = JSON.parse(
+		vNode.props['data-wp-block-props']
+	);
+	return { className, style: getStyleProp(style) };
+}
+
+function getAttributes(vNode, domNode) {
+	// Get the block attributes.
+	const attributes = JSON.parse(
+		vNode.props['data-wp-block-attributes']
+	);
+
+	// Add the sourced attributes to the attributes object.
+	const sourcedAttributes = JSON.parse(
+		vNode.props['data-wp-block-sourced-attributes']
+	);
+	for (const attr in sourcedAttributes) {
+		attributes[attr] = matcherFromSource(sourcedAttributes[attr])(
+			domNode
+		);
+	}
+
+    return attributes;
+}
+
+function getChildren(vNode) {
+	return getChildrenFromWrapper(vNode.props.children) || vNode.props.children;
+}
+
+function getChildrenFromWrapper(children) {
+	if (!children?.length) return null;
+
+	for (const child of children) {
+		if (isChildrenWrapper(child)) return child.props?.children || [];
+	}
+
+	// Try with the next nesting level.
+	return getChildrenFromWrapper(
+		[].concat(...children.map((child) => child?.props?.children || []))
+	);
+}
+
+function isChildrenWrapper(vNode) {
+	return vNode.type === 'wp-inner-blocks';
+}
+
+function toCamelCase(name) {
+	return name.replace(/-(.)/g, (match, letter) => letter.toUpperCase());
+}
+
+export function getStyleProp(cssText) {
+	if (!cssText) return {};
+
+	const el = document.createElement('div');
+    const { style } = el;
+	style.cssText = cssText;
+
+    const output = {};
+    for (let i = 0; i < style.length; i += 1) {
+        const key = style.item(0);
+        output[toCamelCase(key)] = style.getPropertyValue(key);
+    }
+
+	el.remove();
+	return output;
+}