Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Featured Products: Fresh & Tasty pattern > Enhance mobile view and optimize images (https://github.com/woocommerce/woocommerce-blocks/pull/10521) 

* Update wrapping on mobile view

* Update styling for images and size.

* remove e2e-pw changes

* Remove font style.

* Remove custom styling from images.
This commit is contained in:
Patricia Hillebrandt 2023-08-10 16:33:31 +02:00 committed by GitHub
parent b90e0ffdc9
commit 75acbba85f
5 changed files with 51 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
plugins/woocommerce-blocks/images/pattern-placeholders/fresh-lettuce-washed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 464 KiB

After

Width:  |  Height:  |  Size: 75 KiB

BIN
plugins/woocommerce-blocks/images/pattern-placeholders/fresh-organic-tomatoes.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 256 KiB

After

Width:  |  Height:  |  Size: 67 KiB

BIN
plugins/woocommerce-blocks/images/pattern-placeholders/russet-organic-potatoes.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 347 KiB

After

Width:  |  Height:  |  Size: 102 KiB

BIN
plugins/woocommerce-blocks/images/pattern-placeholders/sweet-organic-lemons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 KiB

After

Width:  |  Height:  |  Size: 84 KiB

98
plugins/woocommerce-blocks/patterns/featured-products-fresh-and-tasty.php
View File

@ -9,28 +9,30 @@
<h3 class="wp-block-heading alignwide"><?php esc_html_e( 'Fresh &amp; tasty goods', 'woo-gutenberg-products-block' ); ?></h3>
<!-- /wp:heading -->
<!-- wp:columns {"align":"wide"} -->
<!-- wp:columns {"verticalAlignment":null,"align":"wide"} -->
<div class="wp-block-columns alignwide">
<!-- wp:column -->
<!-- wp:column {"style":{"layout":{"type":"constrained"}} -->
<div class="wp-block-column">
<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full">
<!-- wp:image {"align":"full","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-full">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/sweet-organic-lemons.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased as Sweet organic Lemons.', 'woo-gutenberg-products-block' ); ?>" />
</figure>
<!-- /wp:image -->
<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile">
<!-- wp:column {"width":"60%","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column" style="flex-basis:60%">
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0"},"margin":{"top":"5px","bottom":"0"}}}} -->
<div class="wp-block-columns" style="margin-top:5px;margin-bottom:0">
<!-- 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>
<!-- /wp:paragraph --></div>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"40%","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"right"}} -->
<div class="wp-block-column" style="flex-basis:40%">
<!-- wp:paragraph {"align":"right","fontSize":"small"} -->
<p class="has-text-align-right has-small-font-size"><?php esc_html_e( 'from $1.99', 'woo-gutenberg-products-block' ); ?></p>
<!-- wp:column {"width":"33%","layout":{"type":"constrained","justifyContent":"right"}} -->
<div class="wp-block-column" style="flex-basis:33%">
<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><?php esc_html_e( 'from $1.99', 'woo-gutenberg-products-block' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
@ -39,26 +41,28 @@
</div>
<!-- /wp:column -->
<!-- wp:column -->
<!-- wp:column {"style":{"layout":{"type":"constrained"}} -->
<div class="wp-block-column">
<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full">
<!-- wp:image {"align":"full","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-full">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/fresh-organic-tomatoes.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased as Fresh Organic Tomatoes.', 'woo-gutenberg-products-block' ); ?>" />
</figure>
<!-- /wp:image -->
<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile">
<!-- wp:column {"width":"60%","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column" style="flex-basis:60%">
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0"},"margin":{"top":"5px","bottom":"0"}}}} -->
<div class="wp-block-columns" style="margin-top:5px;margin-bottom:0">
<!-- 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>
<!-- /wp:paragraph --></div>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"40%","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"right"}} -->
<div class="wp-block-column" style="flex-basis:40%">
<!-- wp:paragraph {"align":"right","fontSize":"small"} -->
<p class="has-text-align-right has-small-font-size"><?php esc_html_e( 'from $2.99', 'woo-gutenberg-products-block' ); ?></p>
<!-- wp:column {"width":"33%","layout":{"type":"constrained","justifyContent":"right"}} -->
<div class="wp-block-column" style="flex-basis:33%">
<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><?php esc_html_e( 'from $2.99', 'woo-gutenberg-products-block' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
@ -67,28 +71,28 @@
</div>
<!-- /wp:column -->
<!-- wp:column -->
<!-- wp:column {"style":{"layout":{"type":"constrained"}} -->
<div class="wp-block-column">
<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full">
<!-- wp:image {"align":"full","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-full">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/fresh-lettuce-washed.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased as Fresh Lettuce Washed.', 'woo-gutenberg-products-block' ); ?>" />
</figure>
<!-- /wp:image -->
<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile">
<!-- wp:column {"width":"60%","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column" style="flex-basis:60%">
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0"},"margin":{"top":"5px","bottom":"0"}}}} -->
<div class="wp-block-columns" style="margin-top:5px;margin-bottom:0">
<!-- 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>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"40%","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"right"}} -->
<div class="wp-block-column" style="flex-basis:40%">
<!-- wp:paragraph {"align":"right","fontSize":"small"} -->
<p class="has-text-align-right has-small-font-size"><?php esc_html_e( 'from $0.99', 'woo-gutenberg-products-block' ); ?></p>
<!-- wp:column {"width":"33%","layout":{"type":"constrained","justifyContent":"right"}} -->
<div class="wp-block-column" style="flex-basis:33%">
<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><?php esc_html_e( 'from $0.99', 'woo-gutenberg-products-block' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
@ -97,28 +101,28 @@
</div>
<!-- /wp:column -->
<!-- wp:column -->
<!-- wp:column {"style":{"layout":{"type":"constrained"}} -->
<div class="wp-block-column">
<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full">
<!-- wp:image {"align":"full","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-full">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/russet-organic-potatoes.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased as Russet Organic Potatoes.', 'woo-gutenberg-products-block' ); ?>" />
</figure>
<!-- /wp:image -->
<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile">
<!-- wp:column {"width":"60%","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column" style="flex-basis:60%">
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0"},"margin":{"top":"5px","bottom":"0"}}}} -->
<div class="wp-block-columns" style="margin-top:5px;margin-bottom:0">
<!-- 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>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"40%","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained","justifyContent":"right"}} -->
<div class="wp-block-column" style="flex-basis:40%">
<!-- wp:paragraph {"align":"right","fontSize":"small"} -->
<p class="has-text-align-right has-small-font-size"><?php esc_html_e( 'from $1.49', 'woo-gutenberg-products-block' ); ?></p>
<!-- wp:column {"width":"33%","layout":{"type":"constrained","justifyContent":"right"}} -->
<div class="wp-block-column" style="flex-basis:33%">
<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><?php esc_html_e( 'from $1.49', 'woo-gutenberg-products-block' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->