Post Edit block invisible when using textColor: white and a default gradient

[bobbingwide]

Post Edit block invisible on the front end when using textColor: white and a default gradient.

The following source can lead to the display of an invisible block. The gradient is not being rendered.

<!-- wp:oik-sb/sb-post-edit-block {"textColor":"white","gradient":"vivid-cyan-blue-to-vivid-purple"} /-->

This is strange because the gradient works for the the UK tides block!
Here's an example with the gradient set to Light green cyan to vivid green cyan for the first UK Tides block and the Post Edit block.

In the front end gradient is not being applied to the Post Edit block.

The generated outer div for the UK tides block is

<div class="has-text-color has-dark-gray-color has-background has-light-green-cyan-to-vivid-green-cyan-gradient-background wp-block-uk-tides-uk-tides has-medium-font-size">
rest of block output goes here
</div>

For the Post Edit block it's

<div class="wp-elements-60fd966435b20 wp-elements-60fd966435afa wp-block-oik-sb-sb-post-edit-block">
rest of block output goes here
</div>

[bobbingwide]

The value of settings.color in the block.json file for the UK tides block is

 "color": {
          "gradients": true,
         "text": true,
         "background": true,
          "link": true
        },

For the Post Edit block I'd changed the settings from

"color": {
	  "gradients": true,
	  "link": true
	},

to the shortcut "color": true which enables background and text; gradients and link are disabled.

But I hadn't rebuilt the JavaScript, so in the editor the block still supported gradient and link.

I believe this explains the problem.

Solution

For the Post Edit block settings.color should be as for the UK tides block.

[bobbingwide]

That's better.

[bobbingwide]

But...

You can actually see the top left corner of the gradient on the green one.
So, it doesn't matter if Link color is supported or not.
It's the SSR logic that's causing the gradient to be applied twice.

[bobbingwide]

It's the SSR logic that's causing the gradient to be applied twice.

I'd added this logic either to be able to style the Link using the Text colour, or to attempt to set the background of the Link not the outer div.

$extra_attributes['href'] = esc_url( $url );
$link_wrapper_attributes = get_block_wrapper_attributes( $extra_attributes );	

Either way, it doesn't quite work. It sets the class for the background gradient on the <a> tag as well as on the outer <div>.
Removing this logic works when the Link color is settable.

[bobbingwide]

In the Editor the block doesn't need the Text color settings.