ColorPalette: Display checkered preview background when value is transparent

[danielbachhuber]

What?

Avoids styling background when the provided value is transparent (either transparent, or a RGBA/HEX value with transparent alpha channel).

After

Before

Why?

Fixes #42230

[annezazu]

@WordPress/gutenberg-design for thoughts here :)

[jameskoster]

Makes sense to me 👍

It would be good to fix this holistically to account for alpha channels:

[danielbachhuber]

It would be good to fix this holistically to account for alpha channels:

@jameskoster What's the best way to detect the alpha channel?

[jameskoster]

Sorry, I'm not sure 🙈

[danielbachhuber]

It would be good to fix this holistically to account for alpha channels:

What's the best way to detect the alpha channel?

@jameskoster It turned out to be pretty simple! colord( currentValue ).alpha()

Updated in bcfb85a

[mtias]

Looks good to me. @jameskoster we should probably update the transparent circle in the palette to match the newer transparent grid design

[mirka]

Thanks for the fix! If you could add a quick changelog entry before merging, that would be great.

---

In a follow-up, we may want to look into tweaking the background implementation so the checkered background can be seen through a semi-transparent color. This is already the case with the circular swatch:

[mirka]

Can we add handling (and a test case) for an undefined color value? It will be undefined when the "Clear" button is clicked.

[danielbachhuber]

Can we add handling (and a test case) for an undefined color value? It will be undefined when the "Clear" button is clicked.

@mirka Yep, did with d482da9

[danielbachhuber]

Thanks for the fix! If you could add a quick changelog entry before merging, that would be great.

@mirka You're welcome 😄 Did with 23f9b51

In a follow-up, we may want to look into tweaking the background implementation so the checkered background can be seen through a semi-transparent color. This is already the case with the circular swatch:

I actually looked into this. I think it will involve a bit of CSS retooling, though. I didn't feel comfortable contributing the change because I felt like it might delay the review process (and solving 'transparent' is my immediate need).

[mirka]

Ah sorry this was unclear, I think the behavior we want is for it to return true:

Suggested change

	test( 'should return undefined for transparent colors', () => {
	expect( undefined ).toBe( undefined );
	} );
	test( 'should return true for undefined color values', () => {
	expect( undefined ).toBe( true );
	} );

The fact that it "works" as expected with the current background implementation is only coincidental. It will be misleading to return a falsy value from showTransparentBackground( undefined ).

[danielbachhuber]

The fact that it "works" as expected with the current background implementation is only coincidental.

@mirka It's actually because the test is missing the call to showTransparentBackground() 🙈

Fixed with 43afb0c

[mirka]

LOL

[mirka]

I think we're good to go then! 🚀

I actually looked into this. I think it will involve a bit of CSS retooling, though. I didn't feel comfortable contributing the change because I felt like it might delay the review process (and solving 'transparent' is my immediate need).

Agreed, this is the right call 👍 Split into a separate issue at #42715.

[danielbachhuber]

I think we're good to go then! 🚀

Awesome, thanks!