@wordpress/create-block-tutorial-template 2.2.0 → 2.4.1-next.d6164808d3.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 2.3.0 (2022-06-01)
+
+### 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

package/block-templates/edit.js.mustache

@@ -9,7 +9,7 @@ import { TextControl } from '@wordpress/components';
  * 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
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
@@ -17,7 +17,7 @@ import { useBlockProps } from '@wordpress/block-editor';
  * The edit function describes the structure of your block in the context of the
  * editor. This represents what the editor will render when the block is used.
  *
- * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
  *
  * @param {Object}   props               Properties passed to the function.
  * @param {Object}   props.attributes    Available block attributes.
@@ -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>
 	);
 }

package/block-templates/index.js.mustache

@@ -20,14 +20,17 @@ import './editor.scss';
  * Internal dependencies
  */
 import Edit from './edit';
+{{#isStaticVariant}}
 import save from './save';
+{{/isStaticVariant}}
+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.
 	 */
@@ -40,8 +43,10 @@ registerBlockType( '{{namespace}}/{{slug}}', {
 	 * @see ./edit.js
 	 */
 	edit: Edit,
+	{{#isStaticVariant}}
 	/**
 	 * @see ./save.js
 	 */
 	save,
+	{{/isStaticVariant}}
 } );

package/block-templates/save.js.mustache

@@ -1,8 +1,9 @@
+{{#isStaticVariant}}
 /**
  * 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
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
@@ -11,7 +12,7 @@ import { useBlockProps } from '@wordpress/block-editor';
  * 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
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
  *
  * @param {Object} props            Properties passed to the function.
  * @param {Object} props.attributes Available block attributes.
@@ -21,3 +22,4 @@ export default function save( { attributes } ) {
 	const blockProps = useBlockProps.save();
 	return <div { ...blockProps }>{ attributes.message }</div>;
 }
+{{/isStaticVariant}}

package/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;
 }

package/block-templates/template.php.mustache

@@ -0,0 +1,5 @@
+{{#isDynamicVariant}}
+<p <?php echo get_block_wrapper_attributes(); ?>>
+	<?php echo esc_html( $atts['message']) ?>
+</p>
+{{/isDynamicVariant}}

package/index.js

@@ -22,6 +22,16 @@ module.exports = {
 			html: false,
 		},
 	},
+	variants: {
+		static: {},
+		dynamic: {
+			attributes: {
+				message: {
+					type: 'string',
+				},
+			},
+		},
+	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
 	blockTemplatesPath: join( __dirname, 'block-templates' ),
 	assetsPath: join( __dirname, 'assets' ),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "2.2.0",
+	"version": "2.4.1-next.d6164808d3.0",
 	"description": "Template for @wordpress/create-block used in the official WordPress tutorial.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,5 +21,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
+	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
 }

package/plugin-templates/$slug.php.mustache

@@ -8,7 +8,7 @@
  * Description:       {{description}}
 {{/description}}
  * Version:           {{version}}
- * Requires at least: 5.8
+ * Requires at least: 5.9
  * Requires PHP:      7.0
 {{#author}}
  * Author:            {{author}}
@@ -37,7 +37,35 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
+{{#isStaticVariant}}
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 	register_block_type( __DIR__ . '/build' );
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
+{{/isStaticVariant}}
+{{#isDynamicVariant}}
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	register_block_type(
+		__DIR__ . '/build',
+		array(
+			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
+		)
+	);
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
+
+/**
+ * Render callback function
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string The rendered output.
+ */
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $content, $block) {
+	ob_start();
+	require plugin_dir_path( __FILE__ ) . 'build/template.php';
+	return ob_get_clean();
+}
+{{/isDynamicVariant}}

package/plugin-templates/readme.txt.mustache

@@ -3,7 +3,7 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Tested up to:      5.9
+Tested up to:      6.0
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}