From 8d8a768bd8137067b3fb8a141366ae72d286613b Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 11 Jul 2023 14:44:47 +0200
Subject: [PATCH] Add interactive variant

---
 packages/create-block/lib/init-block.js       |  2 ++
 packages/create-block/lib/scaffold.js         |  2 ++
 packages/create-block/lib/templates.js        | 10 ++++++
 .../lib/templates/block/render.php.mustache   | 34 +++++++++++++++++++
 .../lib/templates/block/view.js.mustache      | 24 +++++++++++++
 5 files changed, 72 insertions(+)
 create mode 100644 packages/create-block/lib/templates/block/view.js.mustache

diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js
index 2a83035f9dc6f2..d26ef4a909ab7b 100644
--- a/packages/create-block/lib/init-block.js
+++ b/packages/create-block/lib/init-block.js
@@ -30,6 +30,7 @@ async function initBlockJSON( {
 	editorStyle,
 	style,
 	render,
+	viewScript,
 	customBlockJSON,
 } ) {
 	info( '' );
@@ -59,6 +60,7 @@ async function initBlockJSON( {
 					editorStyle,
 					style,
 					render,
+					viewScript,
 					...customBlockJSON,
 				} ).filter( ( [ , value ] ) => !! value )
 			),
diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
index cdeaf85a97bb4a..a8d9c3859e20d3 100644
--- a/packages/create-block/lib/scaffold.js
+++ b/packages/create-block/lib/scaffold.js
@@ -44,6 +44,7 @@ module.exports = async (
 		editorStyle,
 		style,
 		render,
+		viewScript,
 		variantVars,
 		customPackageJSON,
 		customBlockJSON,
@@ -103,6 +104,7 @@ module.exports = async (
 		editorStyle,
 		style,
 		render,
+		viewScript,
 		customPackageJSON,
 		customBlockJSON,
 		...variantVars,
diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js
index 018385c9fde82c..d27c7dd7b700a6 100644
--- a/packages/create-block/lib/templates.js
+++ b/packages/create-block/lib/templates.js
@@ -61,6 +61,16 @@ const predefinedPluginTemplates = {
 				title: 'Example Dynamic',
 				render: 'file:./render.php',
 			},
+			interactive: {
+				slug: 'example-interactive',
+				title: 'Example Interactive',
+				npmDependencies: [ '@wordpress/interactivity' ],
+				supports: {
+					interactivity: true,
+				},
+				render: 'file:./render.php',
+				viewScript: 'file:./view.js',
+			},
 		},
 	},
 };
diff --git a/packages/create-block/lib/templates/block/render.php.mustache b/packages/create-block/lib/templates/block/render.php.mustache
index 43ba65e0790561..01309cc3a764bb 100644
--- a/packages/create-block/lib/templates/block/render.php.mustache
+++ b/packages/create-block/lib/templates/block/render.php.mustache
@@ -8,3 +8,37 @@
 	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
 {{/isDynamicVariant}}
+
+{{#isInteractiveVariant}}
+<?php
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+
+$unique_id = uniqid( 'p-' );
+?>
+
+<div
+	<?php echo get_block_wrapper_attributes(); ?>
+	data-wp-interactive
+	data-wp-context='{ "{{namespace}}": { "isOpen": false } }'
+	data-wp-effect="effects.{{namespace}}.logIsOpen"
+>
+	<button
+		data-wp-on--click="actions.{{namespace}}.toggle"
+		data-wp-bind--aria-expanded="context.{{namespace}}.isOpen"
+		aria-controls="p-<?php echo $unique_id; ?>"
+	>
+		<?php _e( 'Toggle', '{{textdomain}}' ); ?>
+	</button>
+ 
+	<p
+		id="p-<?php echo $unique_id; ?>"
+		data-wp-bind--hidden="!context.{{namespace}}.isOpen"
+	>
+		<?php
+			_e( '{{title}} - hello from an interactive block!', '{{textdomain}}' );
+		?>
+	</p>
+</div>
+{{/isInteractiveVariant}}
\ No newline at end of file
diff --git a/packages/create-block/lib/templates/block/view.js.mustache b/packages/create-block/lib/templates/block/view.js.mustache
new file mode 100644
index 00000000000000..09301774e50fff
--- /dev/null
+++ b/packages/create-block/lib/templates/block/view.js.mustache
@@ -0,0 +1,24 @@
+{{#isInteractiveVariant}}
+/**
+ * WordPress dependencies
+ */
+import { store } from "@wordpress/interactivity";
+ 
+store( {
+	actions: {
+		'{{namespace}}': {
+			toggle: ( { context } ) => {
+				context[ '{{namespace}}' ].isOpen = !context[ '{{namespace}}' ].isOpen;
+			},
+		},
+	},
+	effects: {
+		'{{namespace}}': {
+			logIsOpen: ( { context } ) => {
+				// Log the value of `isOpen` each time it changes.
+				console.log( `Is open: ${ context[ '{{namespace}}' ].isOpen }` );
+			},
+		},
+	},
+} );
+{{/isInteractiveVariant}}
\ No newline at end of file