Newsletter Subscription with Full Width Cover

[onuro]

Screenshot:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/10/circlesbg.jpg","id":7711,"dimRatio":0,"minHeight":75,"minHeightUnit":"vh","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light" style="min-height:75vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-7711" alt="" src="https://dotcompatterns.files.wordpress.com/2022/10/circlesbg.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"wide","layout":{"type":"constrained","contentSize":""}} -->
<div class="wp-block-group alignwide"><!-- wp:media-text {"mediaId":7717,"mediaType":"image","mediaWidth":45,"mediaSizeSlug":"full","imageFill":true} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill" style="grid-template-columns:45% auto"><figure class="wp-block-media-text__media" style="background-image:url(https://dotcompatterns.files.wordpress.com/2022/10/mic-black.jpg);background-position:50% 50%"><img src="https://dotcompatterns.files.wordpress.com/2022/10/mic-black.jpg" alt="" class="wp-image-7717 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"style":{"typography":{"textTransform":"uppercase","fontSize":"5.5rem","fontStyle":"normal","fontWeight":"500"}},"fontFamily":"rubik"} -->
<h2 class="has-rubik-font-family has-custom-font" style="font-size:5.5rem;font-style:normal;font-weight:500;text-transform:uppercase;font-family:rubik">The Tech days podcast</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Technology, startups, business news and much more. Delivered weekly to your inbox.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"buttonOnNewLine":true,"buttonWidth":"100%","submitButtonText":"\u003cstrong\u003eSubscribe\u003c/strong\u003e","borderColor":"secondary","spacing":20,"className":"is-style-split"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline wp-block-jetpack-subscriptions__use-newline is-style-split">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="true" submit_button_text="&lt;strong&gt;Subscribe&lt;/strong&gt;" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_button_width="100%" custom_padding="15" custom_spacing="20" submit_button_classes="has-secondary-border-color" email_field_classes="has-secondary-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></div>
<!-- /wp:media-text --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

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

@iamtakashi @alaczek

[iamtakashi]

The background is neat 👍

A few thoughts on the heading.

• The line-height for it could be tighter since it's all uppercase.
• It could be nicer if the weight is heavier.
• I think the size is probably too big.

Lastly, because this pattern uses a specific background image, I think it'd be safer to specify the colour of the text and button.

[onuro]

Thanks @iamtakashi . I've also updated the font with Poppins which felt better in bold.

[alaczek]

Let's get this published!

[onuro]

Published!

[iamtakashi]

I changed the category from Wireframe(default) to Newsletter. The category is important as that's where the pattern appears in the inserter. I know it's easy to forget :) The new template for new issues might remind us well.

[iamtakashi]

Also, this pattern brings back the horizontal scroll bar again. I suspect this also has the same issue as https://github.com/Automattic/blockpatterns/issues/292. Can you take a look at it? Thanks in advance!

[iamtakashi]

Changed it to a draft. Publish it and close this when the issue is solved.

[onuro]

@iamtakashi somehow wrapping the full width cover with group block causes this(theme has negative left/right margins for full width blocks).

I detached the cover from the wrapping group and it seems to fix it.

[iamtakashi]

somehow wrapping the full width cover with group block causes this(theme has negative left/right margins for full width blocks).

@onuro You can still wrap it with the group block, but if you remove the default side paddings from it, the cover block inside becomes wider than the viewport.

[onuro]

@onuro You can still wrap it with the group block, but if you remove the default side paddings from it, the cover block inside becomes wider than the viewport.

@iamtakashi I figured it out: If the wrapping group block is already full width aligned, there will be no need to full align the contents—unless "Inner blocks use content width" is activated.

And my blocks within the group for both this pattern and the other had full aligned inner blocks in them. Removing the full alignment seems to permanently fix it.

[iamtakashi]

I figured it out: If the wrapping group block is already full width aligned, there will be no need to full align the contents—unless "Inner blocks use content width" is activated.

@onuro, it depends :) In many themes including Blockbase, all Blockbase child themes, and TT2, you'd still need to make the cover block full width if you want it to be full width while it's wrapped with a full width group block. (and when "Inner blocks use content width" is unticked. shown in example 1 & 2)

As I said, you had paddings 0 for the group block while the cover block was also full width. Removing the paddings was what made the full width cover block wider than the viewport in those themes (example 3) Feel free to test with the following markup with those themes.

The reason why I said "it depends" was ,thankfully, this is not the case with Block Canvas nor Blank Canvas 3. However, there are still many sites with TT2, Blockbase, and its child themes so we should avoid doing that.

<!-- wp:group {"align":"full","backgroundColor":"primary","textColor":"background","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>1. Full-width Group </p>
<!-- /wp:paragraph -->

<!-- wp:cover {"overlayColor":"foreground"} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover without specific alignment </p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","backgroundColor":"primary","textColor":"background","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>2. Full-width Group </p>
<!-- /wp:paragraph -->

<!-- wp:cover {"overlayColor":"foreground","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover (full-width)</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"0px","left":"0px"}}},"backgroundColor":"primary","textColor":"background"} -->
<div class="wp-block-group alignfull has-background-color has-primary-background-color has-text-color has-background" style="padding-right:0px;padding-left:0px"><!-- wp:paragraph -->
<p>3. Full-width Group without default side padding</p>
<!-- /wp:paragraph -->

<!-- wp:cover {"overlayColor":"foreground","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover (full-width)</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->