Refactor production blocks registration 4

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

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

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

@@ -44,7 +44,7 @@
 			"default": {
 				"show": true,
 				"planId": null,
-				"amounts": [ 5, 15, 100 ],
+				"amounts": [5, 15, 100],
 				"heading": "Make a one-time donation",
 				"extraText": "Your contribution is appreciated.",
 				"buttonText": "Donate"
@@ -55,7 +55,7 @@
 			"default": {
 				"show": true,
 				"planId": null,
-				"amounts": [ 5, 15, 100 ],
+				"amounts": [5, 15, 100],
 				"heading": "Make a monthly donation",
 				"extraText": "Your contribution is appreciated.",
 				"buttonText": "Donate monthly"
@@ -66,7 +66,7 @@
 			"default": {
 				"show": true,
 				"planId": null,
-				"amounts": [ 5, 15, 100 ],
+				"amounts": [5, 15, 100],
 				"heading": "Make a yearly donation",
 				"extraText": "Your contribution is appreciated.",
 				"buttonText": "Donate yearly"

projects/plugins/jetpack/extensions/blocks/payments-intro/index.js

@@ -4,7 +4,7 @@ import { currencyDollar } from '@wordpress/icons';
 import { getIconColor } from '../../shared/block-icons';
 import donationMetadata from '../donations/block.json';
 import { settings as premiumContentSettings } from '../premium-content';
-import { settings as recurringPaymentSettings } from '../recurring-payments';
+import recurringPaymentsMetadata from '../recurring-payments/block.json';
 import edit from './edit';
 
 export const name = 'payments-intro';
@@ -21,8 +21,8 @@ export const settings = {
 		...new Set( [
 			donationMetadata.title,
 			...donationMetadata.keywords,
-			recurringPaymentSettings.title,
-			...recurringPaymentSettings.keywords,
+			recurringPaymentsMetadata.title,
+			...recurringPaymentsMetadata.keywords,
 			premiumContentSettings.title,
 			...premiumContentSettings.keywords,
 			_x( 'paid', 'block search term', 'jetpack' ),

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
+	"apiVersion": 1,
 	"name": "jetpack/paywall",
 	"title": "Paywall",
 	"description": "Limit access to the content below this block to chosen subscribers.",
@@ -25,6 +25,5 @@
 		"html": false,
 		"multiple": false
 	},
-	"parent": [ "core/post-content" ],
-	"editorScript": "file:../editor-beta.js"
+	"parent": [ "core/post-content" ]
 }

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

@@ -1,8 +1,12 @@
 import { unregisterBlockType } from '@wordpress/blocks';
 import { subscribe, select } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-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 transforms from './transforms';
+
+import './editor.scss';
 
 const unsubscribe = subscribe( () => {
 	const postType = select( editorStore ).getCurrentPostType();
@@ -18,4 +22,8 @@ const unsubscribe = subscribe( () => {
 	}
 } );
 
-registerJetpackBlock( name, settings );
+registerJetpackBlockFromMetadata( metadata, {
+	edit,
+	save: () => null,
+	transforms,
+} );

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

@@ -11,11 +11,6 @@
 
 use Automattic\Jetpack\Blocks;
 
-const FEATURE_NAME      = 'paywall';
-const BLOCK_NAME        = 'jetpack/' . FEATURE_NAME;
-const BLOCK_HTML        = '<!-- wp:' . BLOCK_NAME . ' /-->';
-const THE_EXCERPT_BLOCK = '[[[[[' . BLOCK_NAME . ']]]]]';
-
 /**
  * Registers the block for use in Gutenberg
  * This is done via an action so that we can disable
@@ -30,7 +25,7 @@ function register_block() {
 	}
 
 	Blocks::jetpack_register_block(
-		BLOCK_NAME,
+		__DIR__,
 		array(
 			'render_callback' => __NAMESPACE__ . '\render_block',
 		)
@@ -48,7 +43,7 @@ function render_block() {
 		if ( \Jetpack_Memberships::user_can_view_post() ) {
 			return '';
 		}
-		return THE_EXCERPT_BLOCK;
+		return '[[[[[' . Blocks::get_block_name( __DIR__ ) . ']]]]]';
 	}
 	return '';
 }
@@ -61,6 +56,6 @@ function render_block() {
  * @return array The allowed blocks.
  */
 function excerpt_allowed_blocks( $allowed_blocks ) {
-	return array_merge( $allowed_blocks, array( BLOCK_NAME ) );
+	return array_merge( $allowed_blocks, array( Blocks::get_block_name( __DIR__ ) ) );
 }
 add_filter( 'excerpt_allowed_blocks', __NAMESPACE__ . '\excerpt_allowed_blocks' );

projects/plugins/jetpack/extensions/blocks/paywall/transforms.js

@@ -1,12 +1,12 @@
 import { createBlock } from '@wordpress/blocks';
-import { name } from './';
+import metadata from './block.json';
 
 const transforms = {
 	from: [
 		{
 			type: 'block',
 			blocks: [ 'core/more', 'core/nextpage' ],
-			transform: () => createBlock( `jetpack/${ name }` ),
+			transform: () => createBlock( metadata.name ),
 		},
 	],
 	to: [

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
+	"apiVersion": 1,
 	"name": "jetpack/pinterest",
 	"title": "Pinterest",
 	"description": "Embed a Pinterest pin, board, or user.",
@@ -22,6 +22,5 @@
 		"attributes": {
 			"url": "https://pinterest.com/anapinskywalker/"
 		}
-	},
-	"editorScript": "file:../editor.js"
+	}
 }

projects/plugins/jetpack/extensions/blocks/pinterest/components/edit-url-form.js

@@ -1,6 +1,9 @@
+import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
 import { Placeholder, Button } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { icon } from '../';
+import metadata from '../block.json';
+
+const icon = getBlockIconComponent( metadata );
 
 export default function EditUrlForm( { className, onSubmit, noticeUI, url, setUrl } ) {
 	const onChange = event => setUrl( event.target.value );

projects/plugins/jetpack/extensions/blocks/pinterest/constants.js

@@ -0,0 +1,3 @@
+export const PINTEREST_EXAMPLE_URL = 'https://pinterest.com/anapinskywalker/';
+export const URL_REGEX =
+	/^\s*https?:\/\/(?:www\.)?(?:[a-z]{2}\.)?(?:pinterest\.[a-z.]+|pin\.it)\/([^/]+)(\/[^/]+)?/i;

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

@@ -1,4 +1,26 @@
-import registerJetpackBlock from '../../shared/register-jetpack-block';
-import { name, settings } from '.';
+import { createBlock } from '@wordpress/blocks';
+import { registerJetpackBlockFromMetadata } from '../../shared/register-jetpack-block';
+import metadata from './block.json';
+import { URL_REGEX } from './constants';
+import deprecatedV1 from './deprecated/v1';
+import edit from './edit';
+import save from './save';
 
-registerJetpackBlock( name, settings );
+registerJetpackBlockFromMetadata( metadata, {
+	edit,
+	save,
+	transforms: {
+		from: [
+			{
+				type: 'raw',
+				isMatch: node => node.nodeName === 'P' && URL_REGEX.test( node.textContent ),
+				transform: node => {
+					return createBlock( 'jetpack/pinterest', {
+						url: node.textContent.trim(),
+					} );
+				},
+			},
+		],
+	},
+	deprecated: [ deprecatedV1 ],
+} );

projects/plugins/jetpack/extensions/blocks/pinterest/hooks/use-test-pinterest-embed-url.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from '@wordpress/element';
-import { PINTEREST_EXAMPLE_URL } from '../';
 import testEmbedUrl from '../../../shared/test-embed-url';
+import { PINTEREST_EXAMPLE_URL } from '../constants';
 
 const useTestPinterestEmbedUrl = ( initialValue = '' ) => {
 	const [ isFetching, setIsFetching ] = useState( false );

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

@@ -12,9 +12,7 @@
 use Automattic\Jetpack\Blocks;
 use WP_Error;
 
-const FEATURE_NAME = 'pinterest';
-const BLOCK_NAME   = 'jetpack/' . FEATURE_NAME;
-const URL_PATTERN  = '#^https?://(?:www\.)?(?:[a-z]{2}\.)?pinterest\.[a-z.]+/pin/(?P<pin_id>[^/]+)/?#i'; // Taken from AMP plugin, originally from Jetpack.
+const URL_PATTERN = '#^https?://(?:www\.)?(?:[a-z]{2}\.)?pinterest\.[a-z.]+/pin/(?P<pin_id>[^/]+)/?#i'; // Taken from AMP plugin, originally from Jetpack.
 // This is the validate Pinterest URLs, converted from URL_REGEX in extensions/blocks/pinterest/index.js.
 const PINTEREST_URL_REGEX = '/^https?:\/\/(?:www\.)?(?:[a-z]{2}\.)?(?:pinterest\.[a-z.]+|pin\.it)\/([^\/]+)(\/[^\/]+)?/i';
 // This looks for matches in /foo/ of https://www.pinterest.ca/foo/.
@@ -61,7 +59,7 @@ function pin_type( $url ) {
  */
 function register_block() {
 	Blocks::jetpack_register_block(
-		BLOCK_NAME,
+		__DIR__,
 		array( 'render_callback' => __NAMESPACE__ . '\load_assets' )
 	);
 }
@@ -238,7 +236,7 @@ function load_assets( $attr, $content ) {
 				<a data-pin-do="%2$s" href="%3$s"></a>
 			</div>
 		',
-			esc_attr( Blocks::classes( FEATURE_NAME, $attr ) ),
+			esc_attr( Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attr ) ),
 			esc_attr( $type ),
 			esc_url( $url )
 		);

projects/plugins/jetpack/extensions/blocks/pinterest/test/use-test-pinterest-embed-url.js

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react';
-import { PINTEREST_EXAMPLE_URL } from '../';
 import testEmbedUrl from '../../../shared/test-embed-url';
+import { PINTEREST_EXAMPLE_URL } from '../constants';
 import useTestPinterestEmbedUrl from '../hooks/use-test-pinterest-embed-url';
 
 jest.mock( '../../../shared/test-embed-url', () => ( {