Product Rating: Transition from using CSS margin to Global Styles #8202
Conversation
danieldudzic
added
the
type: enhancement
woocommercebot
requested review from
a team and
albarin
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: +18 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
|
@Aljullu I have noticed that (when testing with default themes) the "1" measure of margin seems to be a bit excessive visually:
I'd like to avoid us hardcoding anything in |
|
Hey @danieldudzic I'm seeing some weird behaviour while testing this, take a look at the video👇 seems like the align button on the toolbar is duplicating. CleanShot.2023-01-17.at.14.37.26.mp4 |
Really weird! Good catch. I'll look into it. |
What is the measurement unit of this If that's |
@albarin I'm struggling to replicate this. Do you see the same issue in |
Sorry @danieldudzic, not sure what happened yesterday while testing, but I just tried |
The scale can be defined via theme.json. Here are the defaults:
With In case of 2023 theme, it sets a custom scale, and |
|
@sunyatasattva We have discussed this, with @Aljullu and agreed that it's not the worst solution to set an arbitrary Regarding your suggestion:
What you are suggesting is setting a value for the Rating container that would affect the scale on the inner block level. Is that correct? I believe @nerrad suggested something similar regarding font sizes for Products patterns inner blocks, which would help with the responsiveness of sizes for various viewports. |
…ll Products block.
|
I have re-added CSS margins for the All Products block context, so as to not visually break it for existing instances of the All Products block. |
There was a problem hiding this comment.
Looks good to me, @danieldudzic! I tested several patterns and all of them seem to look good, I also tested the All Products block, PHP-based grid blocks and classic templates to make sure there are no regressions and all of them look good.
I just left a question below about a code snippet which I'm not sure to understand, but besides that, LGTM.
|
Failing tests seem to be unrelated to the committed code. I will go ahead and merge this. |
* Empty commit for release pull request * Update readme.txt * Bump “minimum_supported_wp_version” in phpcs.xml * Add testing notes * Update 950.md * Update 950.md * Update 950.md * Update 950.md * Update 950.md * Update 950.md * Update #8202 testing instructions. * Revert "Set inherit default to true only when is inserted in the archive product template (#8251)" (#8352) This reverts commit 39b0f91. * Update release ZIP file * Bumping version strings to new version. --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Niels Lange <info@nielslange.de> Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com> Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
As a part of #7954 I'm porting product elements to utilize Global Styles instead of CSS.
This PR moves the margin from CSS to Global Styles for the Product Rating element.
It also addresses the #8041 regression.
User Facing Testing
marginis displaying correctly (and is present in the Dimensions > Margin setting).marginis correct.WooCommerce Visibility
Performance Impact
Changelog