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

Image Tools: Add dedicated toolbar section #38988

Open
jasmussen opened this issue Feb 22, 2022 · 3 comments
Open

Image Tools: Add dedicated toolbar section #38988

jasmussen opened this issue Feb 22, 2022 · 3 comments
Labels
[Block] Image Affects the Image Block [Feature] Media Anything that impacts the experience of managing media [Type] Enhancement A suggestion for improvement.

Comments

@jasmussen
Copy link
Contributor

jasmussen commented Feb 22, 2022

The crop and rotate tools for the Image block currently append themselves in the block toolbar when the edit button is clicked:

image toolbar
image tools

This can be a bit disorienting as the toolbar is changing modes, without visualizing this.

@javierarce and @critterverse did a number of good explorations on secondary toolbars. Based on these explorations, and work in progress in #37337, we could embrace a secondary toolbar state for image tools, like so:

Crop and rotate in-canvas i2

See also:

@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. [Feature] Media Anything that impacts the experience of managing media [Block] Image Affects the Image Block labels Feb 22, 2022
@richtabor
Copy link
Member

I think its definitely a better experience than what we have today.

What I'm a bit hesitant on though is the "Back" button, which looks/feels just like the parent block selector we have in place:

CleanShot 2022-02-24 at 12 01 55@2x

What's the objection to having a popover toolbar? Like the heading block used to have, or like the link control does in the image block? Is it that we'd be blocking out part of the visual of the image itself?

CleanShot 2022-02-24 at 12 03 09@2x

@jasmussen
Copy link
Contributor Author

The back button was intentionally separated in order to use the same language as the "up" button. Do you think that's problematic? Worst case, it can work decently well with the button part of the same toolbar:
Screenshot 2022-02-25 at 09 33 35

What's the objection to having a popover toolbar? Like the heading block used to have, or like the link control does in the image block? Is it that we'd be blocking out part of the visual of the image itself?

You're referring to the zoom control here, right? Yes indeed, part of it is covering the image. The following is more of an issue that emerged from some separate Duotone efforts, but covering the majority of the image was problematic there:

Screenshot 2022-02-25 at 09 34 56

Incidentally that led to the presets-only duotone mockup here, which happens to also have global styles benefits. But the realization was the same, there are simple benefits to controls living in the block toolbar, especially when the image is very small, or sits in a constrained nested context.

That's not to say we absolutely can't have popovers. The aspect ratio remains a dropdown, and I would also imagine the zoom moving to the block toolbar not necessarily happening as the first effort, since there are some keyboard-interaction flows there that are important to figure out.

@richtabor
Copy link
Member

The back button was intentionally separated in order to use the same language as the "up" button. Do you think that's problematic?

Maybe not problematic, but potentially a confusion point. I think it works better outside the main toolbar area.

After testing a few things a bit more I think this approach makes the best sense. Same for duotone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block [Feature] Media Anything that impacts the experience of managing media [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

2 participants