Podcast Subscribe Two Columns

[alaczek]

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

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":10,"column1DesktopOffset":1,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":1,"className":"column1-desktop-grid__span-10 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-10 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"style":{"typography":{"fontSize":"44px","lineHeight":"1.1"}}} -->
<h2 style="font-size:44px;line-height:1.1">Stay in touch</h2>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":7,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":3,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":1,"className":"column1-desktop-grid__span-7 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-3 column2-desktop-grid__start-9 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-7 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-3 column2-desktop-grid__start-9 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph -->
<p>Get every new episode delivered to your inbox.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_font_size="16" 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"]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph -->
<p>Follow me on:</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"wordpress.com","service":"wordpress"} /-->

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

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

<!-- wp:social-link {"url":"instagram.com","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

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

[alaczek]

This one would really benefit from subscribe block and social icons improvements.

Subscribe (Jetpack)

• Subscriptions Block: Improve different states jetpack#15474
• Subscriptions Block: Unable to create logged-in centred layout jetpack#18085

Social icons (Gutenberg)

• Color options for Social Icons block WordPress/gutenberg#21605

With the above we could re-create this pattern as it was designed in Figma:

[alaczek]

Circling back to this one. Looks like all the issues were fixed, so I made a few tweaks, and I think this one should be ready to go:

<!-- wp:group {"align":"full","style":{"color":{"text":"#ffffff","background":"#151516"},"spacing":{"padding":{"top":"64px","bottom":"64px","right":"0px","left":"0px"}}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#151516;color:#ffffff;padding-top:64px;padding-right:0px;padding-bottom:64px;padding-left:0px"><!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":10,"column1DesktopOffset":1,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":1,"className":"column1-desktop-grid__span-10 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-10 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"style":{"typography":{"fontSize":"44px","lineHeight":"1.1"}}} -->
<h2 style="font-size:44px;line-height:1.1">Stay in touch</h2>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":6,"column1DesktopOffset":1,"column1TabletSpan":5,"column1MobileSpan":4,"column2DesktopSpan":3,"column2DesktopOffset":1,"column2TabletSpan":3,"column2MobileSpan":4,"column3DesktopOffset":1,"column3TabletOffset":3,"className":"column1-desktop-grid__span-6 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-3 column2-desktop-grid__start-9 column2-desktop-grid__row-1 column1-tablet-grid__span-5 column1-tablet-grid__row-1 column2-tablet-grid__span-3 column2-tablet-grid__start-6 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-6 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-3 column2-desktop-grid__start-9 column2-desktop-grid__row-1 column1-tablet-grid__span-5 column1-tablet-grid__row-1 column2-tablet-grid__span-3 column2-tablet-grid__start-6 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph -->
<p>Get every new episode delivered to your inbox.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"subscribePlaceholder":"Enter your email address","submitButtonText":"Sign Up","customButtonBackgroundColor":"#151516","customTextColor":"#ffffff","borderRadius":3,"borderColor":"#ffffff","customBorderColor":"#ffffff"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form subscribe_placeholder="Enter your email address" show_subscribers_total="false" button_on_newline="false" submit_button_text="Sign Up" custom_background_button_color="#151516" custom_text_button_color="#ffffff" custom_font_size="16px" custom_border_radius="3" custom_border_weight="1" custom_border_color="#ffffff" custom_padding="15" custom_spacing="10" submit_button_classes="has-ffffff-border-color" email_field_classes="has-ffffff-border-color" show_only_email_and_button="true"]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph -->
<p>Follow me on:</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"wordpress.com","service":"wordpress"} /-->

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

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

<!-- wp:social-link {"url":"instagram.com","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div>
<!-- /wp:group -->

[ianstewart]

Nice. Let's go for it.