Create block interactive template (#52612)

* full structure of block now available

* Remove reference to save.js and the template.

* Move render and viewScript into default values.

* Add support and template for viewScript to the create-block package.

* Update tests to account for 2 new files being created.

* Reset the project root expected number.

* Update the expected number of files in the build directory.

* Allow a console.log in the template.

* Run docs:build to update manifest.json.

* better default styles for the block

* simplified w/ template for edit.js and fixed issues with it

* removed assetsPath as it's not needed for this example

* removed unnecesary double blank lines

---------

Co-authored-by: Ryan Welcher <me@ryanwelcher.com>

bin/test-create-block.sh

@@ -55,7 +55,7 @@ if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the project root, but found $actual."
     exit 1
 fi
-expected=6
+expected=7
 actual=$( find src -maxdepth 1 -type f | wc -l )
 if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the \`src\` directory, but found $actual."
@@ -69,7 +69,7 @@ status "Building block..."
 ../node_modules/.bin/wp-scripts build
 
 status "Verifying build..."
-expected=5
+expected=7
 actual=$( find build -maxdepth 1 -type f | wc -l )
 if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the \`build\` directory, but found $actual."

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/edit.js.mustache

@@ -0,0 +1,36 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @param {Object}   props               Properties passed to the function.
+ * @param {Object}   props.attributes    Available block attributes.
+ * @param {Function} props.setAttributes Function that updates individual attributes.
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps();
+	
+	return (
+		<p { ...blockProps }>
+			{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }
+		</p>
+	);
+}

packages/create-block-interactive-template/block-templates/editor.scss.mustache

@@ -0,0 +1,12 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-{{namespace}}-{{slug}} input[type="text"] {
+	font-size: 1em;
+	color: inherit;
+	background: inherit;
+	border: 0;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor. All other files
+ * get applied to the editor only.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+import './editor.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * Used to construct a preview for the block to be shown in the block inserter.
+	 */
+	example: {
+		attributes: {
+			message: '{{title}}',
+		},
+	},
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+} );

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/style.scss.mustache

@@ -0,0 +1,12 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+	font-size: 1em;
+	background: #ffff001a;
+	padding: 1em;
+}

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

@@ -0,0 +1,26 @@
+{{#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,24 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+module.exports = {
+	defaultValues: {
+		slug: 'example-interactive',
+		title: 'Example Interactive',
+		description: 'An interactive block with the Interactivity API',
+		dashicon: 'media-interactive',
+		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' ),
+};

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.