Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tracked by #38533
critterverse opened this issue Feb 1, 2021 · 6 comments
Labels
[Block] Columns Affects the Columns Block [Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Group Affects the Group Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback.

Comments

@critterverse
Copy link
Contributor

critterverse commented Feb 1, 2021

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.

cover-background-tools.mov

Media popover menu:

The Media popover menu contains 4 sections: Focal point, Display, Fixed Background, and Remove media. The top focal point section is very similar to the focal picker that’s current displayed in the Block Inspector for a Cover block. It has an image preview and input boxes below to specify the horizontal and vertical focus position. The main difference with this focus picker is that there is a border that shows the area of the image that will be visible in the Cover block based on the current focal point. There’s also a toggle to the right of the input forms with icons for Desktop and Mobile. The user can toggle between these two views to see how the boundary area of the focal picker changes in the preview above. Below the focal point section, there is a Display dropdown selector menu with 3 options — Fill, Fit, and Repeat. Below that is a toggle to turn Fixed background on or off. The bottom section of the popover menu is separated from the other Media options with a black line above it. It says “Remove media” and uses a trash can icon.

Color popover menu:

The Color popover menu contains 3 sections: Color swatches, Opacity, and Remove color. The swatches section at the top of the menu is an exact mirror of the way colors are current displayed in the Overlay panel in the Block Inspector for the Cover block, including the toggle to switch between Solid and Gradient color swatches. Below that is an Opacity section containing a slider and an input form to numerically enter an opacity value. The bottom section of the popover menu is separated from the other Media options with a black line above it. It says “Remove media” and uses a trash can icon.

Add/replace media popover menu:

The Add Media menu is a simple list popover containing 3 items with corresponding icons: Open Media Library, Upload, and Use Featured Image.

Part 2 - Group/Column blocks

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

Empty Group block:

Now including the new background section in the toolbar

Group block with media background:

Now including the new background section in the toolbar

Empty Column block:

Now including the new background section in the toolbar

Column block with media background:

Now including the new background section in the toolbar

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:

side-by-side comparison with screenshots of the Block Inspector for the Cover block on the left and the Group block on the right

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
@shaunandrews shaunandrews added [Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Group Affects the Group Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Design Feedback Needs general design feedback. [Block] Columns Affects the Columns Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Feb 1, 2021
@critterverse
Copy link
Contributor Author

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

cover-background-tools_v2.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
Copy link
Contributor

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:

Screenshot 2021-02-03 at 10 50 22

@mtias
Copy link
Member

mtias commented Feb 3, 2021

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: #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
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor

paaljoachim commented Feb 8, 2021

I want to also add in this associated issue. In relation to linking the Cover block.
#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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block [Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Group Affects the Group Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback.
Projects
Status: Not Started
Development

No branches or pull requests

5 participants