From b8fbc495d185c9c9c16455d4d892455359e7e1e4 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 26 Aug 2022 11:30:29 +0200 Subject: [PATCH 01/11] Add dynamic blocks --- block-hydration-experiments.php | 25 ++++++++- .../dynamic-interactive-child/block.json | 36 +++++++++++++ src/blocks/dynamic-interactive-child/edit.js | 16 ++++++ .../dynamic-interactive-child/frontend.js | 4 ++ src/blocks/dynamic-interactive-child/index.js | 11 ++++ .../dynamic-interactive-child/index.php | 17 +++++++ .../dynamic-interactive-child/style.scss | 23 +++++++++ src/blocks/dynamic-interactive-child/view.js | 11 ++++ .../dynamic-interactive-parent/block.json | 51 +++++++++++++++++++ src/blocks/dynamic-interactive-parent/edit.js | 31 +++++++++++ .../dynamic-interactive-parent/index.js | 16 ++++++ .../dynamic-interactive-parent/index.php | 29 +++++++++++ .../dynamic-interactive-parent/style.scss | 23 +++++++++ .../dynamic-non-interactive-parent/block.json | 33 ++++++++++++ .../dynamic-non-interactive-parent/edit.js | 28 ++++++++++ .../dynamic-non-interactive-parent/index.js | 16 ++++++ .../dynamic-non-interactive-parent/index.php | 27 ++++++++++ .../dynamic-non-interactive-parent/style.scss | 23 +++++++++ 18 files changed, 419 insertions(+), 1 deletion(-) create mode 100644 src/blocks/dynamic-interactive-child/block.json create mode 100644 src/blocks/dynamic-interactive-child/edit.js create mode 100644 src/blocks/dynamic-interactive-child/frontend.js create mode 100644 src/blocks/dynamic-interactive-child/index.js create mode 100644 src/blocks/dynamic-interactive-child/index.php create mode 100644 src/blocks/dynamic-interactive-child/style.scss create mode 100644 src/blocks/dynamic-interactive-child/view.js create mode 100644 src/blocks/dynamic-interactive-parent/block.json create mode 100644 src/blocks/dynamic-interactive-parent/edit.js create mode 100644 src/blocks/dynamic-interactive-parent/index.js create mode 100644 src/blocks/dynamic-interactive-parent/index.php create mode 100644 src/blocks/dynamic-interactive-parent/style.scss create mode 100644 src/blocks/dynamic-non-interactive-parent/block.json create mode 100644 src/blocks/dynamic-non-interactive-parent/edit.js create mode 100644 src/blocks/dynamic-non-interactive-parent/index.js create mode 100644 src/blocks/dynamic-non-interactive-parent/index.php create mode 100644 src/blocks/dynamic-non-interactive-parent/style.scss diff --git a/block-hydration-experiments.php b/block-hydration-experiments.php index b06a5ef5..9501163d 100644 --- a/block-hydration-experiments.php +++ b/block-hydration-experiments.php @@ -1,4 +1,5 @@ 'render_block_dynamic_interactive_parent_bhe' + ) + ); + require_once __DIR__ . '/src/blocks/dynamic-interactive-child/index.php'; + register_block_type( + plugin_dir_path(__FILE__) . 'build/blocks/dynamic-interactive-child/', + array( + 'render_callback' => 'render_block_dynamic_interactive_child_bhe' + ) + ); + require_once __DIR__ . '/src/blocks/dynamic-non-interactive-parent/index.php'; + register_block_type( + plugin_dir_path(__FILE__) . 'build/blocks/dynamic-non-interactive-parent/', + array( + 'render_callback' => 'render_block_dynamic_non_interactive_parent_bhe' + ) + ); } add_action('init', 'block_hydration_experiments_init'); @@ -27,7 +50,7 @@ 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; } diff --git a/src/blocks/dynamic-interactive-child/block.json b/src/blocks/dynamic-interactive-child/block.json new file mode 100644 index 00000000..2f2d9257 --- /dev/null +++ b/src/blocks/dynamic-interactive-child/block.json @@ -0,0 +1,36 @@ +{ + "$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": { + "date": { + "type": "string", + "public": true, + "source": "text", + "selector": ".dynamic-child-block-date" + } + }, + "supports": { + "color": { + "text": true + }, + "typography": { + "fontSize": true + }, + "html": true + }, + "textdomain": "bhe", + "editorScript": "file:./index.js", + "editorStyle": "file:./style.css", + "style": "file:./style-index.css", + "viewScript": "file:./frontend.js" +} \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-child/edit.js b/src/blocks/dynamic-interactive-child/edit.js new file mode 100644 index 00000000..f9667b92 --- /dev/null +++ b/src/blocks/dynamic-interactive-child/edit.js @@ -0,0 +1,16 @@ +import { useBlockProps } from '@wordpress/block-editor'; + +const Edit = ({ context }) => ( +
+

+ Block Context from interactive parent:{' '} + {context['bhe/dynamic-interactive-title']} +

+

+ Block Context from non-interactive parent - + "bhe/non-interactive-title": {context['bhe/dynamic-non-interactive-title']} +

+
+); + +export default Edit; \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-child/frontend.js b/src/blocks/dynamic-interactive-child/frontend.js new file mode 100644 index 00000000..0ceb2e22 --- /dev/null +++ b/src/blocks/dynamic-interactive-child/frontend.js @@ -0,0 +1,4 @@ +import { registerBlockType } from '../../gutenberg-packages/frontend'; +import View from './view'; + +registerBlockType('bhe/dynamic-interactive-child', View); diff --git a/src/blocks/dynamic-interactive-child/index.js b/src/blocks/dynamic-interactive-child/index.js new file mode 100644 index 00000000..066c34b9 --- /dev/null +++ b/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, +}); \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-child/index.php b/src/blocks/dynamic-interactive-child/index.php new file mode 100644 index 00000000..8c72d569 --- /dev/null +++ b/src/blocks/dynamic-interactive-child/index.php @@ -0,0 +1,17 @@ +post_date; + $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name)); + + return sprintf( + '
+

Post Date: %2$s

+

Counter:

+
', + $wrapper_attributes, + $date + ); +} diff --git a/src/blocks/dynamic-interactive-child/style.scss b/src/blocks/dynamic-interactive-child/style.scss new file mode 100644 index 00000000..fcbf5fb8 --- /dev/null +++ b/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(255, 162, 0); + position: relative; +} + +.wp-block-bhe-dynamic-interactive-child::before { + position: absolute; + top: 0; + right: 0; + border: 1px solid rgb(255, 162, 0); + background-color: rgb(255, 162, 0); + color: white; + margin: -1px; + padding: 0px 5px; + font-size: 9px; + content: 'BHE - Interactive Child'; +} + +wp-block, +wp-inner-blocks { + display: contents; +} \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-child/view.js b/src/blocks/dynamic-interactive-child/view.js new file mode 100644 index 00000000..308720fb --- /dev/null +++ b/src/blocks/dynamic-interactive-child/view.js @@ -0,0 +1,11 @@ +const View = ({ blockProps }) => { + return ( +
+

+ Hola +

+
+ ); +}; + +export default View; \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/block.json b/src/blocks/dynamic-interactive-parent/block.json new file mode 100644 index 00000000..93ae9fcf --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/block.json @@ -0,0 +1,51 @@ +{ + "$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 + }, + "title": { + "type": "string", + "source": "text", + "selector": "h2", + "public": true, + "default": "Default Interactive Title" + }, + "secret": { + "type": "string", + "default": "fa4e3d47e4e0a38c5c57533391855013" + } + }, + "supports": { + "color": { + "text": true + }, + "typography": { + "fontSize": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true + }, + "html": true + }, + "providesContext": { + "bhe/dynamic-interactive-title": "title" + }, + "textdomain": "bhe", + "editorScript": "file:./index.js", + "editorStyle": "file:./style.css", + "style": "file:./style-index.css" +} \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/edit.js b/src/blocks/dynamic-interactive-parent/edit.js new file mode 100644 index 00000000..527ba0bb --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/edit.js @@ -0,0 +1,31 @@ +// 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'; + +const Edit = ({ attributes, setAttributes, context }) => { + const blockProps = useBlockProps(); + const { postType, postId, queryId } = context; + + const [rawTitle = '', setTitle, fullTitle] = useEntityProp( + 'postType', + postType, + 'title', + postId + ); + + return ( +
+

Post Title: {fullTitle?.rendered}

+ + +
+ ) +}; + +export default Edit; \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/index.js b/src/blocks/dynamic-interactive-parent/index.js new file mode 100644 index 00000000..d5c9b9f9 --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/index.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import Edit from './edit'; +import { 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: () => { + return + } +}); \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/index.php b/src/blocks/dynamic-interactive-parent/index.php new file mode 100644 index 00000000..c04ef807 --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/index.php @@ -0,0 +1,29 @@ +post_title; + $counter = $attributes['counter']; + $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name)); + $inner_blocks = $block->inner_blocks; + $inner_blocks_html = ''; + foreach ($inner_blocks as $inner_block) { + $inner_blocks_html .= $inner_block->render(); + } + + return sprintf( + '
+

Post Title: %2$s

+ + + +
+ %3$s +
+
', + $wrapper_attributes, + $title, + $inner_blocks_html + ); +} diff --git a/src/blocks/dynamic-interactive-parent/style.scss b/src/blocks/dynamic-interactive-parent/style.scss new file mode 100644 index 00000000..79eb3dbd --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/style.scss @@ -0,0 +1,23 @@ +.wp-block-bhe-dynamic-interactive-parent { + padding: 15px 10px 15px 50px; + border: 1px solid rgb(31, 185, 64); + position: relative; +} + +.wp-block-bhe-dynamic-interactive-parent::before { + position: absolute; + top: 0; + right: 0; + background-color: rgb(31, 185, 64); + border: 1px solid rgb(31, 185, 64); + color: white; + margin: -1px; + padding: 0px 5px; + font-size: 10px; + content: 'BHE - Interactive Parent'; +} + +wp-block, +wp-inner-blocks { + display: contents; +} \ No newline at end of file diff --git a/src/blocks/dynamic-non-interactive-parent/block.json b/src/blocks/dynamic-non-interactive-parent/block.json new file mode 100644 index 00000000..49686a31 --- /dev/null +++ b/src/blocks/dynamic-non-interactive-parent/block.json @@ -0,0 +1,33 @@ +{ + "apiVersion": 2, + "title": "BHE - Dynamic Non Interactive Parent", + "name": "bhe/dynamic-non-interactive-parent", + "category": "text", + "icon": "flag", + "usesContext": [ + "postId", + "postType", + "queryId" + ], + "attributes": { + "title": { + "type": "string", + "source": "text", + "selector": "h2", + "public": true, + "default": "Default Non Interactive Title" + } + }, + "providesContext": { + "bhe/dynamic-non-interactive-title": "title" + }, + "supports": { + "color": { + "text": true + }, + "html": true + }, + "textdomain": "bhe", + "editorScript": "file:./index.js", + "style": "file:./style-index.css" +} \ No newline at end of file diff --git a/src/blocks/dynamic-non-interactive-parent/edit.js b/src/blocks/dynamic-non-interactive-parent/edit.js new file mode 100644 index 00000000..92a4203c --- /dev/null +++ b/src/blocks/dynamic-non-interactive-parent/edit.js @@ -0,0 +1,28 @@ +// 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'; + +const Edit = ({ attributes, setAttributes, context }) => { + const blockProps = useBlockProps(); + const { postType, postId, queryId } = context; + + const [rawTitle = '', setTitle, fullTitle] = useEntityProp( + 'postType', + postType, + 'title', + postId + ); + + return ( +
+

Post Title: {fullTitle?.rendered}

+ +
+ ) +}; + +export default Edit; \ No newline at end of file diff --git a/src/blocks/dynamic-non-interactive-parent/index.js b/src/blocks/dynamic-non-interactive-parent/index.js new file mode 100644 index 00000000..82290f4c --- /dev/null +++ b/src/blocks/dynamic-non-interactive-parent/index.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import Edit from './edit'; +import { InnerBlocks } from '@wordpress/block-editor'; +import './style.scss'; + +// Register the block +registerBlockType('bhe/dynamic-non-interactive-parent', { + edit: Edit, + // If I don't add this, the InnerBlocks don't seem to work in dynamic blocks. + save: () => { + return + } +}); \ No newline at end of file diff --git a/src/blocks/dynamic-non-interactive-parent/index.php b/src/blocks/dynamic-non-interactive-parent/index.php new file mode 100644 index 00000000..45b7c05e --- /dev/null +++ b/src/blocks/dynamic-non-interactive-parent/index.php @@ -0,0 +1,27 @@ +post_title; + $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name)); + $inner_blocks = $block->inner_blocks; + $inner_blocks_html = ''; + foreach ($inner_blocks as $inner_block) { + $inner_blocks_html .= $inner_block->render(); + } + + return sprintf( + '
+

Post Title: %2$s

+
+ %3$s +
+
', + $wrapper_attributes, + $title, + $inner_blocks_html + ); +} diff --git a/src/blocks/dynamic-non-interactive-parent/style.scss b/src/blocks/dynamic-non-interactive-parent/style.scss new file mode 100644 index 00000000..a29e439e --- /dev/null +++ b/src/blocks/dynamic-non-interactive-parent/style.scss @@ -0,0 +1,23 @@ +.wp-block-bhe-dynamic-non-interactive-parent { + border: 1px solid rgb(34, 168, 235); + position: relative; + padding: 25px 10px; +} + +.wp-block-bhe-dynamic-non-interactive-parent::before { + content: 'BHE - Non Interactive Parent'; + position: absolute; + top: 0; + right: 0; + border: 1px solid rgb(34, 168, 235); + background-color: rgb(34, 168, 235); + color: white; + margin: -1px; + padding: 0px 5px; + font-size: 10px; +} + +wp-block, +wp-inner-blocks { + display: contents; +} \ No newline at end of file From 6eb5e9dfdc09d60ef19ea97bbeaa68b15fe18a66 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 26 Aug 2022 12:55:27 +0200 Subject: [PATCH 02/11] Add fixes to dynamic child block --- src/blocks/dynamic-interactive-child/block.json | 9 ++++++++- src/blocks/dynamic-interactive-child/index.php | 7 +++++-- src/blocks/dynamic-interactive-child/view.js | 14 ++++++++++---- src/blocks/dynamic-interactive-parent/block.json | 3 ++- .../dynamic-non-interactive-parent/block.json | 3 ++- 5 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/blocks/dynamic-interactive-child/block.json b/src/blocks/dynamic-interactive-child/block.json index 2f2d9257..53ec1240 100644 --- a/src/blocks/dynamic-interactive-child/block.json +++ b/src/blocks/dynamic-interactive-child/block.json @@ -17,6 +17,12 @@ "public": true, "source": "text", "selector": ".dynamic-child-block-date" + }, + "state": { + "type": "object", + "public": true, + "source": "attribute", + "attribute": "state" } }, "supports": { @@ -26,7 +32,8 @@ "typography": { "fontSize": true }, - "html": true + "html": true, + "view": true }, "textdomain": "bhe", "editorScript": "file:./index.js", diff --git a/src/blocks/dynamic-interactive-child/index.php b/src/blocks/dynamic-interactive-child/index.php index 8c72d569..4f310266 100644 --- a/src/blocks/dynamic-interactive-child/index.php +++ b/src/blocks/dynamic-interactive-child/index.php @@ -2,12 +2,15 @@ function render_block_dynamic_interactive_child_bhe($attributes, $content, $block) { + wp_enqueue_script('bhe-dynamic-interactive-child-view-script'); + $post = get_post(); $date = $post->post_date; - $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name)); + $state = array('prop' => 'hola'); + $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name, 'state' => json_encode($state))); return sprintf( - '
+ '

Post Date: %2$s

Counter:

', diff --git a/src/blocks/dynamic-interactive-child/view.js b/src/blocks/dynamic-interactive-child/view.js index 308720fb..3955c599 100644 --- a/src/blocks/dynamic-interactive-child/view.js +++ b/src/blocks/dynamic-interactive-child/view.js @@ -1,9 +1,15 @@ -const View = ({ blockProps }) => { +import CounterContext from '../../context/counter'; +import ThemeContext from '../../context/theme'; +import { useContext } from '../../gutenberg-packages/wordpress-element'; + +const View = ({ blockProps, attributes }) => { + const counter = useContext(CounterContext); + return (
-

- Hola -

+

Pooooost Date: {attributes.date}

+

State: {attributes.state}

+

Counter: {counter}

); }; diff --git a/src/blocks/dynamic-interactive-parent/block.json b/src/blocks/dynamic-interactive-parent/block.json index 93ae9fcf..0960e78a 100644 --- a/src/blocks/dynamic-interactive-parent/block.json +++ b/src/blocks/dynamic-interactive-parent/block.json @@ -39,7 +39,8 @@ "__experimentalFontWeight": true, "__experimentalLetterSpacing": true }, - "html": true + "html": true, + "view": true }, "providesContext": { "bhe/dynamic-interactive-title": "title" diff --git a/src/blocks/dynamic-non-interactive-parent/block.json b/src/blocks/dynamic-non-interactive-parent/block.json index 49686a31..1e2bdc44 100644 --- a/src/blocks/dynamic-non-interactive-parent/block.json +++ b/src/blocks/dynamic-non-interactive-parent/block.json @@ -25,7 +25,8 @@ "color": { "text": true }, - "html": true + "html": true, + "view": true }, "textdomain": "bhe", "editorScript": "file:./index.js", From cd42bff9b033c8df2d8363570662d98ebe9273a8 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Mon, 29 Aug 2022 11:47:40 +0200 Subject: [PATCH 03/11] Change block to work with latest changes --- src/blocks/dynamic-interactive-child/block.json | 8 +------- src/blocks/dynamic-interactive-child/frontend.js | 4 ---- src/blocks/dynamic-interactive-child/index.php | 3 +-- src/blocks/dynamic-interactive-child/register-view.js | 4 ++++ src/blocks/dynamic-interactive-child/view.js | 3 +-- src/blocks/dynamic-non-interactive-parent/block.json | 3 ++- 6 files changed, 9 insertions(+), 16 deletions(-) delete mode 100644 src/blocks/dynamic-interactive-child/frontend.js create mode 100644 src/blocks/dynamic-interactive-child/register-view.js diff --git a/src/blocks/dynamic-interactive-child/block.json b/src/blocks/dynamic-interactive-child/block.json index 53ec1240..a85e12a4 100644 --- a/src/blocks/dynamic-interactive-child/block.json +++ b/src/blocks/dynamic-interactive-child/block.json @@ -17,12 +17,6 @@ "public": true, "source": "text", "selector": ".dynamic-child-block-date" - }, - "state": { - "type": "object", - "public": true, - "source": "attribute", - "attribute": "state" } }, "supports": { @@ -39,5 +33,5 @@ "editorScript": "file:./index.js", "editorStyle": "file:./style.css", "style": "file:./style-index.css", - "viewScript": "file:./frontend.js" + "viewScript": "file:./register-view.js" } \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-child/frontend.js b/src/blocks/dynamic-interactive-child/frontend.js deleted file mode 100644 index 0ceb2e22..00000000 --- a/src/blocks/dynamic-interactive-child/frontend.js +++ /dev/null @@ -1,4 +0,0 @@ -import { registerBlockType } from '../../gutenberg-packages/frontend'; -import View from './view'; - -registerBlockType('bhe/dynamic-interactive-child', View); diff --git a/src/blocks/dynamic-interactive-child/index.php b/src/blocks/dynamic-interactive-child/index.php index 4f310266..5ea112dc 100644 --- a/src/blocks/dynamic-interactive-child/index.php +++ b/src/blocks/dynamic-interactive-child/index.php @@ -6,8 +6,7 @@ function render_block_dynamic_interactive_child_bhe($attributes, $content, $bloc $post = get_post(); $date = $post->post_date; - $state = array('prop' => 'hola'); - $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name, 'state' => json_encode($state))); + $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name, 'statePatata' => $state)); return sprintf( '
diff --git a/src/blocks/dynamic-interactive-child/register-view.js b/src/blocks/dynamic-interactive-child/register-view.js new file mode 100644 index 00000000..9a136b7b --- /dev/null +++ b/src/blocks/dynamic-interactive-child/register-view.js @@ -0,0 +1,4 @@ +import registerBlockView from '../../gutenberg-packages/register-block-view'; +import View from './view'; + +registerBlockView('bhe/dynamic-interactive-child', View); diff --git a/src/blocks/dynamic-interactive-child/view.js b/src/blocks/dynamic-interactive-child/view.js index 3955c599..a6e49f14 100644 --- a/src/blocks/dynamic-interactive-child/view.js +++ b/src/blocks/dynamic-interactive-child/view.js @@ -7,8 +7,7 @@ const View = ({ blockProps, attributes }) => { return (
-

Pooooost Date: {attributes.date}

-

State: {attributes.state}

+

Post Date: {attributes.date}

Counter: {counter}

); diff --git a/src/blocks/dynamic-non-interactive-parent/block.json b/src/blocks/dynamic-non-interactive-parent/block.json index 1e2bdc44..ab65c4e6 100644 --- a/src/blocks/dynamic-non-interactive-parent/block.json +++ b/src/blocks/dynamic-non-interactive-parent/block.json @@ -30,5 +30,6 @@ }, "textdomain": "bhe", "editorScript": "file:./index.js", - "style": "file:./style-index.css" + "style": "file:./style-index.css", + "viewScript": "file:./register-view.js" } \ No newline at end of file From b975b5c2ce0ba733aeea474c2ad25d2a8e70a262 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Wed, 31 Aug 2022 10:37:31 +0200 Subject: [PATCH 04/11] Add initial version of all the dynamic blocks Co-authored-by: Luis Herranz --- .../dynamic-interactive-child/block.json | 4 +- .../dynamic-interactive-child/index.php | 16 +++++-- .../dynamic-interactive-child/style.scss | 8 ++-- src/blocks/dynamic-interactive-child/view.js | 20 +++++++-- .../dynamic-interactive-parent/block.json | 6 ++- .../dynamic-interactive-parent/index.php | 11 +++-- .../register-view.js | 4 ++ .../shared/button.js | 5 +++ .../shared/title.js | 9 ++++ src/blocks/dynamic-interactive-parent/view.js | 42 +++++++++++++++++++ .../dynamic-non-interactive-parent/block.json | 3 +- 11 files changed, 106 insertions(+), 22 deletions(-) create mode 100644 src/blocks/dynamic-interactive-parent/register-view.js create mode 100644 src/blocks/dynamic-interactive-parent/shared/button.js create mode 100644 src/blocks/dynamic-interactive-parent/shared/title.js create mode 100644 src/blocks/dynamic-interactive-parent/view.js diff --git a/src/blocks/dynamic-interactive-child/block.json b/src/blocks/dynamic-interactive-child/block.json index a85e12a4..d40ad91f 100644 --- a/src/blocks/dynamic-interactive-child/block.json +++ b/src/blocks/dynamic-interactive-child/block.json @@ -12,11 +12,11 @@ "bhe/dynamic-non-interactive-title" ], "attributes": { - "date": { + "state": { "type": "string", "public": true, "source": "text", - "selector": ".dynamic-child-block-date" + "selector": ".dynamic-child-block-state" } }, "supports": { diff --git a/src/blocks/dynamic-interactive-child/index.php b/src/blocks/dynamic-interactive-child/index.php index 5ea112dc..8ba6e38e 100644 --- a/src/blocks/dynamic-interactive-child/index.php +++ b/src/blocks/dynamic-interactive-child/index.php @@ -6,14 +6,22 @@ function render_block_dynamic_interactive_child_bhe($attributes, $content, $bloc $post = get_post(); $date = $post->post_date; - $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name, 'statePatata' => $state)); + $counter = 5; + $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name)); + $state = [ + "date" => $date, + "counter" => $counter + ]; return sprintf( '
-

Post Date: %2$s

-

Counter:

+

Post Date: %2$s

+

Counter: %3$s

+
', $wrapper_attributes, - $date + $date, + $counter, + wp_json_encode($state) ); } diff --git a/src/blocks/dynamic-interactive-child/style.scss b/src/blocks/dynamic-interactive-child/style.scss index fcbf5fb8..977b0e38 100644 --- a/src/blocks/dynamic-interactive-child/style.scss +++ b/src/blocks/dynamic-interactive-child/style.scss @@ -1,6 +1,6 @@ .wp-block-bhe-dynamic-interactive-child { padding: 15px 10px 15px 50px; - border: 1px solid rgb(255, 162, 0); + border: 1px solid rgb(117, 76, 5); position: relative; } @@ -8,13 +8,13 @@ position: absolute; top: 0; right: 0; - border: 1px solid rgb(255, 162, 0); - background-color: rgb(255, 162, 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 - Interactive Child'; + content: 'BHE - Dynamic Interactive Child'; } wp-block, diff --git a/src/blocks/dynamic-interactive-child/view.js b/src/blocks/dynamic-interactive-child/view.js index a6e49f14..73c76def 100644 --- a/src/blocks/dynamic-interactive-child/view.js +++ b/src/blocks/dynamic-interactive-child/view.js @@ -2,15 +2,27 @@ import CounterContext from '../../context/counter'; import ThemeContext from '../../context/theme'; import { useContext } from '../../gutenberg-packages/wordpress-element'; -const View = ({ blockProps, attributes }) => { +const View = ({ blockProps, attributes, context }) => { + const theme = useContext(ThemeContext); const counter = useContext(CounterContext); + const { date } = JSON.parse(attributes.state); return (
-

Post Date: {attributes.date}

-

Counter: {counter}

+

+ Block Context from interactive parent - "bhe/interactive-title":{' '} + {context['bhe/dynamic-interactive-title']} +

+

+ Block Context from non-interactive parent - + "bhe/non-interactive-title":{' '} + {context['bhe/dynamic-non-interactive-title']} +

+

React Context - "counter": {counter}

+

React Context - "theme": {theme}

+

Post Date: {date}

); }; -export default View; \ No newline at end of file +export default View; diff --git a/src/blocks/dynamic-interactive-parent/block.json b/src/blocks/dynamic-interactive-parent/block.json index 0960e78a..23d372a1 100644 --- a/src/blocks/dynamic-interactive-parent/block.json +++ b/src/blocks/dynamic-interactive-parent/block.json @@ -10,7 +10,8 @@ "usesContext": [ "postId", "postType", - "queryId" + "queryId", + "bhe/dynamic-non-interactive-title" ], "attributes": { "counter": { @@ -48,5 +49,6 @@ "textdomain": "bhe", "editorScript": "file:./index.js", "editorStyle": "file:./style.css", - "style": "file:./style-index.css" + "style": "file:./style-index.css", + "viewScript": "file:./register-view.js" } \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/index.php b/src/blocks/dynamic-interactive-parent/index.php index c04ef807..8c3a7751 100644 --- a/src/blocks/dynamic-interactive-parent/index.php +++ b/src/blocks/dynamic-interactive-parent/index.php @@ -2,6 +2,8 @@ function render_block_dynamic_interactive_parent_bhe($attributes, $content, $block) { + wp_enqueue_script('bhe-dynamic-interactive-parent-view-script'); + $post = get_post(); $title = $post->post_title; $counter = $attributes['counter']; @@ -17,13 +19,14 @@ function render_block_dynamic_interactive_parent_bhe($attributes, $content, $blo

Post Title: %2$s

- -
- %3$s -
+ + + %4$s +
', $wrapper_attributes, $title, + $counter, $inner_blocks_html ); } diff --git a/src/blocks/dynamic-interactive-parent/register-view.js b/src/blocks/dynamic-interactive-parent/register-view.js new file mode 100644 index 00000000..b81c2f6e --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/register-view.js @@ -0,0 +1,4 @@ +import registerBlockView from '../../gutenberg-packages/register-block-view'; +import View from './view'; + +registerBlockView('bhe/dynamic-interactive-parent', View); diff --git a/src/blocks/dynamic-interactive-parent/shared/button.js b/src/blocks/dynamic-interactive-parent/shared/button.js new file mode 100644 index 00000000..2384a54a --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/shared/button.js @@ -0,0 +1,5 @@ +const Button = ({ handler, children }) => { + return ; +}; + +export default Button; diff --git a/src/blocks/dynamic-interactive-parent/shared/title.js b/src/blocks/dynamic-interactive-parent/shared/title.js new file mode 100644 index 00000000..de3caf96 --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/shared/title.js @@ -0,0 +1,9 @@ +import { RichText } from '../../../gutenberg-packages/wordpress-blockeditor'; + +const Title = ({ children, ...props }) => ( + + {children} + +); + +export default Title; diff --git a/src/blocks/dynamic-interactive-parent/view.js b/src/blocks/dynamic-interactive-parent/view.js new file mode 100644 index 00000000..aacd14fb --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/view.js @@ -0,0 +1,42 @@ +import Counter from '../../context/counter'; +import Theme from '../../context/theme'; +import { useState } from '../../gutenberg-packages/wordpress-element'; +import Button from './shared/button'; +import Title from './shared/title'; + +const View = ({ + blockProps: { + className, + style: { fontWeight, ...style }, + }, + attributes: { counter: initialCounter, title }, + children, +}) => { + const [show, setShow] = useState(true); + const [bold, setBold] = useState(true); + const [counter, setCounter] = useState(initialCounter); + + return ( + + +
+ {title} + + + + {show && children} +
+ + + ); +}; + +export default View; diff --git a/src/blocks/dynamic-non-interactive-parent/block.json b/src/blocks/dynamic-non-interactive-parent/block.json index ab65c4e6..1e2bdc44 100644 --- a/src/blocks/dynamic-non-interactive-parent/block.json +++ b/src/blocks/dynamic-non-interactive-parent/block.json @@ -30,6 +30,5 @@ }, "textdomain": "bhe", "editorScript": "file:./index.js", - "style": "file:./style-index.css", - "viewScript": "file:./register-view.js" + "style": "file:./style-index.css" } \ No newline at end of file From 08cb7a513def247c43ab988cc62a80db551c8d36 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Wed, 31 Aug 2022 12:44:52 +0200 Subject: [PATCH 05/11] Use render instead of render_callback --- block-hydration-experiments.php | 16 ++-------- .../dynamic-interactive-child/block.json | 3 +- .../dynamic-interactive-child/index.php | 27 ---------------- .../dynamic-interactive-child/render.php | 18 +++++++++++ .../dynamic-interactive-parent/block.json | 3 +- .../dynamic-interactive-parent/index.php | 32 ------------------- .../dynamic-interactive-parent/render.php | 19 +++++++++++ .../dynamic-interactive-parent/style.scss | 8 ++--- .../dynamic-non-interactive-parent/block.json | 3 +- .../dynamic-non-interactive-parent/index.php | 27 ---------------- .../dynamic-non-interactive-parent/render.php | 14 ++++++++ .../dynamic-non-interactive-parent/style.scss | 8 ++--- 12 files changed, 67 insertions(+), 111 deletions(-) delete mode 100644 src/blocks/dynamic-interactive-child/index.php create mode 100644 src/blocks/dynamic-interactive-child/render.php delete mode 100644 src/blocks/dynamic-interactive-parent/index.php create mode 100644 src/blocks/dynamic-interactive-parent/render.php delete mode 100644 src/blocks/dynamic-non-interactive-parent/index.php create mode 100644 src/blocks/dynamic-non-interactive-parent/render.php diff --git a/block-hydration-experiments.php b/block-hydration-experiments.php index 9501163d..d18d9f60 100644 --- a/block-hydration-experiments.php +++ b/block-hydration-experiments.php @@ -22,26 +22,14 @@ function block_hydration_experiments_init() plugin_dir_path(__FILE__) . 'build/blocks/non-interactive-parent/' ); // Dynamic blocks - require_once __DIR__ . '/src/blocks/dynamic-interactive-parent/index.php'; register_block_type( - plugin_dir_path(__FILE__) . 'build/blocks/dynamic-interactive-parent/', - array( - 'render_callback' => 'render_block_dynamic_interactive_parent_bhe' - ) + plugin_dir_path(__FILE__) . 'build/blocks/dynamic-interactive-child/', ); - require_once __DIR__ . '/src/blocks/dynamic-interactive-child/index.php'; register_block_type( - plugin_dir_path(__FILE__) . 'build/blocks/dynamic-interactive-child/', - array( - 'render_callback' => 'render_block_dynamic_interactive_child_bhe' - ) + plugin_dir_path(__FILE__) . 'build/blocks/dynamic-interactive-parent/', ); - require_once __DIR__ . '/src/blocks/dynamic-non-interactive-parent/index.php'; register_block_type( plugin_dir_path(__FILE__) . 'build/blocks/dynamic-non-interactive-parent/', - array( - 'render_callback' => 'render_block_dynamic_non_interactive_parent_bhe' - ) ); } add_action('init', 'block_hydration_experiments_init'); diff --git a/src/blocks/dynamic-interactive-child/block.json b/src/blocks/dynamic-interactive-child/block.json index d40ad91f..a96a3f8c 100644 --- a/src/blocks/dynamic-interactive-child/block.json +++ b/src/blocks/dynamic-interactive-child/block.json @@ -33,5 +33,6 @@ "editorScript": "file:./index.js", "editorStyle": "file:./style.css", "style": "file:./style-index.css", - "viewScript": "file:./register-view.js" + "viewScript": "file:./register-view.js", + "render": "file:../../../src/blocks/dynamic-interactive-child/render.php" } \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-child/index.php b/src/blocks/dynamic-interactive-child/index.php deleted file mode 100644 index 8ba6e38e..00000000 --- a/src/blocks/dynamic-interactive-child/index.php +++ /dev/null @@ -1,27 +0,0 @@ -post_date; - $counter = 5; - $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name)); - $state = [ - "date" => $date, - "counter" => $counter - ]; - - return sprintf( - '
-

