From c043d0f6cd737caddf626925097034903fce5974 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 9 Dec 2020 18:58:00 +0200 Subject: [PATCH] Create block: Use Block API version 2 (#26098) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Create block script: use API v2 * Fix for es5 * Update link * Remove props doc * Update packages/create-block/lib/templates/esnext/src/edit.js.mustache Co-authored-by: Greg Ziółkowski * Bump minimum version of WordPress required for the plugin Co-authored-by: Greg Ziółkowski --- packages/create-block/CHANGELOG.md | 5 +++++ packages/create-block/README.md | 19 ++++++++++--------- packages/create-block/lib/init-block-json.js | 7 ++++--- packages/create-block/lib/scaffold.js | 2 ++ packages/create-block/lib/templates.js | 1 + .../lib/templates/es5/index.js.mustache | 18 ++++++++++++++---- .../lib/templates/es5/readme.txt.mustache | 4 ++-- .../lib/templates/esnext/readme.txt.mustache | 4 ++-- .../lib/templates/esnext/src/edit.js.mustache | 15 ++++++++++----- .../templates/esnext/src/index.js.mustache | 5 +++++ 10 files changed, 55 insertions(+), 25 deletions(-) diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md index 499a7624d82648..73f8a1f1fc2bdb 100644 --- a/packages/create-block/CHANGELOG.md +++ b/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) diff --git a/packages/create-block/README.md b/packages/create-block/README.md index c814bff01e1fdb..f6b3f15d983b05 100644 --- a/packages/create-block/README.md +++ b/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 diff --git a/packages/create-block/lib/init-block-json.js b/packages/create-block/lib/init-block-json.js index 87905ea55bc43c..694414e73b547f 100644 --- a/packages/create-block/lib/init-block-json.js +++ b/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,7 +24,6 @@ module.exports = async ( { style, } ) => { const outputFile = join( process.cwd(), slug, 'block.json' ); - info( '' ); info( 'Creating a "block.json" file.' ); await writeFile( @@ -31,6 +31,7 @@ module.exports = async ( { JSON.stringify( omitBy( { + apiVersion, name: namespace + '/' + slug, title, category, @@ -44,7 +45,7 @@ module.exports = async ( { editorStyle, style, }, - isEmpty + ( value ) => ! value ), null, '\t' diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js index f7c6d60f305399..bbdd536c9af245 100644 --- a/packages/create-block/lib/scaffold.js +++ b/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, diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index cb8b01a303debf..b926d20739aa35 100644 --- a/packages/create-block/lib/templates.js +++ b/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', diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache index b0486b43e4679d..318bd7f21dba17 100644 --- a/packages/create-block/lib/templates/es5/index.js.mustache +++ b/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}}' ) ); }, diff --git a/packages/create-block/lib/templates/es5/readme.txt.mustache b/packages/create-block/lib/templates/es5/readme.txt.mustache index 56262c0b4d2638..0836645a1f9a7e 100644 --- a/packages/create-block/lib/templates/es5/readme.txt.mustache +++ b/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}} diff --git a/packages/create-block/lib/templates/esnext/readme.txt.mustache b/packages/create-block/lib/templates/esnext/readme.txt.mustache index 56262c0b4d2638..0836645a1f9a7e 100644 --- a/packages/create-block/lib/templates/esnext/readme.txt.mustache +++ b/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}} diff --git a/packages/create-block/lib/templates/esnext/src/edit.js.mustache b/packages/create-block/lib/templates/esnext/src/edit.js.mustache index 524ffa4f47a1b7..8ed2bb5d381980 100644 --- a/packages/create-block/lib/templates/esnext/src/edit.js.mustache +++ b/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 ( -

+

{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }

); diff --git a/packages/create-block/lib/templates/esnext/src/index.js.mustache b/packages/create-block/lib/templates/esnext/src/index.js.mustache index ef9236403bbf21..13ecd405a8be95 100644 --- a/packages/create-block/lib/templates/esnext/src/index.js.mustache +++ b/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.