Create dynamic blocks to check the DX

block-hydration-experiments.php

@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Plugin Name:       block-hydration-experiments
  * Version:           0.1.0
@@ -20,14 +21,24 @@ function block_hydration_experiments_init()
 	register_block_type(
 		plugin_dir_path(__FILE__) . 'build/blocks/non-interactive-parent/'
 	);
+	// Dynamic blocks
+	register_block_type(
+		plugin_dir_path(__FILE__) . 'build/blocks/dynamic-interactive-child/',
+	);
+	register_block_type(
+		plugin_dir_path(__FILE__) . 'build/blocks/dynamic-interactive-parent/',
+	);
+	register_block_type(
+		plugin_dir_path(__FILE__) . 'build/blocks/dynamic-non-interactive-parent/',
+	);
 }
 add_action('init', 'block_hydration_experiments_init');
 
 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;
 	}
 

package.json

@@ -35,7 +35,7 @@
 		"@wordpress/blocks": "^11.7.0",
 		"@wordpress/element": "^4.3.0",
 		"@wordpress/env": "^4.4.0",
-		"@wordpress/scripts": "^22.3.0",
+		"@wordpress/scripts": "^24.0.0",
 		"babel-jest": "^28.1.0",
 		"jest": "^28.1.0",
 		"prettier": "^2.7.1"

src/blocks/dynamic-interactive-child/block.json

@@ -0,0 +1,38 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "bhe/dynamic-interactive-child",
+	"version": "0.1.0",
+	"title": "BHE - Dynamic Interactive Child",
+	"category": "text",
+	"icon": "flag",
+	"description": "",
+	"usesContext": [
+		"bhe/dynamic-interactive-title",
+		"bhe/dynamic-non-interactive-title"
+	],
+	"attributes": {
+		"state": {
+			"type": "string",
+			"public": true,
+			"source": "text",
+			"selector": ".dynamic-child-block-state"
+		}
+	},
+	"supports": {
+		"color": {
+			"text": true
+		},
+		"typography": {
+			"fontSize": true
+		},
+		"html": true,
+		"view": true
+	},
+	"textdomain": "bhe",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./style.css",
+	"style": "file:./style-index.css",
+	"viewScript": "file:./register-view.js",
+	"render": "file:./render.php"
+}

src/blocks/dynamic-interactive-child/edit.js

@@ -0,0 +1,16 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+const Edit = ({ context }) => (
+    <div {...useBlockProps()}>
+        <p>
+            Block Context from interactive parent:{' '}
+            {context['bhe/dynamic-interactive-title']}
+        </p>
+        <p>
+            Block Context from non-interactive parent -
+            "bhe/non-interactive-title": {context['bhe/dynamic-non-interactive-title']}
+        </p>
+    </div>
+);
+
+export default Edit;

src/blocks/dynamic-interactive-child/index.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import './style.scss';
+
+// Register the block
+registerBlockType('bhe/dynamic-interactive-child', {
+    edit: Edit,
+});

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

@@ -0,0 +1,8 @@
+import CounterContext from '../../context/counter';
+import ThemeContext from '../../context/theme';
+import registerBlockView from '../../gutenberg-packages/register-block-view';
+import View from './view';
+
+registerBlockView('bhe/dynamic-interactive-child', View, {
+    usesContext: [ThemeContext, CounterContext],
+});

src/blocks/dynamic-interactive-child/render.php

@@ -0,0 +1,23 @@
+<?php
+wp_enqueue_script('bhe-dynamic-interactive-child-view-script');
+$post = get_post();
+$date = $post->post_date;
+$state = [
+    "date" => $date
+];
+?>
+
+<div <?= get_block_wrapper_attributes() ?>>
+    <p>
+        Block Context from interactive parent - "bhe/interactive-title": <?= $block->context['bhe/dynamic-interactive-title'] ?>
+    </p>
+    <p>
+        Block Context from non-interactive parent - "bhe/non-interactive-title": <?= $block->context['bhe/dynamic-non-interactive-title'] ?>
+    </p>
+    <p>React Context - "counter":</p>
+    <p>React Context - "theme":</p>
+    <p>Post Date: <?= $date ?></p>
+    <script class="dynamic-child-block-state" type="application/json">
+        <?= wp_json_encode($state) ?>
+    </script>
+</div>

src/blocks/dynamic-interactive-child/style.scss

@@ -0,0 +1,23 @@
+.wp-block-bhe-dynamic-interactive-child {
+    padding: 15px 10px 15px 50px;
+    border: 1px solid rgb(117, 76, 5);
+    position: relative;
+}
+
+.wp-block-bhe-dynamic-interactive-child::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border: 1px solid rgb(117, 76, 5);
+    background-color: rgb(117, 76, 5);
+    color: white;
+    margin: -1px;
+    padding: 0px 5px;
+    font-size: 9px;
+    content: 'BHE - Dynamic Interactive Child';
+}
+
+wp-block,
+wp-inner-blocks {
+    display: contents;
+}

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

