Create Block: Update templates to use APIs introduced in WP 6.1 (#44185)

* Create Block: Update templates to use APIs introduced in WP 6.1

* Update the section about frontend enqueueing

Co-authored-by: Ryan Welcher <me@ryanwelcher.com>

Author: gziolo

docs/reference-guides/block-api/block-metadata.md

@@ -646,7 +646,7 @@ return array(
 Starting in the WordPress 5.8 release, it is possible to instruct WordPress to enqueue scripts and styles for a block type only when rendered on the frontend. It applies to the following asset fields in the `block.json` file:
 
 -   `script`
--   `viewScript` (when the block defines `render_callback` during registration in PHP or a `render` field in its `block.json`, then the script is registered but the block author is responsible for enqueuing it)
+-   `viewScript`
 -   `style`
 
 ## Internationalization

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

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Update templates to use the `render` field in `block.json` introduced in WordPress 6.1 ([#44185](https://github.com/WordPress/gutenberg/pull/44185)).
+
 ## 2.8.0 (2022-10-19)
 
 ## 2.7.0 (2022-10-05)

packages/create-block-tutorial-template/block-templates/template.php.mustache packages/create-block-tutorial-template/block-templates/render.php.mustache

@@ -30,6 +30,7 @@ module.exports = {
 					type: 'string',
 				},
 			},
+			render: 'file:./render.php',
 		},
 	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),

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

@@ -8,7 +8,7 @@
  * Description:       {{description}}
 {{/description}}
  * Version:           {{version}}
- * Requires at least: 5.9
+ * Requires at least: 6.1
  * Requires PHP:      7.0
 {{#author}}
  * Author:            {{author}}
@@ -38,33 +38,6 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	{{#isStaticVariant}}
 	register_block_type( __DIR__ . '/build' );
-	{{/isStaticVariant}}
-	{{#isDynamicVariant}}
-	register_block_type(
-		__DIR__ . '/build',
-		array(
-			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
-		)
-	);
-	{{/isDynamicVariant}}
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
-{{#isDynamicVariant}}
-
-/**
- * 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}}

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

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

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

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Update templates to use the `render` field in `block.json` introduced in WordPress 6.1 ([#44185](https://github.com/WordPress/gutenberg/pull/44185)).
+
 ## 4.4.0 (2022-10-19)
 
 ### New Feature

packages/create-block/CHANGELOG.md

@@ -102,4 +102,5 @@ The following configurable variables are used with the template files. Template
 -   `editorScript` (default: `'file:./index.js'`) – an editor script definition.
 -   `editorStyle` (default: `'file:./index.css'`) – an editor style definition.
 -   `style` (default: `'file:./style-index.css'`) – a frontend and editor style definition.
+-   `render` (no default) – a path to the PHP file used when rendering the block type on the server before presenting on the front end.
 -   `customBlockJSON` (no default) - allows definition of additional properties for the generated block.json file.

packages/create-block/docs/external-template.md

@@ -29,6 +29,7 @@ async function initBlockJSON( {
 	editorScript,
 	editorStyle,
 	style,
+	render,
 	customBlockJSON,
 } ) {
 	info( '' );
@@ -57,6 +58,7 @@ async function initBlockJSON( {
 					editorScript,
 					editorStyle,
 					style,
+					render,
 					...customBlockJSON,
 				} ).filter( ( [ , value ] ) => !! value )
 			),

packages/create-block/lib/init-block.js

@@ -43,6 +43,7 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		render,
 		variantVars,
 		customPackageJSON,
 		customBlockJSON,
@@ -101,6 +102,7 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		render,
 		customPackageJSON,
 		customBlockJSON,
 		...variantVars,

packages/create-block/lib/scaffold.js

@@ -26,17 +26,21 @@ const predefinedPluginTemplates = {
 			description:
 				'Example block scaffolded with Create Block tool – no build step required.',
 			dashicon: 'smiley',
+			supports: {
+				html: false,
+			},
 			wpScripts: false,
-			editorScript: 'file:./index.js',
-			editorStyle: 'file:./editor.css',
-			style: 'file:./style.css',
+			editorScript: null,
+			editorStyle: null,
+			style: null,
 		},
 		templatesPath: join( __dirname, 'templates', 'es5' ),
 		variants: {
 			static: {},
 			dynamic: {
 				slug: 'example-dynamic-es5',
 				title: 'Example Dynamic (ES5)',
+				render: 'file:./render.php',
 			},
 		},
 	},
@@ -55,6 +59,7 @@ const predefinedPluginTemplates = {
 			dynamic: {
 				slug: 'example-dynamic',
 				title: 'Example Dynamic',
+				render: 'file:./render.php',
 			},
 		},
 	},

packages/create-block/lib/templates.js

@@ -1,5 +1,5 @@
 {{#isDynamicVariant}}
 <p <?php echo get_block_wrapper_attributes(); ?>>
- <?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
+	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
 {{/isDynamicVariant}}

packages/create-block/lib/templates/block/template.php.mustache packages/create-block/lib/templates/block/render.php.mustache

@@ -7,7 +7,7 @@
 {{#description}}
  * Description:       {{description}}
 {{/description}}
- * Requires at least: 5.7
+ * Requires at least: 6.1
  * Requires PHP:      7.0
  * Version:           {{version}}
 {{#author}}
@@ -70,32 +70,12 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 	);
 
 	register_block_type(
-		'{{namespace}}/{{slug}}',
+		$dir,
 		array(
 			'editor_script' => '{{namespace}}-{{slug}}-block-editor',
 			'editor_style'  => '{{namespace}}-{{slug}}-block-editor',
 			'style'         => '{{namespace}}-{{slug}}-block',
-			{{#isDynamicVariant}}
-			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
-			{{/isDynamicVariant}}
 		)
 	);
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
-{{#isDynamicVariant}}
-
-/**
- * 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( $attributes, $content, $block ) {
-	ob_start();
-	require plugin_dir_path( __FILE__ ) . '/template.php';
-	return ob_get_clean();
-}
-{{/isDynamicVariant}}

packages/create-block/lib/templates/es5/$slug.php.mustache

@@ -33,53 +33,6 @@
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 	 */
 	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.
-		 */
-		title: __(
-			'{{title}}',
-			'{{textdomain}}'
-		),
-
-		{{#description}}
-		/**
-		 * This is a short description for your block, can be translated with `i18n` functions.
-		 * It will be shown in the Block Tab in the Settings Sidebar.
-		 */
-		description: __(
-			'{{description}}',
-			'{{textdomain}}'
-		),
-
-		{{/description}}
-		/**
-		 * Blocks are grouped into categories to help users browse and discover them.
-		 * The categories provided by core are `text`, `media`, `design`, `widgets`, and `embed`.
-		 */
-		category: '{{category}}',
-
-		{{#dashicon}}
-		/**
-		 * An icon property should be specified to make it easier to identify a block.
-		 * These can be any of WordPress’ Dashicons, or a custom svg element.
-		 */
-		icon: '{{dashicon}}',
-
-		{{/dashicon}}
-		/**
-		 * Optional block extended support features.
-		 */
-		supports: {
-			// Removes support for an HTML mode.
-			html: false,
-		},
-
 		/**
 		 * 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.

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

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

packages/create-block/lib/templates/es5/readme.txt.mustache

@@ -1,5 +1,5 @@
 {{#isDynamicVariant}}
 <p <?php echo get_block_wrapper_attributes(); ?>>
- <?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
+	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
 {{/isDynamicVariant}}

packages/create-block/lib/templates/es5/template.php.mustache packages/create-block/lib/templates/es5/render.php.mustache

@@ -7,7 +7,7 @@
 {{#description}}
  * Description:       {{description}}
 {{/description}}
- * Requires at least: 5.9
+ * Requires at least: 6.1
  * Requires PHP:      7.0
  * Version:           {{version}}
 {{#author}}
@@ -38,33 +38,6 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	{{#isStaticVariant}}
 	register_block_type( __DIR__ . '/build' );
-	{{/isStaticVariant}}
-	{{#isDynamicVariant}}
-	register_block_type(
-		__DIR__ . '/build',
-		array(
-			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
-		)
-	);
-	{{/isDynamicVariant}}
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
-{{#isDynamicVariant}}
-
-/**
- * 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( $attributes, $content, $block ) {
-	ob_start();
-	require plugin_dir_path( __FILE__ ) . 'build/template.php';
-	return ob_get_clean();
-}
-{{/isDynamicVariant}}

packages/create-block/lib/templates/plugin/$slug.php.mustache

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