Create Block: Enhancements to Gutenpride tutorial template (#28215)

* Create Block: Enhancements to the tutorial template

* Apply coding style changes and align comments with the default template

* Ensure that all validations pass for scaffolded block

package.json

@@ -115,6 +115,7 @@
 		"@wordpress/base-styles": "file:packages/base-styles",
 		"@wordpress/browserslist-config": "file:packages/browserslist-config",
 		"@wordpress/create-block": "file:packages/create-block",
+		"@wordpress/create-block-tutorial-template": "file:packages/create-block-tutorial-template",
 		"@wordpress/custom-templated-path-webpack-plugin": "file:packages/custom-templated-path-webpack-plugin",
 		"@wordpress/dependency-extraction-webpack-plugin": "file:packages/dependency-extraction-webpack-plugin",
 		"@wordpress/docgen": "file:packages/docgen",

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

@@ -1,8 +1,6 @@
 # Create Block Tutorial Template
 
-
-This is a template for @wordpress/create-block that is the finished version of the block in the official [WordPress tutorial](/docs/designers-developers/developers/tutorials/create-block).
-
+This is a template for [`@wordpress/create-block`](/packages/create-block/README.md) that is the finished version of the block in the official [WordPress Tutorial](/docs/designers-developers/developers/tutorials/create-block/readme.md) for the block editor.
 
 ## Usage
 

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+module.exports = {
+	defaultValues: {
+		slug: 'gutenpride',
+		namespace: 'create-block-tutorial',
+		category: 'text',
+		title: 'Gutenpride',
+		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',
+		npmDependencies: [
+			'@wordpress/block-editor',
+			'@wordpress/blocks',
+			'@wordpress/components',
+			'@wordpress/i18n',
+		],
+	},
+	templatesPath: join( __dirname, 'templates' ),
+	assetsPath: join( __dirname, 'assets' ),
+};

packages/create-block-tutorial-template/package.json

@@ -4,7 +4,11 @@
 	"description": "Template for @wordpress/create-block used in the official WordPress tutorial.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
-	"keywords": [ "wordpress", "create block", "block template" ],
+	"keywords": [
+		"wordpress",
+		"create block",
+		"block template"
+	],
 	"homepage": "https://github.com/WordPress/gutenberg/tree/master/docs/designers-developers/developers/tutorials/create-block",
 	"repository": {
 		"type": "git",

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

@@ -26,12 +26,12 @@
  * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/applying-styles-with-stylesheets/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	$dir = dirname( __FILE__ );
+	$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}}/{{textdomain}}" block first.'
+			'You need to run `npm start` or `npm run build` for the "{{namespace}}/{{slug}}" block first.'
 		);
 	}
 	$index_js     = 'build/index.js';
@@ -45,7 +45,6 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 	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__ ),
@@ -54,18 +53,20 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 	);
 
 	$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(
+		'{{namespace}}/{{slug}}',
+		array(
+			'editor_script' => '{{namespace}}-{{slug}}-block-editor',
+			'editor_style'  => '{{namespace}}-{{slug}}-block-editor',
+			'style'         => '{{namespace}}-{{slug}}-block',
+		)
+	);
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

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

@@ -16,7 +16,6 @@ License URI:       {{{licenseURI}}}
 
 {{description}}
 
-
 == Description ==
 
 This is the long description. No limit, and you can use Markdown (as well as in the following sections).
@@ -55,7 +54,6 @@ directory take precedence. For example, `/assets/screenshot-1.png` would win ove
 == Changelog ==
 
 = {{version}} =
-
 * Release
 
 == Arbitrary section ==

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

@@ -3,14 +3,7 @@
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-components/
  */
-import { Placeholder, TextControl } from '@wordpress/components';
-
-/**
- * Retrieves the translation of text.
- *
- * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
- */
-import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
 
 /**
  * React hook that is used to mark the block wrapper element.
@@ -26,16 +19,20 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
  *
+ * @param {Object}   props               Properties passed to the function.
+ * @param {Object}   props.attributes    Available block attributes.
+ * @param {Function} props.setAttributes Function that updates individual attributes.
+ *
  * @return {WPElement} Element to render.
  */
 export default function Edit( { attributes, setAttributes } ) {
 	const blockProps = useBlockProps();
 	return (
-	<div { ...blockProps }>
-		<TextControl
-			value={ attributes.message }
-			onChange={ ( val ) => setAttributes( { message: val } ) }
-		/>
-	</div>
+		<div { ...blockProps }>
+			<TextControl
+				value={ attributes.message }
+				onChange={ ( val ) => setAttributes( { message: val } ) }
+			/>
+		</div>
 	);
 }

