Create block interactive template (discarded)

docs/manifest.json

@@ -1505,6 +1505,12 @@
 		"markdown_source": "../packages/core-data/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/create-block-interactive-template",
+		"slug": "packages-create-block-interactive-template",
+		"markdown_source": "../packages/create-block-interactive-template/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/create-block-tutorial-template",
 		"slug": "packages-create-block-tutorial-template",

packages/create-block-interactive-template/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/create-block-interactive-template/CHANGELOG.md

@@ -0,0 +1 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->

packages/create-block-interactive-template/README.md

@@ -0,0 +1,19 @@
+# Create Block Interactive Template
+
+This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks
+
+## Usage
+
+This block template can be used by running the following command:
+
+```bash
+npx  @wordpress/create-block --template @wordpress/create-block-interactive-template
+```
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/create-block-interactive-template/block-templates/README.md.mustache

@@ -0,0 +1,16 @@
+# Interactive Block
+
+> **Warning**
+> **This block requires Gutenberg 16.2 or superior to work**. The Interactivity API is, at the moment, not part of WordPress Core as it is still very experimental, and very likely to change. 
+
+> **Note**
+> This block uses the API shared at [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). 
+
+{{#isBasicVariant}}
+This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API.
+{{/isBasicVariant}}
+
+Check the following resources for more info about the Interactivity API:
+- [`@wordpress/interactivity` package](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/README.md)
+- [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/)
+- [“Interactivity API” category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions

packages/create-block-interactive-template/block-templates/render.php.mustache

@@ -0,0 +1,33 @@
+{{#isBasicVariant}}
+<?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>
+{{/isBasicVariant}}

packages/create-block-interactive-template/block-templates/view.js.mustache

@@ -0,0 +1,48 @@
+{{#isBasicVariant}}
+
+/**
+
+ * 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 }` );
+
+			},
+
+		},
+
+	},
+
+} );
+
+{{/isBasicVariant}}

packages/create-block-interactive-template/index.js

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+module.exports = {
+	defaultValues: {
+		slug: 'example-interactive',
+		title: 'Example Interactive',
+		description: 'An interactive block with the Interactivity API',
+		dashicon: 'interactivity',
+		npmDependencies: [ '@wordpress/interactivity' ],
+		supports: {
+			interactivity: true,
+		},
+		render: 'file:./render.php',
+		viewScript: 'file:./view.js',
+	},
+	variants: {
+		basic: {},
+	},
+	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
+	blockTemplatesPath: join( __dirname, 'block-templates' ),
+	assetsPath: join( __dirname, 'assets' ),
+};

packages/create-block-interactive-template/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "@wordpress/create-block-interactive-template",
+	"version": "1.0.0",
+	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"create block",
+		"block template",
+		"Interactivity API"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/create-block",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/create-block-interactive-template"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/create-block-interactive-template/plugin-templates/$slug.php.mustache

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Plugin Name:       {{title}}
+{{#pluginURI}}
+ * Plugin URI:        {{{pluginURI}}}
+{{/pluginURI}}
+{{#description}}
+ * Description:       {{description}}
+{{/description}}
+ * Version:           {{version}}
+ * Requires at least: 6.1
+ * Requires PHP:      7.0
+{{#author}}
+ * Author:            {{author}}
+{{/author}}
+{{#license}}
+ * License:           {{license}}
+{{/license}}
+{{#licenseURI}}
+ * License URI:       {{{licenseURI}}}
+{{/licenseURI}}
+ * Text Domain:       {{textdomain}}
+{{#domainPath}}
+ * Domain Path:       {{{domainPath}}}
+{{/domainPath}}
+{{#updateURI}}
+ * Update URI:        {{{updateURI}}}
+{{/updateURI}}
+ *
+ * @package           {{namespace}}
+ */
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	register_block_type( __DIR__ . '/build' );
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

packages/create-block-interactive-template/plugin-templates/readme.txt.mustache

@@ -0,0 +1,61 @@
+=== {{title}} ===
+{{#author}}
+Contributors:      {{author}}
+{{/author}}
+Tags:              block
+Tested up to:      6.1
+Stable tag:        {{version}}
+{{#license}}
+License:           {{license}}
+{{/license}}
+{{#licenseURI}}
+License URI:       {{{licenseURI}}}
+{{/licenseURI}}
+
+{{description}}
+
+== Description ==
+
+This is the long description. No limit, and you can use Markdown (as well as in the following sections).
+
+For backwards compatibility, if this section is missing, the full length of the short description will be used, and
+Markdown parsed.
+
+== Installation ==
+
+This section describes how to install the plugin and get it working.
+
+e.g.
+
+1. Upload the plugin files to the `/wp-content/plugins/{{slug}}` directory, or install the plugin through the WordPress plugins screen directly.
+1. Activate the plugin through the 'Plugins' screen in WordPress
+
+
+== Frequently Asked Questions ==
+
+= A question that someone might have =
+
+An answer to that question.
+
+= What about foo bar? =
+
+Answer to foo bar dilemma.
+
+== Screenshots ==
+
+1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
+the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
+directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
+(or jpg, jpeg, gif).
+2. This is the second screen shot
+
+== Changelog ==
+
+= {{version}} =
+* Release
+
+== Arbitrary section ==
+
+You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
+plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
+"installation." Arbitrary sections will be shown below the built-in sections outlined above.

packages/create-block/lib/scaffold.js

@@ -44,7 +44,6 @@ module.exports = async (
 		editorStyle,
 		style,
 		render,
-		viewScript,
 		variantVars,
 		customPackageJSON,
 		customBlockJSON,
@@ -104,7 +103,6 @@ module.exports = async (
 		editorStyle,
 		style,
 		render,
-		viewScript,
 		customPackageJSON,
 		customBlockJSON,
 		...variantVars,

packages/create-block/lib/templates.js

@@ -61,16 +61,6 @@ 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',
-			},
 		},
 	},
 };

packages/create-block/lib/templates/block/view.js.mustache

@@ -1,24 +1 @@
-{{#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}}
+console.log("Hello World! (from {{namespace}}-{{slug}} block)")