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

Fix product grid blocks markup & design inconsistencies #2428

Merged
merged 12 commits into from
Jun 2, 2020
Merged

Fix product grid blocks markup & design inconsistencies #2428

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
db751c5
Fix Sale badge markup discrepancy. Fixes #2107
Aljullu May 6, 2020
7d21e1c
Fix product link markup discrepancy
Aljullu May 6, 2020
f0ee93a
Use same class name for ratings markup in product grid blocks
Aljullu May 6, 2020
ca16c80
Remove editor specific class name for product title
Aljullu May 6, 2020
414ec99
Unify price layout between product grid blocks and All Products block
Aljullu May 6, 2020
a3be410
Change specificity raising classes to avoid editor class names
Aljullu May 6, 2020
91e47e4
Make small images fill the available width in product grid blocks
Aljullu May 6, 2020
ba70cb6
Avoid increasing selector specificity in the frontend
Aljullu May 19, 2020
ce60ab7
Undo AbstractProductGrid.php template changes
Aljullu May 28, 2020
d24df30
Do not remove .wc-block-grid__product-rating__stars from CSS
Aljullu May 28, 2020
297fe0c
Add theming docs
Aljullu May 28, 2020
8b63602
Merge branch 'master' into fix/2414-product-grid-inconsistencies
Aljullu Jun 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/js/atomic/components/product/price/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const ProductPrice = ( { className, product } ) => {
<div
className={ classnames(
className,
`${ layoutStyleClassPrefix }__product-price`
`${ layoutStyleClassPrefix }__product-price price`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious why price isn't it's own separate entry in classnames.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know! 😄 Should be fixed in the merge commit.

) }
>
<span
Expand All @@ -44,7 +44,7 @@ const ProductPrice = ( { className, product } ) => {
<div
className={ classnames(
className,
`${ layoutStyleClassPrefix }__product-price`
`${ layoutStyleClassPrefix }__product-price price`
) }
>
{ prices.regular_price !== prices.price && (
Expand Down
2 changes: 1 addition & 1 deletion assets/js/atomic/components/product/rating/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ProductRating = ( { className, product } ) => {
) }
>
<div
className={ `${ layoutStyleClassPrefix }__product-rating__stars` }
className={ `${ layoutStyleClassPrefix }__product-rating__stars star-rating` }
role="img"
aria-label={ ratingText }
>
Expand Down
26 changes: 6 additions & 20 deletions assets/js/base/components/product-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,7 @@
}

// Extra specificity to avoid editor styles on linked images.
.entry-content .wc-block-grid__product-image,
.wc-block-grid__product-image {
.wc-block-grid__products .wc-block-grid__product-image {
text-decoration: none;
display: block;
position: relative;
Expand All @@ -69,8 +68,7 @@
box-shadow: none;
}

.wc-block-grid__product-image__image {
vertical-align: middle;
img {
width: 100%;

&[hidden] {
Expand All @@ -88,6 +86,7 @@
.edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title,
.editor-styles-wrapper .wc-block-grid__product-title,
.wc-block-grid__product-title {
font-family: inherit;
line-height: 1.2em;
font-weight: 700;
padding: 0;
Expand All @@ -106,23 +105,9 @@
.wc-block-grid__product-price {
display: block;

.wc-block-grid__product-price__regular {
font-size: 0.8em;
line-height: 1;
color: #555;
margin-top: -0.25em;
display: block;
}
.wc-block-grid__product-price__value {
letter-spacing: -1px;
font-weight: 600;
display: block;
font-size: 1.25em;
line-height: 1.25;
color: #000;
span {
white-space: nowrap;
}
margin-left: 0.5em;

.is-loading &::before {
@include placeholder();
content: ".";
Expand Down Expand Up @@ -232,6 +217,7 @@
position: relative;
margin: $gap-smaller auto;
}

.editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image,
.wc-block-grid__product-image {
.wc-block-grid__product-onsale {
Expand Down
5 changes: 5 additions & 0 deletions docs/theming/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Theming WooCommerce Blocks

This page includes all documentation regarding WooCommerce Blocks and themes.

- [Product grid blocks style update in 2.7.0](./product-grid-270.md)
39 changes: 39 additions & 0 deletions docs/theming/product-grid-270.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# Product grid blocks style update in 2.7.0

In WC Blocks 2.7.0, some of the styles of the product grid blocks were updated to make the experience more consistent. Below, there are CSS code snippets that can undo those changes.

## Product images

Images in product grid blocks changed so they expand to occupy all the available horizontal space if they are small. This can be undone with this CSS snippet:

```CSS
.wc-block-grid__products .wc-block-grid__product-image img {
width: auto;
}
```

## All Products prices

_All Products_ block was updated so prices follow the same layout as the other product grid blocks (one line instead of two lines). It's possible to recover the old style with:

```CSS
.wc-block-grid__product-price .wc-block-grid__product-price__regular {
font-size: 0.8em;
line-height: 1;
color: #555;
margin-top: -0.25em;
display: block;
}
.wc-block-grid__product-price .wc-block-grid__product-price__value {
letter-spacing: -1px;
font-weight: 600;
display: block;
font-size: 1.25em;
line-height: 1.25;
color: #000;
margin-left: 0;
}
.wc-block-grid__product-price .wc-block-grid__product-price__value span {
white-space: nowrap;
}
```
6 changes: 3 additions & 3 deletions src/BlockTypes/AbstractProductGrid.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,10 +427,10 @@ protected function get_sale_badge_html( $product ) {
return;
}

return '<span class="wc-block-grid__product-onsale">
<span aria-hidden="true">' . esc_html__( 'Sale!', 'woo-gutenberg-products-block' ) . '</span>
return '<div class="wc-block-grid__product-onsale">
<span aria-hidden="true">' . esc_html__( 'Sale', 'woo-gutenberg-products-block' ) . '</span>
<span class="screen-reader-text">' . esc_html__( 'Product on sale', 'woo-gutenberg-products-block' ) . '</span>
</span>';
</div>';
}

/**
Expand Down