';
$script_url = build_embed_url( $attributes );
diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/styles.js b/projects/plugins/jetpack/extensions/blocks/opentable/styles.js
new file mode 100644
index 0000000000000..af6b0ec1cd5e8
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/opentable/styles.js
@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+import { compact } from 'lodash';
+
+export const buttonStyle = {
+ name: 'button',
+ label: __( 'Button (210 x 113 pixels)', 'jetpack' ),
+};
+
+export const getStyleOptions = rid =>
+ compact( [
+ { name: 'standard', label: __( 'Standard (224 x 301 pixels)', 'jetpack' ), isDefault: true },
+ { name: 'tall', label: __( 'Tall (288 x 490 pixels)', 'jetpack' ) },
+ { name: 'wide', label: __( 'Wide (840 x 150 pixels)', 'jetpack' ) },
+ ( ! rid || rid.length === 1 ) && buttonStyle,
+ ] );
+
+export const getStyleValues = rid => getStyleOptions( rid ).map( option => option.name );
diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/block.json b/projects/plugins/jetpack/extensions/blocks/payment-buttons/block.json
index 91c08b5f2ad86..4d2e47947fbc2 100644
--- a/projects/plugins/jetpack/extensions/blocks/payment-buttons/block.json
+++ b/projects/plugins/jetpack/extensions/blocks/payment-buttons/block.json
@@ -64,6 +64,5 @@
}
}
},
- "attributes": {},
- "editorScript": "file:../editor.js"
+ "attributes": {}
}
diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/editor.js b/projects/plugins/jetpack/extensions/blocks/payment-buttons/editor.js
index d7ec194d817a1..b952d5df5a0eb 100644
--- a/projects/plugins/jetpack/extensions/blocks/payment-buttons/editor.js
+++ b/projects/plugins/jetpack/extensions/blocks/payment-buttons/editor.js
@@ -1,4 +1,11 @@
-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';
+
+registerJetpackBlockFromMetadata( metadata, {
+ edit,
+ save,
+} );
diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/index.js b/projects/plugins/jetpack/extensions/blocks/payment-buttons/index.js
deleted file mode 100644
index 106745b4142e7..0000000000000
--- a/projects/plugins/jetpack/extensions/blocks/payment-buttons/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { isAtomicSite, isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
-import { Path, Rect, SVG, G, ExternalLink } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { getIconColor } from '../../shared/block-icons';
-import { settings as paymentButtonSettings } from '../recurring-payments';
-import edit from './edit';
-import save from './save';
-import './editor.scss';
-
-export const name = 'payment-buttons';
-export const title = __( 'Payment Buttons', 'jetpack' );
-export const icon = (
-
-);
-
-const supportLink =
- isSimpleSite() || isAtomicSite()
- ? 'https://wordpress.com/support/video-tutorials-add-payments-features-to-your-site-with-our-guides/#how-to-use-the-payments-block-video'
- : 'https://jetpack.com/support/jetpack-blocks/payments-block/';
-
-export const settings = {
- apiVersion: 2,
- title,
- icon: {
- src: icon,
- foreground: getIconColor(),
- },
- description: (
-
- { __( 'Sell products and subscriptions.', 'jetpack' ) }
- { __( 'Support reference', 'jetpack' ) }
-
- ),
- category: 'earn',
- keywords: [ ...new Set( [ paymentButtonSettings.title, ...paymentButtonSettings.keywords ] ) ],
- edit,
- save,
- supports: {
- __experimentalExposeControlsToChildren: true,
- align: [ 'wide', 'full' ],
- spacing: {
- blockGap: true,
- margin: [ 'vertical' ],
- __experimentalDefaultControls: {
- blockGap: true,
- },
- },
- __experimentalLayout: {
- allowSwitching: false,
- allowInheriting: false,
- default: {
- type: 'flex',
- },
- },
- typography: {
- fontSize: true,
- __experimentalFontFamily: true,
- __experimentalTextTransform: true,
- __experimentalDefaultControls: {
- fontSize: true,
- },
- },
- },
-};
diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/payment-buttons.php b/projects/plugins/jetpack/extensions/blocks/payment-buttons/payment-buttons.php
index 892e2a19211dd..f75443f2d74d1 100644
--- a/projects/plugins/jetpack/extensions/blocks/payment-buttons/payment-buttons.php
+++ b/projects/plugins/jetpack/extensions/blocks/payment-buttons/payment-buttons.php
@@ -11,9 +11,6 @@
use Automattic\Jetpack\Blocks;
-const FEATURE_NAME = 'payment-buttons';
-const BLOCK_NAME = 'jetpack/' . FEATURE_NAME;
-
/**
* Registers the block for use in Gutenberg
* This is done via an action so that we can disable
@@ -27,7 +24,7 @@ function register_block() {
require_once JETPACK__PLUGIN_DIR . '/modules/memberships/class-jetpack-memberships.php';
if ( \Jetpack_Memberships::is_enabled_jetpack_recurring_payments() ) {
Blocks::jetpack_register_block(
- BLOCK_NAME,
+ __DIR__,
array(
'render_callback' => __NAMESPACE__ . '\render_block',
'supports' => array(
@@ -44,7 +41,7 @@ function register_block() {
} else {
$required_plan = ( defined( 'IS_WPCOM' ) && IS_WPCOM ) ? 'personal-bundle' : 'jetpack_personal';
\Jetpack_Gutenberg::set_extension_unavailable(
- BLOCK_NAME,
+ Blocks::get_block_name( __DIR__ ),
'missing_plan',
array(
'required_feature' => 'memberships',
@@ -64,7 +61,7 @@ function register_block() {
* @return string
*/
function render_block( $attributes, $content ) {
- \Jetpack_Gutenberg::load_styles_as_required( FEATURE_NAME );
+ \Jetpack_Gutenberg::load_styles_as_required( __DIR__ );
return $content;
}
diff --git a/projects/plugins/jetpack/extensions/blocks/payments-intro/variations.js b/projects/plugins/jetpack/extensions/blocks/payments-intro/variations.js
index e757275fc53f6..95ad41bd99259 100644
--- a/projects/plugins/jetpack/extensions/blocks/payments-intro/variations.js
+++ b/projects/plugins/jetpack/extensions/blocks/payments-intro/variations.js
@@ -4,12 +4,12 @@
import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
import donationMetadata from '../donations/block.json';
-import { name as paymentButtonsName, settings as paymentButtonsSettings } from '../payment-buttons';
+import paymentButtonsMetadata from '../payment-buttons/block.json';
import { name as premiumContentName, settings as premiumContentSettings } from '../premium-content';
const variations = [
[ donationMetadata.name, donationMetadata ],
- [ paymentButtonsName, paymentButtonsSettings ],
+ [ paymentButtonsMetadata.name, paymentButtonsMetadata ],
[ premiumContentName, premiumContentSettings ],
];