⚛️ Restructure the project folder and files to make it ready for the Directives Hydration

block-hydration-experiments.php

@@ -11,6 +11,14 @@
  */
 function block_hydration_experiments_init()
 {
+	wp_register_script(
+		'hydration',
+		plugin_dir_url(__FILE__) . 'build/gutenberg-packages/hydration.js',
+		[],
+		'1.0.0',
+		true
+	);
+
 	register_block_type(
 		plugin_dir_path(__FILE__) . 'build/blocks/interactive-child/'
 	);
@@ -23,14 +31,34 @@ function block_hydration_experiments_init()
 }
 add_action('init', 'block_hydration_experiments_init');
 
+add_filter('render_block_bhe/interactive-child', function ($content) {
+	wp_enqueue_script(
+		'bhe/interactive-child/view',
+		plugin_dir_url(__FILE__) .
+			'build/blocks/interactive-child/register-view.js'
+	);
+	return $content;
+});
+
+add_filter('render_block_bhe/interactive-parent', function ($content) {
+	wp_enqueue_script(
+		'bhe/interactive-parent/view',
+		plugin_dir_url(__FILE__) .
+			'build/blocks/interactive-parent/register-view.js'
+	);
+	return $content;
+});
+
 function bhe_block_wrapper($block_content, $block, $instance)
 {
 	$block_type = $instance->block_type;
 
-	if ( ! block_has_support( $block_type, [ 'view' ] ) ) {
+	if (!block_has_support($block_type, ['view'])) {
 		return $block_content;
 	}
 
+	wp_enqueue_script('hydration');
+
 	$attr_definitions = $block_type->attributes;
 
 	$attributes = [];

package.json

@@ -41,6 +41,7 @@
 		"prettier": "^2.7.1"
 	},
 	"dependencies": {
-		"hpq": "^1.3.0"
+		"hpq": "^1.3.0",
+		"preact": "^10.10.6"
 	}
 }

src/blocks/interactive-child/block.json

@@ -20,6 +20,5 @@
 	},
 	"textdomain": "block-hydration-experiments",
 	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css",
-	"viewScript": "file:./register-view.js"
+	"style": "file:./style-index.css"
 }

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

@@ -1,10 +1,4 @@
-import CounterContext from '../../context/counter';
-import ThemeContext from '../../context/theme';
 import registerBlockView from '../../gutenberg-packages/register-block-view';
 import View from './view';
 
-setTimeout(() => {
-	registerBlockView('bhe/interactive-child', View, {
-		usesContext: [ThemeContext, CounterContext],
-	});
-}, 2000);
+registerBlockView('bhe/interactive-child', View);

src/blocks/interactive-child/view.js

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

src/blocks/interactive-parent/block.json

@@ -42,6 +42,5 @@
 	"usesContext": ["bhe/non-interactive-title"],
 	"textdomain": "block-hydration-experiments",
 	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css",
-	"viewScript": "file:./register-view.js"
+	"style": "file:./style-index.css"
 }

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

@@ -1,10 +1,4 @@
-import CounterContext from '../../context/counter';
-import ThemeContext from '../../context/theme';
 import registerBlockView from '../../gutenberg-packages/register-block-view';
 import View from './view';
 
-setTimeout(() => {
-	registerBlockView('bhe/interactive-parent', View, {
-		providesContext: [ThemeContext, CounterContext],
-	});
-}, 1000);
+registerBlockView('bhe/interactive-parent', View);

src/blocks/interactive-parent/shared/title.js

@@ -1,9 +1,7 @@
-import { RichText } from '../../../gutenberg-packages/wordpress-blockeditor';
-
 const Title = ({ children, ...props }) => (
-	<RichText tagName="h2" className="title" {...props}>
+	<h2 className="title" {...props}>
 		{children}
-	</RichText>
+	</h2>
 );
 
 export default Title;

src/blocks/interactive-parent/view.js

@@ -1,9 +1,10 @@
-import Counter from '../../context/counter';
-import Theme from '../../context/theme';
-import { useState } from '../../gutenberg-packages/wordpress-element';
+import { createContext, useState } from 'preact/compat';
 import Button from './shared/button';
 import Title from './shared/title';
 
+const Counter = createContext(null);
+const Theme = createContext(null);
+
 const View = ({
 	blockProps: {
 		className,