From 80f742416d24ab15be7c97239836cb59bcafc9d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Mon, 16 Oct 2023 16:46:36 +0200
Subject: [PATCH 1/2] Fix pattern spacing

Removes the top/bottom paddings, adds margins to the bottom of each pattern
---
 patterns/featured-category-triple.php         |  4 ++--
 patterns/hero-product-3-split.php             |  4 ++--
 patterns/just-arrived-full-hero.php           | 10 ++++++----
 patterns/product-collection-3-columns.php     |  4 ++--
 patterns/product-collection-5-columns.php     |  4 ++--
 patterns/social-follow-us-in-social-media.php |  4 ++--
 patterns/testimonials-3-columns.php           |  5 +++--
 7 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/patterns/featured-category-triple.php b/patterns/featured-category-triple.php
index bc9782c0c10..a40fe5d0740 100644
--- a/patterns/featured-category-triple.php
+++ b/patterns/featured-category-triple.php
@@ -18,8 +18,8 @@
 $third_title  = $content['titles'][2]['default'] ?? '';
 ?>
 
-<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"},"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
-<div class="wp-block-columns alignwide" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
+<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"},"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"0","bottom":"0"},"margin":{"top":"0px","bottom":"80px"}}}} -->
+<div class="wp-block-columns alignwide" style="margin-top:0px;margin-bottom:80px;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"className":"has-white-color"} -->
diff --git a/patterns/hero-product-3-split.php b/patterns/hero-product-3-split.php
index aac835ff468..6b07c3445d6 100644
--- a/patterns/hero-product-3-split.php
+++ b/patterns/hero-product-3-split.php
@@ -22,8 +22,8 @@
 $fifth_description  = $content['descriptions'][4]['default'] ?? '';
 ?>
 
-<!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
-<div class="wp-block-columns alignfull" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+<!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0px","bottom":"80px"}}}} -->
+<div class="wp-block-columns alignfull" style="margin-top:0px;margin-bottom:80px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
 	<!-- wp:column {"width":"66.66%"} -->
 	<div class="wp-block-column" style="flex-basis:66.66%">
 		<!-- wp:media-text {"mediaPosition":"right","mediaId":1,"mediaLink":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/hand-guitar-finger-tshirt-clothing-rack.png', dirname( __FILE__ ) ) ); ?>","mediaType":"image"} -->
diff --git a/patterns/just-arrived-full-hero.php b/patterns/just-arrived-full-hero.php
index 882f1692336..b87fd71d777 100644
--- a/patterns/just-arrived-full-hero.php
+++ b/patterns/just-arrived-full-hero.php
@@ -6,6 +6,7 @@
  */
 
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
+
 $content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/just-arrived-full-hero' );
 $images  = PatternsHelper::get_pattern_images( 'woocommerce-blocks/just-arrived-full-hero' );
 
@@ -15,10 +16,10 @@
 $pattern_image       = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' );
 ?>
 
-<!-- wp:cover {"url":"<?php echo esc_url( $pattern_image ); ?>","dimRatio":30,"minHeight":739,"contentPosition":"center right","align":"full","style":{"spacing":{"padding":{"right":"4em"}}}} -->
-<div class="wp-block-cover alignfull has-custom-content-position is-position-center-right" style="padding-right:4em;min-height:739px">
+<!-- wp:cover {"url":"<?php echo esc_url( $pattern_image ); ?>","dimRatio":30,"minHeight":739,"contentPosition":"center right","align":"full","style":{"spacing":{"margin":{"bottom":"80px"}}}} -->
+<div class="wp-block-cover alignfull has-custom-content-position is-position-center-right" style="margin-bottom:80px;min-height:739px">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span>
-	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $pattern_image ); ?>" data-object-fit="cover"/>
+	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $pattern_image ); ?>" data-object-fit="cover" />
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:group {"layout":{"type":"constrained"}} -->
 		<div class="wp-block-group">
@@ -41,5 +42,6 @@
 			<!-- /wp:buttons -->
 		</div>
 		<!-- /wp:group -->
-	</div></div>
+	</div>
+</div>
 <!-- /wp:cover -->
diff --git a/patterns/product-collection-3-columns.php b/patterns/product-collection-3-columns.php
index c2c4c5b579b..007f1988c3f 100644
--- a/patterns/product-collection-3-columns.php
+++ b/patterns/product-collection-3-columns.php
@@ -11,8 +11,8 @@
 $products_title = $content['titles'][0]['default'] ?? '';
 ?>
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"top":"0px","bottom":"80px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide" style="margin-top:0px;margin-bottom:80px;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
 	<!-- wp:heading {"level":3,"align":"wide"} -->
 	<h3 class="wp-block-heading alignwide"><?php echo esc_html( $products_title ); ?></h3>
 	<!-- /wp:heading -->
