Add initial version of all the dynamic blocks

Co-authored-by: Luis Herranz <[email protected]>

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": {

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(
         '<div %1$s>
-            <p>Post Date: <span class="dynamic-child-block-date">%2$s</span></p>
-            <p>Counter: </p>
+            <p>Post Date: %2$s</p>
+            <p>Counter: %3$s</p>
+            <script class="dynamic-child-block-state" type="application/json">%4$s</script>
         </div>',
         $wrapper_attributes,
-        $date
+        $date,
+        $counter,
+        wp_json_encode($state)
     );
 }

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

@@ -1,20 +1,20 @@
 .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;
 }
 
 .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);
+    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,

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 (
         <div {...blockProps}>
-            <p>Post Date: {attributes.date}</p>
-            <p>Counter: {counter}</p>
+            <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;
+export default View;

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"
 }

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
             <h2>Post Title: %2$s</h2>
             <button>Show</button>
             <button>Bold</button>
-            <button></button>
-            <div>
-                %3$s
-            </div>
+            <button>%3$s</button>
+            <wp-inner-blocks>
+                %4$s
+            </wp-inner-blocks>
         </div>',
         $wrapper_attributes,
         $title,
+        $counter,
         $inner_blocks_html
     );
 }

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);

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="title" {...props}>
+		{children}
+	</RichText>
+);
+
+export default Title;

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 (
+        <Counter.Provider value={counter}>
+            <Theme.Provider value="cool theme">
+                <div
+                    className={`${className} ${show ? 'show' : 'hide'}`}
+                    style={{
+                        ...style,
+                        fontWeight: bold ? 900 : fontWeight,
+                    }}
+                >
+                    <Title>{title}</Title>
+                    <Button handler={() => setShow(!show)}>Show</Button>
+                    <Button handler={() => setBold(!bold)}>Bold</Button>
+                    <button onClick={() => setCounter(counter + 1)}>
+                        {counter}
+                    </button>
+                    {show && children}
+                </div>
+            </Theme.Provider>
+        </Counter.Provider>
+    );
+};
+
+export default View;

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"
 }