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

… supports
WordPress · Feb 10, 2021 · 5b6d8a1 · 5b6d8a1
1 parent c23fe11
commit 5b6d8a1
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 42 deletions.
diff --git a/packages/create-block-tutorial-template/index.js b/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',

diff --git a/packages/create-block-tutorial-template/templates/src/index.js.mustache b/packages/create-block-tutorial-template/templates/src/index.js.mustache
@@ -28,30 +28,6 @@ import save from './save';
  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
  */
 registerBlockType( '{{namespace}}/{{slug}}', {
-	/**
-	 * 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.
 	 */

diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## 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)).

diff --git a/packages/create-block/README.md b/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'`)

diff --git 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 { omitBy } = require( 'lodash' );
+const { isEmpty, omitBy } = require( 'lodash' );
 const { join } = require( 'path' );
 const { writeFile } = require( 'fs' ).promises;
 
@@ -17,6 +17,8 @@ module.exports = async ( {
 	title,
 	description,
 	category,
+	attributes,
+	supports,
 	dashicon,
 	textdomain,
 	editorScript,
@@ -37,15 +39,14 @@ module.exports = async ( {
 					category,
 					icon: dashicon,
 					description,
+					attributes,
+					supports,
 					textdomain,
-					supports: {
-						html: false,
-					},
 					editorScript,
 					editorStyle,
 					style,
 				},
-				( value ) => ! value
+				isEmpty
 			),
 			null,
 			'\t'

diff --git a/packages/create-block/lib/scaffold.js b/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,

diff --git a/packages/create-block/lib/templates.js b/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',

diff --git a/packages/create-block/lib/templates/esnext/src/index.js.mustache b/packages/create-block/lib/templates/esnext/src/index.js.mustache
@@ -26,14 +26,6 @@ import save from './save';
  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
  */
 registerBlockType( '{{namespace}}/{{slug}}', {
-	/**
-	 * Optional block extended support features.
-	 */
-	supports: {
-		// Removes support for an HTML mode.
-		html: false,
-	},
-
 	/**
 	 * @see ./edit.js
 	 */