Make Notice component legible in dark themes
#8278
Conversation
The Notice component text is not legible in dark themes since the background color is light and and the text color is too. With this change we are setting the color always to black for our blocks, so it's always legible.
|
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. |
|
@Aljullu do you think this a good place to put styles affecting all blocks? |
|
Size Change: +130 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
@albarin maybe At the same time, I wonder if we should be more specific and only target notices inside our blocks. I don't think we have any generic class, but we could write the individual block class name: .wc-block-attribute-filter .components-notice__content,
.wc-block-store-notices .components-notice__content {
...
}Or maybe, even better, adding these styles directly in the block's What do you think? |
True.
I thought about that, but since I couldn't find that generic class for our blocks I didn't do it.
I think that a good option, the only thing I see with it and with the prev one is that it is not future-proof. We'll have the same problem every time we use again the Notice component, but maybe this is not that important, it's not something that we use very very frequently. 🤔 |
These are my concerns as well, but agree with you that we don't use notices in blocks very frequently, so IMO it should be ok to have this CSS snippet in each block that uses notices in the editor. |
|
@Aljullu I've reviewed one by one all the |
Weird, I don't understand why it was working for me, I've added them, and removed one file that I realised was not necessary. |
The Notice component text is not legible in dark themes since the background color is light and the text color is too. With this change, we are setting the color always to black for our blocks, so it's always legible.
Fixes #8265 (comment)
Screenshots
Testing
User-Facing Testing
Store Noticesblock.WooCommerce Visibility
Changelog