Refactor production blocks registration 3 (#33604)

Co-authored-by: Jeremy Herve <[email protected]>

projects/plugins/jetpack/changelog/refactor-production-blocks-registration-3

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Refactor blocks registration

projects/plugins/jetpack/extensions/blocks/mailchimp/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
+	"apiVersion": 1,
 	"name": "jetpack/mailchimp",
 	"title": "Mailchimp",
 	"description": "Allow readers to join a Mailchimp audience.",
@@ -55,5 +55,19 @@
 			"default": false
 		}
 	},
-	"editorScript": "file:../editor.js"
+	"example": {
+		"attributes": {
+			"preview": true
+		},
+		"innerBlocks": [
+			{
+				"name": "jetpack/button",
+				"attributes": {
+					"element": "button",
+					"text": "Join my Mailchimp audience",
+					"uniqueId": "mailchimp-widget-id"
+				}
+			}
+		]
+	}
 }

projects/plugins/jetpack/extensions/blocks/mailchimp/edit.js

@@ -1,19 +1,32 @@
-import { isCurrentUserConnected } from '@automattic/jetpack-shared-extension-utils';
+import {
+	isCurrentUserConnected,
+	getBlockIconComponent,
+} from '@automattic/jetpack-shared-extension-utils';
 import apiFetch from '@wordpress/api-fetch';
 import { InnerBlocks, InspectorControls, RichText } from '@wordpress/block-editor';
 import { Button, Placeholder, Spinner, TextControl, withNotices } from '@wordpress/components';
 import { Fragment, Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import classnames from 'classnames';
+import metadata from './block.json';
 import { NOTIFICATION_PROCESSING, NOTIFICATION_SUCCESS, NOTIFICATION_ERROR } from './constants';
 import { MailChimpBlockControls } from './controls';
-import { icon, innerButtonBlock } from '.';
 
 const API_STATE_LOADING = 0;
 const API_STATE_CONNECTED = 1;
 const API_STATE_NOTCONNECTED = 2;
 
+const icon = getBlockIconComponent( metadata );
+const innerButtonBlock = {
+	name: 'jetpack/button',
+	attributes: {
+		element: 'button',
+		text: __( 'Join my Mailchimp audience', 'jetpack' ),
+		uniqueId: 'mailchimp-widget-id',
+	},
+};
+
 class MailchimpSubscribeEdit extends Component {
 	constructor() {
 		super( ...arguments );

projects/plugins/jetpack/extensions/blocks/mailchimp/editor.js

@@ -1,4 +1,15 @@
-import registerJetpackBlock from '../../shared/register-jetpack-block';
-import { name, settings } from '.';
+import { registerJetpackBlockFromMetadata } from '../../shared/register-jetpack-block';
+import metadata from './block.json';
+import deprecatedV1 from './deprecated/v1';
+import edit from './edit';
+import save from './save';
+import transforms from './transforms';
 
-registerJetpackBlock( name, settings );
+import './editor.scss';
+
+registerJetpackBlockFromMetadata( metadata, {
+	edit,
+	save,
+	deprecated: [ deprecatedV1 ],
+	transforms,
+} );

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

@@ -14,9 +14,6 @@
 use Jetpack_Gutenberg;
 use Jetpack_Options;
 
-const FEATURE_NAME = 'mailchimp';
-const BLOCK_NAME   = 'jetpack/' . FEATURE_NAME;
-
 /**
  * Registers the block for use in Gutenberg
  * This is done via an action so that we can disable
@@ -28,19 +25,9 @@ function register_block() {
 		|| Jetpack::is_connection_ready()
 	) {
 		Blocks::jetpack_register_block(
-			BLOCK_NAME,
+			__DIR__,
 			array(
 				'render_callback' => __NAMESPACE__ . '\load_assets',
-				'supports'        => array(
-					'align'   => array( 'wide', 'full' ),
-					'color'   => array(
-						'gradients' => true,
-					),
-					'spacing' => array(
-						'padding' => true,
-						'margin'  => true,
-					),
-				),
 			)
 		);
 	}
@@ -65,7 +52,7 @@ function load_assets( $attr, $content ) {
 	$blog_id = ( defined( 'IS_WPCOM' ) && IS_WPCOM )
 		? get_current_blog_id()
 		: Jetpack_Options::get_option( 'id' );
-	Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME );
+	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
 	$wrapper_attributes = \WP_Block_Supports::get_instance()->apply_block_supports();
 	$classes            = ! empty( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
 	$amp_form_action    = sprintf( 'https://public-api.wordpress.com/rest/v1.1/sites/%s/email_follow/amp/subscribe/', $blog_id );

projects/plugins/jetpack/extensions/blocks/mailchimp/save.js

@@ -0,0 +1,3 @@
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default () => <InnerBlocks.Content />;

projects/plugins/jetpack/extensions/blocks/mailchimp/test/validate.js

@@ -1,21 +1,14 @@
-import { name, settings } from '../';
 import runBlockFixtureTests from '../../../shared/test/block-fixtures';
 import { settings as buttonSettings } from '../../button';
+import metadata from '../block.json';
+import deprecated from '../deprecated/v1';
+import edit from '../edit';
+import save from '../save';
 
-/**
- * Update this array of blocks to contain the name and settings for all blocks
- * involved in this set of tests.
- *
- * Example containing multiple blocks:
- * ```
- * const blocks = [
- *    { name: 'jetpack/whatsapp-button', settings },
- *    { name: 'jetpack/send-a-message', settings: parentSettings },
- * ];
- * ```
- */
+const { name } = metadata;
 const blocks = [
-	{ name: `jetpack/${ name }`, settings },
+	{ name, settings: { ...metadata, edit, save, deprecated: [ deprecated ] } },
 	{ name: `jetpack/button`, settings: buttonSettings },
 ];
-runBlockFixtureTests( `jetpack/${ name }`, blocks, __dirname );
+
+runBlockFixtureTests( name, blocks, __dirname );

projects/plugins/jetpack/extensions/blocks/map/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
+	"apiVersion": 1,
 	"name": "jetpack/map",
 	"title": "Map",
 	"description": "Add an interactive map showing one or more locations.",
@@ -57,5 +57,9 @@
 			"default": true
 		}
 	},
-	"editorScript": "file:../editor.js"
+	"example": {
+		"attributes": {
+			"preview": true
+		}
+	}
 }

