✨ Add support for applying gradient to text

[Swanand01]

Summary

This PR adds support for applying gradient colors to text.

User-facing changes

The user can now select gradient based colors from the color picker in the Text style panel.

https://github.com/GoogleForCreators/web-stories-wp/assets/75439077/b9630a83-bf5d-4d37-920b-1068003e1b1c

Testing Instructions

This PR can be tested by following these steps:

1. Add a text element
2. Select the text element and go to the Style panel
3. Change the color to a gradient based one from the color picker in the Text section

🐛 Bugs

1. Fixed: ~~The color does not update on selecting a default color for a pre-existing text element.~~
2. The editor crashes on changing the color of a part of text.

🚧 WIP

1. ~~Add similar support to color picker in Design options toolbar~~
2. ~~Render output with text color.~~

Reviews

Does this PR have a security-related impact?

No.

Does this PR change what data or activity we track or use?

No.

Does this PR have a legal-related impact?

No.

Checklist

• [ ] This PR addresses an existing issue and I have linked this PR to it
• [ ] I have tested this code to the best of my abilities
• [ ] I have verified accessibility to the best of my abilities (docs)
• [ ] I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
• [ ] This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
• [ ] I have added documentation where necessary
• [ ] I have added a matching Type: XYZ label to the PR

---

Fixes #12143

[Swanand01]

Hi @swissspidy

I have currently used regex to convert the CSS property of a gradient color to the Gradient type.

