Refactor production blocks registration 2 (#33573)

Automattic · Oct 25, 2023 · 0da71a7 · 0da71a7
1 parent 67e1a0d
commit 0da71a7
Show file tree

Hide file tree

Showing 41 changed files with 361 additions and 565 deletions.
diff --git a/projects/plugins/jetpack/changelog/refactor-production-blocks-registration-2 b/projects/plugins/jetpack/changelog/refactor-production-blocks-registration-2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Refactor blocks registration
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/block.json b/projects/plugins/jetpack/extensions/blocks/donations/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
+	"apiVersion": 1,
 	"name": "jetpack/donations",
 	"title": "Donations Form",
 	"description": "Collect one-time, monthly, or annually recurring donations.",
@@ -34,5 +34,59 @@
 	"category": "earn",
 	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z' /></svg>",
 	"supports": { "html": false },
-	"editorScript": "file:../editor.js"
+	"attributes": {
+		"currency": {
+			"type": "string",
+			"default": ""
+		},
+		"oneTimeDonation": {
+			"type": "object",
+			"default": {
+				"show": true,
+				"planId": null,
+				"amounts": [ 5, 15, 100 ],
+				"heading": "Make a one-time donation",
+				"extraText": "Your contribution is appreciated.",
+				"buttonText": "Donate"
+			}
+		},
+		"monthlyDonation": {
+			"type": "object",
+			"default": {
+				"show": true,
+				"planId": null,
+				"amounts": [ 5, 15, 100 ],
+				"heading": "Make a monthly donation",
+				"extraText": "Your contribution is appreciated.",
+				"buttonText": "Donate monthly"
+			}
+		},
+		"annualDonation": {
+			"type": "object",
+			"default": {
+				"show": true,
+				"planId": null,
+				"amounts": [ 5, 15, 100 ],
+				"heading": "Make a yearly donation",
+				"extraText": "Your contribution is appreciated.",
+				"buttonText": "Donate yearly"
+			}
+		},
+		"showCustomAmount": {
+			"type": "boolean",
+			"default": true
+		},
+		"chooseAmountText": {
+			"type": "string",
+			"default": "Choose an amount"
+		},
+		"customAmountText": {
+			"type": "string",
+			"default": "Or enter a custom amount"
+		},
+		"fallbackLinkUrl": {
+			"type": "string"
+		}
+	},
+	"example": {}
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/common.scss b/projects/plugins/jetpack/extensions/blocks/donations/common.scss
@@ -18,7 +18,7 @@
 		text-align: center;
 		font-size: 16px;
 		padding: 12px;
-		border-left: 1px solid $gray-400;
+		border-inline-start: 1px solid $gray-400;
 		background: $white;
 		color: $gray-900;
 		cursor: pointer;
@@ -28,7 +28,7 @@
 		}
 
 		&:first-child {
-			border-left: none;
+			border-inline-start: none;
 		}
 
 		&.is-active {
@@ -71,7 +71,7 @@
 		background-color: $white;
 		color: $gray-900;
 		border: 1px solid $gray-400;
-		margin-right: 8px;
+		margin-inline-end: 8px;
 		margin-bottom: 8px;
 		font-weight: 600;
 		font-size: 16px;
@@ -86,7 +86,7 @@
 
 	.donations__custom-amount .donations__amount-value {
 		display: inline-block;
-		margin-left: 4px;
+		margin-inline-start: 4px;
 		min-width: 60px;
 	}
 

diff --git a/projects/plugins/jetpack/extensions/blocks/donations/donations.php b/projects/plugins/jetpack/extensions/blocks/donations/donations.php
@@ -12,73 +12,16 @@
 use Automattic\Jetpack\Blocks;
 use Jetpack_Gutenberg;
 
-const FEATURE_NAME = 'donations';
-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__ . '\render_block',
-			'attributes'      => array(
-				'currency'         => array(
-					'type'    => 'string',
-					'default' => '',
-				),
-				'oneTimeDonation'  => array(
-					'type'    => 'object',
-					'default' => array(
-						'show'       => true,
-						'planId'     => null,
-						'amounts'    => array( 5, 15, 100 ),
-						'heading'    => __( 'Make a one-time donation', 'jetpack' ),
-						'extraText'  => __( 'Your contribution is appreciated.', 'jetpack' ),
-						'buttonText' => __( 'Donate', 'jetpack' ),
-					),
-				),
-				'monthlyDonation'  => array(
-					'type'    => 'object',
-					'default' => array(
-						'show'       => true,
-						'planId'     => null,
-						'amounts'    => array( 5, 15, 100 ),
-						'heading'    => __( 'Make a monthly donation', 'jetpack' ),
-						'extraText'  => __( 'Your contribution is appreciated.', 'jetpack' ),
-						'buttonText' => __( 'Donate monthly', 'jetpack' ),
-					),
-				),
-				'annualDonation'   => array(
-					'type'    => 'object',
-					'default' => array(
-						'show'       => true,
-						'planId'     => null,
-						'amounts'    => array( 5, 15, 100 ),
-						'heading'    => __( 'Make a yearly donation', 'jetpack' ),
-						'extraText'  => __( 'Your contribution is appreciated.', 'jetpack' ),
-						'buttonText' => __( 'Donate yearly', 'jetpack' ),
-					),
-				),
-				'showCustomAmount' => array(
-					'type'    => 'boolean',
-					'default' => true,
-				),
-				'chooseAmountText' => array(
-					'type'    => 'string',
-					'default' => __( 'Choose an amount', 'jetpack' ),
-				),
-				'customAmountText' => array(
-					'type'    => 'string',
-					'default' => __( 'Or enter a custom amount', 'jetpack' ),
-				),
-				'fallbackLinkUrl'  => array(
-					'type' => 'string',
-				),
-			),
 		)
 	);
 }
