Number Box > Typography - When setting a gradient text color, the gradient applies on the shape and the text becomes invisible - Githubissues

gambitph / Stackable

Page Builder Blocks for WordPress. An Amazing Block Library for the new WordPress Block Editor (Gutenberg).

https://wpstackable.com

GNU General Public License v3.0

326 stars 62 forks source link

Number Box > Typography - When setting a gradient text color, the gradient applies on the shape and the text becomes invisible #3307

Open andeng1106 opened 1 month ago

andeng1106 commented 1 month ago

Describe the bug

Issue on both editor and frontend
Issue happens if Shape is toggled on

To Reproduce Steps to reproduce the behavior:

Add a new page
Add a Number Box block
Make sure Shape panel is toggled on
Type any character in the number box
Change Text Color to a gradient color
See that the text becomes invisible
Save page and view frontend
Repeat step 6

Expected behavior

When adding a gradient text color:
- Text color should apply to the number box text content and not in the shape
- Text content should not become invisible or transparent

Screenshots

https://github.com/user-attachments/assets/db92cabc-00e6-4cc7-9699-818965d6e7f5

Desktop:

OS: MacOS
Browser: Chrome, Firefox, Safari
Browser Version: 128.0.6613.120, 130.0, 17.6