Automattic / blockpatterns

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

Subscription Stacked #268

Open onuro opened 2 years ago

onuro commented 2 years ago

Screenshot:

image
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"blockGap":"100px"}}} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"1.25"}},"fontSize":"x-large"} -->
<h2 class="has-x-large-font-size" style="font-style:normal;font-weight:700;line-height:1.25">Thousands of people have joined our newsletter. Enter your mail to get the latest to your inbox.</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph -->
<p>Subscribe to our newsletter for cool tips, campaigns and new things.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"backgroundColor":"background"} -->
<div class="wp-block-group has-background-background-color has-background" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:jetpack/subscriptions {"buttonWidth":"","submitButtonText":"\u003cstrong\u003e Subscribe\u003c/strong\u003e","borderRadius":0,"borderWeight":0,"padding":15,"spacing":10,"className":"is-style-split"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline is-style-split">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" submit_button_text="&lt;strong&gt; Subscribe&lt;/strong&gt;" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="no-border-radius" email_field_classes="no-border-radius" 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:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"full","id":6024,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/08/coverimg-1.jpg" alt="" class="wp-image-6024"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

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

alaczek commented 2 years ago

I noticed a few things about this one.

image
iamtakashi commented 2 years ago

Let's make sure to have side paddings so that it avoids this situation.

Screenshot 2022-09-01 at 12 24 41

onuro commented 1 year ago

Thanks folks. I've updated as follows:

image

My thinking is using a crowd of smiling people to reflect the heading into the image used in the pattern.

iamtakashi commented 1 year ago

Thanks for the update. I like your thinking, but I'm not too sure about this one generally. As Ola said, I feel the amount of text in this pattern seems a lot and almost redundant. Do we need both "enter your mail to get [...]" and "Subscribe to our newsletter [...]"?

There seems to be a lot of space between the image and the columns block?