Recurring Payments: change alignment (#13310)

Introduce the align menu to choose left/right/center alignment for the Recurring Payments block.
Automattic · Sep 4, 2019 · b239943 · b239943
1 parent 472380b
commit b239943
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/extensions/blocks/recurring-payments/edit.jsx b/extensions/blocks/recurring-payments/edit.jsx
@@ -314,9 +314,9 @@ class MembershipsButtonEdit extends Component {
 	};
 
 	render = () => {
-		const { className, notices } = this.props;
+		const { className, notices, attributes } = this.props;
 		const { connected, connectURL, products } = this.state;
-
+		const { align } = attributes;
 		const inspectorControls = (
 			<InspectorControls>
 				<PanelBody title={ __( 'Product', 'jetpack' ) }>
@@ -343,6 +343,7 @@ class MembershipsButtonEdit extends Component {
 			'components-button',
 			'is-primary',
 			'is-button',
+			`align${ align }`,
 		] );
 		const blockContent = (
 			<SubmitButton

diff --git a/extensions/blocks/recurring-payments/editor.scss b/extensions/blocks/recurring-payments/editor.scss
@@ -3,6 +3,7 @@
 
 .wp-block-jetpack-recurring-payments {
 	font-family: $default-font;
+	width: 100%;
 
 	.components-base-control__label {
 		text-align: left;

diff --git a/extensions/blocks/recurring-payments/index.js b/extensions/blocks/recurring-payments/index.js
@@ -44,9 +44,16 @@ export const settings = {
 		customTextButtonColor: {
 			type: 'string',
 		},
+		align: {
+			type: 'string',
+		},
 	},
 	edit,
 	save: () => null,
+	supports: {
+		html: false,
+		align: true,
+	},
 };
 
 // These are Stripe Settlement currencies https://stripe.com/docs/currencies since memberships supports only Stripe ATM.