Create Block: Improve block templates

docs/getting-started/create-block/attributes.md

@@ -15,7 +15,7 @@ For this block tutorial, we want to allow the user to type in a message that we
 },
 ```
 
-Add this to the `block.json` file. The `attributes` are at the same level as the _name_ and _title_ fields.
+Add this to the `src/block.json` file. The `attributes` are at the same level as the _name_ and _title_ fields.
 
 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.
 

docs/getting-started/create-block/block-anatomy.md

@@ -15,8 +15,9 @@ import './style.scss';
 
 import Edit from './edit';
 import save from './save';
+import metadata from './block.json';
 
-registerBlockType( 'create-block/gutenpride', {
+registerBlockType( metadata.name, {
 	/**
 	 * @see ./edit.js
 	 */
@@ -38,7 +39,7 @@ The results of the edit function is what the editor will render to the editor pa
 
 The results of the save function is what the editor will insert into the **post_content** field when the post is saved. The post_content field is the field in the WordPress database used to store the content of the post.
 
-Most of the properties are set in the `block.json` file.
+Most of the properties are set in the `src/block.json` file.
 
 ```json
 {

docs/getting-started/create-block/block-code.md

@@ -8,16 +8,16 @@ Note: The color may not work with all browsers until they support the proper col
 
 Download and extract the font from the Type with Pride site, and copy it in the `assets` directory of your plugin naming it `gilbert-color.otf`. To load the font file, we need to add CSS using standard WordPress enqueue, [see Including CSS & JavaScript documentation](https://developer.wordpress.org/themes/basics/including-css-javascript/).
 
-In the `gutenpride.php` file, the enqueue process is already setup from the generated script, so `index.css` and `style-index.css` files are loaded using:
+In the `gutenpride.php` file, the enqueue process is already setup from the generated script, so `build/index.css` and `build/style-index.css` files are loaded using:
 
 ```php
 function create_block_gutenpride_block_init() {
-	register_block_type( __DIR__ );
+	register_block_type( __DIR__ . '/build' );
 }
 add_action( 'init', 'create_block_gutenpride_block_init' );
 ```
 
-This function checks the `block.json` file for js and css files, and will pass them on to [enqueue](https://developer.wordpress.org/themes/basics/including-css-javascript/) these files, so they are loaded on the appropriate pages.
+This function checks the `build/block.json` file for JS and CSS files, and will pass them on to [enqueue](https://developer.wordpress.org/themes/basics/including-css-javascript/) these files, so they are loaded on the appropriate pages.
 
 The `build/index.css` is compiled from `src/editor.scss` and loads only within the editor, and after the `style-index.css`.
 The `build/style-index.css` is compiled from `src/style.scss` and loads in both the editor and front-end — published post view.
@@ -30,7 +30,7 @@ Note: the block classname is prefixed with `wp-block`. The `create-block/gutenpr
 
 ```scss
 @font-face {
-	font-family: Gilbert, sans-serif;
+	font-family: Gilbert;
 	src: url( ../assets/gilbert-color.otf );
 	font-weight: 700;
 }

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

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Read the block name from `block.json` file in JavaScript files ([#41273](https://github.com/WordPress/gutenberg/pull/41273)).
+
+### Bug Fix
+
+-   Fix the issue with the block wrapper in the editor ([#41273](https://github.com/WordPress/gutenberg/pull/41273)).
+
 ## 2.1.0 (2022-04-21)
 
 ### Bug Fix

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

@@ -28,10 +28,11 @@ import { useBlockProps } from '@wordpress/block-editor';
 export default function Edit( { attributes, setAttributes } ) {
 	const blockProps = useBlockProps();
 	return (
-		<TextControl
-			{ ...blockProps }
-			value={ attributes.message }
-			onChange={ ( val ) => setAttributes( { message: val } ) }
-		/>
+		<div { ...blockProps }>
+			<TextControl
+				value={ attributes.message }
+				onChange={ ( val ) => setAttributes( { message: val } ) }
+			/>
+		</div>
 	);
 }

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

@@ -21,13 +21,14 @@ import './editor.scss';
  */
 import Edit from './edit';
 import save from './save';
+import metadata from './block.json';
 
 /**
  * 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}}', {
+registerBlockType( metadata.name, {
 	/**
 	 * Used to construct a preview for the block to be shown in the block inserter.
 	 */

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

@@ -6,7 +6,7 @@
  */
 
 @font-face {
-	font-family: Gilbert, sans-serif;
+	font-family: Gilbert;
 	src: url(../assets/gilbert-color.otf);
 	font-weight: 700;
 }

packages/create-block/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Read the block name from `block.json` file in JavaScript files ([#41273](https://github.com/WordPress/gutenberg/pull/41273)).
+
 ## 3.2.0 (2022-05-18)
 
 ### Bug Fix

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

@@ -19,13 +19,14 @@ import './style.scss';
  */
 import Edit from './edit';
 import save from './save';
+import metadata from './block.json';
 
 /**
  * Every block starts by registering a new block type definition.
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
  */
-registerBlockType( '{{namespace}}/{{slug}}', {
+registerBlockType( metadata.name, {
 	/**
 	 * @see ./edit.js
 	 */