Refactor beta blocks registration (#32815)

* [not verified] Enable block registration by specifying block.json path

* [not verified] Add test for registering block by its metadata file

* [not verified] Fix failing test

* [not verified] Refactor: register business hours block with block.json path

* [not verified] Move logic to render a block icon on the client

* [not verified] Remove deprecated file

* [not verified] Pass package build dir to get_path_to_block_metadata

* [not verified] Move block icon helpers to shared-extension-utils package

* [not verified] Add missing color-studio dependency to shared-extension-utils

* [not verified] Add missing jetpack-constants dep to blocks package

* [not verified] Fix monorepo package version refs

* [not verified] Remove color studio dep in shared-extensions-util

* [not verified] Bump yoast/phpunit-polyfills version in blocks package

* [not verified] Remove unhelpful changelogs

* [not verified] Add missing color-studio dependency to shared-extension-utils

* [not verified] Add tests for blocks helpers functions

* [not verified] Refactor Amazon block registration

* [not verified] Refactor AI Chat block registration

* [not verified] Refactor Blogroll block registration

* [not verified] Refactor Recipe block registration

* [not verified] Refactor Create with Voice block registration

* [not verified] Fix missing imports in Recipe child blocks

* [not verified] Refactor Docs blocks registration

* [not verified] Fix Amazon icon

* [not verified] Use CSS logical properties for i18n

* [not verified] Fix Recipe block not correctly displayed in inserter

* [not verified] Fix Amazon icon alignment

* [not verified] Fix rebasing error

* [not verified] Update path passed to jetpack_register_block

* [not verified] Import icon helpers from shared-extension-utils package

* [not verified] Update path passed to jetpack_register_block

* [not verified] Add changelog

* [not verified] Fix failing JS test

* [not verified] Add helper to get block's feature name

* [not verified] Add changelog

* [not verified] Remove color studio dep

* [not verified] Add helper to get a block's name

* [not verified] Remove deprecated CSS

* [not verified] Add missing Blocks::get_block_feature call

* [not verified] Remove unnecessary export

* [not verified] Fix Google embeds previews

* Revert composer.lock

projects/packages/blocks/changelog/refactor-beta-blocks-registration

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Helper to get a block's feature name

projects/packages/blocks/src/class-blocks.php

@@ -121,6 +121,30 @@ function () use ( $feature_name, $method_name ) {
 		return register_block_type( $block_type, $args );
 	}
 
+	/**
+	 * Get the block metadata. Accepts a block.json file's path (or its folder's) or its content, in
+	 * which case it becomes an identity function.
+	 *
+	 * It's used by other helpers in this class so that they can accept various types as argument.
+	 *
+	 * @param string|array $arg Path to block.json or its parent folder, or its content as an array.
+	 *
+	 * @return array The block metadata.
+	 */
+	private static function get_block_metadata( $arg ) {
+		$metadata = is_array( $arg ) ? $arg : null;
+
+		if ( ! isset( $metadata ) ) {
+			$path = is_string( $arg ) ? $arg : null;
+
+			if ( isset( $path ) && ! empty( $path ) ) {
+				$metadata = self::get_block_metadata_from_file( self::get_path_to_block_metadata( $path ) );
+			}
+		}
+
+		return isset( $metadata ) ? $metadata : array();
+	}
+
 	/**
 	 * Read block metadata from a block.json file.
 	 *
@@ -144,6 +168,19 @@ public static function get_block_metadata_from_file( $filename ) {
 		return $metadata;
 	}
 
+	/**
+	 * Get the block name (includes the `jetpack` prefix).
+	 *
+	 * @param string|array $arg Path to block.json or its parent folder, or its content as an array.
+	 *
+	 * @return string The block name.
+	 */
+	public static function get_block_name( $arg ) {
+		$metadata = self::get_block_metadata( $arg );
+
+		return self::get_block_name_from_metadata( $metadata );
+	}
+
 	/**
 	 * Get the block name from the its metadata.
 	 *
@@ -155,6 +192,19 @@ public static function get_block_name_from_metadata( $metadata ) {
 		return ! isset( $metadata['name'] ) || empty( $metadata['name'] ) ? '' : $metadata['name'];
 	}
 
+	/**
+	 * Get the block feature name (i.e. the name without the `jetpack` prefix).
+	 *
+	 * @param string|array $arg Path to block.json or its parent folder, or its content as an array.
+	 *
+	 * @return string The block feature name.
+	 */
+	public static function get_block_feature( $arg ) {
+		$metadata = self::get_block_metadata( $arg );
+
+		return self::get_block_feature_from_metadata( $metadata );
+	}
+
 	/**
 	 * Get the block feature name (i.e. the name without the `jetpack` prefix) from its metadata.
 	 *

projects/packages/blocks/tests/php/test-blocks.php

@@ -463,4 +463,54 @@ public function test_get_path_to_block_metadata() {
 
 		Jetpack_Constants::clear_constants();
 	}
+
+	/**
+	 * Test getting the block name.
+	 *
+	 * @since $$next-version$$
+	 *
+	 * @covers Automattic\Jetpack\Blocks::get_block_name
+	 */
+	public function test_get_block_name() {
+		// Pass metadata
+
+		$result = Blocks::get_block_name( array() );
+		$this->assertSame( '', $result );
+
+		$result = Blocks::get_block_name( array( 'name' => 'jetpack/test-block' ) );
+		$this->assertEquals( 'jetpack/test-block', $result );
+
+		// Pass path
+
+		$result = Blocks::get_block_name( '' );
+		$this->assertSame( '', $result );
+
+		$result = Blocks::get_block_name( __DIR__ . '/fixtures/test-block/block.json' );
+		$this->assertEquals( 'jetpack/test-block', $result );
+	}
+
+	/**
+	 * Test getting the block feature name.
+	 *
+	 * @since $$next-version$$
+	 *
+	 * @covers Automattic\Jetpack\Blocks::get_block_feature
+	 */
+	public function test_get_block_feature() {
+		// Pass metadata
+
+		$result = Blocks::get_block_feature( array() );
+		$this->assertSame( '', $result );
+
+		$result = Blocks::get_block_feature( array( 'name' => 'jetpack/test-block' ) );
+		$this->assertEquals( 'test-block', $result );
+
+		// Pass path
+
+		$result = Blocks::get_block_feature( '' );
+		$this->assertSame( '', $result );
+
+		$result = Blocks::get_block_feature( __DIR__ . '/fixtures/test-block/block.json' );
+		$this->assertEquals( 'test-block', $result );
+	}
 }