@@ -0,0 +1,28 @@
+import CounterContext from '../../context/counter';
+import ThemeContext from '../../context/theme';
+import { useContext } from '../../gutenberg-packages/wordpress-element';
+
+const View = ({ blockProps, attributes, context }) => {
+    const theme = useContext(ThemeContext);
+    const counter = useContext(CounterContext);
+    const { date } = JSON.parse(attributes.state);
+
+    return (
+        <div {...blockProps}>
+            <p>
+                Block Context from interactive parent - "bhe/interactive-title":{' '}
+                {context['bhe/dynamic-interactive-title']}
+            </p>
+            <p>
+                Block Context from non-interactive parent -
+                "bhe/non-interactive-title":{' '}
+                {context['bhe/dynamic-non-interactive-title']}
+            </p>
+            <p>React Context - "counter": {counter}</p>
+            <p>React Context - "theme": {theme}</p>
+            <p>Post Date: {date}</p>
+        </div>
+    );
+};
+
+export default View;

src/blocks/dynamic-interactive-parent/block.json

@@ -0,0 +1,57 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "bhe/dynamic-interactive-parent",
+	"version": "0.1.0",
+	"title": "BHE - Dynamic Interactive Parent",
+	"category": "text",
+	"icon": "flag",
+	"description": "",
+	"usesContext": [
+		"postId",
+		"postType",
+		"queryId"
+	],
+	"attributes": {
+		"counter": {
+			"type": "number",
+			"default": 0,
+			"public": true
+		},
+		"blockTitle": {
+			"type": "string",
+			"public": true
+		},
+		"state": {
+			"type": "string",
+			"public": true,
+			"source": "text",
+			"selector": ".dynamic-parent-block-state"
+		},
+		"secret": {
+			"type": "string",
+			"default": "fa4e3d47e4e0a38c5c57533391855013"
+		}
+	},
+	"supports": {
+		"color": {
+			"text": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true
+		},
+		"html": true,
+		"view": true
+	},
+	"providesContext": {
+		"bhe/dynamic-interactive-title": "blockTitle"
+	},
+	"textdomain": "bhe",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./style.css",
+	"style": "file:./style-index.css",
+	"viewScript": "file:./register-view.js",
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,47 @@
+// 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 { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useEntityProp } from '@wordpress/core-data';
+
+import Button from './shared/button';
+import Title from './shared/title';
+
+const Edit = ({ attributes, setAttributes, context }) => {
+    const { counter, blockTitle, secret } = attributes;
+    const { postType, postId, queryId } = context;
+
+    const [rawTitle = '', setTitle, fullTitle] = useEntityProp(
+        'postType',
+        postType,
+        'title',
+        postId
+    );
+
+    return (
+        <div {...useBlockProps()}>
+            <h2>Post Title: {fullTitle?.rendered}</h2>
+            <Title
+                value={blockTitle}
+                onChange={(val) => setAttributes({ blockTitle: val })}
+                placeholder="This will be passed through context to child blocks"
+                className="dynamic-interactive-parent-block-title"
+            >
+                {blockTitle}
+            </Title>
+            <Button>Show</Button>
+            <button onClick={() => setAttributes({ counter: counter + 1 })}>
+                {counter}
+            </button>
+            <blockquote style={{ fontSize: '10px' }}>
+                This is a secret attribute that should not be serialized:{' '}
+                {secret}
+            </blockquote>
+            <InnerBlocks />
+        </div>
+    )
+};
+
+export default Edit;

src/blocks/dynamic-interactive-parent/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import { RichText, InnerBlocks } from '@wordpress/block-editor';
+import './style.scss';
+
+// Register the block
+registerBlockType('bhe/dynamic-interactive-parent', {
+    edit: Edit,
+    // If I don't add this, the InnerBlocks don't seem to work in dynamic blocks.
+    save: ({ attributes }) => {
+        return (
+            <>
+                <RichText.Content tagName="h2" className="dynamic-interactive-parent-block-title" value={attributes.blockTitle} />
+                <InnerBlocks.Content />
+            </>
+        )
+    }
+});

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

@@ -0,0 +1,8 @@
+import CounterContext from '../../context/counter';
+import ThemeContext from '../../context/theme';
+import registerBlockView from '../../gutenberg-packages/register-block-view';
+import View from './view';
+
+registerBlockView('bhe/dynamic-interactive-parent', View, {
+    providesContext: [ThemeContext, CounterContext],
+});

src/blocks/dynamic-interactive-parent/render.php

@@ -0,0 +1,25 @@
+<?php
+wp_enqueue_script('bhe-dynamic-interactive-parent-view-script');
+$post = get_post();
+$inner_blocks_html = '';
+foreach ($block->inner_blocks as $inner_block) {
+    $inner_blocks_html .= $inner_block->render();
+}
+$state = [
+    "title" => $post->post_title
+];
+?>
+
+<div <?= get_block_wrapper_attributes() ?>>
+    <h2>Post Title: <?= $post->post_title ?></h2>
+    <h2>Block Title: <?= $attributes['blockTitle'] ?></h2>
+    <button>Show</button>
+    <button>Bold</button>
+    <button><?= $attributes['counter'] ?></button>
+    <wp-inner-blocks>
+        <?= $inner_blocks_html ?>
+    </wp-inner-blocks>
+    <script class="dynamic-parent-block-state" type="application/json">
+        <?= wp_json_encode($state) ?>
+    </script>
+</div>

src/blocks/dynamic-interactive-parent/shared/button.js

@@ -0,0 +1,5 @@
+const Button = ({ handler, children }) => {
+	return <button onClick={handler}>{children}</button>;
+};
+
+export default Button;

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

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