@@ -105,7 +48,7 @@ function render_block( $attr, $content ) {
 		return '';
 	}
 
-	Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME, array( 'thickbox' ) );
+	Jetpack_Gutenberg::load_assets_as_required( __DIR__, array( 'thickbox' ) );
 	add_thickbox();
 
 	require_once JETPACK__PLUGIN_DIR . '/_inc/lib/class-jetpack-currencies.php';
@@ -231,7 +174,7 @@ function render_block( $attr, $content ) {
 	</div>
 </div>
 ',
-		esc_attr( Blocks::classes( FEATURE_NAME, $attr ) ),
+		esc_attr( Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attr ) ),
 		$nav,
 		$headings,
 		$attr['chooseAmountText'],
@@ -254,7 +197,7 @@ function render_block( $attr, $content ) {
 function amp_skip_post( $skip, $post_id, $post ) {
 	// When AMP is on standard mode, there are no non-AMP posts to link to where the donation can be completed, so let's
 	// prevent the post from being available in AMP.
-	if ( function_exists( 'amp_is_canonical' ) && \amp_is_canonical() && has_block( BLOCK_NAME, $post->post_content ) ) {
+	if ( function_exists( 'amp_is_canonical' ) && \amp_is_canonical() && has_block( Blocks::get_block_name( __DIR__ ), $post->post_content ) ) {
 		return true;
 	}
 	return $skip;

diff --git a/projects/plugins/jetpack/extensions/blocks/donations/edit.js b/projects/plugins/jetpack/extensions/blocks/donations/edit.js
@@ -32,17 +32,19 @@ const Edit = props => {
 		select( MEMBERSHIPS_PRODUCTS_STORE ).getConnectedAccountDefaultCurrency()
 	);
 
-	if ( ! currency && stripeDefaultCurrency ) {
-		const uppercasedStripeCurrency = stripeDefaultCurrency.toUpperCase();
-		const isCurrencySupported = !! SUPPORTED_CURRENCIES[ uppercasedStripeCurrency ];
-		if ( isCurrencySupported ) {
-			// If no currency is available, default to the stripe one
-			setAttributes( { currency: uppercasedStripeCurrency } );
-		} else {
-			// We default to USD
-			setAttributes( { currency: 'USD' } );
+	useEffect( () => {
+		if ( ! currency && stripeDefaultCurrency ) {
+			const uppercasedStripeCurrency = stripeDefaultCurrency.toUpperCase();
+			const isCurrencySupported = !! SUPPORTED_CURRENCIES[ uppercasedStripeCurrency ];
+			if ( isCurrencySupported ) {
+				// If no currency is available, default to the stripe one
+				setAttributes( { currency: uppercasedStripeCurrency } );
+			} else {
+				// We default to USD
+				setAttributes( { currency: 'USD' } );
+			}
 		}
-	}
+	}, [ currency, stripeDefaultCurrency, setAttributes ] );
 
 	const apiError = message => {
 		setLoadingError( message );

diff --git a/projects/plugins/jetpack/extensions/blocks/donations/editor.js b/projects/plugins/jetpack/extensions/blocks/donations/editor.js
@@ -1,4 +1,13 @@
-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';
 
-registerJetpackBlock( name, settings );
+import './editor.scss';
+
+registerJetpackBlockFromMetadata( metadata, {
+	edit,
+	save,
+	deprecated: [ deprecatedV1 ],
+} );
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/index.js b/projects/plugins/jetpack/extensions/blocks/donations/index.js
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/view.scss b/projects/plugins/jetpack/extensions/blocks/donations/view.scss
@@ -32,7 +32,7 @@
 			border-radius: 100%;
 			position: absolute;
 			top: 50%;
-			left: 50%;
+			inset-inline-start: 50%;
 			transform: translate( -50%, -50% );
 		}
 
@@ -44,8 +44,8 @@
 			border-radius: 100%;
 			position: absolute;
 			top: 50%;
-			left: 50%;
-			margin-left: math.div(-$spinner-size, 3);
+			inset-inline-start: 50%;
+			margin-inline-start: math.div(-$spinner-size, 3);
 			margin-top: math.div(-$spinner-size, 3);
 			transform-origin: math.div($spinner-size, 3) math.div($spinner-size, 3);
 			animation: spinner 1s infinite linear;
@@ -88,7 +88,7 @@
 		.donations__amount-value {
 			white-space: pre-wrap;
 			display: inline-block;
-			text-align: left;
+			text-align: start;
 
 			&:empty::after {
 				content: attr( data-empty-text );

diff --git a/projects/plugins/jetpack/extensions/blocks/eventbrite/attributes.js b/projects/plugins/jetpack/extensions/blocks/eventbrite/attributes.js
diff --git a/projects/plugins/jetpack/extensions/blocks/eventbrite/block.json b/projects/plugins/jetpack/extensions/blocks/eventbrite/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 3,
+	"apiVersion": 1,
 	"name": "jetpack/eventbrite",
 	"title": "Eventbrite Checkout",
 	"description": "Embed Eventbrite event details and ticket checkout.",
@@ -10,5 +10,33 @@
 	"category": "embed",
 	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M18.041,3.931L5.959,3C4.325,3,3,4.325,3,5.959v12.083C3,19.675,4.325,21,5.959,21l12.083-0.931C19.699,19.983,21,18.744,21,17.11V6.89C21,5.256,19.741,4.027,18.041,3.931zM16.933,8.17c-0.082,0.215-0.192,0.432-0.378,0.551c-0.188,0.122-0.489,0.132-0.799,0.132c-1.521,0-3.062-0.048-4.607-0.048c-0.152,0.708-0.304,1.416-0.451,2.128c0.932-0.004,1.873,0.005,2.81,0.005c0.726,0,1.462-0.069,1.586,0.525c0.04,0.189-0.001,0.426-0.052,0.615c-0.105,0.38-0.258,0.676-0.625,0.783c-0.185,0.054-0.408,0.058-0.646,0.058c-1.145,0-2.345,0.017-3.493,0.02c-0.169,0.772-0.328,1.553-0.489,2.333c1.57-0.005,3.067-0.041,4.633-0.058c0.627-0.007,1.085,0.194,1.009,0.85c-0.031,0.262-0.098,0.497-0.211,0.725c-0.102,0.208-0.248,0.376-0.488,0.452c-0.237,0.075-0.541,0.064-0.862,0.078c-0.304,0.014-0.614,0.008-0.924,0.016c-0.309,0.009-0.619,0.022-0.919,0.022c-1.253,0-2.429,0.08-3.683,0.073c-0.603-0.004-1.014-0.249-1.124-0.757c-0.059-0.273-0.018-0.58,0.036-0.841c0.541-2.592,1.083-5.176,1.629-7.763c0.056-0.265,0.114-0.511,0.225-0.714C9.279,7.051,9.534,6.834,9.9,6.735c0.368-0.099,0.883-0.047,1.344-0.047c0.305,0,0.612,0.008,0.914,0.016c0.925,0.026,1.817,0.03,2.747,0.053c0.304,0.007,0.615,0.016,0.915,0.016c0.621,0,1.17,0.073,1.245,0.614C17.104,7.675,17.014,7.954,16.933,8.17z'/></svg>",
 	"supports": { "html": false, "align": true },
-	"editorScript": "file:../editor.js"
+	"attributes": {
+		"url": {
+			"type": "string"
+		},
+		"eventId": {
+			"type": "number"
+		},
+		"style": {
+			"type": "string",
+			"default": "inline"
+		}
+	},
+	"example": {
+		"attributes": {
+			"url": "https://www.eventbrite.com/e/test-event-tickets-123456789",
+			"eventId": 123456789,
+			"style": "modal"
+		},
+		"innerBlocks": [
+			{
+				"name": "jetpack/button",
+				"attributes": {
+					"element": "a",
+					"text": "Register",
+					"uniqueId": "eventbrite-widget-id"
+				}
+			}
+		]
+	}
 }