Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Featured Item: Fix colors from default palette not being applied (https://github.com/woocommerce/woocommerce-blocks/pull/6525) 

Gutenberg uses two different attributes for text colors:

* `style.color.text`, and
* `textColor`

However, the second one is used only when a color from the default
palette is selected AND the post is saved and reloaded.

With this fix we use the human readable string from the default palette
as a CSS variable.

Please note that while Gutenberg correctly assigns the appropriate CSS
class to render the right color, the problem is that if the color is
handled by a class, it can be overridden for example by themes.

See woocommerce/woocommerce-blocks#6492
This commit is contained in:
Lucio Giannotta 2022-06-07 10:44:45 +02:00 committed by GitHub
parent 96b9cbf0c6
commit 7531428b31
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-blocks/assets/js/blocks/featured-items/with-featured-item.tsx
View File

@ -76,6 +76,7 @@ interface FeaturedItemRequiredProps< T > {
border?: { radius?: number }; border?: { radius?: number };
color?: { text?: string }; color?: { text?: string };
}; };
textColor?: string;
}; };
isLoading: boolean; isLoading: boolean;
setAttributes: ( attrs: Partial< FeaturedItemRequiredAttributes > ) => void; setAttributes: ( attrs: Partial< FeaturedItemRequiredAttributes > ) => void;
@ -170,6 +171,7 @@ export const withFeaturedItem = ( {
showDesc, showDesc,
showPrice, showPrice,
style, style,
textColor,
} = attributes; } = attributes;
const classes = classnames( const classes = classnames(
@ -190,7 +192,9 @@ export const withFeaturedItem = ( {
const containerStyle = { const containerStyle = {
borderRadius: style?.border?.radius, borderRadius: style?.border?.radius,
color: style?.color?.text, color: textColor
? `var(--wp--preset--color--${ textColor })`
: style?.color?.text,
}; };
const wrapperStyle = { const wrapperStyle = {