[Mobile] Create cover block with only colour (from a default palette) without an image

[antonis]

Fixes #23831 (parent wordpress-mobile/gutenberg-mobile#2275)

Related PRs:

• Gutenberg-Mobile Create cover block with only colour wordpress-mobile/gutenberg-mobile#2488
• Clear media button in block settings [Mobile] Cover: Adds Clear media button in block settings #23794
• Create cover block with custom colour [Mobile] Create cover block with custom colour (without an image) #23870
• Media Button when only colour is selected [Mobile] Cover: Add Media Button when only colour is selected #23878

Description

A palette with four colours (black, white and a couple of theme defaults) has been added bellow the Add Media Button. When the user taps on a colour indicator the block is created with the selected colour as background.
The latest design can be found here.

How has this been tested?

• Add a cover block
• Press the one colour from the palette
• Verify that a new cover block with only colour is created

Screenshots

Empty cover block	Android	iOS

Types of changes

Enhancement

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[antonis]

Thank you for the feedback @geriux . I agree with both your suggestions.
I pushed those changes along with some alignments with the suggested design (#23870 (comment))

[antonis]

Thank you for the review @geriux . I agree with both your suggestions and pushed the changes.

[antonis]

Hello @iamthomasbishop 👋 ,
This PR is a step before #23870 (missing only the custom color picker).
I would like some feedback on this or the go ahead to proceed to the next PR.
Thank you for your guidance

Android WP screenshot with keylines

[iamthomasbishop]

Looks great! The empty block at first seems a bit tall (probably just because we're used to seeing shorter block placeholders), but I think the benefit of having it at the same size as its default application height is worth it.

Unrelated side note for @geriux I'm thinking we should perform a compact notice event when a block is added to the canvas. I don't know if we want to add that as part of this work or via a separate ticket -- perhaps we should create a new one as an audit to document where/when we want to add these notices.

[chipsnyder]

Codewise this looks good to me. I do have a question on the Default Colors. I see we have Black and White plus colors from the theme.

When I tried white I wasn't able to see my text because the text for my theme (twenty-twenty) was also white:

On the web they seem to use only the theme colors:

Then if theme colors aren't available it fallbacks to the default color set. Can we consider replacing white and adding one more theme color? Or Replacing both Black and White and default to the theme colors?

[antonis]

Hello @iamthomasbishop and @chipsnyder 👋 ,
thank you both for reviewing this and your precious feedback.

@iamthomasbishop Would it be ok to drop the black/white colors of the initial requirement and use just the theme colors in order to cover the case @chipsnyder reported above?

[iamthomasbishop]

Would it be ok to drop the black/white colors of the initial requirement and use just the theme colors in order to cover the case @chipsnyder reported above?

Yea, that is fine.

[geriux]

LGTM! Nice work @antonis! Tested it on both iOS and Android as well as the demo app.

[antonis]

Hello @iamthomasbishop 👋 ,

The last two PRs of this feature are not ready yet. Specifically:

• The ability to select custom colour [Mobile] Create cover block with custom colour (without an image) #23870
• The top-right button to select a media when only color is selected [Mobile] Cover: Add Media Button when only colour is selected #23878 (functionally this is available by long press but this is not obvious)

Should we ship this feature up to this point in Monday's release or revert it to ship it as a whole in the next release?

cc @pinarol

[iamthomasbishop]

Should we ship this feature up to this point in Monday's release

I'd be okay with shipping initially without those two things (custom color and the additional add-media button), assuming we can add these things in the next release or two.