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

Commit

Permalink
Add fallbacks to all the pattern titles, descriptions and buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@albarin
albarin committed Oct 11, 2023
1 parent b23e003 commit 6531f2f
Show file tree
Hide file tree
Showing 27 changed files with 204 additions and 97 deletions.
13 changes: 9 additions & 4 deletions patterns/banner.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,35 @@
use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/banner' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/banner' );

$banner_title = $content['titles'][0]['default'] ?? '';
$banner_button = $content['buttons'][0]['default'] ?? '';
$first_description = $content['descriptions'][0]['default'] ?? '';
$second_description = $content['descriptions'][1]['default'] ?? '';
?>

<!-- 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><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></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( $first_description ); ?></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><?php echo esc_html( $content['titles'][0]['default'] ); ?></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( $banner_title ); ?></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"><?php echo esc_html( $content['descriptions'][1]['default'] ); ?></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( $second_description ); ?></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">
<?php echo esc_html( $content['buttons'][0]['default'] ); ?>
<?php echo esc_html( $banner_button ); ?>
</a>
</div>
<!-- /wp:button -->
Expand Down
4 changes: 3 additions & 1 deletion patterns/discount-banner-with-image.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
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' );

$description = $content['descriptions'][0]['default'] ?? '';
?>

<!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"color":{"background":"#254094"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
Expand All @@ -25,7 +27,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"><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></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( $description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
Expand Down
5 changes: 3 additions & 2 deletions patterns/discount-banner.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@

use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;

$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/discount-banner' );
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/discount-banner' );
$description = $content['descriptions'][0]['default'] ?? '';
?>

<!-- wp:columns {"verticalAlignment":"center"} -->
Expand All @@ -23,7 +24,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"><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<p class="has-text-color" style="color:#ffffff;font-size:35px;font-style:normal;font-weight:300"><?php echo esc_html( $description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
Expand Down
10 changes: 7 additions & 3 deletions patterns/featured-category-cover-image.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,30 @@
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/featured-category-cover-image' );

$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/shop-jeans.png' );

$category_title = $content['titles'][0]['default'] ?? '';
$description = $content['descriptions'][0]['default'] ?? '';
$button = $content['buttons'][0]['default'] ?? '';
?>
<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","dimRatio":50,"align":"wide","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 alignwide" style="margin-top:0;margin-bottom:0;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">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h3>
<h3 class="wp-block-heading"><?php echo esc_html( $category_title ); ?></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<p><?php echo esc_html( $description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">
<!-- wp:button -->
<div class="wp-block-button">
<a href="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" class="wp-block-button__link wp-element-button">
<?php echo esc_html( $content['buttons'][0]['default'] ); ?>
<?php echo esc_html( $button ); ?>
</a>
</div>
<!-- /wp:button -->
Expand Down
4 changes: 3 additions & 1 deletion patterns/featured-category-focus.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
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' );

$category_title = $content['titles'][0]['default'] ?? '';
?>

<!-- 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"}} -->
Expand All @@ -19,7 +21,7 @@
<!-- /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"><?php echo esc_html( $content['titles'][0]['default'] ); ?></p>
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#000000"><?php echo esc_html( $category_title ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
Expand Down
10 changes: 7 additions & 3 deletions patterns/featured-category-triple.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
$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' );

$first_title = $content['titles'][0]['default'] ?? '';
$second_title = $content['titles'][1]['default'] ?? '';
$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"}}}} -->
Expand All @@ -24,7 +28,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 {"textAlign":"center","level":4} -->
<h4 class="wp-block-heading has-text-align-center"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h4>
<h4 class="wp-block-heading has-text-align-center"><?php echo esc_html( $first_title ); ?></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 @@ -45,7 +49,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 {"textAlign":"center","level":4} -->
<h4 class="wp-block-heading has-text-align-center "><?php echo esc_html( $content['titles'][1]['default'] ); ?></h4>
<h4 class="wp-block-heading has-text-align-center "><?php echo esc_html( $second_title ); ?></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 @@ -66,7 +70,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 {"textAlign":"center","level":4} -->
<h4 class="wp-block-heading has-text-align-center"><?php echo esc_html( $content['titles'][2]['default'] ); ?></h4>
<h4 class="wp-block-heading has-text-align-center"><?php echo esc_html( $third_title ); ?></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
13 changes: 9 additions & 4 deletions patterns/featured-products-fresh-and-tasty.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,15 @@
$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' );

$first_title = $content['titles'][0]['default'] ?? '';
$first_description = $content['descriptions'][0]['default'] ?? '';
$second_description = $content['descriptions'][1]['default'] ?? '';
$third_description = $content['descriptions'][2]['default'] ?? '';
?>

<!-- wp:heading {"level":3,"align":"wide"} -->
<h3 class="wp-block-heading alignwide"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h3>
<h3 class="wp-block-heading alignwide"><?php echo esc_html( $first_title ); ?></h3>
<!-- /wp:heading -->

<!-- wp:columns {"verticalAlignment":null,"align":"wide"} -->
Expand All @@ -34,7 +39,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 echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<p class="has-small-font-size"><?php echo esc_html( $first_description ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
Expand Down Expand Up @@ -64,7 +69,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 echo esc_html( $content['descriptions'][1]['default'] ); ?></p>
<p class="has-small-font-size"><?php echo esc_html( $second_description ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
Expand Down Expand Up @@ -94,7 +99,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 echo esc_html( $content['descriptions'][2]['default'] ); ?></p>
<p class="has-small-font-size"><?php echo esc_html( $third_description ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
Expand Down
32 changes: 22 additions & 10 deletions patterns/hero-product-3-split.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,18 @@
use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/hero-product-3-split' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/hero-product-3-split' );

$first_title = $content['titles'][0]['default'] ?? '';
$second_title = $content['titles'][1]['default'] ?? '';
$third_title = $content['titles'][2]['default'] ?? '';
$fourth_title = $content['titles'][3]['default'] ?? '';
$fifth_title = $content['titles'][4]['default'] ?? '';

$first_description = $content['descriptions'][0]['default'] ?? '';
$second_description = $content['descriptions'][1]['default'] ?? '';
$third_description = $content['descriptions'][2]['default'] ?? '';
$fourth_description = $content['descriptions'][3]['default'] ?? '';
$fifth_description = $content['descriptions'][4]['default'] ?? '';
?>

<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
Expand All @@ -20,11 +32,11 @@
<!-- wp:group {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="margin-top:20px;margin-bottom:20px;">
<!-- wp:heading -->
<h2 class="wp-block-heading"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h2>
<h2 class="wp-block-heading"><?php echo esc_html( $first_title ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<p><?php echo esc_html( $first_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
Expand All @@ -50,47 +62,47 @@
<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%">
<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $content['titles'][1]['default'] ); ?></strong></p>
<p><strong><?php echo esc_html( $second_title ); ?></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][1]['default'] ); ?></p>
<p><?php echo esc_html( $second_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $content['titles'][2]['default'] ); ?></strong></p>
<p><strong><?php echo esc_html( $third_title ); ?></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][2]['default'] ); ?></p>
<p><?php echo esc_html( $third_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $content['titles'][3]['default'] ); ?></strong></p>
<p><strong><?php echo esc_html( $fourth_title ); ?></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][3]['default'] ); ?></p>
<p><?php echo esc_html( $fourth_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $content['titles'][4]['default'] ); ?></strong></p>
<p><strong><?php echo esc_html( $fifth_title ); ?></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][4]['default'] ); ?></p>
<p><?php echo esc_html( $fifth_description ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
Expand Down
Loading

0 comments on commit 6531f2f

Please sign in to comment.