packages/create-block-tutorial-template/src/src/editor.scss.mustache → packages/create-block-tutorial-template/templates/src/editor.scss.mustache

@@ -6,9 +6,9 @@
 
 .wp-block-{{namespace}}-{{slug}} {
 	border: 1px dotted #f00;
-}
 
-.wp-block-{{namespace}}-{{slug}} input[type='text'] {
-	font-family: Gilbert;
-	font-size: 64px;
+	input[type="text"] {
+		font-family: Gilbert, sans-serif;
+		font-size: 64px;
+	}
 }

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

@@ -13,7 +13,12 @@ import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
 /**
- * Sass files
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor. All other files
+ * get applied to the editor only.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
 import './style.scss';
 import './editor.scss';
@@ -29,17 +34,20 @@ import save from './save';
  *
  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
  */
-registerBlockType('{{namespace}}/{{slug}}', {
+registerBlockType( '{{namespace}}/{{slug}}', {
 	/**
-	* @see https://make.wordpress.org/core/2020/11/18/block-api-version-2/
-	*/
+	 * @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.
 	 */
-	title: __('{{title}}', '{{textdomain}}'),
+	title: __(
+		'{{title}}',
+		'{{textdomain}}'
+	),
 
 	{{#description}}
 	/**
@@ -52,10 +60,9 @@ registerBlockType('{{namespace}}/{{slug}}', {
 	),
 
 	{{/description}}
-
 	/**
 	 * Blocks are grouped into categories to help users browse and discover them.
-	 * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
+	 * The categories provided by core are `text`, `media`, `design`, `widgets`, and `embed`.
 	 */
 	category: '{{category}}',
 
@@ -67,14 +74,14 @@ registerBlockType('{{namespace}}/{{slug}}', {
 	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 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',
@@ -91,6 +98,15 @@ registerBlockType('{{namespace}}/{{slug}}', {
 		html: false,
 	},
 
+	/**
+	 * Used to construct a preview for the block to be shown in the block inserter.
+	 */
+	example: {
+		attributes: {
+			message: '{{title}}',
+		},
+	},
+
 	/**
 	 * @see ./edit.js
 	 */
@@ -100,4 +116,4 @@ registerBlockType('{{namespace}}/{{slug}}', {
 	 * @see ./save.js
 	 */
 	save,
-});
+} );

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

@@ -1,10 +1,3 @@
-/**
- * Retrieves the translation of text.
- *
- * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
- */
-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.
@@ -13,17 +6,18 @@ import { __ } from '@wordpress/i18n';
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
-
 /**
-
  * The save function defines the way in which the different attributes should
  * be combined into the final markup, which is then serialized by the block
  * editor into `post_content`.
  *
  * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
  *
+ * @param {Object} props            Properties passed to the function.
+ * @param {Object} props.attributes Available block attributes.
  * @return {WPElement} Element to render.
  */
 export default function save( { attributes } ) {
-	return <div { ...useBlockProps.save() }>{ attributes.message }</div>;
+	const blockProps = useBlockProps.save();
+	return <div { ...blockProps }>{ attributes.message }</div>;
 }

packages/create-block-tutorial-template/templates/src/style.scss.mustache

@@ -0,0 +1,17 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+@font-face {
+	font-family: Gilbert;
+	src: url(../assets/gilbert-color.otf);
+	font-weight: 700;
+}
+
+.wp-block-{{namespace}}-{{slug}} {
+	font-family: Gilbert, sans-serif;
+	font-size: 64px;
+}

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

@@ -60,7 +60,7 @@
 		{{/description}}
 		/**
 		 * Blocks are grouped into categories to help users browse and discover them.
-		 * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
+		 * The categories provided by core are `text`, `media`, `design`, `widgets`, and `embed`.
 		 */
 		category: '{{category}}',
 

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

@@ -60,7 +60,7 @@ registerBlockType( '{{namespace}}/{{slug}}', {
 	{{/description}}
 	/**
 	 * Blocks are grouped into categories to help users browse and discover them.
-	 * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
+	 * The categories provided by core are `text`, `media`, `design`, `widgets`, and `embed`.
 	 */
 	category: '{{category}}',