Email subscription

[alaczek]

This one feels more like a footer layout, but we don't have a "Footer" pattern category, and I'm not sure how this is going to fit once site editor lands.

<!-- wp:group {"align":"full","style":{"color":{"background":"#fbf7f7"},"spacing":{"padding":{"top":"60px","bottom":"60px","right":"5vw","left":"5vw"}}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#fbf7f7;padding-top:60px;padding-right:5vw;padding-bottom:60px;padding-left:5vw"><!-- wp:jetpack/layout-grid {"gutterSize":"none","addGutterEnds":false,"column1DesktopSpan":7,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":4,"column2DesktopOffset":1,"column2TabletSpan":3,"column2TabletOffset":1,"column2MobileSpan":4,"column3TabletOffset":4,"className":"column1-desktop-grid__span-7 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-9 column2-desktop-grid__row-1 column1-tablet-grid__span-4 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-7 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-9 column2-desktop-grid__row-1 column1-tablet-grid__span-4 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-block-jetpack-layout-gutter__none"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":3,"align":"wide"} -->
<h3 class="alignwide">Subscribe</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Sign up for a weekly newsletter with the latest blog posts and exclusive content. In your inbox every Tuesday!</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"buttonOnNewLine":true,"spacing":0} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="true" 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"]</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 {"fontSize":"small","style":{"typography":{"lineHeight":"2.4"}}} -->
<p class="has-small-font-size" style="line-height:2.4"><a href="#">Contact</a><br><a href="#">Privacy</a><br><a href="#">Terms &amp; Conditions</a></p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"customIconColor":"#4a5759","iconColorValue":"#4a5759","customIconBackgroundColor":"#fbf7f7","iconBackgroundColorValue":"#fbf7f7","className":"items-justified-left is-style-default"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color items-justified-left is-style-default"><!-- wp:social-link {"url":"#","service":"wordpress"} /-->

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

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

[alaczek]

I revamped this one. The design stays mostly the same, but I made some structural changes:

• switched layout grid to columns,
• made it into a footer pattern,
• added WordPress credit line.

<!-- wp:group {"align":"full","style":{"color":{"background":"#fbf7f7"},"spacing":{"padding":{"top":"60px","bottom":"60px","right":"5vw","left":"5vw"}}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#fbf7f7;padding-top:60px;padding-right:5vw;padding-bottom:60px;padding-left:5vw"><!-- wp:columns {"style":{"spacing":{"blockGap":"10%","margin":{"bottom":"5vh"}}}} -->
<div class="wp-block-columns" style="margin-bottom:5vh"><!-- wp:column {"width":"70%"} -->
<div class="wp-block-column" style="flex-basis:70%"><!-- wp:heading {"level":3,"align":"wide"} -->
<h3 class="alignwide">Subscribe</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Sign up for a weekly newsletter with the latest blog posts and exclusive content. </p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"subscribePlaceholder":"Email Address","customButtonBackgroundColor":"#000000","customTextColor":"#ffffff","borderColor":"primary","spacing":0} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form subscribe_placeholder="Email Address" show_subscribers_total="false" button_on_newline="false" custom_background_button_color="#000000" custom_text_button_color="#ffffff" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="has-primary-border-color" email_field_classes="has-primary-border-color" show_only_email_and_button="true" success_message="Success! An email was just sent to confirm your subscription. Please find the email now and click &#039;Confirm Follow&#039; to start subscribing."]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"30%","style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"2.4"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:2.4"><a href="#">Contact</a><br><a href="#">Privacy</a><br><a href="#">Terms &amp; Conditions</a></p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"iconColorValue":"#4a5759","customIconBackgroundColor":"#fbf7f7","iconBackgroundColorValue":"#fbf7f7","className":"items-justified-left is-style-default"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color items-justified-left is-style-default"><!-- wp:social-link {"url":"#","service":"wordpress"} /-->

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

<!-- wp:social-link {"url":"#","service":"facebook"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Proudly Powered by <a href="https://wordpress.com">WordPress</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Preview: https://dotcompatterns.wordpress.com/?p=4251&preview=true

[iamtakashi]

A small thing: how about specifying the space between the social icons to reduce it? I don't imagine that needs to be the same as the theme-specific value.

[alaczek]

Oh, yeah that's a good idea (and thank God for the block gap!). I think I will also stick to default theme colors for this one so that it better blends with customer sites. I don't think the pink bg is super essential here.

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"60px","bottom":"60px","right":"5vw","left":"5vw"}}},"backgroundColor":"tertiary"} -->
<div class="wp-block-group alignfull has-tertiary-background-color has-background" style="padding-top:60px;padding-right:5vw;padding-bottom:60px;padding-left:5vw"><!-- wp:columns {"style":{"spacing":{"blockGap":"10%","margin":{"bottom":"7vh"}}}} -->
<div class="wp-block-columns" style="margin-bottom:7vh"><!-- wp:column {"width":"70%","style":{"spacing":{"blockGap":"20px"}}} -->
<div class="wp-block-column" style="flex-basis:70%"><!-- wp:heading {"level":3,"align":"wide"} -->
<h3 class="alignwide">Subscribe</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Sign up for a weekly newsletter with the latest blog posts and exclusive content. </p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"subscribePlaceholder":"Email Address","customButtonBackgroundColor":"#000000","customTextColor":"#ffffff","borderColor":"primary","spacing":0} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form subscribe_placeholder="Email Address" show_subscribers_total="false" button_on_newline="false" custom_background_button_color="#000000" custom_text_button_color="#ffffff" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="has-primary-border-color" email_field_classes="has-primary-border-color" show_only_email_and_button="true" success_message="Success! An email was just sent to confirm your subscription. Please find the email now and click &#039;Confirm Follow&#039; to start subscribing."]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"30%","style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"2.4"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:2.4"><a href="#">Contact</a><br><a href="#">Privacy</a><br><a href="#">Terms &amp; Conditions</a></p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#000000","iconBackgroundColor":"tertiary","iconBackgroundColorValue":"#F0F0F0","size":"has-normal-icon-size","style":{"spacing":{"blockGap":{"top":"5px","left":"5px"}}},"className":"items-justified-left is-style-default"} -->
<ul class="wp-block-social-links has-normal-icon-size has-icon-color has-icon-background-color items-justified-left is-style-default"><!-- wp:social-link {"url":"#","service":"wordpress"} /-->

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

<!-- wp:social-link {"url":"#","service":"facebook"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Proudly Powered by <a href="https://wordpress.com">WordPress</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

[iamtakashi]

LGTM! 👍