Cover: Allow creating the block with only color/gradient backgrounds (without an image)

[pinarol]

There's no way to create a color/gradient background for Cover blocks on mobile. We can render this if it is set on web but there's no way to create one. On web, this can be created with the options on the Placeholder:

There's also no way to remove the image once you set it, same on web.

How do you think we should do this on mobile? @iamthomasbishop

[iamthomasbishop]

@pinarol I would suggest we do something similar, at least for a v1. We now have color picker components that we can utilize, which is really exciting 😄 Here's what I think the flow could look like, hoping we can use existing components:

• The placeholder would be very similar to what exists now, but like the web would show some shortcut swatches. I suggest we show black and white first, then 2-3 solid defaults if we are able to display a couple of theme defaults (if not, we'd skip these 2-3), then the custom color picker indicator (the rainbow swatch).
• If you tap a swatch in this list that isn't the custom color, that color will be applied straight away, and — a notable change to the current flow — the parent (cover) stays selected. In the top corner, a little "image" icon shows to hint that you can also add an image background.
• If you tap the custom color swatch, the custom color picker UI shows. You can tap "Cancel" to go back, or tap "Apply" to proceed. That color is then set as the background of the block.

One other note: I wondered if we should roll the "opacity" slider into the custom picker in this case, because it's often desirable to adjust the opacity of the overlay alongside the color. What do you think?

There's also no way to remove the image once you set it, same on web.

A couple of things here:

• We currently allow a long-press on the image to show a menu of image sources to choose from (essentially the "replace image" task). I think this would be one place for a "Clear media" menu button.
• The other place we might want to consider showing this option is in the block settings sheet. We obviously don't have any media-related settings in the sheet yet, but I think there was some discussion about adding focal point and other items soon, so I would put this "clear media" button nearby those items (similar to web).

---

Does all of this make sense? Let me know if you have any questions about the flow or design.

[antonis]

This issue is broken down in the following subtasks

• Clear Media (issue: [Mobile] Cover: Allow removing the selected media WordPress/gutenberg#23789, PRs: [Mobile] Cover: Adds Clear media button in block settings WordPress/gutenberg#23794, Cover: Adds Clear media button in block settings #2489)
• Allow creating the block with only colour (issue: [Mobile] Cover: Allow creating the block with only colour (without an image) WordPress/gutenberg#23831, PRs: [Mobile] Create cover block with only colour (from a default palette) without an image WordPress/gutenberg#23833, Create cover block with only colour #2488)
• Allow creating the block with custom colour (without an image) (issue: [Mobile] Cover: Allow creating the block with custom colour (without an image) WordPress/gutenberg#23868, PRs: [Mobile] Create cover block with custom colour (without an image) WordPress/gutenberg#23870, Create cover block with custom colour (without an image) #2508)
• Add Background Media button when only background colour is set (issue: [Mobile] Cover: Add Media Button when only colour is selected WordPress/gutenberg#23877, PR: [Mobile] Cover: Add Media Button when only colour is selected WordPress/gutenberg#23878, Cover: Add Background Media button when only background colour is set #2513)

As part of the GB-Mobile Monorepo migration the new issues are opened in the Gutenberg project

[antonis]

Hello @iamthomasbishop,
I was also thinking of adding a 'clear color' button like the web. It seems like a quick win on the code side.

Wdyt?

[antonis]

Closed with WordPress/gutenberg#23789, WordPress/gutenberg#23831, WordPress/gutenberg#23868 and WordPress/gutenberg#23877