projects/plugins/jetpack/extensions/blocks/map/controls.js

@@ -10,10 +10,30 @@ import {
 	ToolbarGroup,
 	RangeControl,
 	BaseControl,
+	SVG,
+	G,
+	Polygon,
+	Path,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import Locations from './locations';
-import { settings } from './settings.js';
+
+const markerIcon = (
+	/* Do not use SVG components from @wordpress/component to avoid frontend bloat */
+	<SVG width="14" height="20" viewBox="0 0 14 20" xmlns="http://www.w3.org/2000/svg">
+		<G id="Page-1" fill="none" fillRule="evenodd">
+			<G id="outline-add_location-24px" transform="translate(-5 -2)">
+				<Polygon id="Shape" points="0 0 24 0 24 24 0 24" />
+				<Path
+					d="M12,2 C8.14,2 5,5.14 5,9 C5,14.25 12,22 12,22 C12,22 19,14.25 19,9 C19,5.14 15.86,2 12,2 Z M7,9 C7,6.24 9.24,4 12,4 C14.76,4 17,6.24 17,9 C17,11.88 14.12,16.19 12,18.88 C9.92,16.21 7,11.85 7,9 Z M13,6 L11,6 L11,8 L9,8 L9,10 L11,10 L11,12 L13,12 L13,10 L15,10 L15,8 L13,8 L13,6 Z"
+					id="Shape"
+					fill="#000"
+					fillRule="nonzero"
+				/>
+			</G>
+		</G>
+	</SVG>
+);
 
 export default ( {
 	attributes,
@@ -80,7 +100,7 @@ export default ( {
 				/>
 				<ToolbarGroup>
 					<ToolbarButton
-						icon={ settings.markerIcon }
+						icon={ markerIcon }
 						label={ __( 'Add a marker', 'jetpack' ) }
 						onClick={ setPointVisibility }
 					/>