PanelColorSettings: Make it easier to select 'Transparent' as a color option

[danielbachhuber]

What problem does this address?

At WordPress.com, we’ve implemented a Timeline Block that includes a default background color: https://github.com/Automattic/wp-calypso/blob/17256c5b7b410d332188f1a13c4b3055c1ea9de0/apps/editing-toolkit/editing-toolkit-plugin/jetpack-timeline/blocks/src/timeline-item.js#L135

A user can select a new background color for their Timeline Entry. However, when they deselect their color, they're returned to the default background color:

It's not possible for them to clear the default background color entirely. Ideally, they'd be able to select 'Transparent' as a color option.

What is your proposed solution?

While it's possible to achieve transparency with enableAlpha, it's not obvious.

I'd love some form of button that makes it one-click to apply transparent as a color.

Some relevant conversation in Automattic/wp-calypso#65266 (comment)

[annezazu]

@ramonjd based on your previous work implementing the transparency option #37731 do you have any insights you can share here?

[ramonjd]

However, when they deselect their color, they're returned to the default background color:

I've tried to replicate this behaviour using PanelColorSettings on trunk but I haven't managed it.

I'm wondering if it's something to do with this line?

setAttributes( { background: background || DEFAULT_BACKGROUND } )

Ideally, they'd be able to select 'Transparent' as a color option.

PanelColorSettings uses PanelColorGradientSettings, which supports the enableAlpha prop.

Have you tried this?

<PanelColorSettings
    ...
    enableAlpha={ enableAlpha }
/>

Does that help?

[danielbachhuber]

However, when they deselect their color, they're returned to the default background color:

I've tried to replicate this behaviour using PanelColorSettings on trunk but I haven't managed it.

I'm wondering if it's something to do with this line?

@ramonjd Yes, you are correct. The behavior occurs at the intersection of PanelColorSettings and the default value assigned to the block attribute:

attributes: {
	background: {
		type: 'string',
		default: '#eeeeee',
	},
},

Because the block uses #eeeeee when background is undefined, we need PanelColorSettings to return an explicit 'transparent' value in order to "clear" the color.

Have you tried this?

<PanelColorSettings
    ...
    enableAlpha={ enableAlpha }
/>

Yep, I discovered that yesterday.

However, the UI isn't particularly intuitive:

1. First, you have to click on the background color preview to open the color picker. There's no obvious indication the background color preview is a button.
2. Then, in order to get true transparency, you have to switch rgba() and dial the alpha channel back entirely. The alpha slider isn't entirely sufficient, as it generates a nonsensical HEX value of #94292900.

---

Given PanelColorSettings does support enableAlpha, I'd be fine to close this issue. However, it would be nice to:

1. Make it more visually obvious how to pick 'transparent' as a color when enableAlpha=true.
2. Fix the bug where dragging the alpha slider in HEX mode produces a nonsensical HEX value of #94292900. What's the expected behavior here?

[ramonjd]

Make it more visually obvious how to pick 'transparent' as a color when enableAlpha=true.

It does take a few clicks, and seems more buried that it needs to be. Maybe a workaround would be to have a quick access button than opens the custom control with alpha immediately. 🤷

Could be a good one for design review @WordPress/gutenberg-design

a nonsensical HEX value of #94292900

8-value hex (RGBA hexadecimal notation) codes are valid, maybe not as common as 6-value ones. See:
https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color

[danielbachhuber]

a nonsensical HEX value of #94292900

8-value hex (RGBA hexadecimal notation) codes are valid, maybe not as common as 6-value ones. See: https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color

I learned something new! And apparently the last two digits (00) represent the alpha channel.

[danielbachhuber]

Make it more visually obvious how to pick 'transparent' as a color when enableAlpha=true.

It does take a few clicks, and seems more buried that it needs to be. Maybe a workaround would be to have a quick access button than opens the custom control with alpha immediately. 🤷

Could be a good one for design review @WordPress/gutenberg-design

Great! I've updated the issue description accordingly.