Create block: Use Block API version 2

packages/create-block/CHANGELOG.md

@@ -2,9 +2,14 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Set the minimum required version of WordPress to 5.6.0 to ensure that block is correctly registered with the [Block API version 2](https://make.wordpress.org/core/2020/11/18/block-api-version-2/) ([#26098](https://github.com/WordPress/gutenberg/pull/26098)).
+
 ### New Features
 
 -   Added basic support for external templates hosted on npm ([#23712](https://github.com/WordPress/gutenberg/pull/23712)).
+-   Update templates to work with the [Block API version 2](https://make.wordpress.org/core/2020/11/18/block-api-version-2/) ([#26098](https://github.com/WordPress/gutenberg/pull/26098)).
 
 ## 0.18.0 (2020-10-30)
 

packages/create-block/README.md

@@ -148,20 +148,21 @@ 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`)
 -   `slug` (no default)
--   `namespace` (default: `create-block`)
+-   `namespace` (default: `'create-block'`)
 -   `title` (no default)
 -   `description` (no default)
 -   `dashicon` (no default)
--   `category` (default: `widgets`)
--   `author` (default: `The WordPress Contributors`)
--   `license` (default: `GPL-2.0-or-later`)
--   `licenseURI` (default: `https://www.gnu.org/licenses/gpl-2.0.html`)
--   `version` (default: `0.1.0`)
+-   `category` (default: `'widgets'`)
+-   `author` (default: `'The WordPress Contributors'`)
+-   `license` (default: `'GPL-2.0-or-later'`)
+-   `licenseURI` (default: `'https://www.gnu.org/licenses/gpl-2.0.html'`)
+-   `version` (default: `'0.1.0'`)
 -   `wpScripts` (default: `true`)
--   `editorScript` (default: `file:./build/index.js`)
--   `editorStyle` (default: `file:./build/index.css`)
--   `style` (default: `file:./build/style-index.css`)
+-   `editorScript` (default: `'file:./build/index.js'`)
+-   `editorStyle` (default: `'file:./build/index.css'`)
+-   `style` (default: `'file:./build/style-index.css'`)
 
 ## WP-CLI
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-const { isEmpty, omitBy } = require( 'lodash' );
+const { omitBy } = require( 'lodash' );
 const { join } = require( 'path' );
 const { writeFile } = require( 'fs' ).promises;
 
@@ -11,6 +11,7 @@ const { writeFile } = require( 'fs' ).promises;
 const { info } = require( './log' );
 
 module.exports = async ( {
+	apiVersion,
 	slug,
 	namespace,
 	title,
@@ -23,14 +24,14 @@ module.exports = async ( {
 	style,
 } ) => {
 	const outputFile = join( process.cwd(), slug, 'block.json' );
-
 	info( '' );
 	info( 'Creating a "block.json" file.' );
 	await writeFile(
 		outputFile,
 		JSON.stringify(
 			omitBy(
 				{
+					apiVersion,
 					name: namespace + '/' + slug,
 					title,
 					category,
@@ -44,7 +45,7 @@ module.exports = async ( {
 					editorStyle,
 					style,
 				},
-				isEmpty
+				( value ) => ! value
 			),
 			null,
 			'\t'

packages/create-block/lib/scaffold.js

@@ -18,6 +18,7 @@ const { code, info, success } = require( './log' );
 module.exports = async (
 	blockTemplate,
 	{
+		apiVersion,
 		namespace,
 		slug,
 		title,
@@ -42,6 +43,7 @@ module.exports = async (
 
 	const { outputTemplates } = blockTemplate;
 	const view = {
+		apiVersion,
 		namespace,
 		namespaceSnakeCase: snakeCase( namespace ),
 		slug,

packages/create-block/lib/templates.js

@@ -118,6 +118,7 @@ const getBlockTemplate = async ( templateName ) => {
 
 const getDefaultValues = ( blockTemplate ) => {
 	return {
+		apiVersion: 2,
 		namespace: 'create-block',
 		category: 'widgets',
 		author: 'The WordPress Contributors',

packages/create-block/lib/templates/es5/index.js.mustache

@@ -20,12 +20,24 @@
 	 */
 	var __ = wp.i18n.__;
 
+	/**
+	 * This hook is used to mark the block wrapper element.
+	 *
+	 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+	 */
+	var useBlockProps = wp.blockEditor.useBlockProps;
+
 	/**
 	 * Every block starts by registering a new block type definition.
 	 *
 	 * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
 	 */
 	registerBlockType( '{{namespace}}/{{slug}}', {
+		/**
+		 * @see https://make.wordpress.org/core/2020/11/18/block-api-version-2/
+		 */
+		apiVersion: {{apiVersion}},
+
 		/**
 		 * This is the display title for your block, which can be translated with `i18n` functions.
 		 * The block inserter will show this name.
@@ -74,14 +86,12 @@
 		 *
 		 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
 		 *
-		 * @param {Object} [props] Properties passed from the editor.
-		 *
 		 * @return {WPElement} Element to render.
 		 */
-		edit: function( props ) {
+		edit: function() {
 			return el(
 				'p',
-				{ className: props.className },
+				useBlockProps(),
 				__( '{{title}} – hello from the editor!', '{{textdomain}}' )
 			);
 		},

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

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

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

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

packages/create-block/lib/templates/esnext/src/edit.js.mustache

@@ -5,6 +5,14 @@
  */
 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/packages/packages-block-editor/#useBlockProps
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
 /**
  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
  * Those files can contain any CSS code that gets applied to the editor.
@@ -19,14 +27,11 @@ import './editor.scss';
  *
  * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
  *
- * @param {Object} [props]           Properties passed from the editor.
- * @param {string} [props.className] Class name generated for the block.
- *
  * @return {WPElement} Element to render.
  */
-export default function Edit( { className } ) {
+export default function Edit() {
 	return (
-		<p className={ className }>
+		<p { ...useBlockProps() }>
 			{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }
 		</p>
 	);

packages/create-block/lib/templates/esnext/src/index.js.mustache

@@ -33,6 +33,11 @@ import save from './save';
  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
  */
 registerBlockType( '{{namespace}}/{{slug}}', {
+	/**
+	 * @see https://make.wordpress.org/core/2020/11/18/block-api-version-2/
+	 */
+	apiVersion: {{apiVersion}},
+
 	/**
 	 * This is the display title for your block, which can be translated with `i18n` functions.
 	 * The block inserter will show this name.