Add support for hexadecimal colors in gradient presets

[properlypurple]

Description

This PR makes sure that the custom gradient picker is able to parse colors in the hexadecimal format.

How has this been tested?

1. Added this code to theme

add_theme_support( 
  'editor-gradient-presets', 
  array(
    array(
      'name'     => __( 'Hex gradient', 'themeslug'  ),
      'gradient' => 'linear-gradient(to bottom, #000000 50%, #123456 100%)',
      'slug'     => 'hex-gradient'
    )
  )
);

2. Set above described gradient background for a group block.
3. Success

This fixes the bug #23361

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[kjellr]

This works on my end. 👍

If we can get those tests to pass I think it's good to go.

Before:

After:

[jffng]

cc @jorgefilipecosta as the author of #22239.

[jffng]

I also have verified that this fixes the issue.

There is still some strangeness between the custom gradient control point picker when one of these presets is selected, but it seems unrelated:

[kjellr]

There is still some strangeness between the custom gradient control point picker when one of these presets is selected, but it seems unrelated

Hmm, interesting — I hadn't seen that. @youknowriad can you provide a gut check on that too (or do you know who else might able to since Jorge is away at the moment)?

[youknowriad]

I think this is probably just half of the story :)

While now they don't break which is cool, editing them is not possible. As soon as you touch the custom picker, it resets the gradient. Not sure yet what's missing there though.

[kjellr]

😄 Ok. Do you think this is ok to merge in the meantime then? And we can file another issue for the custom picker?

[youknowriad]

Yes, but let's file an issue to track this :)

[properlypurple]

I have done some more testing, and it looks like there are a few issues here

1. The control doesn't normalize the gradient direction to horizontal, when in the slider
2. Colors for angular gradients aren't picked up properly by the control even when the colors are rgb() or rgba().
3. Gradients need explicit stops, so something like this won't work

'gradient' => 'linear-gradient(to top left, ' . $gradient_color_a . ', ' . $gradient_color_b . ' )',

I'm doing some more testing to see if i can find more edge cases, and I'll file individual bugs for these.

[kjellr]

Thank you, @properlypurple! I'll merge this in the meantime. Thanks for the PR and for all the investigation!

[github-actions]

Congratulations on your first merged pull request, @properlypurple! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[jorgefilipecosta]

😄 Ok. Do you think this is ok to merge in the meantime then? And we can file another issue for the custom picker?

Hi @kjellr, I guess I can try to work on this issue if it still happens. Was an issue created so I can reference it and check the status of the task or we did not create and in that case I guess I can directly open a PR?

[kjellr]

Was an issue created so I can reference it and check the status of the task or we did not create and in that case I guess I can directly open a PR?

Hi @jorgefilipecosta! Yes, @properlypurple created followup issues in #23501 and #23503.