Payment Block 2 columns 2 rows

[onuro]

Preview →

Adapts theme color dark/light scheme instead of forcing pattern colors(it's still white on a white bg theme)

@ianstewart @olaolusoga @alaczek @iamtakashi

<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group alignfull"><!-- wp:media-text {"align":"full","mediaPosition":"right","mediaId":4573,"mediaType":"image","mediaWidth":60} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile" style="grid-template-columns:auto 60%"><figure class="wp-block-media-text__media"><img src="https://dotcompatterns.files.wordpress.com/2022/02/jack2.jpg?w=1024" alt="" class="wp-image-4573 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"level":4,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1","fontSize":"22px"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<h4 id="100-silk" style="font-size:22px;font-style:normal;font-weight:600;line-height:1;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px">100% Woolen</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">Reflect your fashionable style.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"level":5,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1","fontSize":"22px"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<h5 id="100-silk" style="font-size:22px;font-style:normal;font-weight:600;line-height:1;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px">Fits your wardrobe</h5>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">Half tuck into your pants or layer over.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"level":5,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1","fontSize":"22px"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<h5 id="100-silk" style="font-size:22px;font-style:normal;font-weight:600;line-height:1;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px">Versatile</h5>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">Button-down front for any type of mood or look.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"level":5,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1","fontSize":"22px"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<h5 id="100-silk" style="font-size:22px;font-style:normal;font-weight:600;line-height:1;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px">Normal Fit</h5>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">42% Cupro 34% Linen 24% Viscose</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"align":"full","mediaId":4572,"mediaType":"image","mediaWidth":40} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="https://dotcompatterns.files.wordpress.com/2022/02/jack1.jpg?w=1024" alt="" class="wp-image-4572 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"layout":{"contentSize":"760px"}} -->
<div class="wp-block-group"><!-- wp:columns {"verticalAlignment":"top"} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
<div class="wp-block-column is-vertically-aligned-top" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:heading {"style":{"typography":{"fontSize":"58px","fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"top":"0px"}}}} -->
<h2 id="the-eden-jacket" style="font-size:58px;font-style:normal;font-weight:600;margin-top:0px">The Eden Jacket</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:group {"style":{"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"},"blockGap":"30px"}}} -->
<div class="wp-block-group" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">Perfect for any look featuring a mid-rise, relax fitting silhouette.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/recurring-payments -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-id","text":"\u003cstrong\u003eBUY NOW\u003c/strong\u003e","borderRadius":0,"width":"100%","className":"is-style-outline"} /--></div>
<!-- /wp:jetpack/recurring-payments --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->

[alaczek]

I like that it adapts to the color scheme in this case!

I do have an issue with the image choice though (and I hate to even bring this up because I know how hard it is to find a good set of images).

They don't feel strong, and my guess is they are heavily cropped? Although I do like there's a person in the photo. Could you try and replace them?

[onuro]

They don't feel strong, and my guess is they are heavily cropped? Although I do like there's a person in the photo. Could you try and replace them?

Makes sense. I've tried 2 other sets of imagery but I think I like the red haired boy more :)

[alaczek]

I like the top one with the coat best - both photos are showcasing the product nicely, which makes it more real.

[onuro]

I like the top one with the coat best - both photos are showcasing the product nicely, which makes it more real.

Thanks and makes sense. Updated.

[iamtakashi]

I think we should specify the size of all text. The left top column wouldn't work with a theme that has a large size for paragraphs.

Is it necessary to use the Layout grid block for this? Can we make this with the core Columns block?

[onuro]

Updated w custom font sizes for all text.

@iamtakashi the reason I mostly choose Layout grid block over columns block is it has better visual guidance on column spacings, widths and better highlights on selected state, making it feel more user friendly to play with.

Yet if there's anything columns block making it superior to the Layout grid block or if there are any disadvantages to using it please let me know. Thanks!

[iamtakashi]

Thanks for the update.

We used to use Layout Grid a lot because the Columns block wasn't as good as it is. Back then, we heard lots of feedback from our users saying that it's very hard for them to work with. I love all the design tools in Layout Grid, but it appeared to be too complicated for the users, at least back then.

As the Columns block has improved, many things that were only possible with Layout Grid have become possible with the Columns block. There are still things that are only possible with Layout Grid, but unless those are crucial for the pattern, we should try making it with the Columns block first so that our patterns don't rely on the plugin. It's on my list to review our old patterns that used Layout Grid to see if we can make them simpler and leaner.

We should also keep suggesting improvements to the Column blocks as we find designs that are only possible with Layout Grid.

[onuro]

Makes sense and thanks for the detailed explanation! Layout grid also has it's own limitations with features which is lacking compared to Columns block.

Going forward, I'll make sure I'll try layouts with Columns block instead of Layout Grid.

Updated w layout grids converted into columns blocks.

[iamtakashi]

Nice. It's much leaner, and it didn't appear to be compromised very much.

I see a horizontal scroll though, you don't need to get rid of the padding from the most-outer group block. Otherwise, 👍