Create Block: Use register_block_type_from_metadata to register block…

…s on the server (#28883)

* Create Block: Use API added in WordPress 5.7

* Update changelog for the Create Block template

* Docs: Add changelog entries

* Create Block: Add a way to provide a default value for attributes and supports

* Revert removal of apiVersion for JS code
We miss the mapping layer during registration that would transform kyes from PHP to JS.

* Revert changes in wp-env config

* Update readme.txt.mustache

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

@@ -2,4 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Scaffolded block is now registered from `block.json` with the `register_block_type_from_metadata` helper ([#28883](https://github.com/WordPress/gutenberg/pull/28883)).
+
+## 1.0.0 (2021-01-21)
+
 Initial release.

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

@@ -12,6 +12,16 @@ module.exports = {
 		description:
 			'A Gutenberg block to show your pride! This block enables you to type text and style it with the color font Gilbert from Type with Pride.',
 		dashicon: 'flag',
+		attributes: {
+			message: {
+				type: 'string',
+				source: 'text',
+				selector: 'div',
+			},
+		},
+		supports: {
+			html: false,
+		},
 		npmDependencies: [
 			'@wordpress/block-editor',
 			'@wordpress/blocks',

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

@@ -20,53 +20,13 @@
  */
 
 /**
- * Registers all block assets so that they can be enqueued through the block editor
- * in the corresponding context.
+ * 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/block-editor/tutorials/block-tutorial/applying-styles-with-stylesheets/
+ * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	$dir = __DIR__;
-
-	$script_asset_path = "$dir/build/index.asset.php";
-	if ( ! file_exists( $script_asset_path ) ) {
-		throw new Error(
-			'You need to run `npm start` or `npm run build` for the "{{namespace}}/{{slug}}" block first.'
-		);
-	}
-	$index_js     = 'build/index.js';
-	$script_asset = require( $script_asset_path );
-	wp_register_script(
-		'{{namespace}}-{{slug}}-block-editor',
-		plugins_url( $index_js, __FILE__ ),
-		$script_asset['dependencies'],
-		$script_asset['version']
-	);
-	wp_set_script_translations( '{{namespace}}-{{slug}}-block-editor', '{{textdomain}}' );
-
-	$editor_css = 'build/index.css';
-	wp_register_style(
-		'{{namespace}}-{{slug}}-block-editor',
-		plugins_url( $editor_css, __FILE__ ),
-		array(),
-		filemtime( "$dir/$editor_css" )
-	);
-
-	$style_css = 'build/style-index.css';
-	wp_register_style(
-		'{{namespace}}-{{slug}}-block',
-		plugins_url( $style_css, __FILE__ ),
-		array(),
-		filemtime( "$dir/$style_css" )
-	);
-
-	register_block_type(
-		'{{namespace}}/{{slug}}',
-		array(
-			'editor_script' => '{{namespace}}-{{slug}}-block-editor',
-			'editor_style'  => '{{namespace}}-{{slug}}-block-editor',
-			'style'         => '{{namespace}}-{{slug}}-block',
-		)
-	);
+	register_block_type_from_metadata( __DIR__ );
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

packages/create-block-tutorial-template/templates/readme.txt.mustache

@@ -3,8 +3,8 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Requires at least: 5.5.1
-Tested up to:      5.6.0
+Requires at least: 5.5.3
+Tested up to:      5.7.0
 Stable tag:        {{version}}
 Requires PHP:      7.0.0
 {{#license}}

packages/create-block-tutorial-template/templates/src/index.js.mustache

@@ -5,13 +5,6 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 
-/**
- * Retrieves the translation of text.
- *
- * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
  * All files containing `style` keyword are bundled together. The code used
@@ -40,64 +33,6 @@ registerBlockType( '{{namespace}}/{{slug}}', {
 	 */
 	apiVersion: {{apiVersion}},
 
-	/**
-	 * This is the display title for your block, which can be translated with `i18n` functions.
-	 * The block inserter will show this name.
-	 */
-	title: __(
-		'{{title}}',
-		'{{textdomain}}'
-	),
-
-	{{#description}}
-	/**
-	 * This is a short description for your block, can be translated with `i18n` functions.
-	 * It will be shown in the Block Tab in the Settings Sidebar.
-	 */
-	description: __(
-		'{{description}}',
-		'{{textdomain}}'
-	),
-
-	{{/description}}
-	/**
-	 * Blocks are grouped into categories to help users browse and discover them.
-	 * The categories provided by core are `text`, `media`, `design`, `widgets`, and `embed`.
-	 */
-	category: '{{category}}',
-
-	{{#dashicon}}
-	/**
-	 * An icon property should be specified to make it easier to identify a block.
-	 * These can be any of WordPress’ Dashicons, or a custom svg element.
-	 */
-	icon: '{{dashicon}}',
-
-	{{/dashicon}}
-	/**
-	 * Attributes are the way a block stores data, they define how a block is parsed
-	 * to extract data from the saved content. When the block loads it will look
-	 * at the saved content for the block, look for the `div` tag, take the text portion,
-	 * and store the content in an `attributes.message` variable.
-	 *
-	 *  @see https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/
-	 */
-	attributes: {
-		message: {
-			type: 'string',
-			source: 'text',
-			selector: 'div',
-		},
-	},
-
-	/**
-	 * Optional block extended support features.
-	 */
-	supports: {
-		// Removes support for an HTML mode.
-		html: false,
-	},
-
 	/**
 	 * Used to construct a preview for the block to be shown in the block inserter.
 	 */

packages/create-block/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### New Features
+
+-   Add a way to provide a default value in the template for `attributes` and `supports` Block API fields ([#28883](https://github.com/WordPress/gutenberg/pull/28883)).
+
+### Enhancement
+
+-   Block scaffolded with `esnext` template is now registered from `block.json` with the `register_block_type_from_metadata` helper ([#28883](https://github.com/WordPress/gutenberg/pull/28883)).
+
 ## 2.0.1 (2021-02-01)
 
 ### Bug Fix

packages/create-block/README.md

@@ -171,13 +171,15 @@ module.exports = {
 
 The following configurable variables are used with the template files. Template authors can change default values to use when users don't provide their data:
 
--   `apiVersion` (default: `2`)
+-   `apiVersion` (default: `2`) - see https://make.wordpress.org/core/2020/11/18/block-api-version-2/.
 -   `slug` (no default)
 -   `namespace` (default: `'create-block'`)
--   `title` (no default)
--   `description` (no default)
--   `dashicon` (no default)
--   `category` (default: `'widgets'`)
+-   `title` (no default) - a display title for your block.
+-   `description` (no default) - a short description for your block.
+-   `dashicon` (no default) - an icon property thats makes it easier to identify a block, see https://developer.wordpress.org/resource/dashicons/.
+-   `category` (default: `'widgets'`) - blocks are grouped into categories to help users browse and discover them. The categories provided by core are `text`, `media`, `design`, `widgets`, and `embed`.
+-   `attributes` (no default) - see https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/.
+-   `supports` (no default) - optional block extended support features, see https://developer.wordpress.org/block-editor/developers/block-api/block-supports/.
 -   `author` (default: `'The WordPress Contributors'`)
 -   `license` (default: `'GPL-2.0-or-later'`)
 -   `licenseURI` (default: `'https://www.gnu.org/licenses/gpl-2.0.html'`)

packages/create-block/lib/init-block-json.js

@@ -17,6 +17,8 @@ module.exports = async ( {
 	title,
 	description,
 	category,
+	attributes,
+	supports,
 	dashicon,
 	textdomain,
 	editorScript,
@@ -37,10 +39,9 @@ module.exports = async ( {
 					category,
 					icon: dashicon,
 					description,
+					attributes,
+					supports,
 					textdomain,
-					supports: {
-						html: false,
-					},
 					editorScript,
 					editorStyle,
 					style,

packages/create-block/lib/scaffold.js

@@ -26,6 +26,8 @@ module.exports = async (
 		description,
 		dashicon,
 		category,
+		attributes,
+		supports,
 		author,
 		license,
 		licenseURI,
@@ -55,6 +57,8 @@ module.exports = async (
 		description,
 		dashicon,
 		category,
+		attributes,
+		supports,
 		version,
 		author,
 		license,

packages/create-block/lib/templates.js

@@ -39,6 +39,9 @@ const predefinedBlockTemplates = {
 			description:
 				'Example block written with ESNext standard and JSX support – build step required.',
 			dashicon: 'smiley',
+			supports: {
+				html: false,
+			},
 			npmDependencies: [
 				'@wordpress/block-editor',
 				'@wordpress/blocks',

packages/create-block/lib/templates/es5/readme.txt.mustache

@@ -4,7 +4,7 @@ Contributors:      {{author}}
 {{/author}}
 Tags:              block
 Requires at least: 5.6.0
-Tested up to:      5.6.0
+Tested up to:      5.7.0
 Stable tag:        {{version}}
 Requires PHP:      7.0.0
 {{#license}}

packages/create-block/lib/templates/esnext/$slug.php.mustache

@@ -20,53 +20,13 @@
  */
 
 /**
- * Registers all block assets so that they can be enqueued through the block editor
- * in the corresponding context.
+ * 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/block-editor/tutorials/block-tutorial/applying-styles-with-stylesheets/
+ * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	$dir = __DIR__;
-
-	$script_asset_path = "$dir/build/index.asset.php";
-	if ( ! file_exists( $script_asset_path ) ) {
-		throw new Error(
-			'You need to run `npm start` or `npm run build` for the "{{namespace}}/{{slug}}" block first.'
-		);
-	}
-	$index_js     = 'build/index.js';
-	$script_asset = require( $script_asset_path );
-	wp_register_script(
-		'{{namespace}}-{{slug}}-block-editor',
-		plugins_url( $index_js, __FILE__ ),
-		$script_asset['dependencies'],
-		$script_asset['version']
-	);
-	wp_set_script_translations( '{{namespace}}-{{slug}}-block-editor', '{{textdomain}}' );
-
-	$editor_css = 'build/index.css';
-	wp_register_style(
-		'{{namespace}}-{{slug}}-block-editor',
-		plugins_url( $editor_css, __FILE__ ),
-		array(),
-		filemtime( "$dir/$editor_css" )
-	);
-
-	$style_css = 'build/style-index.css';
-	wp_register_style(
-		'{{namespace}}-{{slug}}-block',
-		plugins_url( $style_css, __FILE__ ),
-		array(),
-		filemtime( "$dir/$style_css" )
-	);
-
-	register_block_type(
-		'{{namespace}}/{{slug}}',
-		array(
-			'editor_script' => '{{namespace}}-{{slug}}-block-editor',
-			'editor_style'  => '{{namespace}}-{{slug}}-block-editor',
-			'style'         => '{{namespace}}-{{slug}}-block',
-		)
-	);
+	register_block_type_from_metadata( __DIR__ );
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

packages/create-block/lib/templates/esnext/readme.txt.mustache

@@ -4,7 +4,7 @@ Contributors:      {{author}}
 {{/author}}
 Tags:              block
 Requires at least: 5.6.0
-Tested up to:      5.6.0
+Tested up to:      5.7.0
 Stable tag:        {{version}}
 Requires PHP:      7.0.0
 {{#license}}