Subscription

[alaczek]

<!-- wp:cover {"customOverlayColor":"#fdf1cd","align":"full","className":"is-style-top-wave"} -->
<div class="wp-block-cover alignfull has-background-dim is-style-top-wave" style="background-color:#fdf1cd"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":93} -->
<div style="height:93px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"align":"center","style":{"color":{"text":"#202020"}}} -->
<h2 class="has-text-align-center has-text-color" style="color:#202020">Stay in the loop</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#202020"}}} -->
<p class="has-text-align-center has-text-color" style="color:#202020">Encouragement, practical tips, and useful resources delivered straight to your inbox!</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"customButtonBackgroundColor":"#cee3e2","customTextColor":"#202020","borderRadius":50,"spacing":0} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_background_button_color="#cee3e2" custom_text_button_color="#202020" custom_font_size="16" custom_border_radius="50" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]</div>
<!-- /wp:jetpack/subscriptions --></div></div>
<!-- /wp:cover -->

[ianstewart]

I think as a pattern this one could use more space above and below the content. More "breathing room". And, if possible, I think the paragraph could be a bit less wide?

[alaczek]

Agreed on the breathing space.

I think the paragraph could be a bit less wide?

The only way I can think of is using columns/layout grid, and not sure this is an acceptable tradeoff in this case.

<!-- wp:cover {"customOverlayColor":"#fdf1cd","align":"full","className":"is-style-top-wave"} -->
<div class="wp-block-cover alignfull has-background-dim is-style-top-wave" style="background-color:#fdf1cd"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":93} -->
<div style="height:93px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:spacer {"height":80} -->
<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"align":"center","style":{"color":{"text":"#202020"}}} -->
<h2 class="has-text-align-center has-text-color" style="color:#202020">Stay in the loop</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#202020"}}} -->
<p class="has-text-align-center has-text-color" style="color:#202020">Encouragement, practical tips, and useful resources delivered straight to your inbox!</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"customButtonBackgroundColor":"#cee3e2","customTextColor":"#202020","borderRadius":50,"padding":15,"spacing":0} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_background_button_color="#cee3e2" custom_text_button_color="#202020" custom_font_size="16" custom_border_radius="50" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]</div>
<!-- /wp:jetpack/subscriptions -->

<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover -->

[pablohoneyhoney]

• Perhaps the wavy lines can be gentler.
• The yellow and the light blue don't work well here. Perhaps the CTA is dark.
• I'd advise aligning left text and heading.
• The body text is fairly big.
• Add more padding on the left of the "Enter your..."
• The input field is quite large. The height of the field is higher than the button.

[alaczek]

Hi Pablo, thanks for dropping in with your feedback! Some of them are bugs/limitations of the editor, but I'll try to address them as best as I can.

Perhaps the wavy lines can be gentler. I'd advise aligning left text and heading.

These two are somewhat related - with the wavy line so dynamic the text would be sitting too close to a dip, and it didn't feel right to me. As for the wavy line style, I totally agree gentler curves would work much better here, and it would be easier to find a use for them in general. I didn't find an issue that talks about it, so I opened one: https://github.com/WordPress/gutenberg/issues/25432 (EDIT: looks like cover block styles actually come from Coblocks plugin, so I moved the issues there)

For reference here's how the block would look like with text left-aligned:

The yellow and the light blue don't work well here. Perhaps the CTA is dark.

Sure, how about purple?

The body text is fairly big.

This is actually something we can control :) I think 18px would work better here.

Add more padding on the left of the "Enter your..." The input field is quite large. The height of the field is higher than the button.

Those seem to be bugs in the block itself, which I reported here: https://github.com/Automattic/jetpack/issues/17196