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

WordPress · Sep 15, 2022 · 843960b · 843960b
1 parent 0f2548e
commit 843960b
Show file tree

Hide file tree

Showing 17 changed files with 31 additions and 133 deletions.
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/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.5.0 (2022-08-24)
 
 ### Enhancement

diff --git a/...ate/block-templates/template.php.mustache → ...plate/block-templates/render.php.mustache b/...ate/block-templates/template.php.mustache → ...plate/block-templates/render.php.mustache
diff --git a/packages/create-block-tutorial-template/index.js b/packages/create-block-tutorial-template/index.js
@@ -30,6 +30,7 @@ module.exports = {
 					type: 'string',
 				},
 			},
+			render: 'file:./render.php',
 		},
 	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),

diff --git a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
@@ -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}}
diff --git a/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache b/packages/create-block-tutorial-template/plugin-templates/readme.txt.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}}

diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/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)).
+
 ## 4.0.0 (2022-08-24)
 
 ### Breaking Change

diff --git a/packages/create-block/docs/external-template.md b/packages/create-block/docs/external-template.md
@@ -101,3 +101,4 @@ 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.
diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js
@@ -29,6 +29,7 @@ async function initBlockJSON( {
 	editorScript,
 	editorStyle,
 	style,
+	render,
 } ) {
 	info( '' );
 	info( 'Creating a "block.json" file.' );
@@ -56,6 +57,7 @@ async function initBlockJSON( {
 					editorScript,
 					editorStyle,
 					style,
+					render,
 				} ).filter( ( [ , value ] ) => !! value )
 			),
 			null,

diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
@@ -43,6 +43,7 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		render,
 		variantVars,
 	}
 ) => {
@@ -99,6 +100,7 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		render,
 		...variantVars,
 	};
 

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

diff --git a/...lib/templates/block/template.php.mustache → ...k/lib/templates/block/render.php.mustache b/...lib/templates/block/template.php.mustache → ...k/lib/templates/block/render.php.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}}
diff --git a/packages/create-block/lib/templates/es5/$slug.php.mustache b/packages/create-block/lib/templates/es5/$slug.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}}
diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.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.

diff --git a/packages/create-block/lib/templates/es5/readme.txt.mustache b/packages/create-block/lib/templates/es5/readme.txt.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}}

diff --git a/...k/lib/templates/es5/template.php.mustache → ...ock/lib/templates/es5/render.php.mustache b/...k/lib/templates/es5/template.php.mustache → ...ock/lib/templates/es5/render.php.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}}
diff --git a/packages/create-block/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.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}}
diff --git a/packages/create-block/lib/templates/plugin/readme.txt.mustache b/packages/create-block/lib/templates/plugin/readme.txt.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}}
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ module.exports = { @@
     					type: 'string',
     				},
     			},
+    			render: 'file:./render.php',
     		},
     	},
     	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
@@ Expand Down @@