Separator: Custom gradients disappear

[bph]

Description

When changing the background on a separator block, using the solid colors or the presets choices on the Gradient tool, everything works. But as soon as a user tries to use the sliders in the Gradient tool to modify it, the separator block visually disappears from the Editor as well as the front end.

Step-by-step reproduction instructions

• Add a separator block to a post or page
• Change the background color using the gradient tool
• User the slider of the selected gradient to move gradient hues
• Save the post and view on front end.

Screenshots, screen recording, code snippet

In this video you can first see that the present gradient works. The when I try to change the colors it disappears.

https://github.com/WordPress/gutenberg/assets/39980/0b6bf771-3806-40c6-854e-61e32ec6dbc5

Environment info

WordPress 6.3-RC2 but I also was able to reproduce on WordPress 6.2.2 Twenty Twenty-Two theme.

Chrome 114.0.5735.248 Firefox Developer Edition: 116.0b7 MacOS 13.3.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

Noting that I can't get the gradient to show up at all (editor or front end) with 6.3.1 with or without GB 16.6 active:

https://github.com/WordPress/gutenberg/assets/26996883/334986e2-68e4-4334-8f78-a35512f90fdb

[justintadlock]

I can confirm that gradient presets are not working in the latest Gutenberg 16.6.

Here's a rough fix for gradient presets (haven't solved custom gradients yet) that I added in my theme stylesheet:

.wp-block-separator.has-background[class*=-gradient] {
    border: none;
    height: 2px;
}

[annezazu]

After a review by core editor triage leads and core editor tech leads, this has been removed from the board for 6.5 consideration.

[justintadlock]

Just revisiting this against WP 6.5/trunk and Gutenberg 17.7 RC1.

Custom gradients don't work at all because the gradient isn't applied to the block markup. The best way for theme authors to fix the UX for their users is to disable custom gradients for the Separator block in theme.json (assuming they have custom gradients enabled globally).

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "blocks": {
            "core/separator": {
                "color": {
                    "customGradient": false
                }
            }
        }
    }
}

Theme, default, and user-defined gradients, however, can work because the gradient class is applied to <hr> element. It just needs a bit of CSS:

.wp-block-separator.has-background[class*=-gradient] {
    border: none;
    height: 2px;
}

The height can be whatever you want.