Editor: Add support for applying gradient to text #13590
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… `handleSetColor` on changing the color
Generate and apply textColor styles to `FillElement`
AnuragVasanwala
added
Type: Enhancement
…m/GoogleForCreators/web-stories-wp into feat/12143-apply-gradient-to-text
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Hi @swissspidy I have currently used regex to convert the CSS property of a gradient color to the The web-stories-wp/packages/patterns/src/getColorFromGradientStyle.ts Lines 63 to 91 in 5a6aa48 This function is then used in the web-stories-wp/packages/rich-text/src/formatters/gradientColor.ts Lines 41 to 42 in 5a6aa48 I was wondering if there is a more intuitive way to do the parsing, instead of using regex? Thanks! |
|
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 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. |
swissspidy
changed the title
swissspidy
changed the title
|
Size Change: +1 kB (0%) Total Size: 2.77 MB
ℹ️ View Unchanged
|
|
Plugin builds for 413b47d are ready 🛎️!
|
|
@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. |
swissspidy
reviewed
Mar 19, 2024
…m/GoogleForCreators/web-stories-wp into feat/12143-apply-gradient-to-text
swissspidy
approved these changes
Mar 21, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
Textstyle panel.text-gradient-updated.mov
Testing Instructions
This PR can be tested by following these steps:
StylepanelTextsection🐛 Bugs
The color does not update on selecting a default color for a pre-existing text element.The editor crashes on changing the color of a part of text.🚧 WIP
Add similar support to color picker in Design options toolbarRender 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
Type: XYZlabel to the PRFixes #12143