diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js
new file mode 100644
index 0000000000000..9e7f553127ac3
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js
@@ -0,0 +1,212 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+/**
+ * Internal dependencies
+ */
+import SubscriptionsInspectorControls from '../controls';
+import {
+ DEFAULT_FONTSIZE_VALUE,
+} from '../constants';
+
+// Temporarily mock out the ButtonWidthControl, which is causing errors due to missing
+// dependencies in the jest test runner.
+jest.mock( '../../button/button-width-panel', () => ( {
+ ...jest.requireActual( '../../button/button-width-panel' ),
+ ButtonWidthControl: () =>
Mocked Width Control
,
+} ) );
+
+const setButtonBackgroundColor = jest.fn();
+const setGradient = jest.fn();
+const setTextColor = jest.fn();
+const setAttributes = jest.fn();
+
+const defaultProps = {
+ buttonBackgroundColor: { color: '#000000' },
+ borderColor: { color: '#000000' },
+ buttonGradient: {
+ buttonGradient: 10,
+ setGradient,
+ },
+ borderRadius: 0,
+ borderWeight: 0,
+ buttonOnNewLine: false,
+ emailFieldBackgroundColor: { color: '#000000' },
+ fallbackButtonBackgroundColor: '#000000',
+ fallbackTextColor: '#000000',
+ fontSize: DEFAULT_FONTSIZE_VALUE,
+ isGradientAvailable: true,
+ padding: 0,
+ setAttributes,
+ setButtonBackgroundColor,
+ setTextColor,
+ showSubscribersTotal: true,
+ spacing: 0,
+ subscriberCount: 100,
+ textColor: '#000000',
+};
+
+beforeEach( () => {
+ setAttributes.mockClear();
+ setGradient.mockClear();
+ setTextColor.mockClear();
+ setButtonBackgroundColor.mockClear();
+} );
+
+describe( 'Inspector controls', () => {
+ describe( 'Gradient settings panel', () => {
+ test( 'displays gradient settings control panel', () => {
+ render(
);
+
+ expect( screen.getByText( 'Color Settings' ) ).toBeInTheDocument();
+ expect( screen.queryByText( 'Background Colors' ) ).not.toBeInTheDocument();
+ } );
+
+ test( 'sets solid background color', async () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Solid' ) );
+ userEvent.click( screen.queryAllByLabelText( /Color\:/i, { selector: 'button' } )[0] );
+
+ expect( setButtonBackgroundColor.mock.calls[0][0] ).toMatch(/#[a-z0-9]{6,6}/);
+ } );
+
+ test( 'sets a button background color', async () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Solid' ) );
+ userEvent.click( screen.queryAllByLabelText( /Color\:/i, { selector: 'button' } )[0] );
+
+ expect( setButtonBackgroundColor.mock.calls[0][0] ).toMatch(/#[a-z0-9]{6,6}/);
+ } );
+ } );
+
+ describe( 'Color settings panel', () => {
+ test( 'hides gradient settings control panel', () => {
+ render(
);
+
+ expect( screen.getByText( 'Background Colors' ) ).toBeInTheDocument();
+ expect( screen.queryByText( 'Color Settings' ) ).not.toBeInTheDocument();
+ } );
+
+ test( 'sets gradient background color', async () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Gradient' ) );
+ userEvent.click( screen.queryAllByLabelText( /Gradient\:/i, { selector: 'button' } )[0] );
+
+ expect( setGradient.mock.calls[0][0] ).toMatch(/linear\-gradient\((.+)\)/);
+ } );
+ } );
+
+ describe( 'Text settings panel', () => {
+ test( 'displays correctly', () => {
+ render(
);
+
+ expect( screen.getByText( 'Text Settings' ) ).toBeInTheDocument();
+ } );
+
+ test( 'set custom text ', () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Text Settings' ), { selector: 'button' } );
+ userEvent.type( screen.getAllByLabelText( 'Custom Size' )[1], '18' );
+
+ expect( setAttributes ).toHaveBeenLastCalledWith( {
+ fontSize: 18,
+ customFontSize: 18,
+ } );
+ } );
+ } );
+
+ describe( 'Border settings panel', () => {
+ test( 'displays correctly', () => {
+ render(
);
+
+ expect( screen.getByText( 'Border Settings' ) ).toBeInTheDocument();
+ } );
+
+ test( 'set border radius', () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Border Settings' ), { selector: 'button' } );
+ const rangeControlElement = screen.getAllByLabelText( 'Border Radius' )[1];
+ userEvent.clear( rangeControlElement );
+ userEvent.type( rangeControlElement, '5' );
+
+ expect( setAttributes ).toHaveBeenLastCalledWith( {
+ borderRadius: 5,
+ } );
+ } );
+
+ test( 'set border weight', () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Border Settings' ), { selector: 'button' } );
+ const rangeControlElement = screen.getAllByLabelText( 'Border Weight' )[1];
+ userEvent.clear( rangeControlElement );
+ userEvent.type( rangeControlElement, '5' );
+
+ expect( setAttributes ).toHaveBeenLastCalledWith( {
+ borderWeight: 5,
+ } );
+ } );
+ } );
+
+ describe( 'Spacing settings panel', () => {
+ test( 'displays correctly', () => {
+ render(
);
+
+ expect( screen.getByText( 'Spacing Settings' ) ).toBeInTheDocument();
+ } );
+
+ test( 'set space inside', () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Spacing Settings' ), { selector: 'button' } );
+ const rangeControlElement = screen.getAllByLabelText( 'Space Inside' )[1];
+ userEvent.clear( rangeControlElement );
+ userEvent.type( rangeControlElement, '5' );
+
+ expect( setAttributes ).toHaveBeenLastCalledWith( {
+ padding: 5,
+ } );
+ } );
+
+ test( 'set space between', () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Spacing Settings' ), { selector: 'button' } );
+ const rangeControlElement = screen.getAllByLabelText( 'Space Between' )[1];
+ userEvent.clear( rangeControlElement );
+ userEvent.type( rangeControlElement, '5' );
+
+ expect( setAttributes ).toHaveBeenLastCalledWith( {
+ spacing: 5,
+ } );
+ } );
+ } );
+
+ describe( 'Display settings panel', () => {
+ test( 'displays correctly', () => {
+ render(
);
+ expect( screen.getByText( 'Display Settings' ) ).toBeInTheDocument();
+ } );
+
+ test( 'toggles subscriber count', () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Display Settings' ), { selector: 'button' } );
+ userEvent.click( screen.getByLabelText( 'Show subscriber count' ) );
+
+ expect( setAttributes ).toHaveBeenCalledWith( {
+ showSubscribersTotal: false,
+ } );
+ } );
+
+ test( 'toggles place button on new line', () => {
+ render(
);
+ userEvent.click( screen.getByText( 'Display Settings' ), { selector: 'button' } );
+ userEvent.click( screen.getByLabelText( 'Place button on new line' ) );
+
+ expect( setAttributes ).toHaveBeenCalledWith( {
+ buttonOnNewLine: true,
+ } );
+ } );
+ } );
+} );
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
new file mode 100644
index 0000000000000..8c15ed9da0869
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+/**
+ * Internal dependencies
+ */
+import { SubscriptionEdit } from '../edit';
+
+const setAttributes = jest.fn();
+
+const defaultAttributes = {
+ borderRadius: 0,
+ borderWeight: 0,
+ padding: 0,
+ spacing: 0,
+ submitButtonText: 'Submit',
+ subscribePlaceholder: 'Do it',
+ showSubscribersTotal: false,
+ buttonOnNewLine: false,
+};
+
+const defaultProps = {
+ attributes: defaultAttributes,
+ className: 'noodles',
+ setAttributes,
+ emailFieldBackgroundColor: '',
+ buttonBackgroundColor: '',
+ setButtonBackgroundColor: '',
+ fallbackButtonBackgroundColo: '',
+ textColor: '',
+ fallbackTextColor: '',
+ setTextColor: '',
+ borderColor: '',
+ fontSize: 12,
+};
+
+const originalFetch = window.fetch;
+
+/**
+ * Mock return value for a successful fetch JSON return value.
+ *
+ * @return {Promise} Mock return value.
+ */
+const RESOLVED_FETCH_PROMISE = Promise.resolve( { count: 100 } );
+const DEFAULT_FETCH_MOCK_RETURN = Promise.resolve( {
+ status: 200,
+ json: () => RESOLVED_FETCH_PROMISE,
+} );
+
+jest.mock( '../constants', () => ( {
+ IS_GRADIENT_AVAILABLE: true
+} ) );
+
+jest.mock( '@wordpress/block-editor', () => ( {
+ ...jest.requireActual( '@wordpress/block-editor' ),
+ __experimentalUseGradient: jest.fn().mockReturnValue( {
+ gradientClass: undefined,
+ gradientValue: undefined,
+ setGradient: jest.fn()
+ } ),
+} ) );
+
+describe( 'SubscriptionEdit', () => {
+ beforeEach( () => {
+ window.fetch = jest.fn();
+ window.fetch.mockReturnValue( DEFAULT_FETCH_MOCK_RETURN );
+ } );
+
+ afterEach( async () => {
+ await act( () => RESOLVED_FETCH_PROMISE );
+ } );
+
+ afterAll( () => {
+ window.fetch = originalFetch;
+ } );
+
+ test( 'adds correct classes to container', () => {
+ const { container, rerender } = render(
);
+
+ expect( container.querySelector( `.${ defaultProps.className }` ) ).toBeInTheDocument();
+ } );
+
+ test( 'adds correct classes when button on new line', () => {
+ const { container, rerender } = render(
);
+
+ expect( container.querySelector( '.wp-block-jetpack-subscriptions__use-newline' ) ).not.toBeInTheDocument();
+
+ const updatedProps = {
+ ...defaultProps,
+ attributes: {
+ ...defaultAttributes,
+ buttonOnNewLine: true,
+ },
+ };
+ rerender(
);
+
+ expect( container.querySelector( '.wp-block-jetpack-subscriptions__use-newline' ) ).toBeInTheDocument();
+ } );
+
+ test( 'renders text field with placeholder text', () => {
+ render(
);
+
+ expect( screen.getByPlaceholderText( defaultAttributes.subscribePlaceholder ) ).toBeInTheDocument();
+ } );
+
+ test( 'renders button with default text', () => {
+ render(
);
+
+ expect( screen.getByText( defaultAttributes.submitButtonText ) ).toBeInTheDocument();
+ } );
+
+ test( 'calls setAttributes handler on button when value changes', () => {
+ render(
);
+
+ expect( screen.getByText( defaultAttributes.submitButtonText ) ).toBeInTheDocument();
+ } );
+
+ test( 'displays subscriber total', () => {
+ render(
);
+ userEvent.type( screen.getByText( defaultAttributes.submitButtonText ), ' right now!' );
+
+ expect( setAttributes ).toHaveBeenCalledWith( {
+ submitButtonText: `${ defaultAttributes.submitButtonText} right now!`,
+ } );
+ } );
+
+ test( 'displays subscriber total', () => {
+ const { container, rerender } = render(
);
+ expect( container.querySelector( 'p' ) ).not.toBeInTheDocument();
+ expect( container.querySelector( '.wp-block-jetpack-subscriptions__show-subs' ) ).not.toBeInTheDocument();
+
+ const updatedProps = {
+ ...defaultProps,
+ attributes: {
+ ...defaultAttributes,
+ showSubscribersTotal: true,
+ },
+ };
+ rerender(
);
+
+ expect( container.querySelector( '.wp-block-jetpack-subscriptions__show-subs' ) ).toBeInTheDocument();
+ expect( container.querySelector( 'p' ) ).toBeInTheDocument();
+ } );
+} );
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.html
new file mode 100644
index 0000000000000..8335599e45d60
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form show_subscribers_total="true" button_on_newline="true" custom_font_size="33" custom_border_radius="8" custom_border_weight="3" custom_padding="18" custom_spacing="10" submit_button_classes="has-33-font-size" email_field_classes="has-33-font-size" show_only_email_and_button="true"]
+
\ No newline at end of file
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.json
new file mode 100644
index 0000000000000..d3b6afe8c2c41
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.json
@@ -0,0 +1,20 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "jetpack/subscriptions",
+ "isValid": true,
+ "attributes": {
+ "subscribePlaceholder": "Enter your email address",
+ "showSubscribersTotal": true,
+ "buttonOnNewLine": true,
+ "submitButtonText": "Sign Up",
+ "fontSize": "33px",
+ "customFontSize": "33px",
+ "borderRadius": 8,
+ "borderWeight": 3,
+ "padding": 18
+ },
+ "innerBlocks": [],
+ "originalContent": "
[jetpack_subscription_form show_subscribers_total=\"true\" button_on_newline=\"true\" custom_font_size=\"33\" custom_border_radius=\"8\" custom_border_weight=\"3\" custom_padding=\"18\" custom_spacing=\"10\" submit_button_classes=\"has-33-font-size\" email_field_classes=\"has-33-font-size\" show_only_email_and_button=\"true\"]
"
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.parsed.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.parsed.json
new file mode 100644
index 0000000000000..218aef8bb1110
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.parsed.json
@@ -0,0 +1,19 @@
+[
+ {
+ "blockName": "jetpack/subscriptions",
+ "attrs": {
+ "showSubscribersTotal": true,
+ "buttonOnNewLine": true,
+ "fontSize": 33,
+ "customFontSize": 33,
+ "borderRadius": 8,
+ "borderWeight": 3,
+ "padding": 18
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n
[jetpack_subscription_form show_subscribers_total=\"true\" button_on_newline=\"true\" custom_font_size=\"33\" custom_border_radius=\"8\" custom_border_weight=\"3\" custom_padding=\"18\" custom_spacing=\"10\" submit_button_classes=\"has-33-font-size\" email_field_classes=\"has-33-font-size\" show_only_email_and_button=\"true\"]
\n",
+ "innerContent": [
+ "\n
[jetpack_subscription_form show_subscribers_total=\"true\" button_on_newline=\"true\" custom_font_size=\"33\" custom_border_radius=\"8\" custom_border_weight=\"3\" custom_padding=\"18\" custom_spacing=\"10\" submit_button_classes=\"has-33-font-size\" email_field_classes=\"has-33-font-size\" show_only_email_and_button=\"true\"]
\n"
+ ]
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.serialized.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.serialized.html
new file mode 100644
index 0000000000000..2e2cad855fea5
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions.serialized.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form subscribe_placeholder="Enter your email address" show_subscribers_total="true" button_on_newline="true" submit_button_text="Sign Up" custom_font_size="33px" custom_border_radius="8" custom_border_weight="3" custom_padding="18" custom_spacing="10" submit_button_classes="has-33-px-font-size" email_field_classes="has-33-px-font-size" show_only_email_and_button="true"]
+
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.html
new file mode 100644
index 0000000000000..b1ebcf71bdbd6
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form show_subscribers_total="false" show_only_email_and_button="true"]
+
\ No newline at end of file
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.json
new file mode 100644
index 0000000000000..f9ffe04412c28
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.json
@@ -0,0 +1,13 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "jetpack/subscriptions",
+ "isValid": true,
+ "attributes": {
+ "submitButtonText": "Subscribe",
+ "showSubscribersTotal": false
+ },
+ "innerBlocks": [],
+ "originalContent": "
[jetpack_subscription_form show_subscribers_total=\"false\" show_only_email_and_button=\"true\"]
"
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.parsed.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.parsed.json
new file mode 100644
index 0000000000000..1ef86d3687a13
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.parsed.json
@@ -0,0 +1,11 @@
+[
+ {
+ "blockName": "jetpack/subscriptions",
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n
[jetpack_subscription_form show_subscribers_total=\"false\" show_only_email_and_button=\"true\"]
\n",
+ "innerContent": [
+ "\n
[jetpack_subscription_form show_subscribers_total=\"false\" show_only_email_and_button=\"true\"]
\n"
+ ]
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.serialized.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.serialized.html
new file mode 100644
index 0000000000000..1a13ffe599d5a
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-1.serialized.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form show_subscribers_total="false" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]
+
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.html
new file mode 100644
index 0000000000000..8907d28971da4
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form show_only_email_and_button="true" custom_background_button_color="#ffffff" custom_text_button_color="#000000" submit_button_text="Subscribe" submit_button_classes="" show_subscribers_total="false" ]
+
\ No newline at end of file
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.json
new file mode 100644
index 0000000000000..4b4bfa88f3818
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.json
@@ -0,0 +1,19 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "jetpack/subscriptions",
+ "isValid": true,
+ "attributes": {
+ "subscribePlaceholder": "Email Address",
+ "showSubscribersTotal": false,
+ "buttonOnNewLine": true,
+ "submitButtonText": "Subscribe",
+ "buttonBackgroundColor": "primary",
+ "customButtonBackgroundColor": "#ffffff",
+ "textColor": "background",
+ "customTextColor": "#000000"
+ },
+ "innerBlocks": [],
+ "originalContent": "
[jetpack_subscription_form show_only_email_and_button=\"true\" custom_background_button_color=\"#ffffff\" custom_text_button_color=\"#000000\" submit_button_text=\"Subscribe\" submit_button_classes=\"\" show_subscribers_total=\"false\" ]
"
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.parsed.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.parsed.json
new file mode 100644
index 0000000000000..c0e3b2e358387
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.parsed.json
@@ -0,0 +1,16 @@
+[
+ {
+ "blockName": "jetpack/subscriptions",
+ "attrs": {
+ "customBackgroundButtonColor": "#ffffff",
+ "customTextButtonColor": "#000000",
+ "submitButtonText": "Subscribe",
+ "submitButtonClasses": ""
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n
[jetpack_subscription_form show_only_email_and_button=\"true\" custom_background_button_color=\"#ffffff\" custom_text_button_color=\"#000000\" submit_button_text=\"Subscribe\" submit_button_classes=\"\" show_subscribers_total=\"false\" ]
\n",
+ "innerContent": [
+ "\n
[jetpack_subscription_form show_only_email_and_button=\"true\" custom_background_button_color=\"#ffffff\" custom_text_button_color=\"#000000\" submit_button_text=\"Subscribe\" submit_button_classes=\"\" show_subscribers_total=\"false\" ]
\n"
+ ]
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.serialized.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.serialized.html
new file mode 100644
index 0000000000000..01f8f98b9e452
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-2.serialized.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form show_subscribers_total="false" button_on_newline="true" custom_background_button_color="#ffffff" custom_text_button_color="#000000" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="has-text-color has-background-color has-background has-primary-background-color" email_field_classes="" show_only_email_and_button="true"]
+
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.html
new file mode 100644
index 0000000000000..b781e1f246716
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.html
@@ -0,0 +1,22 @@
+
+
+ [jetpack_subscription_form
+ subscribe_placeholder="Email Address"
+ show_subscribers_total="false"
+ button_on_newline="false"
+ submit_button_text="Subscribe"
+ custom_background_emailfield_color="undefined"
+ custom_background_button_color="undefined"
+ custom_text_button_color="undefined"
+ custom_font_size="16"
+ custom_border_radius="0"
+ custom_border_weight="1"
+ custom_border_color="undefined"
+ custom_padding="15"
+ custom_spacing="10"
+ submit_button_classes=""
+ email_field_classes=""
+ show_only_email_and_button="true"
+ ]
+
+
\ No newline at end of file
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.json
new file mode 100644
index 0000000000000..cd8d0d9f6bfe3
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.json
@@ -0,0 +1,15 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "jetpack/subscriptions",
+ "isValid": true,
+ "attributes": {
+ "subscribePlaceholder": "Email Address",
+ "showSubscribersTotal": false,
+ "buttonOnNewLine": false,
+ "submitButtonText": "Subscribe"
+ },
+ "innerBlocks": [],
+ "originalContent": "
\n\t[jetpack_subscription_form\n\t\tsubscribe_placeholder=\"Email Address\"\n\t\tshow_subscribers_total=\"false\"\n\t\tbutton_on_newline=\"false\"\n\t\tsubmit_button_text=\"Subscribe\"\n\t\tcustom_background_emailfield_color=\"undefined\"\n\t\tcustom_background_button_color=\"undefined\"\n\t\tcustom_text_button_color=\"undefined\"\n\t\tcustom_font_size=\"16\"\n\t\tcustom_border_radius=\"0\"\n\t\tcustom_border_weight=\"1\"\n\t\tcustom_border_color=\"undefined\"\n\t\tcustom_padding=\"15\"\n\t\tcustom_spacing=\"10\"\n\t\tsubmit_button_classes=\"\"\n\t\temail_field_classes=\"\"\n\t\tshow_only_email_and_button=\"true\"\n\t]\n
"
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.parsed.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.parsed.json
new file mode 100644
index 0000000000000..582a9fcd1a608
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.parsed.json
@@ -0,0 +1,14 @@
+[
+ {
+ "blockName": "jetpack/subscriptions",
+ "attrs": {
+ "subscribePlaceholder": "Email Address",
+ "submitButtonText": "Subscribe"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n
\n\t[jetpack_subscription_form\n\t\tsubscribe_placeholder=\"Email Address\"\n\t\tshow_subscribers_total=\"false\"\n\t\tbutton_on_newline=\"false\"\n\t\tsubmit_button_text=\"Subscribe\"\n\t\tcustom_background_emailfield_color=\"undefined\"\n\t\tcustom_background_button_color=\"undefined\"\n\t\tcustom_text_button_color=\"undefined\"\n\t\tcustom_font_size=\"16\"\n\t\tcustom_border_radius=\"0\"\n\t\tcustom_border_weight=\"1\"\n\t\tcustom_border_color=\"undefined\"\n\t\tcustom_padding=\"15\"\n\t\tcustom_spacing=\"10\"\n\t\tsubmit_button_classes=\"\"\n\t\temail_field_classes=\"\"\n\t\tshow_only_email_and_button=\"true\"\n\t]\n
\n",
+ "innerContent": [
+ "\n
\n\t[jetpack_subscription_form\n\t\tsubscribe_placeholder=\"Email Address\"\n\t\tshow_subscribers_total=\"false\"\n\t\tbutton_on_newline=\"false\"\n\t\tsubmit_button_text=\"Subscribe\"\n\t\tcustom_background_emailfield_color=\"undefined\"\n\t\tcustom_background_button_color=\"undefined\"\n\t\tcustom_text_button_color=\"undefined\"\n\t\tcustom_font_size=\"16\"\n\t\tcustom_border_radius=\"0\"\n\t\tcustom_border_weight=\"1\"\n\t\tcustom_border_color=\"undefined\"\n\t\tcustom_padding=\"15\"\n\t\tcustom_spacing=\"10\"\n\t\tsubmit_button_classes=\"\"\n\t\temail_field_classes=\"\"\n\t\tshow_only_email_and_button=\"true\"\n\t]\n
\n"
+ ]
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.serialized.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.serialized.html
new file mode 100644
index 0000000000000..8c87616d00ba2
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-3.serialized.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]
+
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.html
new file mode 100644
index 0000000000000..11b7e7046adad
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.html
@@ -0,0 +1,22 @@
+
+
+ [jetpack_subscription_form
+ subscribe_placeholder="Enter your email address"
+ show_subscribers_total="false"
+ button_on_newline="false"
+ submit_button_text="Sign Up"
+ custom_background_emailfield_color="undefined"
+ custom_background_button_color="undefined"
+ custom_text_button_color="undefined"
+ custom_font_size="16"
+ custom_border_radius="0"
+ custom_border_weight="1"
+ custom_border_color="undefined"
+ custom_padding="15"
+ custom_spacing="10"
+ submit_button_classes=""
+ email_field_classes=""
+ show_only_email_and_button="true"
+ ]
+
+
\ No newline at end of file
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.json
new file mode 100644
index 0000000000000..5b2923a3ffc2a
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.json
@@ -0,0 +1,15 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "jetpack/subscriptions",
+ "isValid": true,
+ "attributes": {
+ "subscribePlaceholder": "Enter your email address",
+ "showSubscribersTotal": false,
+ "buttonOnNewLine": false,
+ "submitButtonText": "Sign Up"
+ },
+ "innerBlocks": [],
+ "originalContent": "
\n\t[jetpack_subscription_form\n\t\tsubscribe_placeholder=\"Enter your email address\"\n\t\tshow_subscribers_total=\"false\"\n\t\tbutton_on_newline=\"false\"\n\t\tsubmit_button_text=\"Sign Up\"\n\t\tcustom_background_emailfield_color=\"undefined\"\n\t\tcustom_background_button_color=\"undefined\"\n\t\tcustom_text_button_color=\"undefined\"\n\t\tcustom_font_size=\"16\"\n\t\tcustom_border_radius=\"0\"\n\t\tcustom_border_weight=\"1\"\n\t\tcustom_border_color=\"undefined\"\n\t\tcustom_padding=\"15\"\n\t\tcustom_spacing=\"10\"\n\t\tsubmit_button_classes=\"\"\n\t\temail_field_classes=\"\"\n\t\tshow_only_email_and_button=\"true\"\n\t]\n
"
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.parsed.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.parsed.json
new file mode 100644
index 0000000000000..6a04678da91a8
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.parsed.json
@@ -0,0 +1,14 @@
+[
+ {
+ "blockName": "jetpack/subscriptions",
+ "attrs": {
+ "subscribePlaceholder": "Enter your email address",
+ "submitButtonText": "Sign Up"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n
\n\t[jetpack_subscription_form\n\t\tsubscribe_placeholder=\"Enter your email address\"\n\t\tshow_subscribers_total=\"false\"\n\t\tbutton_on_newline=\"false\"\n\t\tsubmit_button_text=\"Sign Up\"\n\t\tcustom_background_emailfield_color=\"undefined\"\n\t\tcustom_background_button_color=\"undefined\"\n\t\tcustom_text_button_color=\"undefined\"\n\t\tcustom_font_size=\"16\"\n\t\tcustom_border_radius=\"0\"\n\t\tcustom_border_weight=\"1\"\n\t\tcustom_border_color=\"undefined\"\n\t\tcustom_padding=\"15\"\n\t\tcustom_spacing=\"10\"\n\t\tsubmit_button_classes=\"\"\n\t\temail_field_classes=\"\"\n\t\tshow_only_email_and_button=\"true\"\n\t]\n
\n",
+ "innerContent": [
+ "\n
\n\t[jetpack_subscription_form\n\t\tsubscribe_placeholder=\"Enter your email address\"\n\t\tshow_subscribers_total=\"false\"\n\t\tbutton_on_newline=\"false\"\n\t\tsubmit_button_text=\"Sign Up\"\n\t\tcustom_background_emailfield_color=\"undefined\"\n\t\tcustom_background_button_color=\"undefined\"\n\t\tcustom_text_button_color=\"undefined\"\n\t\tcustom_font_size=\"16\"\n\t\tcustom_border_radius=\"0\"\n\t\tcustom_border_weight=\"1\"\n\t\tcustom_border_color=\"undefined\"\n\t\tcustom_padding=\"15\"\n\t\tcustom_spacing=\"10\"\n\t\tsubmit_button_classes=\"\"\n\t\temail_field_classes=\"\"\n\t\tshow_only_email_and_button=\"true\"\n\t]\n
\n"
+ ]
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.serialized.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.serialized.html
new file mode 100644
index 0000000000000..9e2f8e2c1d337
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-4.serialized.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form subscribe_placeholder="Enter your email address" show_subscribers_total="false" button_on_newline="false" submit_button_text="Sign Up" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]
+
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.html
new file mode 100644
index 0000000000000..7530b79d54d5f
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form subscribe_placeholder="Email Address" show_subscribers_total="false" button_on_newline="false" submit_button_text="Subscribe" custom_font_size="33" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]
+
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.json
new file mode 100644
index 0000000000000..be701e137dbec
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.json
@@ -0,0 +1,16 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "jetpack/subscriptions",
+ "isValid": true,
+ "attributes": {
+ "subscribePlaceholder": "Email Address",
+ "showSubscribersTotal": false,
+ "buttonOnNewLine": false,
+ "submitButtonText": "Subscribe",
+ "customFontSize": "33px"
+ },
+ "innerBlocks": [],
+ "originalContent": "
[jetpack_subscription_form subscribe_placeholder=\"Email Address\" show_subscribers_total=\"false\" button_on_newline=\"false\" submit_button_text=\"Subscribe\" custom_font_size=\"33\" custom_border_radius=\"0\" custom_border_weight=\"1\" custom_padding=\"15\" custom_spacing=\"10\" submit_button_classes=\"\" email_field_classes=\"\" show_only_email_and_button=\"true\"]
"
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.parsed.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.parsed.json
new file mode 100644
index 0000000000000..079e4197d2a5f
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.parsed.json
@@ -0,0 +1,24 @@
+[
+ {
+ "blockName": "jetpack/subscriptions",
+ "attrs": {
+ "subscribePlaceholder": "Email Address",
+ "submitButtonText": "Subscribe",
+ "customFontSize": 33
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n
[jetpack_subscription_form subscribe_placeholder=\"Email Address\" show_subscribers_total=\"false\" button_on_newline=\"false\" submit_button_text=\"Subscribe\" custom_font_size=\"33\" custom_border_radius=\"0\" custom_border_weight=\"1\" custom_padding=\"15\" custom_spacing=\"10\" submit_button_classes=\"\" email_field_classes=\"\" show_only_email_and_button=\"true\"]
\n",
+ "innerContent": [
+ "\n
[jetpack_subscription_form subscribe_placeholder=\"Email Address\" show_subscribers_total=\"false\" button_on_newline=\"false\" submit_button_text=\"Subscribe\" custom_font_size=\"33\" custom_border_radius=\"0\" custom_border_weight=\"1\" custom_padding=\"15\" custom_spacing=\"10\" submit_button_classes=\"\" email_field_classes=\"\" show_only_email_and_button=\"true\"]
\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n",
+ "innerContent": [
+ "\n"
+ ]
+ }
+]
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.serialized.html b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.serialized.html
new file mode 100644
index 0000000000000..bab16107e1ae7
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/fixtures/jetpack__subscriptions__deprecated-5.serialized.html
@@ -0,0 +1,3 @@
+
+
[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_font_size="33px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]
+
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/validate.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/validate.js
new file mode 100644
index 0000000000000..0eee11719eeab
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/validate.js
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import { name, settings } from '../';
+import runBlockFixtureTests from '../../../shared/test/block-fixtures';
+
+// Need to include all the blocks involved in rendering this block.
+// The main block should be the first in the array.
+const blocks = [ { name: `jetpack/${ name }`, settings } ];
+
+runBlockFixtureTests( `jetpack/${ name }`, blocks, __dirname );