Post Date: %2$s

-

Counter: %3$s

- -
', - $wrapper_attributes, - $date, - $counter, - wp_json_encode($state) - ); -} diff --git a/src/blocks/dynamic-interactive-child/render.php b/src/blocks/dynamic-interactive-child/render.php new file mode 100644 index 00000000..df1eaf12 --- /dev/null +++ b/src/blocks/dynamic-interactive-child/render.php @@ -0,0 +1,18 @@ +post_date; +$counter = 5; +$state = [ + "date" => $date, + "counter" => $counter +]; +?> + +
> +

Post Date:

+

Counter:

+ +
\ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/block.json b/src/blocks/dynamic-interactive-parent/block.json index 23d372a1..64d89379 100644 --- a/src/blocks/dynamic-interactive-parent/block.json +++ b/src/blocks/dynamic-interactive-parent/block.json @@ -50,5 +50,6 @@ "editorScript": "file:./index.js", "editorStyle": "file:./style.css", "style": "file:./style-index.css", - "viewScript": "file:./register-view.js" + "viewScript": "file:./register-view.js", + "render": "file:../../../src/blocks/dynamic-interactive-parent/render.php" } \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/index.php b/src/blocks/dynamic-interactive-parent/index.php deleted file mode 100644 index 8c3a7751..00000000 --- a/src/blocks/dynamic-interactive-parent/index.php +++ /dev/null @@ -1,32 +0,0 @@ -post_title; - $counter = $attributes['counter']; - $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name)); - $inner_blocks = $block->inner_blocks; - $inner_blocks_html = ''; - foreach ($inner_blocks as $inner_block) { - $inner_blocks_html .= $inner_block->render(); - } - - return sprintf( - '
-

Post Title: %2$s

- - - - - %4$s - -
', - $wrapper_attributes, - $title, - $counter, - $inner_blocks_html - ); -} diff --git a/src/blocks/dynamic-interactive-parent/render.php b/src/blocks/dynamic-interactive-parent/render.php new file mode 100644 index 00000000..a9b908d5 --- /dev/null +++ b/src/blocks/dynamic-interactive-parent/render.php @@ -0,0 +1,19 @@ +inner_blocks as $inner_block) { + $inner_blocks_html .= $inner_block->render(); +} +?> + +
> +

Post Title: post_title ?>

+ + + + + + +
\ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/style.scss b/src/blocks/dynamic-interactive-parent/style.scss index 79eb3dbd..519dddca 100644 --- a/src/blocks/dynamic-interactive-parent/style.scss +++ b/src/blocks/dynamic-interactive-parent/style.scss @@ -1,6 +1,6 @@ .wp-block-bhe-dynamic-interactive-parent { padding: 15px 10px 15px 50px; - border: 1px solid rgb(31, 185, 64); + border: 1px solid rgb(1, 89, 20); position: relative; } @@ -8,13 +8,13 @@ position: absolute; top: 0; right: 0; - background-color: rgb(31, 185, 64); - border: 1px solid rgb(31, 185, 64); + background-color: rgb(1, 89, 20); + border: 1px solid rgb(1, 89, 20); color: white; margin: -1px; padding: 0px 5px; font-size: 10px; - content: 'BHE - Interactive Parent'; + content: 'BHE - Dynamic Interactive Parent'; } wp-block, diff --git a/src/blocks/dynamic-non-interactive-parent/block.json b/src/blocks/dynamic-non-interactive-parent/block.json index 1e2bdc44..ab9abeeb 100644 --- a/src/blocks/dynamic-non-interactive-parent/block.json +++ b/src/blocks/dynamic-non-interactive-parent/block.json @@ -30,5 +30,6 @@ }, "textdomain": "bhe", "editorScript": "file:./index.js", - "style": "file:./style-index.css" + "style": "file:./style-index.css", + "render": "file:../../../src/blocks/dynamic-non-interactive-parent/render.php" } \ No newline at end of file diff --git a/src/blocks/dynamic-non-interactive-parent/index.php b/src/blocks/dynamic-non-interactive-parent/index.php deleted file mode 100644 index 45b7c05e..00000000 --- a/src/blocks/dynamic-non-interactive-parent/index.php +++ /dev/null @@ -1,27 +0,0 @@ -post_title; - $wrapper_attributes = get_block_wrapper_attributes(array('class' => $align_class_name)); - $inner_blocks = $block->inner_blocks; - $inner_blocks_html = ''; - foreach ($inner_blocks as $inner_block) { - $inner_blocks_html .= $inner_block->render(); - } - - return sprintf( - '
-

Post Title: %2$s

-
- %3$s -
-
', - $wrapper_attributes, - $title, - $inner_blocks_html - ); -} diff --git a/src/blocks/dynamic-non-interactive-parent/render.php b/src/blocks/dynamic-non-interactive-parent/render.php new file mode 100644 index 00000000..9f0eb054 --- /dev/null +++ b/src/blocks/dynamic-non-interactive-parent/render.php @@ -0,0 +1,14 @@ +inner_blocks as $inner_block) { + $inner_blocks_html .= $inner_block->render(); +} +?> + +
> +

Post Title: post_title ?>

+
+ +
+
\ No newline at end of file diff --git a/src/blocks/dynamic-non-interactive-parent/style.scss b/src/blocks/dynamic-non-interactive-parent/style.scss index a29e439e..a5731ff4 100644 --- a/src/blocks/dynamic-non-interactive-parent/style.scss +++ b/src/blocks/dynamic-non-interactive-parent/style.scss @@ -1,16 +1,16 @@ .wp-block-bhe-dynamic-non-interactive-parent { - border: 1px solid rgb(34, 168, 235); + border: 1px solid rgb(0, 86, 129); position: relative; padding: 25px 10px; } .wp-block-bhe-dynamic-non-interactive-parent::before { - content: 'BHE - Non Interactive Parent'; + content: 'BHE - Dynamic Non Interactive Parent'; position: absolute; top: 0; right: 0; - border: 1px solid rgb(34, 168, 235); - background-color: rgb(34, 168, 235); + border: 1px solid rgb(0, 86, 129); + background-color: rgb(0, 86, 129); color: white; margin: -1px; padding: 0px 5px; From c308d4af11505b7337e27aadef5f8d454ed1af33 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 2 Sep 2022 14:33:50 +0200 Subject: [PATCH 06/11] Fix blockTitle not being saved in dynamic blocks --- .../dynamic-interactive-child/render.php | 13 ++++++++---- .../dynamic-interactive-parent/block.json | 10 +++++++-- src/blocks/dynamic-interactive-parent/edit.js | 21 +++++++++++++++++-- .../dynamic-interactive-parent/index.js | 11 +++++++--- .../register-view.js | 6 +++++- .../dynamic-interactive-parent/render.php | 5 +++-- .../shared/title.js | 2 +- .../dynamic-non-interactive-parent/block.json | 13 ++++++++---- .../dynamic-non-interactive-parent/edit.js | 10 +++++++++ .../dynamic-non-interactive-parent/index.js | 11 +++++++--- 10 files changed, 80 insertions(+), 22 deletions(-) diff --git a/src/blocks/dynamic-interactive-child/render.php b/src/blocks/dynamic-interactive-child/render.php index df1eaf12..ee5790e0 100644 --- a/src/blocks/dynamic-interactive-child/render.php +++ b/src/blocks/dynamic-interactive-child/render.php @@ -2,16 +2,21 @@ wp_enqueue_script('bhe-dynamic-interactive-child-view-script'); $post = get_post(); $date = $post->post_date; -$counter = 5; $state = [ - "date" => $date, - "counter" => $counter + "date" => $date ]; ?>
> +

+ Block Context from interactive parent - "bhe/interactive-title": context['bhe/dynamic-interactive-title'] ?> +

+

+ Block Context from non-interactive parent - "bhe/non-interactive-title": context['bhe/dynamic-non-interactive-title'] ?> +

+

React Context - "counter":

+

React Context - "theme":

Post Date:

-

Counter:

diff --git a/src/blocks/dynamic-interactive-parent/block.json b/src/blocks/dynamic-interactive-parent/block.json index 64d89379..c7fa7cca 100644 --- a/src/blocks/dynamic-interactive-parent/block.json +++ b/src/blocks/dynamic-interactive-parent/block.json @@ -19,12 +19,18 @@ "default": 0, "public": true }, - "title": { + "postTitle": { "type": "string", "source": "text", "selector": "h2", + "public": true + }, + "blockTitle": { + "type": "string", + "source": "text", + "selector": ".dynamic-interactive-parent-block-title", "public": true, - "default": "Default Interactive Title" + "default": "Default Title" }, "secret": { "type": "string", diff --git a/src/blocks/dynamic-interactive-parent/edit.js b/src/blocks/dynamic-interactive-parent/edit.js index 527ba0bb..7ad27d18 100644 --- a/src/blocks/dynamic-interactive-parent/edit.js +++ b/src/blocks/dynamic-interactive-parent/edit.js @@ -6,8 +6,12 @@ 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 blockProps = useBlockProps(); + const { counter, blockTitle, secret } = attributes; const { postType, postId, queryId } = context; const [rawTitle = '', setTitle, fullTitle] = useEntityProp( @@ -20,9 +24,22 @@ const Edit = ({ attributes, setAttributes, context }) => { return (

Post Title: {fullTitle?.rendered}

- + +
+ This is a secret attribute that should not be serialized:{' '} + {secret} +
) diff --git a/src/blocks/dynamic-interactive-parent/index.js b/src/blocks/dynamic-interactive-parent/index.js index d5c9b9f9..9abd860d 100644 --- a/src/blocks/dynamic-interactive-parent/index.js +++ b/src/blocks/dynamic-interactive-parent/index.js @@ -3,14 +3,19 @@ */ import { registerBlockType } from '@wordpress/blocks'; import Edit from './edit'; -import { InnerBlocks } from '@wordpress/block-editor'; +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: () => { - return + save: ({ attributes }) => { + return ( + <> + + + + ) } }); \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/register-view.js b/src/blocks/dynamic-interactive-parent/register-view.js index b81c2f6e..10f90d4c 100644 --- a/src/blocks/dynamic-interactive-parent/register-view.js +++ b/src/blocks/dynamic-interactive-parent/register-view.js @@ -1,4 +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); +registerBlockView('bhe/dynamic-interactive-parent', View, { + providesContext: [ThemeContext, CounterContext], +}); diff --git a/src/blocks/dynamic-interactive-parent/render.php b/src/blocks/dynamic-interactive-parent/render.php index a9b908d5..7f91a01b 100644 --- a/src/blocks/dynamic-interactive-parent/render.php +++ b/src/blocks/dynamic-interactive-parent/render.php @@ -1,18 +1,19 @@ inner_blocks as $inner_block) { $inner_blocks_html .= $inner_block->render(); } +var_dump($attributes); ?>
>

Post Title: post_title ?>

+

- + diff --git a/src/blocks/dynamic-interactive-parent/shared/title.js b/src/blocks/dynamic-interactive-parent/shared/title.js index de3caf96..8fdd696b 100644 --- a/src/blocks/dynamic-interactive-parent/shared/title.js +++ b/src/blocks/dynamic-interactive-parent/shared/title.js @@ -1,7 +1,7 @@ import { RichText } from '../../../gutenberg-packages/wordpress-blockeditor'; const Title = ({ children, ...props }) => ( - + {children} ); diff --git a/src/blocks/dynamic-non-interactive-parent/block.json b/src/blocks/dynamic-non-interactive-parent/block.json index ab9abeeb..149c9e3b 100644 --- a/src/blocks/dynamic-non-interactive-parent/block.json +++ b/src/blocks/dynamic-non-interactive-parent/block.json @@ -10,16 +10,21 @@ "queryId" ], "attributes": { - "title": { + "postTitle": { "type": "string", "source": "text", "selector": "h2", - "public": true, - "default": "Default Non Interactive Title" + "public": true + }, + "blockTitle": { + "type": "string", + "source": "text", + "selector": ".dynamic-non-interactive-parent-block-title", + "public": true } }, "providesContext": { - "bhe/dynamic-non-interactive-title": "title" + "bhe/dynamic-non-interactive-title": "blockTitle" }, "supports": { "color": { diff --git a/src/blocks/dynamic-non-interactive-parent/edit.js b/src/blocks/dynamic-non-interactive-parent/edit.js index 92a4203c..8a19f1b9 100644 --- a/src/blocks/dynamic-non-interactive-parent/edit.js +++ b/src/blocks/dynamic-non-interactive-parent/edit.js @@ -5,6 +5,7 @@ import '@wordpress/block-editor'; import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; import { useEntityProp } from '@wordpress/core-data'; +import { RichText } from '../../gutenberg-packages/wordpress-blockeditor'; const Edit = ({ attributes, setAttributes, context }) => { const blockProps = useBlockProps(); @@ -20,6 +21,15 @@ const Edit = ({ attributes, setAttributes, context }) => { return (

Post Title: {fullTitle?.rendered}

+ setAttributes({ blockTitle: val })} + placeholder="This will be passed through context to child blocks" + value={attributes.blockTitle} + > + {attributes.blockTitle} +
) diff --git a/src/blocks/dynamic-non-interactive-parent/index.js b/src/blocks/dynamic-non-interactive-parent/index.js index 82290f4c..154a69b2 100644 --- a/src/blocks/dynamic-non-interactive-parent/index.js +++ b/src/blocks/dynamic-non-interactive-parent/index.js @@ -3,14 +3,19 @@ */ import { registerBlockType } from '@wordpress/blocks'; import Edit from './edit'; -import { InnerBlocks } from '@wordpress/block-editor'; +import { RichText, InnerBlocks } from '@wordpress/block-editor'; import './style.scss'; // Register the block registerBlockType('bhe/dynamic-non-interactive-parent', { edit: Edit, // If I don't add this, the InnerBlocks don't seem to work in dynamic blocks. - save: () => { - return + save: ({ attributes }) => { + return ( + <> + + + + ) } }); \ No newline at end of file From 09a4e73e8c0dd4b15b483a379528591f145b1918 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 13 Sep 2022 10:40:07 +0200 Subject: [PATCH 07/11] Clean code of the blocks --- src/blocks/dynamic-interactive-parent/block.json | 11 ++--------- src/blocks/dynamic-interactive-parent/edit.js | 2 +- src/blocks/dynamic-interactive-parent/view.js | 6 +++--- src/blocks/dynamic-non-interactive-parent/block.json | 6 ------ src/blocks/dynamic-non-interactive-parent/index.js | 2 +- src/blocks/dynamic-non-interactive-parent/render.php | 1 + 6 files changed, 8 insertions(+), 20 deletions(-) diff --git a/src/blocks/dynamic-interactive-parent/block.json b/src/blocks/dynamic-interactive-parent/block.json index c7fa7cca..a33a39d0 100644 --- a/src/blocks/dynamic-interactive-parent/block.json +++ b/src/blocks/dynamic-interactive-parent/block.json @@ -19,18 +19,11 @@ "default": 0, "public": true }, - "postTitle": { - "type": "string", - "source": "text", - "selector": "h2", - "public": true - }, "blockTitle": { "type": "string", "source": "text", "selector": ".dynamic-interactive-parent-block-title", - "public": true, - "default": "Default Title" + "public": true }, "secret": { "type": "string", @@ -50,7 +43,7 @@ "view": true }, "providesContext": { - "bhe/dynamic-interactive-title": "title" + "bhe/dynamic-interactive-title": "blockTitle" }, "textdomain": "bhe", "editorScript": "file:./index.js", diff --git a/src/blocks/dynamic-interactive-parent/edit.js b/src/blocks/dynamic-interactive-parent/edit.js index 7ad27d18..b886ec4f 100644 --- a/src/blocks/dynamic-interactive-parent/edit.js +++ b/src/blocks/dynamic-interactive-parent/edit.js @@ -26,7 +26,7 @@ const Edit = ({ attributes, setAttributes, context }) => {

Post Title: {fullTitle?.rendered}

setAttributes({ blockTitle })} + onChange={(val) => setAttributes({ blockTitle: val })} placeholder="This will be passed through context to child blocks" className="dynamic-interactive-parent-block-title" > diff --git a/src/blocks/dynamic-interactive-parent/view.js b/src/blocks/dynamic-interactive-parent/view.js index aacd14fb..7ce9d5ac 100644 --- a/src/blocks/dynamic-interactive-parent/view.js +++ b/src/blocks/dynamic-interactive-parent/view.js @@ -9,11 +9,11 @@ const View = ({ className, style: { fontWeight, ...style }, }, - attributes: { counter: initialCounter, title }, + attributes: { counter: initialCounter, blockTitle }, children, }) => { const [show, setShow] = useState(true); - const [bold, setBold] = useState(true); + const [bold, setBold] = useState(false); const [counter, setCounter] = useState(initialCounter); return ( @@ -26,7 +26,7 @@ const View = ({ fontWeight: bold ? 900 : fontWeight, }} > - <Title>{title} + Block Title: {blockTitle} diff --git a/src/blocks/dynamic-non-interactive-parent/block.json b/src/blocks/dynamic-non-interactive-parent/block.json index 33504d57..b0776d7b 100644 --- a/src/blocks/dynamic-non-interactive-parent/block.json +++ b/src/blocks/dynamic-non-interactive-parent/block.json @@ -12,8 +12,6 @@ "attributes": { "blockTitle": { "type": "string", - "source": "text", - "selector": ".dynamic-non-interactive-parent-block-title", "public": true } }, From a26049a19267d76c6034d7cd1eb542161395c494 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Fri, 23 Sep 2022 10:42:11 +0200 Subject: [PATCH 11/11] Change render properties --- package.json | 2 +- src/blocks/dynamic-interactive-child/block.json | 2 +- src/blocks/dynamic-interactive-parent/block.json | 2 +- src/blocks/dynamic-non-interactive-parent/block.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 3cc32895..b81db0e5 100644 --- a/package.json +++ b/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" diff --git a/src/blocks/dynamic-interactive-child/block.json b/src/blocks/dynamic-interactive-child/block.json index a96a3f8c..cb118afc 100644 --- a/src/blocks/dynamic-interactive-child/block.json +++ b/src/blocks/dynamic-interactive-child/block.json @@ -34,5 +34,5 @@ "editorStyle": "file:./style.css", "style": "file:./style-index.css", "viewScript": "file:./register-view.js", - "render": "file:../../../src/blocks/dynamic-interactive-child/render.php" + "render": "file:./render.php" } \ No newline at end of file diff --git a/src/blocks/dynamic-interactive-parent/block.json b/src/blocks/dynamic-interactive-parent/block.json index 570caf74..3bb66d09 100644 --- a/src/blocks/dynamic-interactive-parent/block.json +++ b/src/blocks/dynamic-interactive-parent/block.json @@ -53,5 +53,5 @@ "editorStyle": "file:./style.css", "style": "file:./style-index.css", "viewScript": "file:./register-view.js", - "render": "file:../../../src/blocks/dynamic-interactive-parent/render.php" + "render": "file:./render.php" } \ No newline at end of file diff --git a/src/blocks/dynamic-non-interactive-parent/block.json b/src/blocks/dynamic-non-interactive-parent/block.json index b0776d7b..ecd0e21b 100644 --- a/src/blocks/dynamic-non-interactive-parent/block.json +++ b/src/blocks/dynamic-non-interactive-parent/block.json @@ -28,5 +28,5 @@ "textdomain": "bhe", "editorScript": "file:./index.js", "style": "file:./style-index.css", - "render": "file:../../../src/blocks/dynamic-non-interactive-parent/render.php" + "render": "file:./render.php" } \ No newline at end of file