Subscriptions block: Layout inconsistent across themes

[scruffian]

As mentioned here, the Subscriptions block style is inconsistent across themes. The CSS for the block is inline, which makes it harder for themes to target the block. Ideally the block CSS would be strong enough to ensure the block looked good across all our themes without the theme needing to add any CSS.

Acceptance criteria:

• The default subscriptions block should look the same regardless of what theme the block is in
• When the user changes the block settings they should work regardless of what theme the block is in
• The theme should be able to determine default colors for the block

It might make sense to deal with these issues at the same time: https://github.com/Automattic/jetpack/issues/15227 https://github.com/Automattic/jetpack/issues/15474

[MaggieCabrera]

I want to add to this that a theme should be able to turn off the customizations or default the styles of the form if we want to give the user the ability to customize it fully. It would be a bad experience if for example a theme design relied on very rounded buttons and this block defaulted to border-radius: 0; leaving to the user to guess what the correct value works to keep the design consistent.

In the case of the block showing both the input and the button on the same line, it seems like the best way to approach this is to have align-items: stretch; do the heavy lifting for us so the height of the two elements is always the same.

[theck13]

Using the Jetpack subscriptions block that is automatically added to a newly created site, what is shown in the block editor is different than what is shown on the published site. See the screenshots below for illustration.

Editor
Site

The color and size of the input field is different in the editor and site. The default button color matches other buttons on the site, but there is no hover color or it matches the default color. Noice in the code for the block below, the "subscribePlaceholder":"Email Address" key/value pair should show "Email Address" as the placeholder text, which is shown in the editor, but the site shows "Enter your email address" instead.

<!-- wp:jetpack/subscriptions {"subscribePlaceholder":"Email Address","buttonOnNewLine":true,"submitButtonText":"Subscribe","buttonBackgroundColor":"primary","textColor":"background","borderRadius":5} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline">
    [jetpack_subscription_form subscribe_placeholder="Email Address" show_subscribers_total="false" button_on_newline="true" submit_button_text="Subscribe" custom_font_size="16" custom_border_radius="5" 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"]
</div>
<!-- /wp:jetpack/subscriptions -->

The differences in style is observed in Chrome, Firefox, and Safari browsers. See the table below for details about the environment.

Site	https://kingvetclinic.wordpress.com
Theme	Redhill (https://wordpress.com/theme/redhill)
Browsers	Chrome 86.0.4240.111, Firefox 82.0, Safari 14.0 (15610.1.28.1.9, 15610)