projects/plugins/jetpack/changelog/refactor-beta-blocks-registration

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Register beta blocks by specifying path to block.json

projects/plugins/jetpack/extensions/blocks/ai-chat/ai-chat.php

@@ -12,17 +12,14 @@
 use Automattic\Jetpack\Blocks;
 use Jetpack_Gutenberg;
 
-const FEATURE_NAME = 'ai-chat';
-const BLOCK_NAME   = 'jetpack/' . FEATURE_NAME;
-
 /**
  * Registers our 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' )
 	);
 }
@@ -39,7 +36,7 @@ function load_assets( $attr ) {
 	/*
 	 * Enqueue necessary scripts and styles.
 	 */
-	Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME );
+	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
 
 	$ask_button_label = isset( $attr['askButtonLabel'] ) ? $attr['askButtonLabel'] : __( 'Ask', 'jetpack' );
 

projects/plugins/jetpack/extensions/blocks/ai-chat/block.json

@@ -4,11 +4,11 @@
 	"name": "jetpack/ai-chat",
 	"title": "AI Chat (Beta)",
 	"description": "Provides summarized chat across a site’s content, powered by AI magic.",
-	"keywords": [ "AI", "GPT", "Chat", "Search" ],
+	"keywords": ["AI", "GPT", "Chat", "Search"],
 	"version": "12.5.0",
 	"textdomain": "jetpack",
 	"category": "text",
-	"icon": "superhero",
+	"icon": "<svg viewBox='0 0 20 20' width='20' height='20' xmlns='http://www.w3.org/2000/svg'><path d='M11.1 10L18 2 7 10h2l-7 8 11-8h-1.9zm-4.3 1H3.9l2.5-1.8 7.5-5.5L10 2 3 5v3c0 2 .5 3.9 1.5 5.6L6.8 11zm6.4-2H16l-2.4 1.8L6.5 16c1 .9 2.2 1.6 3.5 2 4.2-1.5 7.1-5.5 7-10V5l-.2-.1L13.2 9z'/></svg>",
 	"supports": {
 		"align": true,
 		"alignWide": true,
@@ -18,5 +18,10 @@
 		"multiple": false,
 		"reusable": false
 	},
-	"editorScript": "file:../editor-beta.js"
+	"attributes": {
+		"askButtonLabel": {
+			"type": "string",
+			"default": "Ask"
+		}
+	}
 }

projects/plugins/jetpack/extensions/blocks/ai-chat/editor.js

@@ -1,4 +1,12 @@
-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 save from './save';
 
-registerJetpackBlock( name, settings );
+import './editor.scss';
+import './components/feedback/style.scss';
+
+registerJetpackBlockFromMetadata( metadata, {
+	edit,
+	save,
+} );

projects/plugins/jetpack/extensions/blocks/ai-chat/view.scss

@@ -15,7 +15,7 @@
 		}
 
 		button {
-			margin-left: 1rem;
+			margin-inline-start: 1rem;
 			border: none;
 			transition: 0.3s;
 			cursor: pointer;

projects/plugins/jetpack/extensions/blocks/amazon/amazon.php

@@ -12,17 +12,14 @@
 use Automattic\Jetpack\Blocks;
 use Jetpack_Gutenberg;
 
-const FEATURE_NAME = 'amazon';
-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' )
 	);
 }
@@ -37,6 +34,6 @@ function register_block() {
  * @return string
  */
 function load_assets( $attr, $content ) {
-	Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME );
+	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
 	return $content;
 }