Add support for gradient colors

WordPress · Sep 1, 2020 · 408abde · 408abde
1 parent 26fef81
commit 408abde
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js
@@ -2,6 +2,7 @@
 export const FONT_SIZE = 'font-size';
 export const LINK_COLOR = '--wp--style--color--link';
 export const BACKGROUND_COLOR = 'background-color';
+export const GRADIENT_COLOR = 'background';
 export const TEXT_COLOR = 'color';
 export const LINE_HEIGHT = 'line-height';
 
@@ -13,6 +14,7 @@ export const STYLE_PROPS = {
 	[ LINE_HEIGHT ]: 'typography.lineHeight',
 	[ TEXT_COLOR ]: 'color.text',
 	[ BACKGROUND_COLOR ]: 'color.background',
+	[ GRADIENT_COLOR ]: 'color.gradient',
 	[ LINK_COLOR ]: 'color.link',
 };
 export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;

diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js
@@ -33,12 +33,15 @@ export default ( {
 		} );
 	}
 
-	// TODO: do gradients
+	// TODO: check for gradient support, etc
 	if ( supports.includes( BACKGROUND_COLOR ) ) {
 		settings.push( {
 			colorValue: getProperty( name, 'color', 'background' ),
 			onColorChange: ( value ) =>
 				setProperty( name, 'color', 'background', value ),
+			gradientValue: getProperty( name, 'color', 'gradient' ),
+			onGradientChange: ( value ) =>
+				setProperty( name, 'color', 'gradient', value ),
 			label: __( 'Background color' ),
 		} );
 	}