Automattic / blockpatterns

Repo of block patterns to work with
7 stars 2 forks source link

Two-column Newsletter Signup #288

Closed iamtakashi closed 2 years ago

iamtakashi commented 2 years ago

Imported from Lettre.

Screenshot: dotcompatterns wordpress com__p=7616 preview=true

<!-- wp:cover {"customOverlayColor":"#ff513d","contentPosition":"center left","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-center-left" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#ff513d"></span><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":"60%"} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}},"textColor":"black","fontSize":"x-large"} -->
<p class="has-black-color has-text-color has-x-large-font-size" style="text-transform:uppercase">Don’t miss an update</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.2"}},"textColor":"black","fontSize":"x-large"} -->
<p class="has-black-color has-text-color has-x-large-font-size" style="line-height:1.2">Enter your email and hit the subscribe button to receive our latest stories in your inbox.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"subscribePlaceholder":"Email Address","buttonOnNewLine":true,"buttonWidth":"100%","buttonBackgroundColor":"black","customTextColor":"#ff513d","fontSize":"1.75rem","customFontSize":"1.75rem","borderRadius":50,"borderWeight":2,"borderColor":"black","padding":16,"className":"alignwide is-style-split"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline alignwide is-style-split">[jetpack_subscription_form subscribe_placeholder="Email Address" show_subscribers_total="false" button_on_newline="true" custom_text_button_color="#ff513d" custom_font_size="1.75rem" custom_border_radius="50" custom_border_weight="2" custom_button_width="100%" custom_padding="16" custom_spacing="10" submit_button_classes="has-1-75-rem-font-size has-black-border-color has-background has-black-background-color" email_field_classes="has-1-75-rem-font-size has-black-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 --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

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

cc: @alaczek @onuro

alaczek commented 2 years ago

Shouldn't this be a 100vh cover block? This is how it's set up in Lettre https://lettredemo.wordpress.com/dont-miss/

iamtakashi commented 2 years ago

Shouldn't this be a 100vh cover block? This is how it's set up in Lettre https://lettredemo.wordpress.com/dont-miss/

That's weird. If I add the pattern to my post, the height is not specified. Maybe, it's been overlooked in the theme? I'll add that before publishing it. Good catch.