Subscription

[iamtakashi]

<!-- wp:group {"align":"full","style":{"color":{"text":"#043959","background":"#ffbe0b"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#ffbe0b;color:#043959"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":20} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":31,"lineHeight":".7"},"color":{"text":"#000000"}}} -->
<h3 class="has-text-color" style="color:#000000;font-size:31px;line-height:.7">Follow Me</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"width":50} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph {"className":"margin-bottom-none","style":{"color":{"text":"#000000"},"typography":{"fontSize":18}}} -->
<p class="margin-bottom-none has-text-color" style="color:#000000;font-size:18px">Get new content delivered directly to your inbox.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"subscribePlaceholder":"Email Address","submitButtonText":"Sign up","customButtonBackgroundColor":"#000000","customTextColor":"#ffffff","borderWeight":0,"padding":16,"spacing":8,"className":"margin-top-half"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline margin-top-half">[jetpack_subscription_form subscribe_placeholder="Email Address" show_subscribers_total="false" button_on_newline="false" submit_button_text="Sign up" custom_background_button_color="#000000" custom_text_button_color="#ffffff" custom_font_size="16" custom_border_radius="0" custom_border_weight="1" custom_padding="16" custom_spacing="8" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:column -->

<!-- wp:column {"width":30} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:social-links {"align":"right","className":"is-style-default"} -->
<ul class="wp-block-social-links alignright is-style-default"><!-- wp:social-link {"url":"","service":"wordpress"} /-->

<!-- wp:social-link {"url":"https://facebook.com/","service":"facebook"} /-->

<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://instagram.com/","service":"instagram"} /-->

<!-- wp:social-link {"url":"https://linkedin.com/","service":"linkedin"} /-->

<!-- wp:social-link {"url":"https://youtube.com/","service":"youtube"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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

[alaczek]

This one is really close to #37. I wonder if it would make sense to differentiate a bit more, maybe with different background color?

[iamtakashi]

Good point. I'll update the background colour today.

[iamtakashi]

Updated with shades of blue that's apparently everyone's favourite but we seem to shy about :)

[alaczek]

Happy to see some color :) But I'm thinking it's too light. Could you try something bolder, more saturated?

[iamtakashi]

OK, I can try some other colours. But the colourful social links make harder to use a bolder colour. I've been thinking to suggest the block to have a monochrome style.

[iamtakashi]

I've been thinking to suggest the block to have a monochrome style.

The idea has already been raised :) WordPress/gutenberg#21605

[iamtakashi]

How about yellow? ^

[alaczek]

I like yellow! What do you think about something more saturated, like #ffbe0b?

[iamtakashi]

Sure, that works as well. Updated ^.

[iamtakashi]

I updated the pattern a little.

• Updated the subscription form to make the field and the button inline
• Removed Layout Grid to prevent columns becomes too wide
• Minot type tweak

[rickybanister]

The vertical alignment looks a little off—

Follow Me and Get new content... look baseline aligned, but the social logos are sitting a bit low. Is that tweakable?

[iamtakashi]

Making them baseline aligned made it worse. I'm now not sure if the pattern worth keeping, the balance seems off as a whole. I'll think about something different. Thanks for pointing that out.