CLI Tools: update scaffolding, use block.json to register blocks. (#33883)

Author: jeherve

projects/plugins/jetpack/changelog/update-cli-blocks-scaffold

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+CLI Tools: update block scaffolding CLI tool to use block.json to register blocks.

projects/plugins/jetpack/class.jetpack-cli.php

@@ -1976,6 +1976,8 @@ public function block( $args, $assoc_args ) {
 			? $assoc_args['slug']
 			: sanitize_title( $title );
 
+		$next_version = "\x24\x24next-version$$"; // Escapes to hide the string from tools/replace-next-version-tag.sh
+
 		$variation_options = array( 'production', 'experimental', 'beta' );
 		$variation         = ( isset( $assoc_args['variation'] ) && in_array( $assoc_args['variation'], $variation_options, true ) )
 			? $assoc_args['variation']
@@ -2004,56 +2006,51 @@ public function block( $args, $assoc_args ) {
 
 		$wp_filesystem->mkdir( $path );
 
-		$has_keywords = isset( $assoc_args['keywords'] );
+		$keywords = isset( $assoc_args['keywords'] )
+			? array_map(
+				function ( $keyword ) {
+					return trim( $keyword );
+				},
+				array_slice( explode( ',', $assoc_args['keywords'] ), 0, 3 )
+			)
+			: array();
 
 		$files = array(
-			"$path/$slug.php"     => self::render_block_file(
-				'block-register-php',
+			"$path/block.json"  => self::render_block_file(
+				'block-block-json',
 				array(
-					'nextVersion'      => "\x24\x24next-version$$", // Escapes to hide the string from tools/replace-next-version-tag.sh
-					'slug'             => $slug,
-					'title'            => $title,
-					'underscoredSlug'  => str_replace( '-', '_', $slug ),
-					'underscoredTitle' => str_replace( ' ', '_', $title ),
+					'slug'        => $slug,
+					'title'       => wp_json_encode( $title, JSON_UNESCAPED_UNICODE ),
+					'description' => isset( $assoc_args['description'] )
+						? wp_json_encode( $assoc_args['description'], JSON_UNESCAPED_UNICODE )
+						: wp_json_encode( $title, JSON_UNESCAPED_UNICODE ),
+					'nextVersion' => $next_version,
+					'keywords'    => wp_json_encode( $keywords, JSON_UNESCAPED_UNICODE ),
 				)
 			),
-			"$path/index.js"      => self::render_block_file(
-				'block-index-js',
+			"$path/$slug.php"   => self::render_block_file(
+				'block-register-php',
 				array(
-					'slug'        => $slug,
-					'title'       => $title,
-					'description' => isset( $assoc_args['description'] )
-						? $assoc_args['description']
-						: $title,
-					'keywords'    => $has_keywords
-					? array_map(
-						function ( $keyword ) {
-								// Construction necessary for Mustache lists.
-								return array( 'keyword' => trim( $keyword ) );
-						},
-						explode( ',', $assoc_args['keywords'], 3 )
-					)
-					: '',
-					'hasKeywords' => $has_keywords,
+					'nextVersion'      => $next_version,
+					'title'            => $title,
+					'underscoredTitle' => str_replace( ' ', '_', $title ),
 				)
 			),
-			"$path/editor.js"     => self::render_block_file( 'block-editor-js' ),
-			"$path/editor.scss"   => self::render_block_file(
+			"$path/editor.js"   => self::render_block_file( 'block-editor-js' ),
+			"$path/editor.scss" => self::render_block_file(
 				'block-editor-scss',
 				array(
 					'slug'  => $slug,
 					'title' => $title,
 				)
 			),
-			"$path/edit.js"       => self::render_block_file(
+			"$path/edit.js"     => self::render_block_file(
 				'block-edit-js',
 				array(
 					'title'     => $title,
 					'className' => str_replace( ' ', '', ucwords( str_replace( '-', ' ', $slug ) ) ),
 				)
 			),
-			"$path/icon.js"       => self::render_block_file( 'block-icon-js' ),
-			"$path/attributes.js" => self::render_block_file( 'block-attributes-js' ),
 		);
 
 		$files_written = array();

projects/plugins/jetpack/wp-cli-templates/block-attributes-js.mustache

@@ -0,0 +1,23 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 1,
+	"name": "jetpack/{{ slug }}",
+	"title": {{ title }},
+	"description": {{ description }},
+	"keywords": {{ keywords }},
+	"version": "{{ nextVersion }}",
+	"textdomain": "jetpack",
+	"category": "grow",
+	"icon": "<svg viewBox='0 0 32 32' width='32' height='32' xmlns='http://www.w3.org/2000/svg'><path d='M9 15h2V9H9v6zm1-10c-.5 0-1 .5-1 1s.5 1 1 1 1-.5 1-1-.5-1-1-1zm0-4c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z'/></svg>",
+	"supports": {
+		"align": false,
+		"alignWide": true,
+		"anchor": false,
+		"customClassName": true,
+		"className": true,
+		"html": false,
+		"multiple": true,
+		"reusable": true
+	},
+	"attributes": {}
+}

projects/plugins/jetpack/wp-cli-templates/block-block-json.mustache

@@ -1,9 +1,12 @@
+import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
 import { BlockIcon } from '@wordpress/block-editor';
 import { Placeholder, withNotices } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import metadata from './block.json';
 import './editor.scss';
-import icon from './icon';
+
+const icon = getBlockIconComponent( metadata );
 
 function {{ className }}Edit( { attributes, className, noticeOperations, noticeUI, setAttributes } ) {
 	/**

projects/plugins/jetpack/wp-cli-templates/block-edit-js.mustache

@@ -1,4 +1,9 @@
-import registerJetpackBlock from '../../shared/register-jetpack-block';
-import { name, settings } from '.';
+import { registerJetpackBlockFromMetadata } from '../../shared/register-jetpack-block';
+import metadata from './block.json';
+import edit from './edit';
+import './editor.scss';
 
-registerJetpackBlock( name, settings );
+registerJetpackBlockFromMetadata( metadata, {
+	edit,
+	save: () => null, // TODO: Implement save.
+} );

projects/plugins/jetpack/wp-cli-templates/block-editor-js.mustache

@@ -12,17 +12,14 @@ namespace Automattic\Jetpack\Extensions\{{ underscoredTitle }};
 use Automattic\Jetpack\Blocks;
 use Jetpack_Gutenberg;
 
-const FEATURE_NAME = '{{ slug }}';
-const BLOCK_NAME   = 'jetpack/' . FEATURE_NAME;
-
 /**
  * Registers the block for use in Gutenberg
  * This is done via an action so that we can disable
  * registration if we need to.
  */
 function register_block() {
 	Blocks::jetpack_register_block(
-		BLOCK_NAME,
+		__DIR__,
 		array( 'render_callback' => __NAMESPACE__ . '\load_assets' )
 	);
 }
@@ -40,11 +37,11 @@ function load_assets( $attr, $content ) {
 	/*
 	 * Enqueue necessary scripts and styles.
 	 */
-	Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME );
+	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
 
 	return sprintf(
 		'<div class="%1$s">%2$s</div>',
-		esc_attr( Blocks::classes( FEATURE_NAME, $attr ) ),
+		esc_attr( Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attr ) ),
 		$content
 	);
 }