diff --git a/patterns/product-collection-5-columns.php b/patterns/product-collection-5-columns.php
index e97ea55a905..e8fdb8bb2b0 100644
--- a/patterns/product-collection-5-columns.php
+++ b/patterns/product-collection-5-columns.php
@@ -11,8 +11,8 @@
 $products_title = $content['titles'][0]['default'] ?? '';
 ?>
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"top":"0","bottom":"80px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:80px;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
 	<!-- wp:heading {"level":3,"align":"wide"} -->
 	<h3 class="wp-block-heading alignwide"><?php echo esc_html( $products_title ); ?></h3>
 	<!-- /wp:heading -->
diff --git a/patterns/social-follow-us-in-social-media.php b/patterns/social-follow-us-in-social-media.php
index b3bd672dd12..b9f0a733af3 100644
--- a/patterns/social-follow-us-in-social-media.php
+++ b/patterns/social-follow-us-in-social-media.php
@@ -17,8 +17,8 @@
 $social_title = $content['titles'][0]['default'] ?? '';
 ?>
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"top":"0px","bottom":"80px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide" style="margin-top:0px;margin-bottom:80px;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
 	<!-- wp:columns {"verticalAlignment":null,"align":"wide"} -->
 	<div class="wp-block-columns alignwide">
 		<!-- wp:column {"verticalAlignment":"bottom","width":"75%","layout":{"type":"constrained"}} -->
diff --git a/patterns/testimonials-3-columns.php b/patterns/testimonials-3-columns.php
index 998ad7e3f42..8e6999f18bd 100644
--- a/patterns/testimonials-3-columns.php
+++ b/patterns/testimonials-3-columns.php
@@ -17,8 +17,9 @@
 $second_description = $content['descriptions'][1]['default'] ?? '';
 $third_description  = $content['descriptions'][2]['default'] ?? '';
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"constrained","justifyContent":"left"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
+
+<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"0px","bottom":"80px"}}},"layout":{"type":"constrained","justifyContent":"left"}} -->
+<div class="wp-block-group alignwide" style="margin-top:0px;margin-bottom:80px">
 	<!-- wp:heading {"level":3,"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
 	<h3 class="wp-block-heading" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><?php echo esc_html( $main_header ); ?></h3>
 	<!-- /wp:heading -->

From 488ecc7f6264213a9d7ee7ad45cbda74a6e61fdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Tue, 17 Oct 2023 10:13:07 +0200
Subject: [PATCH 2/2] Add margin between patterns to ensure consistency between
 themes

---
 patterns/featured-category-cover-image.php | 5 +++--
 patterns/hero-product-chessboard.php       | 4 ++--
 patterns/product-collection-4-columns.php  | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/patterns/featured-category-cover-image.php b/patterns/featured-category-cover-image.php
index 957fe159cad..8cbb5d64e70 100644
--- a/patterns/featured-category-cover-image.php
+++ b/patterns/featured-category-cover-image.php
@@ -15,8 +15,9 @@
 $description    = $content['descriptions'][0]['default'] ?? '';
 $button         = $content['buttons'][0]['default'] ?? '';
 ?>
-<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","dimRatio":50,"align":"full","style":{"spacing":{"padding":{"top":"3%","right":"0%","bottom":"10%","left":"5%"},"margin":{"top":"0","bottom":"0"},"blockGap":"1%"}},"layout":{"type":"default"}} -->
-<div class="wp-block-cover alignfull" style="margin-top:0;margin-bottom:0;padding-top:3%;padding-right:0%;padding-bottom:10%;padding-left:5%">
+
+<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","dimRatio":50,"align":"full","style":{"spacing":{"padding":{"top":"3%","right":"0%","bottom":"10%","left":"5%"},"margin":{"top":"0","bottom":"80px"},"blockGap":"1%"}},"layout":{"type":"default"}} -->
+<div class="wp-block-cover alignfull" style="margin-top:0;margin-bottom:80px;padding-top:3%;padding-right:0%;padding-bottom:10%;padding-left:5%">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
 	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $image1 ); ?>" data-object-fit="cover"/>
 	<div class="wp-block-cover__inner-container">
diff --git a/patterns/hero-product-chessboard.php b/patterns/hero-product-chessboard.php
index 4f2c1508149..cad13e8169e 100644
--- a/patterns/hero-product-chessboard.php
+++ b/patterns/hero-product-chessboard.php
@@ -25,8 +25,8 @@
 $fifth_description  = $content['descriptions'][4]['default'] ?? '';
 ?>
 
-<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull">
+<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0px","bottom":"80px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:80px">
 	<!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"0","left":"0"}}}} -->
 	<div class="wp-block-columns alignfull" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
 		<!-- wp:column -->
diff --git a/patterns/product-collection-4-columns.php b/patterns/product-collection-4-columns.php
index de6bced4514..03a6e20e8d8 100644
--- a/patterns/product-collection-4-columns.php
+++ b/patterns/product-collection-4-columns.php
@@ -11,8 +11,8 @@
 $products_title = $content['titles'][0]['default'] ?? '';
 ?>
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"top":"0px","bottom":"80px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide" style="margin-top:0px;margin-bottom:80px;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
 	<!-- wp:heading {"level":3,"align":"wide"} -->
 	<h3 class="wp-block-heading alignwide"><?php echo esc_html( $products_title ); ?></h3>
 	<!-- /wp:heading -->