Moving background tools for the Cover block from the Block Inspector to the Toolbar + extending background tools to Cover/Group blocks

[critterverse]

Hi all, here's a proposal to extend the background functionalities of Cover blocks to other types of “container” blocks. It has two parts —

• Making changes to the Cover block
• Extending those changes to other container blocks (Group and Column for now, but these changes could apply to Navigation or other blocks in the future)

Goals

Move background tools into the toolbar

• This will ensure that all primary functionality is accessible from the toolbar
• This change also starts to reduce the number of panels needed in the Block Inspector, clearing room for more robust and universal block controls like those outlined by @mtias in #27331

Clear up the existing confusion users have about how their media is displayed within the Cover block, particularly in terms of the aspect ratio of the Cover block vs. the aspect ratio of their uploaded image/video.

Close some existing issues

• #20837 — Cover: Move color controls to the toolbar
• #24660 — Allow using featured image as background for a group block

Part 1 - Cover block

Proposal: Remove the Media Settings panel that’s currently displayed in the Block Inspector and add a new section to the Block Toolbar with popover menus for Media, Color, and Add/Replace Media.

https://user-images.githubusercontent.com/77359364/106514107-d4f0df80-64a1-11eb-89cc-027c5c361702.mov

Media popover menu:

Color popover menu:

Add/replace media popover menu:

Part 2 - Group/Column blocks

The new section of the Toolbar could also be added to Group and Container blocks.

Empty Group block:

Group block with media background:

Empty Column block:

Column block with media background:

Note: These comps also include the addition of the “toggle full-height” option in the toolbar for Group/Cover blocks.

What about the Block Inspector?

Current color options for Cover block vs. Group/Column blocks in the Block Inspector:

In the future, a universal color panel that can handle color for multiple layers (#27331) would be a great way to unify the Inspector options for the different types of Container blocks.

There may be some steps we can take in the meantime to make the difference between color options for Cover and Group/Column less confusing. For example:

• Remove the Overlay panel that currently appears as an option for the Cover block and replace it with the Color Settings panel that appears for Group/Column blocks (or vice versa)
• Potentially look at changing any section titles that use “Background Color” to “Overlay Color” when media is in use

[critterverse]

I made a few updates to this proposal in order to simplify a bit.

https://user-images.githubusercontent.com/77359364/106672840-c298a380-657e-11eb-8d7d-316396f4c48e.mov

Updates to the toolbar:

• The toolbar's new background section has been reduced down to two icons for Media and Color (the “more” carrot has been removed)
• The Add/Replace Media popover can appear in place of the regular Media popover menu when there is no media in use

Updates to the Media popover menu:

• Removed the device preview from the Focal Picker that allowed the user to toggle between desktop and mobile views
• Reduced the Display options when Fixed Background is turned on to remove the 'Fit' option

[jasmussen]

What an impressive first ticket!

I like:

• How you're thinking about primary and secondary actions.
• How you are tackling a difficult issue of background controls — this is a mouthful on its own!
• How you are thinking about these features in a holistic view across multiple blocks — columns, group, cover. In doing so, benefits can apply widely, as opposed to be extra software written for just one block.

Visually it's also an impressive first stab with lots of good thoughts. I think your work here will benefit drastically from a reduction in toolbar borders, and clearer hierarchy (see #25983). Adding color to the toolbar, I could also see reworked to show the color (or lack thereof) directly, rather than showing the teardrop icon, there's an example in #28314. It's great that you're also thinking of the inspector options, but when I see a screenshot of what we're currently shipping (🙈), I can't wait for us to land the improvements outlined in #18667. Work is never over, phew! 😅

---

To loop back to the primary challenge, great and intuitive background controls: in terms of reworking what we have today, you've identified some solid challenges — background color is overlay? The opacity works when? This is ripe ground for improvement, and there are some good intuitions here.

The other challenge is deciding what goes in the toolbar vs. what goes in the inspector. It's very much a judgement call what constitutes a "primary action" — part of it is context: the cover block is all about the background, which definitely makes it a high value option, but for the Paragraph block it definitely isn't.

This presents a real challenge: does it mean the background controls should be inspector only? Or can it exist in the inspector for the Paragraph, and the toolbar for Cover? Could it be in both places for the cover, or does that redundancy only add to the confusion?

Maybe a subset exist in the toolbar for easy discoverability due to its high value in some blocks, but the full bulk of the controls live in the inspector. For example we might keep the focal point picker in the inspector: it's valuable, but I would argue, not block toolbar valuable. (Also, in the inspector it doesn't cover the content). In turn this would keep the block toolbar focused, which is why I also dig this change:

