Alternating Image and Text

[alaczek]

This pattern comes from the Marl theme.

Screenshot:

<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"4vh","padding":{"top":"8vh","bottom":"8vh"}}}} -->
<div class="wp-block-group alignwide" style="padding-top:8vh;padding-bottom:8vh"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"40px"}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:image {"id":6743,"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":"10px"}},"className":"is-style-default"} -->
<figure class="wp-block-image size-large has-custom-border is-style-default"><img src="https://dotcompatterns.files.wordpress.com/2022/09/toa-heftiba-shgxu7dwux4-unsplash.jpeg?w=785" alt="" class="wp-image-6743" style="border-radius:10px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:50%"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"small"} -->
<p class="has-small-font-size">THE GOODS</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"typography":{"lineHeight":"1.3"}},"fontSize":"x-large"} -->
<h2 class="has-x-large-font-size" id="all-items-are-100-hand-made-using-the-potter-s-wheel-or-traditional-techniques-created-with-love-and-care-in-australia" style="line-height:1.3">Created with love and care in Australia.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.65"}}} -->
<p style="line-height:1.65">All items are 100% hand-made, using the potter’s wheel or traditional techniques.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"style":{"typography":{"lineHeight":"2"}}} -->
<ul style="line-height:2"><!-- wp:list-item -->
<li>Timeless style.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Earthy, organic feel.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Enduring quality.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Unique, one-of-a-kind pieces.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"40px"}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"small"} -->
<p class="has-small-font-size">ABOUT US</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"typography":{"lineHeight":"1.3"}},"fontSize":"x-large"} -->
<h2 class="has-x-large-font-size" id="all-items-are-100-hand-made-using-the-potter-s-wheel-or-traditional-techniques-created-with-love-and-care-in-australia" style="line-height:1.3">Marl is an independent studio and artisanal gallery.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"}}} -->
<p style="font-size:18px">We specialize in limited collections of handmade tableware. We collaborate with restaurants and cafes to create unique items that complement the menu perfectly. Please get in touch if you want to know more about our process and pricing.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}}} -->
<div class="wp-block-buttons" style="margin-top:20px;margin-bottom:20px"><!-- wp:button {"style":{"border":{"radius":"100px"},"spacing":{"padding":{"top":"6px","bottom":"6px","left":"36px","right":"36px"}}},"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link wp-element-button" style="border-radius:100px;padding-top:6px;padding-right:36px;padding-bottom:6px;padding-left:36px">LEARN MORE</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:image {"id":6744,"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":"10px"}},"className":"is-style-default"} -->
<figure class="wp-block-image size-large has-custom-border is-style-default"><img src="https://dotcompatterns.files.wordpress.com/2022/09/toa-heftiba-nru6o8kg8uw-unsplash.jpeg?w=819" alt="" class="wp-image-6744" style="border-radius:10px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

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

cc @onuro @iamtakashi

[iamtakashi]

Neat. This makes me think that #275 isn't worth adding to the library. The text alignment is different, but this is much nicer and makes #275 redundant in a way.

I wonder if this looks good if the spacing is tighter like this. This was 4px margin-top to the heading. What do you think?

[alaczek]

Good call, I tweaked the top margin. Published!