Add support for named orientations and literal colors on custom gradi…

…ents (#22239)
WordPress · May 18, 2020 · 92672bd · 92672bd
1 parent 85bd059
commit 92672bd
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/packages/components/src/custom-gradient-picker/serializer.js b/packages/components/src/custom-gradient-picker/serializer.js
@@ -4,6 +4,9 @@
 import { compact, get } from 'lodash';
 
 export function serializeGradientColor( { type, value } ) {
+	if ( type === 'literal' ) {
+		return value;
+	}
 	return `${ type }(${ value.join( ',' ) })`;
 }
 

diff --git a/packages/components/src/custom-gradient-picker/utils.js b/packages/components/src/custom-gradient-picker/utils.js
@@ -240,6 +240,21 @@ export function getLinearGradientRepresentationOfARadial( gradientAST ) {
 	} );
 }
 
+const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
+	top: 0,
+	'top right': 45,
+	'right top': 45,
+	right: 90,
+	'right bottom': 135,
+	'bottom right': 135,
+	bottom: 180,
+	'bottom left': 225,
+	'left bottom': 225,
+	left: 270,
+	'top left': 315,
+	'left top': 315,
+};
+
 export function getGradientParsed( value ) {
 	let hasGradient = !! value;
 	// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
@@ -255,6 +270,15 @@ export function getGradientParsed( value ) {
 		gradientValue = DEFAULT_GRADIENT;
 	}
 
+	if (
+		gradientAST.orientation &&
+		gradientAST.orientation.type === 'directional'
+	) {
+		gradientAST.orientation.type = 'angular';
+		gradientAST.orientation.value = DIRECTIONAL_ORIENTATION_ANGLE_MAP[
+			gradientAST.orientation.value
+		].toString();
+	}
 	return {
 		hasGradient,
 		gradientAST,