Product rating: improve preview style when the product doesn't have rating #9684
Conversation
gigitux
added
type: enhancement
woocommercebot
requested review from
a team and
roykho
and removed request for
a team
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
|
Size Change: +625 B (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
|
On my end, I don't see the icon next to the |
|
I see it. Could you try to start with a clean build? |
| left: 0; | ||
| right: 0; | ||
| position: absolute; | ||
| color: transparent; |
There was a problem hiding this comment.
So the star wasn't showing for me is because of this line. I think you probably want to use opacity?
There was a problem hiding this comment.
Which browser are you using? I guess that this issue is this line.
There was a problem hiding this comment.
I tested with Firefox and Chrome and I'm not able to replicate it:
| Firefox | Chrome |
|---|---|
 |
 |
| `${ parentClassName }__product-rating__norating-container` | ||
| ) } | ||
| > | ||
| <div |
There was a problem hiding this comment.
Do we need to have divs within divs to achieve this? I feel like we can just have one div and have the two spans next to each other?
There was a problem hiding this comment.
I preferred this approach to put easily on the same line height.
There was a problem hiding this comment.
You should still be able to achieve same line height with two spans within a div. Did you try using flex on the parent container?
There was a problem hiding this comment.
wc-block-components-product-rating__norating div, we applied the custom font to render the start. Adding flex to the parent container could influence the other cases. Keep in mind that this is just a temporary solution.
gigitux
added
the
status: blocker
There was a problem hiding this comment.
This works as expected!
My concern is that the preview on the editor side is different from the frontend result.
I feel similar and TBH I think we could show the same content (⭐ No Reviews) in the frontend - it looks nice and makes the layout consistent, so the rating section keeps the same height.
I found one bug, but not related to this PR: all the rating in the reviews section shows the average rating (not reproducible in WC Core).
| <div | ||
| className={ classnames( | ||
| 'wc-block-components-product-rating__norating-container', | ||
| `${ parentClassName }__product-rating__norating-container` |
There was a problem hiding this comment.
I'm not sure that I followed the BEM convention correctly. Please, double-check it!
BEM convention allows only one element nesting, so according to it, this structure: block__element__element is not recommended (e.g. https://scalablecss.com/bem-nesting-grandchild-elements/).
I don't know the exact purpose of the class in here, but to my best knowledge it should be:
| `${ parentClassName }__product-rating__norating-container` | |
| `${ parentClassName }-product-rating__norating-container` |
There was a problem hiding this comment.
Thanks for the suggestion!
…ocks into 9666-product-rating-block-show-no-reviews-label-rather-than-empty-starts-when-product-has-no-reviews
@roykho, could you check again if you can't see it? My suggestion is to try in incognito mode. Maybe you have some extensions that create a conflict? |
|
Ok I found out that is is theme related. If you try |
Oh, nice! I changed the variable. In this way, the border of the star will use the same color of the text 58350ae
Nice catch! Fixed with d622b94 |
|
With the latest changes, now the icon is not showing in Twenty Twenty Three theme (shows in Tsubaki). Also I think I missed it earlier but the left side of the icon is cut off as well: |
Sorry, a lot for this back and forth 😞. Block themes use different CSS variables. Since this is just a temporary solution and will not be visible on the frontend I used the Also, I centered the star, so it should not be cut anymore. |
gigitux
deleted the
9666-product-rating-block-show-no-reviews-label-rather-than-empty-starts-when-product-has-no-reviews
branch
…ating (#9684) * product rating: improve preview style when no rating is visible * fix class naming * fix cutted star * change variable * fix cut border
This PR addresses the feedback raised here.
I'm not sure that I followed the BEM convention correctly. Please, double-check it!
My concern is that the preview on the editor side is different from the frontend result. What do you think, @shaunandrews?
Fixes #9666
Screenshots
Testing
User Facing Testing
WooCommerce Visibility