From 7162c623485ab475bd91d2f2f0586cfe955a59bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Wed, 4 Oct 2023 13:31:28 +0200 Subject: [PATCH 01/13] Add titles to patterns and set the aligment to Wide --- patterns/product-query-1-1-image-4-column-products-row.php | 0 patterns/product-query-minimal-5-column-products-row.php | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 patterns/product-query-1-1-image-4-column-products-row.php create mode 100644 patterns/product-query-minimal-5-column-products-row.php diff --git a/patterns/product-query-1-1-image-4-column-products-row.php b/patterns/product-query-1-1-image-4-column-products-row.php new file mode 100644 index 00000000000..e69de29bb2d diff --git a/patterns/product-query-minimal-5-column-products-row.php b/patterns/product-query-minimal-5-column-products-row.php new file mode 100644 index 00000000000..e69de29bb2d From 1a7b913f82fe129be71c03e2f7717f6ddaa013e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Thu, 5 Oct 2023 10:52:46 +0200 Subject: [PATCH 02/13] Replace product query patterns with product collection ones --- patterns/product-query-1-1-image-4-column-products-row.php | 0 patterns/product-query-minimal-5-column-products-row.php | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 patterns/product-query-1-1-image-4-column-products-row.php delete mode 100644 patterns/product-query-minimal-5-column-products-row.php diff --git a/patterns/product-query-1-1-image-4-column-products-row.php b/patterns/product-query-1-1-image-4-column-products-row.php deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/patterns/product-query-minimal-5-column-products-row.php b/patterns/product-query-minimal-5-column-products-row.php deleted file mode 100644 index e69de29bb2d..00000000000 From fbcfba6772b43b4d5be8bf5e1c11c64bf2ef8151 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Thu, 5 Oct 2023 12:28:07 +0200 Subject: [PATCH 03/13] Add group and spacing to the 3-cols and social patterns --- patterns/product-collection-3-columns.php | 50 ++++--- patterns/social-follow-us-in-social-media.php | 122 +++++++++--------- src/Patterns/dictionary.json | 12 ++ 3 files changed, 106 insertions(+), 78 deletions(-) diff --git a/patterns/product-collection-3-columns.php b/patterns/product-collection-3-columns.php index f20a4a37b9f..f0a438a8fd2 100644 --- a/patterns/product-collection-3-columns.php +++ b/patterns/product-collection-3-columns.php @@ -4,31 +4,43 @@ * Slug: woocommerce-blocks/product-collection-3-columns * Categories: WooCommerce */ +use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper; + +$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/product-collection-3-columns' ); ?> - -
- - - + +
+ +

+ + + +
+ + + + - + - - + + - - + + - + - - + + - - -

- - + + +

+ + +
+
- + diff --git a/patterns/social-follow-us-in-social-media.php b/patterns/social-follow-us-in-social-media.php index d90a2343167..8a6a6c60310 100644 --- a/patterns/social-follow-us-in-social-media.php +++ b/patterns/social-follow-us-in-social-media.php @@ -15,73 +15,77 @@ $image4 = PatternsHelper::get_image_url( $images, 3, 'images/pattern-placeholders/dining-room.png' ); ?> - -
- -
- -

-
- + +
+ +
+ +
+ +

+
+ - -
- -
    - + +
    + +
      + - + - + - -
    - + +
