Add "Store Info Alternating Image and Text" commerce adjacent pattern (https://github.com/woocommerce/woocommerce-blocks/pull/7827)

* Add new commerce-adjacent pattern

This pattern is an alternating image and text layout that provides store info for the shopper.

* fix pattern title
This commit is contained in:
Darren Ethier 2022-12-05 06:57:51 -05:00 committed by GitHub
parent f35bbd7b0e
commit 6ed137e1e8
1 changed files with 76 additions and 0 deletions

View File

@ -0,0 +1,76 @@
<?php
/**
* Title: WooCommerce Alternating Image and Text
* Slug: woocommerce-blocks/alt-image-and-text
* Categories: WooCommerce
*/
?>
<!-- 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 -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;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"},"spacing":{"margin":{"top":"var:preset|spacing|20","right":"0","bottom":"0","left":"0"}}},"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="margin-top:var(--wp--preset--spacing--20);margin-right:0;margin-bottom:0;margin-left:0;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 potters 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"},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"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="margin-top:var(--wp--preset--spacing--20);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 -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->