Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Ensure the content of the patterns is also AI-generated (#10997)
Browse files Browse the repository at this point in the history 
* Fix bug, it was always returning {'ai_content_generated':true} even in case of error

* Refactor PatternImages to extract static helper method to PatternImagesHelper and rename to PatternUpdater

* Fix use on patterns

* Update the pattern content using AI as well

* Make API requests in parallel

* Fix prompt and update patterns with generated content

* Return default content if patterns content is empty

* Fix patterns and failed responses

* Add timeout to the request multiple function

* Replace square by landscape

* Remove todo

* Return error on content update error

* Ensure the pattern content exists within the wc_blocks_patterns_content option: if it doesn't exist, fetch the default content from the default dictionary instead.

---------

Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
  • Loading branch information
@albarin @nefeline
albarin and nefeline authored Sep 25, 2023
1 parent 2837f4e commit e4e6e1e
Show file tree
Hide file tree
Showing 27 changed files with 447 additions and 318 deletions.
15 changes: 8 additions & 7 deletions patterns/banner.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,33 @@
* Categories: WooCommerce
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternImages;
$images = PatternImages::get_pattern_images( 'woocommerce-blocks/banner' );
use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/banner' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/banner' );
?>

<!-- wp:columns {"verticalAlignment":null,"align":"wide","style":{"color":{"background":"#caf0fa"}}} -->
<div class="wp-block-columns alignwide has-background" style="background-color:#caf0fa">
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column is-vertically-aligned-center" 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:paragraph {"style":{"color":{"text":"#005cc9"},"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<p class="has-text-color" style="color:#005cc9;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:18px"><strong>HOLIDAY SALE</strong> </p>
<p class="has-text-color" style="color:#005cc9;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:18px"><strong><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></strong> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"48px"},"color":{"text":"#043553"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<p class="has-text-color" style="color:#043553;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:48px"><strong>Save up to 60%</strong> </p>
<p class="has-text-color" style="color:#043553;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:48px"><strong><?php echo esc_html( $content['titles'][0]['default'] ); ?></strong> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"#075586"},"typography":{"fontSize":"24px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<p class="has-text-color" style="color:#075586;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:24px">Make the day special with our collection of discounted products.</p>
<p class="has-text-color" style="color:#075586;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:24px"><?php echo esc_html( $content['descriptions'][1]['default'] ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0","margin":{"top":"20px","bottom":"0"}}}} -->
<div class="wp-block-buttons" style="margin-top:20px;margin-bottom:0">
<!-- wp:button {"style":{"typography":{"fontSize":"16px"},"color":{"text":"#000000","background":"#ffffff"},"border":{"width":"0px","style":"none"}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px">
<a class="wp-block-button__link has-text-color has-background wp-element-button" href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">
Shop Holiday Sales
<?php echo esc_html( $content['buttons'][0]['default'] ); ?>
</a>
</div>
<!-- /wp:button -->
Expand All @@ -43,7 +44,7 @@
<div class="wp-block-column is-vertically-aligned-center">
<!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full">
<img src="<?php echo esc_url( PatternImages::get_image_url( $images, 0, 'images/pattern-placeholders/wood-home-wall-decoration-shelf-living-room.png' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a banner.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" />
<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/wood-home-wall-decoration-shelf-living-room.png' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a banner.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" />
</figure>
<!-- /wp:image -->
</div>
Expand Down
9 changes: 5 additions & 4 deletions patterns/discount-banner-with-image.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
* Categories: WooCommerce
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternImages;
$images = PatternImages::get_pattern_images( 'woocommerce-blocks/discount-banner-with-image' );
use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/discount-banner-with-image' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/discount-banner-with-image' );
?>

<!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"color":{"background":"#254094"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
Expand All @@ -24,7 +25,7 @@
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300","fontSize":"35px","lineHeight":"0"},"color":{"text":"#ffffff"},"spacing":{"margin":{"bottom":"40px"}}}} -->
<p class="has-text-color" style="color:#ffffff;margin-bottom:40px;font-size:35px;font-style:normal;font-weight:300;line-height:0">Select products</p>
<p class="has-text-color" style="color:#ffffff;margin-bottom:40px;font-size:35px;font-style:normal;font-weight:300;line-height:0"><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
Expand All @@ -43,7 +44,7 @@
<div class="wp-block-column is-vertically-aligned-center">
<!-- wp:image {"align":"center","sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"100px","topRight":"10px","bottomLeft":"10px","bottomRight":"100px"}}}} -->
<figure class="wp-block-image aligncenter size-full has-custom-border">
<img src="<?php echo esc_url( PatternImages::get_image_url( $images, 0, 'images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square-lg.png' ) ); ?>" alt="" style="border-top-left-radius:100px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:100px"/>
<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square-lg.png' ) ); ?>" alt="" style="border-top-left-radius:100px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:100px"/>
</figure>
<!-- /wp:image -->
</div>
Expand Down
6 changes: 5 additions & 1 deletion patterns/discount-banner.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
* Slug: woocommerce-blocks/discount-banner
* Categories: WooCommerce
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;

$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/discount-banner' );
?>

<!-- wp:columns {"verticalAlignment":"center"} -->
Expand All @@ -19,7 +23,7 @@
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300","fontSize":"35px"},"color":{"text":"#ffffff"}}} -->
<p class="has-text-color" style="color:#ffffff;font-size:35px;font-style:normal;font-weight:300">Select products</p>
<p class="has-text-color" style="color:#ffffff;font-size:35px;font-style:normal;font-weight:300"><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
Expand Down
9 changes: 5 additions & 4 deletions patterns/featured-category-focus.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,21 @@
* Categories: WooCommerce
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternImages;
$images = PatternImages::get_pattern_images( 'woocommerce-blocks/featured-category-focus' );
use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/featured-category-focus' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/featured-category-focus' );
?>

<!-- wp:group {"align":"full","style":{"color":{"background":"#84bfe1"},"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|70"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"wrap"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#84bfe1;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)">
<!-- wp:image {"id":1,"width":502,"height":335,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="<?php echo esc_url( PatternImages::get_image_url( $images, 0, 'images/pattern-placeholders/floor-home-decoration-fireplace-property-living-room.png' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" width="502" height="335"/>
<img src="<?php echo esc_url( PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/floor-home-decoration-fireplace-property-living-room.png' ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1" width="502" height="335"/>
</figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#000000"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#000000">Announcing our newest collection</p>
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#000000"><?php echo esc_html( $content['titles'][0]['default'] ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
Expand Down
17 changes: 9 additions & 8 deletions patterns/featured-category-triple.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@
* Categories: WooCommerce
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternImages;
$images = PatternImages::get_pattern_images( 'woocommerce-blocks/featured-category-triple' );
use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/featured-category-triple' );

$image1 = PatternImages::get_image_url( $images, 0, 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png' );
$image2 = PatternImages::get_image_url( $images, 1, 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png' );
$image3 = PatternImages::get_image_url( $images, 2, 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/featured-category-triple' );
$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/sweet-restaurant-celebration-food-chocolate-cupcake.png' );
$image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/dish-meal-food-breakfast-dessert-eat.png' );
$image3 = PatternsHelper::get_image_url( $images, 2, 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png' );
?>

<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"}}}} -->
Expand All @@ -23,7 +24,7 @@
<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 1 out of 3.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image1 ); ?>" data-object-fit="cover"/>
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><?php esc_html_e( 'Cupcakes', 'woo-gutenberg-products-block' ); ?></h4>
<h4 class="wp-block-heading"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
<p class="has-text-align-center has-link-color" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">
Expand All @@ -44,7 +45,7 @@
<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 2 out of 3.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image2 ); ?>" data-object-fit="cover"/>
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><?php esc_html_e( 'Sweet Danish', 'woo-gutenberg-products-block' ); ?></h4>
<h4 class="wp-block-heading"><?php echo esc_html( $content['titles'][1]['default'] ); ?></h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
<p class="has-text-align-center has-link-color" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">
Expand All @@ -65,7 +66,7 @@
<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 3 out of 3', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image3 ); ?>" data-object-fit="cover"/>
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><?php esc_html_e( 'Warm Bread', 'woo-gutenberg-products-block' ); ?></h4>
<h4 class="wp-block-heading"><?php echo esc_html( $content['titles'][2]['default'] ); ?></h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
<p class="has-text-align-center has-link-color" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">
Expand Down
5 changes: 4 additions & 1 deletion patterns/featured-products-5-cols.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@
* Categories: WooCommerce
* Block Types: core/query/woocommerce/product-query
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/featured-products-5-item-grid' );
?>
<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center">
<?php esc_html_e( 'Shop new arrivals', 'woo-gutenberg-products-block' ); ?>
<?php echo esc_html( $content['titles'][0]['default'] ); ?>
</h3>
<!-- /wp:heading -->

Expand Down
23 changes: 12 additions & 11 deletions patterns/featured-products-fresh-and-tasty.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,18 @@
* Categories: WooCommerce
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternImages;
$images = PatternImages::get_pattern_images( 'woocommerce-blocks/featured-products-fresh-and-tasty' );
use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/featured-products-fresh-and-tasty' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/featured-products-fresh-and-tasty' );

$image1 = PatternImages::get_image_url( $images, 0, 'images/pattern-placeholders/sweet-organic-lemons.png' );
$image2 = PatternImages::get_image_url( $images, 1, 'images/pattern-placeholders/fresh-organic-tomatoes.png' );
$image3 = PatternImages::get_image_url( $images, 2, 'images/pattern-placeholders/fresh-lettuce-washed.png' );
$image4 = PatternImages::get_image_url( $images, 3, 'images/pattern-placeholders/russet-organic-potatoes.png' );
$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/sweet-organic-lemons.png' );
$image2 = PatternsHelper::get_image_url( $images, 1, 'images/pattern-placeholders/fresh-organic-tomatoes.png' );
$image3 = PatternsHelper::get_image_url( $images, 2, 'images/pattern-placeholders/fresh-lettuce-washed.png' );
$image4 = PatternsHelper::get_image_url( $images, 3, 'images/pattern-placeholders/russet-organic-potatoes.png' );
?>

<!-- wp:heading {"level":3,"align":"wide"} -->
<h3 class="wp-block-heading alignwide"><?php esc_html_e( 'Fresh &amp; tasty goods', 'woo-gutenberg-products-block' ); ?></h3>
<h3 class="wp-block-heading alignwide"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h3>
<!-- /wp:heading -->

<!-- wp:columns {"verticalAlignment":null,"align":"wide"} -->
Expand All @@ -33,7 +34,7 @@
<!-- wp:column {"width":"67%","style":{"typography":{"fontWeight":"600"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column" style="font-weight:600;flex-basis:67%">
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><?php esc_html_e( 'Sweet Organic Lemons', 'woo-gutenberg-products-block' ); ?></p>
<p class="has-small-font-size"><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
Expand Down Expand Up @@ -63,7 +64,7 @@
<!-- wp:column {"width":"67%","style":{"typography":{"fontWeight":"600"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column" style="font-weight:600;flex-basis:67%">
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><?php esc_html_e( 'Fresh Organic Tomatoes', 'woo-gutenberg-products-block' ); ?></p>
<p class="has-small-font-size"><?php echo esc_html( $content['descriptions'][1]['default'] ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
Expand Down Expand Up @@ -93,7 +94,7 @@
<!-- wp:column {"width":"67%","style":{"typography":{"fontWeight":"600"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column" style="font-weight:600;flex-basis:67%">
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><?php esc_html_e( 'Fresh Lettuce (Washed)', 'woo-gutenberg-products-block' ); ?></p>
<p class="has-small-font-size"><?php echo esc_html( $content['descriptions'][2]['default'] ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
Expand Down Expand Up @@ -123,7 +124,7 @@
<!-- wp:column {"width":"67%","style":{"typography":{"fontWeight":"600"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column" style="font-weight:600;flex-basis:67%">
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><?php esc_html_e( 'Russet Organic Potatoes', 'woo-gutenberg-products-block' ); ?></p>
<p class="has-small-font-size"><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
Expand Down
Loading

0 comments on commit e4e6e1e

Please sign in to comment.