Editor: Add support for applying gradient to text

packages/element-library/src/text/display.js

@@ -241,7 +241,6 @@ function TextDisplay({
     targetRef: bgRef,
     expectedStyle: 'background',
   });
-  useColorTransformHandler({ id, targetRef: fgRef, expectedStyle: 'color' });
   useColorTransformHandler({
     id,
     targetRef: refWithBorder,

packages/element-library/src/text/util.ts

@@ -108,9 +108,8 @@
   if (verticalPadding === 0) {
     return `${lineHeight}em`;
   }
-  return `calc(${lineHeight}em ${verticalPadding > 0 ? '+' : '-'} ${
-    2 * Math.abs(verticalPadding)
-  }${unit})`;
+  return `calc(${lineHeight}em ${verticalPadding > 0 ? '+' : '-'} ${2 * Math.abs(verticalPadding)
+    }${unit})`;
 };
 
 export function calcFontMetrics(element: TextElement) {

packages/patterns/src/getColorFromGradientStyle.ts

@@ -0,0 +1,126 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Internal dependencies
+ */
+import createSolidFromString from './createSolidFromString';
+import { PatternType, type Gradient, type Linear } from './types';
+
+const DEFAULT_GRADIENT: Linear = {
+  type: PatternType.Linear,
+  stops: [
+    {
+      color: {
+        r: 0,
+        g: 0,
+        b: 0,
+      },
+      position: 0,
+    },
+    {
+      color: {
+        r: 0,
+        g: 0,
+        b: 0,
+      },
+      position: 1,
+    },
+  ],
+};
+
+const GRADIENT = {
+  LINEAR: 'linear-gradient',
+  RADIAL: 'radial-gradient',
+};
+
+const REGEX = {
+  [GRADIENT.LINEAR]:
+    /linear-gradient\((?:-?\d*\.?\d+turn,\s*)?(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*(\d*\.?\d+)?\)|#([0-9a-fA-F]{6}))\s*0%,\s*(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*(\d*\.?\d+)?\)|#([0-9a-fA-F]{6}))\s*100%\)/,
+  [GRADIENT.RADIAL]:
+    /radial-gradient\((?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*(\d*\.?\d+)?\)|#([0-9a-fA-F]{6}))\s*0%,\s*(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*(\d*\.?\d+)?\)|#([0-9a-fA-F]{6}))\s*100%\)/,
+};
+
+export default function getColorFromGradientStyle(style: string): Gradient {
+  if (style.includes(GRADIENT.LINEAR)) {
+    return parseGradient(style, GRADIENT.LINEAR);
+  }
+  return parseGradient(style, GRADIENT.RADIAL);
+}
+
+function parseGradient(style: string, gradient: string): Gradient {
+  const regex = REGEX[gradient];
+  const matches = style.match(regex);
+  if (!matches) {
+    return DEFAULT_GRADIENT;
+  }
+
+  const { startColor, endColor } = getColorRange(matches);
+
+  if (gradient === GRADIENT.LINEAR) {
+    const rotationMatch = style.match(/-?\d*\.?\d+turn/);
+    return {
+      type: PatternType.Linear,
+      stops: [
+        { color: startColor, position: 0 },
+        { color: endColor, position: 1 },
+      ],
+      rotation: rotationMatch ? parseFloat(rotationMatch[0]) : 0,
+    };
+  }
+
+  return {
+    type: PatternType.Radial,
+    stops: [
+      { color: startColor, position: 0 },
+      { color: endColor, position: 1 },
+    ],
+  };
+}
+
+function getColorRange(matches: RegExpMatchArray) {
+  const [
+    ,
+    startColorR,
+    startColorG,
+    startColorB,
+    startAlpha,
+    startHex,
+    endColorR,
+    endColorG,
+    endColorB,
+    endAlpha,
+    endHex,
+  ] = matches;
+
+  const startColor = startHex
+    ? createSolidFromString(`#${startHex}`).color
+    : parseColor(startColorR, startColorG, startColorB, startAlpha);
+
+  const endColor = endHex
+    ? createSolidFromString(`#${endHex}`).color
+    : parseColor(endColorR, endColorG, endColorB, endAlpha);
+
+  return { startColor, endColor };
+}
+
+function parseColor(r: string, g: string, b: string, a: string) {
+  return {
+    r: parseInt(r),
+    g: parseInt(g),
+    b: parseInt(b),
+    a: a ? parseFloat(a) : undefined,
+  };
+}

packages/patterns/src/getGradientStyleFromColor.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Internal dependencies
+ */
+import generatePatternStyles from './generatePatternStyles';
+import type { Gradient } from './types';
+
+export default function getGradientStyleFromColor(color: Gradient) {
+  const gradient = generatePatternStyles(color);
+
+  return gradient.backgroundImage;
+}

packages/patterns/src/index.ts

@@ -30,3 +30,5 @@ export { default as hasGradient } from './hasGradient';
 export { default as hasOpacity } from './hasOpacity';
 export { default as isPatternEqual } from './isPatternEqual';
 export { default as isHexColorString } from './isHexColorString';
+export { default as getGradientStyleFromColor } from './getGradientStyleFromColor';
+export { default as getColorFromGradientStyle } from './getColorFromGradientStyle';

packages/rich-text/src/customConstants.ts

@@ -21,5 +21,6 @@ export const WEIGHT = 'CUSTOM-WEIGHT';
 export const COLOR = 'CUSTOM-COLOR';
 export const LETTERSPACING = 'CUSTOM-LETTERSPACING';
 export const UPPERCASE = 'CUSTOM-UPPERCASE';
+export const GRADIENT_COLOR = 'CUSTOM-GRADIENT-COLOR';
 
 export const MULTIPLE_VALUE = '((MULTIPLE))';

packages/rich-text/src/formatters/gradientColor.ts

@@ -0,0 +1,121 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import {
+  createSolid,
+  generatePatternStyles,
+  getGradientStyleFromColor,
+  isPatternEqual,
+  getColorFromGradientStyle,
+} from '@googleforcreators/patterns';
+import type { Gradient, Pattern } from '@googleforcreators/patterns';
+import type { EditorState, DraftInlineStyle } from 'draft-js';
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { NONE, MULTIPLE_VALUE, GRADIENT_COLOR } from '../customConstants';
+import {
+  togglePrefixStyle,
+  getPrefixStylesInSelection,
+} from '../styleManipulation';
+import { isStyle, getVariable } from './util';
+
+const styleToColor = (style: string): Gradient =>
+  getColorFromGradientStyle(getVariable(style, GRADIENT_COLOR));
+
+const colorToStyle = (color: Gradient): string =>
+  `${GRADIENT_COLOR}-${getGradientStyleFromColor(color)}`;
+
+function elementToStyle(element: HTMLElement): string | null {
+  const isSpan = element.tagName.toLowerCase() === 'span';
+  const rawBackground = element.style.background;
+  const hasBackground = Boolean(rawBackground);
+
+  if (isSpan && hasBackground) {
+    const gradient = getColorFromGradientStyle(rawBackground);
+    return colorToStyle(gradient);
+  }
+
+  return null;
+}
+
+function stylesToCSS(styles: DraftInlineStyle): null | CSSProperties {
+  const colorStyle = styles.find((someStyle) =>
+    isStyle(someStyle, GRADIENT_COLOR)
+  );
+
+  if (!colorStyle) {
+    return null;
+  }
+
+  let color: Pattern;
+  try {
+    color = styleToColor(colorStyle);
+  } catch (e) {
+    return null;
+  }
+
+  const css = generatePatternStyles(color);
+
+  return {
+    background: css.backgroundImage,
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+  };
+}
+
+function getColor(editorState: EditorState): Pattern | '((MULTIPLE))' {
+  const styles = getPrefixStylesInSelection(editorState, GRADIENT_COLOR);
+  if (styles.length > 1) {
+    return MULTIPLE_VALUE;
+  }
+  const colorStyle = styles[0];
+  if (colorStyle === NONE) {
+    return createSolid(0, 0, 0);
+  }
+  return styleToColor(colorStyle);
+}
+
+function setColor(editorState: EditorState, color: Gradient) {
+  const isBlack = isPatternEqual(createSolid(0, 0, 0), color);
+  const shouldSetStyle = () => !isBlack;
+  const getStyleToSet = () => colorToStyle(color);
+  return togglePrefixStyle(
+    editorState,
+    GRADIENT_COLOR,
+    shouldSetStyle,
+    getStyleToSet
+  );
+}
+
+const formatter = {
+  elementToStyle,
+  stylesToCSS,
+  autoFocus: false,
+  getters: {
+    gradientColor: getColor,
+  },
+  setters: {
+    setGradientColor: setColor,
+  },
+};
+
+export default formatter;

packages/rich-text/src/formatters/index.ts

@@ -22,6 +22,7 @@
 import italicFormatter from './italic';
 import underlineFormatter from './underline';
 import colorFormatter from './color';
+import gradientColorFormatter from './gradientColor';
 import letterSpacingFormatter from './letterSpacing';
 import uppercaseFormatter from './uppercase';
 
@@ -32,6 +33,7 @@
   colorFormatter,
   letterSpacingFormatter,
   uppercaseFormatter,
+  gradientColorFormatter
 ];
 
 export default formatters;

packages/story-editor/src/components/floatingMenu/elements/textColor.js

@@ -20,6 +20,7 @@
 import { __ } from '@googleforcreators/i18n';
 import { useCallback } from '@googleforcreators/react';
 import { trackEvent } from '@googleforcreators/tracking';
+import { hasGradient, createSolid } from '@googleforcreators/patterns';
 
 /**
  * Internal dependencies
@@ -51,22 +52,33 @@ function TextColor() {
     },
     [updateElementsById, selectedElementIds]
   );
+
+  const onColorChange = (color) => {
+    if (hasGradient(color)) {
+      handleSetColor(createSolid(0, 0, 0));
+      handleSetGradientColor(color);
+    } else {
+      handleSetGradientColor(createSolid(0, 0, 0));
+      handleSetColor(color);
+    }
+  };
+
   const {
-    textInfo: { color },
-    handlers: { handleSetColor },
+    textInfo: { color, gradientColor },
+    handlers: { handleSetColor, handleSetGradientColor },
   } = useRichTextFormatting([{ content, type: 'text' }], pushUpdate);
 
   return (
     <Color
       tabIndex={-1}
       label={__('Text color', 'web-stories')}
-      value={color}
       allowsSavedColors
-      onChange={handleSetColor}
+      value={hasGradient(gradientColor) ? gradientColor : color}
+      onChange={onColorChange}
       hasInputs={false}
       hasEyedropper
       allowsOpacity
-      allowsGradient={false}
+      allowsGradient
     />
   );
 }