The parseGradient function converts a string like linear-gradient(0turn, #30CFD0 0%, #330867 100%); into the corresponding Gradient Type:

https://github.com/GoogleForCreators/web-stories-wp/blob/5a6aa4857c8307b36db0a73478057102cc9bd5be/packages/patterns/src/getColorFromGradientStyle.ts#L63-L91

This function is then used in thestyleToColor function:

https://github.com/GoogleForCreators/web-stories-wp/blob/5a6aa4857c8307b36db0a73478057102cc9bd5be/packages/rich-text/src/formatters/gradientColor.ts#L41-L42

I was wondering if there is a more intuitive way to do the parsing, instead of using regex?

Thanks!

[swissspidy]

Great question!

Agreed that it would be good to find a more intuitive solution if possible, especially given the CodeQL warning above for one of the regex.

At first glance it looks like third-party packages such as https://www.npmjs.com/package/webskit-gradient-parser or https://www.npmjs.com/package/gradient-parser could be used for this. In my quick testing only the former seemed to be able to parse the linear-gradient(0turn, #30CFD0 0%, #330867 100%); example you shared.

Both haven't been updated in a while, but since our use case is limited to just linear & radial gradients, it might be good enough for us.

Question is whether such a package will significantly increase our bundle size or not.

[github-actions[bot]]

Size Change: +1 kB (0%)

Total Size: 2.77 MB

Filename	Size	Change
assets/js/web-stories-editor.js	1.46 MB	+1 kB (0%)

ℹ️ View Unchanged

Filename	Size
assets/css/web-stories-block-rtl.css	4.63 kB
assets/css/web-stories-block.css	4.66 kB
assets/css/web-stories-carousel-rtl.css	701 B
assets/css/web-stories-carousel.css	701 B
assets/css/web-stories-dashboard-rtl.css	657 B
assets/css/web-stories-dashboard.css	659 B
assets/css/web-stories-editor-rtl.css	769 B
assets/css/web-stories-editor.css	771 B
assets/css/web-stories-embed-rtl.css	653 B
assets/css/web-stories-embed.css	655 B
assets/css/web-stories-list-styles-rtl.css	2.42 kB
assets/css/web-stories-list-styles.css	2.45 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css	102 B
assets/css/web-stories-theme-style-twentyeleven.css	102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css	251 B
assets/css/web-stories-theme-style-twentyfifteen.css	251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css	287 B
assets/css/web-stories-theme-style-twentyfourteen.css	287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css	288 B
assets/css/web-stories-theme-style-twentyseventeen.css	288 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css	224 B
assets/css/web-stories-theme-style-twentysixteen.css	224 B
assets/css/web-stories-theme-style-twentyten-rtl.css	143 B
assets/css/web-stories-theme-style-twentyten.css	143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css	256 B
assets/css/web-stories-theme-style-twentytwelve.css	256 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css	86 B
assets/css/web-stories-theme-style-twentytwenty.css	86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css	326 B
assets/css/web-stories-theme-style-twentytwentyone.css	326 B
assets/css/web-stories-widget-rtl.css	456 B
assets/css/web-stories-widget.css	456 B
assets/js/2443.js	4.73 kB
assets/js/3244.js	97.5 kB
assets/js/3460.js	217 kB
assets/js/3669.js	38.2 kB
assets/js/3780.js	26.3 kB
assets/js/4422.js	49.1 kB
assets/js/649.js	8.13 kB
assets/js/7357.js	92 B
assets/js/7480.js	12.8 kB
assets/js/chunk-colorthief.js	2.62 kB
assets/js/chunk-ffmpeg.js	5.98 kB
assets/js/chunk-html-to-image.js	4.51 kB
assets/js/chunk-media-gallery.js	6.11 kB
assets/js/chunk-mediainfo.js	96 B
assets/js/chunk-opentype.js	96 B
assets/js/chunk-react-calendar.js	10.8 kB
assets/js/chunk-react-color.js	25.7 kB
assets/js/chunk-selfie-segmentation.js	16.3 kB
assets/js/chunk-web-stories-template-0-metaData.js	546 B
assets/js/chunk-web-stories-template-0.js	11 kB
assets/js/chunk-web-stories-template-1-metaData.js	540 B
assets/js/chunk-web-stories-template-1.js	9.27 kB
assets/js/chunk-web-stories-template-10-metaData.js	532 B
assets/js/chunk-web-stories-template-10.js	7.23 kB
assets/js/chunk-web-stories-template-11-metaData.js	539 B
assets/js/chunk-web-stories-template-11.js	8.87 kB
assets/js/chunk-web-stories-template-12-metaData.js	496 B
assets/js/chunk-web-stories-template-12.js	8.67 kB
assets/js/chunk-web-stories-template-13-metaData.js	525 B
assets/js/chunk-web-stories-template-13.js	6.9 kB
assets/js/chunk-web-stories-template-14-metaData.js	582 B
assets/js/chunk-web-stories-template-14.js	7.26 kB
assets/js/chunk-web-stories-template-15-metaData.js	544 B
assets/js/chunk-web-stories-template-15.js	8.77 kB
assets/js/chunk-web-stories-template-16-metaData.js	588 B
assets/js/chunk-web-stories-template-16.js	10.5 kB
assets/js/chunk-web-stories-template-17-metaData.js	540 B
assets/js/chunk-web-stories-template-17.js	9.05 kB
assets/js/chunk-web-stories-template-18-metaData.js	587 B
assets/js/chunk-web-stories-template-18.js	9.31 kB
assets/js/chunk-web-stories-template-19-metaData.js	501 B
assets/js/chunk-web-stories-template-19.js	9.17 kB
assets/js/chunk-web-stories-template-2-metaData.js	586 B
assets/js/chunk-web-stories-template-2.js	9.02 kB
assets/js/chunk-web-stories-template-20-metaData.js	548 B
assets/js/chunk-web-stories-template-20.js	8.72 kB
assets/js/chunk-web-stories-template-21-metaData.js	536 B
assets/js/chunk-web-stories-template-21.js	9.48 kB
assets/js/chunk-web-stories-template-22-metaData.js	525 B
assets/js/chunk-web-stories-template-22.js	7.44 kB
assets/js/chunk-web-stories-template-23-metaData.js	605 B
assets/js/chunk-web-stories-template-23.js	6.95 kB
assets/js/chunk-web-stories-template-24-metaData.js	517 B
assets/js/chunk-web-stories-template-24.js	11.2 kB
assets/js/chunk-web-stories-template-25-metaData.js	543 B
assets/js/chunk-web-stories-template-25.js	6.79 kB
assets/js/chunk-web-stories-template-26-metaData.js	600 B
assets/js/chunk-web-stories-template-26.js	6.97 kB
assets/js/chunk-web-stories-template-27-metaData.js	542 B
assets/js/chunk-web-stories-template-27.js	7.66 kB
assets/js/chunk-web-stories-template-28-metaData.js	532 B
assets/js/chunk-web-stories-template-28.js	8.76 kB
assets/js/chunk-web-stories-template-29-metaData.js	561 B
assets/js/chunk-web-stories-template-29.js	8.94 kB
assets/js/chunk-web-stories-template-3-metaData.js	539 B
assets/js/chunk-web-stories-template-3.js	8.24 kB
assets/js/chunk-web-stories-template-30-metaData.js	576 B
assets/js/chunk-web-stories-template-30.js	7.43 kB
assets/js/chunk-web-stories-template-31-metaData.js	503 B
assets/js/chunk-web-stories-template-31.js	9.93 kB
assets/js/chunk-web-stories-template-32-metaData.js	552 B
assets/js/chunk-web-stories-template-32.js	12.3 kB
assets/js/chunk-web-stories-template-33-metaData.js	491 B
assets/js/chunk-web-stories-template-33.js	8.9 kB
assets/js/chunk-web-stories-template-34-metaData.js	570 B
assets/js/chunk-web-stories-template-34.js	7.43 kB
assets/js/chunk-web-stories-template-35-metaData.js	565 B
assets/js/chunk-web-stories-template-35.js	8.7 kB
assets/js/chunk-web-stories-template-36-metaData.js	575 B
assets/js/chunk-web-stories-template-36.js	12.1 kB
assets/js/chunk-web-stories-template-37-metaData.js	529 B
assets/js/chunk-web-stories-template-37.js	6.13 kB
assets/js/chunk-web-stories-template-38-metaData.js	572 B
assets/js/chunk-web-stories-template-38.js	7.63 kB
assets/js/chunk-web-stories-template-39-metaData.js	589 B
assets/js/chunk-web-stories-template-39.js	7.79 kB
assets/js/chunk-web-stories-template-4-metaData.js	564 B
assets/js/chunk-web-stories-template-4.js	11.8 kB
assets/js/chunk-web-stories-template-40-metaData.js	556 B
assets/js/chunk-web-stories-template-40.js	9.85 kB
assets/js/chunk-web-stories-template-41-metaData.js	573 B
assets/js/chunk-web-stories-template-41.js	7.45 kB
assets/js/chunk-web-stories-template-42-metaData.js	521 B
assets/js/chunk-web-stories-template-42.js	6.82 kB
assets/js/chunk-web-stories-template-43-metaData.js	557 B
assets/js/chunk-web-stories-template-43.js	8.49 kB
assets/js/chunk-web-stories-template-44-metaData.js	583 B
assets/js/chunk-web-stories-template-44.js	10.8 kB
assets/js/chunk-web-stories-template-45-metaData.js	565 B
assets/js/chunk-web-stories-template-45.js	7.15 kB
assets/js/chunk-web-stories-template-46-metaData.js	531 B
assets/js/chunk-web-stories-template-46.js	5.1 kB
assets/js/chunk-web-stories-template-47-metaData.js	591 B
assets/js/chunk-web-stories-template-47.js	8.97 kB
assets/js/chunk-web-stories-template-48-metaData.js	556 B
assets/js/chunk-web-stories-template-48.js	8.78 kB
assets/js/chunk-web-stories-template-49-metaData.js	518 B
assets/js/chunk-web-stories-template-49.js	8.58 kB
assets/js/chunk-web-stories-template-5-metaData.js	556 B
assets/js/chunk-web-stories-template-5.js	9.53 kB
assets/js/chunk-web-stories-template-50-metaData.js	503 B
assets/js/chunk-web-stories-template-50.js	8.93 kB
assets/js/chunk-web-stories-template-51-metaData.js	526 B
assets/js/chunk-web-stories-template-51.js	10.1 kB
assets/js/chunk-web-stories-template-52-metaData.js	601 B
assets/js/chunk-web-stories-template-52.js	9.97 kB
assets/js/chunk-web-stories-template-53-metaData.js	551 B
assets/js/chunk-web-stories-template-53.js	5.65 kB
assets/js/chunk-web-stories-template-54-metaData.js	547 B
assets/js/chunk-web-stories-template-54.js	7.46 kB
assets/js/chunk-web-stories-template-55-metaData.js	574 B
assets/js/chunk-web-stories-template-55.js	6.95 kB
assets/js/chunk-web-stories-template-56-metaData.js	542 B
assets/js/chunk-web-stories-template-56.js	9.54 kB
assets/js/chunk-web-stories-template-57-metaData.js	528 B
assets/js/chunk-web-stories-template-57.js	14.5 kB
assets/js/chunk-web-stories-template-58-metaData.js	554 B
assets/js/chunk-web-stories-template-58.js	5.43 kB
assets/js/chunk-web-stories-template-59-metaData.js	590 B
assets/js/chunk-web-stories-template-59.js	8.73 kB
assets/js/chunk-web-stories-template-6-metaData.js	568 B
assets/js/chunk-web-stories-template-6.js	6.93 kB
assets/js/chunk-web-stories-template-60-metaData.js	509 B
assets/js/chunk-web-stories-template-60.js	8.94 kB
assets/js/chunk-web-stories-template-7-metaData.js	569 B
assets/js/chunk-web-stories-template-7.js	7.15 kB
assets/js/chunk-web-stories-template-8-metaData.js	569 B
assets/js/chunk-web-stories-template-8.js	8.34 kB
assets/js/chunk-web-stories-template-9-metaData.js	580 B
assets/js/chunk-web-stories-template-9.js	8.25 kB
assets/js/chunk-web-stories-templates.js	581 B
assets/js/chunk-web-stories-textset-0.js	4.59 kB
assets/js/chunk-web-stories-textset-1.js	5.61 kB
assets/js/chunk-web-stories-textset-2.js	6.83 kB
assets/js/chunk-web-stories-textset-3.js	12.8 kB
assets/js/chunk-web-stories-textset-4.js	3.91 kB
assets/js/chunk-web-stories-textset-5.js	5.27 kB
assets/js/chunk-web-stories-textset-6.js	4.99 kB
assets/js/chunk-web-stories-textset-7.js	8.9 kB
assets/js/generateBlurhash.worker.worker.js	1.1 kB
assets/js/web-stories-activation-notice.js	26 kB
assets/js/web-stories-block.js	27.7 kB
assets/js/web-stories-carousel.js	9.86 kB
assets/js/web-stories-dashboard.js	63.2 kB
assets/js/web-stories-embed.js	20 B
assets/js/web-stories-lightbox.js	7.34 kB
assets/js/web-stories-tinymce-button.js	9.75 kB
assets/js/web-stories-widget.js	559 B

_{compressed-size-action}

[googleforcreators-bot]

Plugin builds for 413b47de64b539f04710854c30ef52fc33eb53aa are ready :bellhop_bell:!

• Download development build
• Download production build

[swissspidy]

@Swanand01 I take it there was no suitable existing package for parsing gradients so we keep the regex?

[Swanand01]

@Swanand01 I take it there was no suitable existing package for parsing gradients so we keep the regex?

Yes, I tried both packages, but they weren't reliable enough, especially while parsing radial gradients. Instead, I found it easier to refine the regex we used, and it eliminated the CodeQL warning.