This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Add rounded borders to product images on TT4 #11447
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
TT4 uses a rounded-borders aesthetic throughout. In order to better fit into the default experience of the theme, we include this aesthetic as a default on our images. Note that we are not adding rounded borders where they couldn't be overridden by the user (e.g. “All Products” block).
|
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: +462 B (0%) Total Size: 1.53 MB
ℹ️ View Unchanged
|
The previous commit mentions that TT4 border-radius is not applied on blocks over which the users have no control on purpose. The intention was to not cause any frustration to the user. However, after testing, I thought it'd be better to actually do the opposite: it'd be frustrating for the user to be unable to apply the radius that is the default everywhere else and, after all, the user has chosen a theme for a certain aesthetic.
sunyatasattva
added
focus: global styles
woocommercebot
requested review from
a team and
roykho
and removed request for
a team
nerrad
suggested changes
Oct 27, 2023
There was a problem hiding this comment.
Any theme-specific CSS should not go in the block files but instead into a dedicated CSS file in WooCommerce core (see examples for other themes here). I think @xristos3490 might be doing some relevant work for that as well so it'd be good to co-ordinate with him in case he's already created a PR adding a tt4 specific CSS file.
Outside of that, I wonder if we should even be adding these specific styles. Ideally, this kind of design element in the block itself would adapt to whatever borders themes set on images (i.e. this should not be tied to a specific theme, but rather the design tokens set in the theme.json).
|
Hey @nerrad ! Thank you for the insight about design tokens. I'm not fully sure on how we should implement them, however: the example you provided is about a Re: the theme-specific styles, I wholeheartedly agree and meant to open a GitHub discussion on where to put them. As it currently stands, however, there are many examples of that in our repo, so we might want to refactor them out (you can have a search for |
Even there though, you'd need to account for user styles that might override
Yeah, that's unfortunate, I don't think we should refactor all the older ones out, but let's make sure TT4 adjustments are in Woo core only. |
I'll close this PR for now, then. Just wanted to briefly mention that user styles (if you mean styles added through Inspector Controls) do indeed override these CSS rules, and it was one of the testing steps in the description. I'll align with Chris on how to proceed with this :) |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
This PR adds rounded borders as default to product images in the context of the TT4 theme.
Fixes woocommerce/woocommerce#42173
Why
We want to ship with the best possible TT4 default experience: TT4 uses a rounded-borders aesthetic throughout. In order to better fit into the default experience of the theme, we include this aesthetic as a default on our images.
Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Screenshots or screencast
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog