Hexadecimal colors in gradient presets break the block preview

[properlypurple]

Describe the bug
A clear and concise description of what the bug is.

To reproduce
Steps to reproduce the behavior:

1. Add this code for the gradient preset

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. Add a group block, and verify that the gradient option appears in the color settings
   

3. Click on the gradient you've added

4. See error
   

Error message from console.
error1.txt

Expected behavior
The gradient works.

Editor version (please complete the following information):

• WordPress version: 5.4.2
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? : gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? : 8.3.1

Desktop (please complete the following information):

• OS: Archlinux
• Browser Firefox
• Version 77.0.1

Additional Information
This is similar to #21831

[properlypurple]

The pull request #23363 has been merged, so this can be closed.