Skip to content

Commit 7b68d0a

Browse files
juanmaguitarryanwelcher
juanmaguitar
and
ryanwelcher
authored
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>
1 parent adf1d4f commit 7b68d0a

20 files changed

+369
-2
lines changed

‎bin/test-create-block.sh

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ if [ "$expected" -ne "$actual" ]; then
5555
error "Expected $expected files in the project root, but found $actual."
5656
exit 1
5757
fi
58-
expected=6
58+
expected=7
5959
actual=$( find src -maxdepth 1 -type f | wc -l )
6060
if [ "$expected" -ne "$actual" ]; then
6161
error "Expected $expected files in the \`src\` directory, but found $actual."
@@ -69,7 +69,7 @@ status "Building block..."
6969
../node_modules/.bin/wp-scripts build
7070

7171
status "Verifying build..."
72-
expected=5
72+
expected=7
7373
actual=$( find build -maxdepth 1 -type f | wc -l )
7474
if [ "$expected" -ne "$actual" ]; then
7575
error "Expected $expected files in the \`build\` directory, but found $actual."

‎docs/manifest.json

+6
Original file line numberDiff line numberDiff line change
@@ -1505,6 +1505,12 @@
15051505
"markdown_source": "../packages/core-data/README.md",
15061506
"parent": "packages"
15071507
},
1508+
{
1509+
"title": "@wordpress/create-block-interactive-template",
1510+
"slug": "packages-create-block-interactive-template",
1511+
"markdown_source": "../packages/create-block-interactive-template/README.md",
1512+
"parent": "packages"
1513+
},
15081514
{
15091515
"title": "@wordpress/create-block-tutorial-template",
15101516
"slug": "packages-create-block-tutorial-template",

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Create Block Interactive Template
2+
3+
This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks
4+
5+
## Usage
6+
7+
This block template can be used by running the following command:
8+
9+
```bash
10+
npx @wordpress/create-block --template @wordpress/create-block-interactive-template
11+
```
12+
13+
## Contributing to this package
14+
15+
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.
16+
17+
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).
18+
19+
<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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Interactive Block
2+
3+
> **Warning**
4+
> **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.
5+
6+
> **Note**
7+
> 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/).
8+
9+
{{#isBasicVariant}}
10+
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.
11+
{{/isBasicVariant}}
12+
13+
Check the following resources for more info about the Interactivity API:
14+
- [`@wordpress/interactivity` package](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/README.md)
15+
- [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/)
16+
- [“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

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* Retrieves the translation of text.
3+
*
4+
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
5+
*/
6+
import { __ } from '@wordpress/i18n';
7+
8+
/**
9+
* React hook that is used to mark the block wrapper element.
10+
* It provides all the necessary props like the class name.
11+
*
12+
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
13+
*/
14+
import { useBlockProps } from '@wordpress/block-editor';
15+
16+
/**
17+
* The edit function describes the structure of your block in the context of the
18+
* editor. This represents what the editor will render when the block is used.
19+
*
20+
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
21+
*
22+
* @param {Object} props Properties passed to the function.
23+
* @param {Object} props.attributes Available block attributes.
24+
* @param {Function} props.setAttributes Function that updates individual attributes.
25+
*
26+
* @return {WPElement} Element to render.
27+
*/
28+
export default function Edit( { attributes, setAttributes } ) {
29+
const blockProps = useBlockProps();
30+
31+
return (
32+
<p { ...blockProps }>
33+
{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }
34+
</p>
35+
);
36+
}

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* The following styles get applied inside the editor only.
3+
*
4+
* Replace them with your own styles or remove the file completely.
5+
*/
6+
7+
.wp-block-{{namespace}}-{{slug}} input[type="text"] {
8+
font-size: 1em;
9+
color: inherit;
10+
background: inherit;
11+
border: 0;
12+
}

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Registers a new block provided a unique name and an object defining its behavior.
3+
*
4+
* @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
5+
*/
6+
import { registerBlockType } from '@wordpress/blocks';
7+
8+
/**
9+
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
10+
* All files containing `style` keyword are bundled together. The code used
11+
* gets applied both to the front of your site and to the editor. All other files
12+
* get applied to the editor only.
13+
*
14+
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
15+
*/
16+
import './style.scss';
17+
import './editor.scss';
18+
19+
/**
20+
* Internal dependencies
21+
*/
22+
import Edit from './edit';
23+
import metadata from './block.json';
24+
25+
/**
26+
* Every block starts by registering a new block type definition.
27+
*
28+
* @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
29+
*/
30+
registerBlockType( metadata.name, {
31+
/**
32+
* Used to construct a preview for the block to be shown in the block inserter.
33+
*/
34+
example: {
35+
attributes: {
36+
message: '{{title}}',
37+
},
38+
},
39+
/**
40+
* @see ./edit.js
41+
*/
42+
edit: Edit,
43+
} );

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

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{{#isBasicVariant}}
2+
<?php
3+
/**
4+
* @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
5+
*/
6+
7+
$unique_id = uniqid( 'p-' );
8+
?>
9+
10+
<div
11+
<?php echo get_block_wrapper_attributes(); ?>
12+
data-wp-interactive
13+
data-wp-context='{ "{{namespace}}": { "isOpen": false } }'
14+
data-wp-effect="effects.{{namespace}}.logIsOpen"
15+
>
16+
<button
17+
data-wp-on--click="actions.{{namespace}}.toggle"
18+
data-wp-bind--aria-expanded="context.{{namespace}}.isOpen"
19+
aria-controls="p-<?php echo $unique_id; ?>"
20+
>
21+
<?php _e( 'Toggle', '{{textdomain}}' ); ?>
22+
</button>
23+
24+
<p
25+
id="p-<?php echo $unique_id; ?>"
26+
data-wp-bind--hidden="!context.{{namespace}}.isOpen"
27+
>
28+
<?php
29+
_e( '{{title}} - hello from an interactive block!', '{{textdomain}}' );
30+
?>
31+
</p>
32+
</div>
33+
{{/isBasicVariant}}

‎packages/create-block-interactive-template/block-templates/style.scss.mustache

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* The following styles get applied both on the front of your site
3+
* and in the editor.
4+
*
5+
* Replace them with your own styles or remove the file completely.
6+
*/
7+
8+
.wp-block-{{namespace}}-{{slug}} {
9+
font-size: 1em;
10+
background: #ffff001a;
11+
padding: 1em;
12+
}

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{{#isBasicVariant}}
2+
3+
/**
4+
* WordPress dependencies
5+
*/
6+
import { store } from "@wordpress/interactivity";
7+
8+
store( {
9+
actions: {
10+
'{{namespace}}': {
11+
toggle: ( { context } ) => {
12+
context[ '{{namespace}}' ].isOpen = !context[ '{{namespace}}' ].isOpen;
13+
},
14+
},
15+
},
16+
effects: {
17+
'{{namespace}}': {
18+
logIsOpen: ( { context } ) => {
19+
// Log the value of `isOpen` each time it changes.
20+
console.log( `Is open: ${ context[ '{{namespace}}' ].isOpen }` );
21+
},
22+
},
23+
},
24+
} );
25+
26+
{{/isBasicVariant}}

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* External dependencies
3+
*/
4+
const { join } = require( 'path' );
5+
6+
module.exports = {
7+
defaultValues: {
8+
slug: 'example-interactive',
9+
title: 'Example Interactive',
10+
description: 'An interactive block with the Interactivity API',
11+
dashicon: 'media-interactive',
12+
npmDependencies: [ '@wordpress/interactivity' ],
13+
supports: {
14+
interactivity: true,
15+
},
16+
render: 'file:./render.php',
17+
viewScript: 'file:./view.js',
18+
},
19+
variants: {
20+
basic: {},
21+
},
22+
pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
23+
blockTemplatesPath: join( __dirname, 'block-templates' ),
24+
};

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@wordpress/create-block-interactive-template",
3+
"version": "1.0.0",
4+
"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
5+
"author": "The WordPress Contributors",
6+
"license": "GPL-2.0-or-later",
7+
"keywords": [
8+
"wordpress",
9+
"create block",
10+
"block template",
11+
"Interactivity API"
12+
],
13+
"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/create-block",
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/WordPress/gutenberg.git",
17+
"directory": "packages/create-block-interactive-template"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/WordPress/gutenberg/issues"
21+
},
22+
"publishConfig": {
23+
"access": "public"
24+
}
25+
}

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<?php
2+
/**
3+
* Plugin Name: {{title}}
4+
{{#pluginURI}}
5+
* Plugin URI: {{{pluginURI}}}
6+
{{/pluginURI}}
7+
{{#description}}
8+
* Description: {{description}}
9+
{{/description}}
10+
* Version: {{version}}
11+
* Requires at least: 6.1
12+
* Requires PHP: 7.0
13+
{{#author}}
14+
* Author: {{author}}
15+
{{/author}}
16+
{{#license}}
17+
* License: {{license}}
18+
{{/license}}
19+
{{#licenseURI}}
20+
* License URI: {{{licenseURI}}}
21+
{{/licenseURI}}
22+
* Text Domain: {{textdomain}}
23+
{{#domainPath}}
24+
* Domain Path: {{{domainPath}}}
25+
{{/domainPath}}
26+
{{#updateURI}}
27+
* Update URI: {{{updateURI}}}
28+
{{/updateURI}}
29+
*
30+
* @package {{namespace}}
31+
*/
32+
33+
/**
34+
* Registers the block using the metadata loaded from the `block.json` file.
35+
* Behind the scenes, it registers also all assets so they can be enqueued
36+
* through the block editor in the corresponding context.
37+
*
38+
* @see https://developer.wordpress.org/reference/functions/register_block_type/
39+
*/
40+
function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
41+
register_block_type( __DIR__ . '/build' );
42+
}
43+
add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
=== {{title}} ===
2+
{{#author}}
3+
Contributors: {{author}}
4+
{{/author}}
5+
Tags: block
6+
Tested up to: 6.1
7+
Stable tag: {{version}}
8+
{{#license}}
9+
License: {{license}}
10+
{{/license}}
11+
{{#licenseURI}}
12+
License URI: {{{licenseURI}}}
13+
{{/licenseURI}}
14+
15+
{{description}}
16+
17+
== Description ==
18+
19+
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
20+
21+
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
22+
Markdown parsed.
23+
24+
== Installation ==
25+
26+
This section describes how to install the plugin and get it working.
27+
28+
e.g.
29+
30+
1. Upload the plugin files to the `/wp-content/plugins/{{slug}}` directory, or install the plugin through the WordPress plugins screen directly.
31+
1. Activate the plugin through the 'Plugins' screen in WordPress
32+
33+
34+
== Frequently Asked Questions ==
35+
36+
= A question that someone might have =
37+
38+
An answer to that question.
39+
40+
= What about foo bar? =
41+
42+
Answer to foo bar dilemma.
43+
44+
== Screenshots ==
45+
46+
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
47+
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
48+
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
49+
(or jpg, jpeg, gif).
50+
2. This is the second screen shot
51+
52+
== Changelog ==
53+
54+
= {{version}} =
55+
* Release
56+
57+
== Arbitrary section ==
58+
59+
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
60+
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
61+
"installation." Arbitrary sections will be shown below the built-in sections outlined above.

0 commit comments

Comments
 (0)