-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Comments
I made a few updates to this proposal in order to simplify a bit. cover-background-tools_v2.movUpdates to the toolbar:
Updates to the Media popover menu:
|
What an impressive first ticket! I like:
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:
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: |
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. |
Really appreciate the thoughtful feedback, thank you @jasmussen and @mtias!
This is an extremely helpful issue, thanks!
Really into the simplicity of this — will explore further.
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 😅).
+1 to this as a useful exercise, will keep this in mind.
This concern also came up in yesterday’s design review and today’s a11y/design review so I’ll definitely plan to revisit this.
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!
+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! |
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! |
I want to also add in this associated issue. In relation to linking the Cover block. |
Hi all, here's a proposal to extend the background functionalities of Cover blocks to other types of “container” blocks. It has two parts —
Goals
Move background tools into the toolbar
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
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:
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:
The text was updated successfully, but these errors were encountered: