Seedlet: selecting stripe gradient for group blocks crashes the block.

[kavyagokul]

Steps to replicate

1. Create or edit a post/page
2. Insert a Group block
3. In the block settings, go to Color settings, and choose Gradient under 'Background color'
4. Select one of the "stripe" gradient options (see gif)

Result

Error message

This block has encountered an error and cannot be previewed.

Error messages from browser console in text file
error.txt

Expected

Stripe gradient background is set.

[kjellr]

👋 Thanks for the report! What version of Gutenberg are you running? This was an issue, but it should be fixed as of Gutenberg v8.2.

[kavyagokul]

Some tinkering suggests that using hexadecimal colors in gradients is not supported by Gutenberg. That PR linked above only fixes literal color names. I've tested with Gutenberg 8.2.1, 8.3, and 8.4.0-rc.1(git master) on a local wp-env environment, as well as the latest available version on WordPress.com simple and Atomic sites. I'm able to consistently reproduce this behaviour.

If I change the default values for the theme colors in functions.php from hex to rgb or rgba, it works fine.

A potential fix would be to change the colors to rgb in the theme, or fix the issue in the editor here
https://github.com/WordPress/gutenberg/blob/92672bd469abc8d189517212b79ae80d5fee2ffd/packages/components/src/custom-gradient-picker/serializer.js#L10

[kjellr]

Hmm — that's odd. All of our bundled gradients use hex values.

It appears that all of the gradients work except for ones with hard horizontal stripes. Can you confirm that too?

[kavyagokul]

Yes, only the hard horizontal ones are causing the issue.

[kavyagokul]

I tested this with a fresh gutenberg-starter-theme, and I could reproduce the issue there. I have filed a bug
WordPress/gutenberg#23361

[kjellr]

Thank you! 🙌

[kjellr]

I'll close this issue for now, since the problem lies upstream in Gutenberg. 👍

[kavyagokul]

Just to confirm, this will block the release of this theme on WP.com until the editor bug is resolved and released. That might take some time. 🤔

[kjellr]

The PR for this is already approved, so I think it should land soon. We don't expect Seedlet to be live for all users on .com for at least a few weeks. With that in mind, I don't think it makes sense to rewrite things on our end.

cc @jffng for a second opinion though.

[jffng]

Yep refactoring to rgb is not a great solution for us. Thanks @kavyagokul for highlighting this issue and working up the PR!