The Add/Replace Media popover can appear in place of the regular Media popover menu when there is no media in use

It could be interesting to see how all the background related controls could be cleaned up if they were inspector panels only. Would it be one or two panels? Keeping in mind we should be able to show the same contents as in a panel, in a block toolbar menu, it wouldn't preclude exploring adding them there afterwards, for the blocks that need it the most. Make sense?

Here's what Webflow does, which is perhaps slightly too complex, but it's highly compressed:

[mtias]

Thanks for looking at this! The media item in the toolbar looks like a good exploration. Wonder if you thought of making something like the focus happen on the actual canvas of the block (similar to how cropping tools work)? Also check out #20193 if you haven't seen it, it could be relevant.

Another thing to account for there is this task: https://github.com/WordPress/gutenberg/issues/28387

I agree with the second iteration that makes the "set media" dropdown the behaviour when no media is set. One thing that has come up in testing before is that replacing existing media is not always intuitive. That's why it now shows "Replace" as text. It'd be good to user test that flow a little be "change the current image for another one" and see what people do. It seems like the "remove image" bottom part of the menu could account for directly replacing as well without having to unset first.

[critterverse]

Really appreciate the thoughtful feedback, thank you @jasmussen and @mtias!

I think your work here will benefit drastically from a reduction in toolbar borders, and clearer hierarchy (see #25983).

This is an extremely helpful issue, thanks!

Adding color to the toolbar, I could also see reworked to show the color (or lack thereof) directly

Really into the simplicity of this — will explore further.

Could it be in both places for the cover, or does that redundancy only add to the confusion?

This seems like quite the eternal question :) As a newbie contributor to this project, my take is that it’s confusing to see the toolbar controls duplicated in the inspector. When this kind of duplication happens in design software, it’s typically because I intentionally opened a new set of more robust controls when needed (think windows in Photoshop or plugins in Figma). The same delineation between primary and secondary functionality already exists in Gutenberg but as a user, I don't have to go hunting for and opening additional panels/windows/whatever, which is great. But it can also be confusing re: what the sidebar controls are, why some things are duplicated, etc. Anyway, that’s just my two cents (not that it gets us any closer to resolving the eternal question 😅).

It could be interesting to see how all the background related controls could be cleaned up if they were inspector panels only.

+1 to this as a useful exercise, will keep this in mind.

Also, in the inspector [the focal picker] doesn't cover the content

This concern also came up in yesterday’s design review and today’s a11y/design review so I’ll definitely plan to revisit this.

Wonder if you thought of making something like the focus happen on the actual canvas of the block (similar to how cropping tools work)?

I did mess around with this idea a bit in an early iteration — sounds like it might be worth exploring further (especially since there have been several concerns about the current placement of the picker). Cropping tools are a really helpful reference!

It'd be good to user test that flow a little by "change the current image for another one" and see what people do.

+1 would love to make this happen — even with early prototypes. Will look into this.

I’ve gotten some really helpful notes from both here and the design Slack channel — planning to take another pass to see if I can address some of this feedback. Thanks to everyone who has weighed in so far!

[jasmussen]

This seems like quite the eternal question :) As a newbie contributor to this project, my take is that it’s confusing to see the toolbar controls duplicated in the inspector. When this kind of duplication happens in design software, it’s typically because I intentionally opened a new set of more robust controls when needed (think windows in Photoshop or plugins in Figma). The same delineation between primary and secondary functionality already exists in Gutenberg but as a user, I don't have to go hunting for and opening additional panels/windows/whatever, which is great. But it can also be confusing re: what the sidebar controls are, why some things are duplicated, etc. Anyway, that’s just my two cents (not that it gets us any closer to resolving the eternal question 😅).

I find this an extremely valuable insight, and a conversation worth having, so that we might explore solutions to improving things. I have this, perhaps naive, instinct that there exists a solution ahead of us that we'll eventually land upon, which addresses this.

Really excited to see your work!

[paaljoachim]

I want to also add in this associated issue. In relation to linking the Cover block. https://github.com/WordPress/gutenberg/issues/12684 (There are some accessibility issues there that did not get solved. It would be good to bring this up during an a11y/design meeting.)