+ +
+
- -
- + - -
- -
- -
- <?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 1 out of 4.', 'woo-gutenberg-products-block' ); ?> -
- -
- + +
+ +
+ +
+ <?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 1 out of 4.', 'woo-gutenberg-products-block' ); ?> +
+ +
+ - -
- -
- <?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 2 out of 4.', 'woo-gutenberg-products-block' ); ?> -
- -
- + +
+ +
+ <?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 2 out of 4.', 'woo-gutenberg-products-block' ); ?> +
+ +
+ - -
- -
- <?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 3 out of 4.', 'woo-gutenberg-products-block' ); ?> -
- -
- + +
+ +
+ <?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 3 out of 4.', 'woo-gutenberg-products-block' ); ?> +
+ +
+ - -
- -
- <?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 4 out of 4.', 'woo-gutenberg-products-block' ); ?> -
- + +
+ +
+ <?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 4 out of 4.', 'woo-gutenberg-products-block' ); ?> +
+ +
+
- +
- + diff --git a/src/Patterns/dictionary.json b/src/Patterns/dictionary.json index fa86ab94e63..cd539dfb6e2 100644 --- a/src/Patterns/dictionary.json +++ b/src/Patterns/dictionary.json @@ -367,6 +367,18 @@ ] } }, + { + "name": "Product Collection 3 Columns", + "slug": "woocommerce-blocks/product-collection-3-columns", + "content": { + "titles": [ + { + "default": "Our newest arrivals", + "ai_prompt": "An impact phrase that advertises the displayed product collection" + } + ] + } + }, { "name": "Product Collection 4 Columns", "slug": "woocommerce-blocks/product-collection-4-columns", From 201a4a119329eb81157ef23c763f0fbbacc9338c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Thu, 5 Oct 2023 14:18:21 +0200 Subject: [PATCH 04/13] Fix alignment issue in the testimonals 3 in the editor --- patterns/testimonials-3-columns.php | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/patterns/testimonials-3-columns.php b/patterns/testimonials-3-columns.php index 1c11ddbca03..030d59769c3 100644 --- a/patterns/testimonials-3-columns.php +++ b/patterns/testimonials-3-columns.php @@ -8,15 +8,14 @@ use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper; $content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/testimonials-3-columns' ); ?> - - -
- -

+ +
+ +

- -
+ +
From 47ed7b53b838d6da4c6ea6a17465cd21af404a12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Thu, 5 Oct 2023 14:25:17 +0200 Subject: [PATCH 05/13] Add padding to the featured catergory triple pattern --- patterns/featured-category-triple.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/patterns/featured-category-triple.php b/patterns/featured-category-triple.php index 0cecdeaa265..31bdb3ac9fb 100644 --- a/patterns/featured-category-triple.php +++ b/patterns/featured-category-triple.php @@ -14,8 +14,8 @@ $image3 = PatternsHelper::get_image_url( $images, 2, 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png' ); ?> - -
+ +
From 15092ef19c957e730b426ea3cb1cb28ff91637fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Thu, 5 Oct 2023 14:47:10 +0200 Subject: [PATCH 06/13] Remove pagination and no results query from product query patterns --- patterns/product-collection-3-columns.php | 14 -------------- patterns/product-collection-4-columns.php | 14 -------------- patterns/product-collection-5-columns.php | 14 -------------- patterns/product-query-product-gallery.php | 14 -------------- 4 files changed, 56 deletions(-) diff --git a/patterns/product-collection-3-columns.php b/patterns/product-collection-3-columns.php index f0a438a8fd2..93188000bb4 100644 --- a/patterns/product-collection-3-columns.php +++ b/patterns/product-collection-3-columns.php @@ -26,20 +26,6 @@ - - - - - - - - - - - -

- -
diff --git a/patterns/product-collection-4-columns.php b/patterns/product-collection-4-columns.php index 46179d523b2..1ecdbc98182 100644 --- a/patterns/product-collection-4-columns.php +++ b/patterns/product-collection-4-columns.php @@ -26,20 +26,6 @@ - - - - - - - - - - - -

- -
diff --git a/patterns/product-collection-5-columns.php b/patterns/product-collection-5-columns.php index 3b3dd2abdf7..f1db6ebde40 100644 --- a/patterns/product-collection-5-columns.php +++ b/patterns/product-collection-5-columns.php @@ -36,20 +36,6 @@
- - - - - - - - - - - -

- -
diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php index a5c692cd404..094e0bb6cf3 100644 --- a/patterns/product-query-product-gallery.php +++ b/patterns/product-query-product-gallery.php @@ -29,20 +29,6 @@ - - - - - - - - - - - -

- -
From 2babc54cf06fbe2a7fd8ae8851e6d7b7353022ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Thu, 5 Oct 2023 15:42:46 +0200 Subject: [PATCH 07/13] Add aspect ratio to the product image attributes --- assets/js/atomic/blocks/product-elements/image/attributes.ts | 3 +++ assets/js/atomic/blocks/product-elements/image/block.tsx | 5 +++++ assets/js/atomic/blocks/product-elements/image/types.ts | 2 ++ src/BlockTypes/ProductImage.php | 3 +++ 4 files changed, 13 insertions(+) diff --git a/assets/js/atomic/blocks/product-elements/image/attributes.ts b/assets/js/atomic/blocks/product-elements/image/attributes.ts index 601bd22f37e..2405642245e 100644 --- a/assets/js/atomic/blocks/product-elements/image/attributes.ts +++ b/assets/js/atomic/blocks/product-elements/image/attributes.ts @@ -47,6 +47,9 @@ export const blockAttributes: BlockAttributes = { type: 'string', default: 'cover', }, + aspectRatio: { + type: 'string', + }, }; export default blockAttributes; diff --git a/assets/js/atomic/blocks/product-elements/image/block.tsx b/assets/js/atomic/blocks/product-elements/image/block.tsx index 14adbf2affe..7eb3250d5b6 100644 --- a/assets/js/atomic/blocks/product-elements/image/block.tsx +++ b/assets/js/atomic/blocks/product-elements/image/block.tsx @@ -49,6 +49,7 @@ interface ImageProps { scale: string; width?: string | undefined; height?: string | undefined; + aspectRatio: string | undefined; } const Image = ( { @@ -59,6 +60,7 @@ const Image = ( { width, scale, height, + aspectRatio, }: ImageProps ): JSX.Element => { const { thumbnail, src, srcset, sizes, alt } = image || {}; const imageProps = { @@ -72,6 +74,7 @@ const Image = ( { height, width, objectFit: scale, + aspectRatio, }; return ( @@ -101,6 +104,7 @@ export const Block = ( props: Props ): JSX.Element | null => { height, width, scale, + aspectRatio, ...restProps } = props; const styleProps = useStyleProps( props ); @@ -171,6 +175,7 @@ export const Block = ( props: Props ): JSX.Element | null => { width={ width } height={ height } scale={ scale } + aspectRatio={ aspectRatio } />
diff --git a/assets/js/atomic/blocks/product-elements/image/types.ts b/assets/js/atomic/blocks/product-elements/image/types.ts index 9b56e165ed9..ccd88e86f43 100644 --- a/assets/js/atomic/blocks/product-elements/image/types.ts +++ b/assets/js/atomic/blocks/product-elements/image/types.ts @@ -24,4 +24,6 @@ export interface BlockAttributes { width?: string; // Image scaling method. scale: 'cover' | 'contain' | 'fill'; + // Aspect ratio of the image. + aspectRatio: string; } diff --git a/src/BlockTypes/ProductImage.php b/src/BlockTypes/ProductImage.php index cf28af2cf4e..445111ee16d 100644 --- a/src/BlockTypes/ProductImage.php +++ b/src/BlockTypes/ProductImage.php @@ -158,6 +158,9 @@ private function render_image( $product, $attributes ) { if ( ! empty( $attributes['scale'] ) ) { $image_style .= sprintf( 'object-fit:%s;', $attributes['scale'] ); } + if ( ! empty( $attributes['aspectRatio'] ) ) { + $image_style .= sprintf( 'aspect-ratio:%s;', $attributes['aspectRatio'] ); + } if ( ! $product->get_image_id() ) { // The alt text is left empty on purpose, as it's considered a decorative image. From 5938f9521a2fcbffe355f1f805b0ec1bf822e7e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Thu, 5 Oct 2023 15:43:36 +0200 Subject: [PATCH 08/13] Add portrait aspect ratio to product X column and product gallery patterns --- patterns/product-collection-3-columns.php | 2 +- patterns/product-collection-4-columns.php | 2 +- patterns/product-collection-5-columns.php | 2 +- patterns/product-query-product-gallery.php | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/patterns/product-collection-3-columns.php b/patterns/product-collection-3-columns.php index 93188000bb4..d50e3bcc7b6 100644 --- a/patterns/product-collection-3-columns.php +++ b/patterns/product-collection-3-columns.php @@ -18,7 +18,7 @@
- + diff --git a/patterns/product-collection-4-columns.php b/patterns/product-collection-4-columns.php index 1ecdbc98182..78a6be333cd 100644 --- a/patterns/product-collection-4-columns.php +++ b/patterns/product-collection-4-columns.php @@ -18,7 +18,7 @@
- + diff --git a/patterns/product-collection-5-columns.php b/patterns/product-collection-5-columns.php index f1db6ebde40..04173211c3f 100644 --- a/patterns/product-collection-5-columns.php +++ b/patterns/product-collection-5-columns.php @@ -18,7 +18,7 @@
- +
diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php index 094e0bb6cf3..f0fcda2cebc 100644 --- a/patterns/product-query-product-gallery.php +++ b/patterns/product-query-product-gallery.php @@ -19,7 +19,7 @@
- + From 02108812fba861ea5e4c669dbb9543bb524ac949 Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Fri, 6 Oct 2023 08:39:10 +0200 Subject: [PATCH 09/13] Fix PHP warning and remove the padding for the Testimonials 3 Columns pattern. --- patterns/testimonials-3-columns.php | 29 +++++++++++++++++++---------- src/Patterns/dictionary.json | 8 ++++---- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/patterns/testimonials-3-columns.php b/patterns/testimonials-3-columns.php index 030d59769c3..680696c1360 100644 --- a/patterns/testimonials-3-columns.php +++ b/patterns/testimonials-3-columns.php @@ -6,24 +6,33 @@ */ use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper; + $content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/testimonials-3-columns' ); + +$main_header = $content['titles'][0]['default'] ?? ''; +$first_title = $content['titles'][1]['default'] ?? ''; +$second_title = $content['titles'][2]['default'] ?? ''; +$third_title = $content['titles'][3]['default'] ?? ''; +$first_description = $content['descriptions'][0]['default'] ?? ''; +$second_description = $content['descriptions'][1]['default'] ?? ''; +$third_description = $content['descriptions'][2]['default'] ?? ''; ?>
- -

+ +

- -
+ +
-

+

-

+

@@ -36,11 +45,11 @@
-

+

-

+

@@ -52,11 +61,11 @@
-

+

-

+

diff --git a/src/Patterns/dictionary.json b/src/Patterns/dictionary.json index cd539dfb6e2..16d2bf2bafa 100644 --- a/src/Patterns/dictionary.json +++ b/src/Patterns/dictionary.json @@ -584,6 +584,10 @@ "slug": "woocommerce-blocks/testimonials-3-columns", "content": { "titles": [ + { + "default": "What our customers say", + "ai_prompt": "A title that advertises the set of testimonials" + }, { "default": "Great experience", "ai_prompt": "A title that advertises the first testimonial" @@ -595,10 +599,6 @@ { "default": "Awesome couch and great buying experience", "ai_prompt": "A title that advertises the third testimonial" - }, - { - "default": "What our customers say", - "ai_prompt": "A title that advertises the set of testimonials" } ], "descriptions": [ From 86284647986a76df003166fd6ff64665c30f0616 Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Fri, 6 Oct 2023 09:28:23 +0200 Subject: [PATCH 10/13] Ensure the Just Arrived Full Hero pattern can have an AI managed image assigned to it and update the content assignment. --- patterns/just-arrived-full-hero.php | 17 ++++++++++------- src/Patterns/dictionary.json | 2 ++ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/patterns/just-arrived-full-hero.php b/patterns/just-arrived-full-hero.php index 87c5aaa5e75..dca1129f222 100644 --- a/patterns/just-arrived-full-hero.php +++ b/patterns/just-arrived-full-hero.php @@ -9,29 +9,32 @@ $content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/just-arrived-full-hero' ); $images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/just-arrived-full-hero' ); -$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' ); +$pattern_title = $content['titles'][0]['default'] ?? ''; +$pattern_description = $content['descriptions'][0]['default'] ?? ''; +$pattern_button = $content['buttons'][0]['default'] ?? ''; +$pattern_image = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' ); ?> - -
+ +
- +
-

+

-

+

- +
diff --git a/src/Patterns/dictionary.json b/src/Patterns/dictionary.json index 16d2bf2bafa..c28d03d4b6b 100644 --- a/src/Patterns/dictionary.json +++ b/src/Patterns/dictionary.json @@ -256,6 +256,8 @@ { "name": "Just Arrived Full Hero", "slug": "woocommerce-blocks/just-arrived-full-hero", + "images_total": 1, + "images_format": "landscape", "content": { "titles": [ { From 117809ad97adb727f48b64b22326d5df9692a136 Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Fri, 6 Oct 2023 09:42:56 +0200 Subject: [PATCH 11/13] Add background dim --- patterns/just-arrived-full-hero.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/patterns/just-arrived-full-hero.php b/patterns/just-arrived-full-hero.php index dca1129f222..c746fa3b34d 100644 --- a/patterns/just-arrived-full-hero.php +++ b/patterns/just-arrived-full-hero.php @@ -14,10 +14,9 @@ $pattern_button = $content['buttons'][0]['default'] ?? ''; $pattern_image = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' ); ?> - - +
- +
From fd7b803857d14f6b1ef29ba73ccfa53788e96a86 Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Fri, 6 Oct 2023 09:57:19 +0200 Subject: [PATCH 12/13] Update dim to 30 --- patterns/just-arrived-full-hero.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/patterns/just-arrived-full-hero.php b/patterns/just-arrived-full-hero.php index c746fa3b34d..7ad1dc9ca14 100644 --- a/patterns/just-arrived-full-hero.php +++ b/patterns/just-arrived-full-hero.php @@ -14,9 +14,9 @@ $pattern_button = $content['buttons'][0]['default'] ?? ''; $pattern_image = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' ); ?> - +
- +
From 792f21d8f7510ff2c396324e77720bf671b946fd Mon Sep 17 00:00:00 2001 From: Patricia Hillebrandt Date: Fri, 6 Oct 2023 11:24:30 +0200 Subject: [PATCH 13/13] Update text for the main header. --- patterns/testimonials-3-columns.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/patterns/testimonials-3-columns.php b/patterns/testimonials-3-columns.php index 2424632d789..998ad7e3f42 100644 --- a/patterns/testimonials-3-columns.php +++ b/patterns/testimonials-3-columns.php @@ -20,7 +20,7 @@
-

+