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: Improve the inspector, adopt the unified dimensions panel #38068

Closed
jasmussen opened this issue Jan 19, 2022 · 8 comments
Closed

Image: Improve the inspector, adopt the unified dimensions panel #38068

jasmussen opened this issue Jan 19, 2022 · 8 comments
Labels
[Block] Image Affects the Image Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Feature] UI Components Impacts or related to the UI component system Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@jasmussen
Copy link
Contributor

jasmussen commented Jan 19, 2022

Part of #28356 and related to #27331.

The inspector controls for the Image block have built up over the years, and could use a little love and unification:
Before

  • The dimension controls could adopt the unified dimensions panel to add consistency across blocks
  • Alt text could be simplified, and arguably deserves its own panel
  • Dimension controls use an older version of the segmented control, and could benefit from the ToolsPanel reset behavior
  • Image size could benefit from being a non-default ToolsPanel control, due to its complexity (Image size settings can be confusing #38050) and for consistency (Post Featured Image: Add size selector #38044)

Here's a mockup taking a stab at some improvements:

Image Block Inspector

  • The unified Dimensions panel brings consistency and the ability to hide the Size control by default.
  • Note the dimensions shown inside the size selector and the added help text (suggested here).
  • For some settings or base properties of the block, such as Styles, they could be integrated directly into the block card at the top.
@jasmussen jasmussen added Needs Design Feedback Needs general design feedback. [Feature] UI Components Impacts or related to the UI component system [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Block] Image Affects the Image Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Jan 19, 2022
@Mamaduka
Copy link
Member

Alt text could be simplified, and arguably deserves its own panel

I love the idea.

For some settings or base properties of the block, such as Styles, they could be integrated directly into the block card at the top.

With the new Styles design, I think this would be a nice change. We already display variation transforms in the block card.

@mtias
Copy link
Member

mtias commented Aug 2, 2023

@jasmussen is this still relevant?

@jasmussen
Copy link
Contributor Author

Parts of it are relevant, yes, but these are things that will also likely be naturally intuited when we get to updating the image block inspector. So I don't know that it needs an open issue. Closing for now, it'll be findable still!

@jasmussen
Copy link
Contributor Author

I'm actually going to reopen this one, it keeps coming up in discussions around the ToolsPanel.

@jasmussen jasmussen reopened this Aug 25, 2023
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Sep 14, 2023
@richtabor
Copy link
Member

For reference, here's what we have today:

CleanShot 2023-09-14 at 09 31 43 CleanShot 2023-09-14 at 09 32 40

@richtabor
Copy link
Member

What gets confusing is when the block is within a row or stack. Then there are two entries for width (also the same for site logo):

CleanShot 2023-09-14 at 09 33 34

@jasmussen
Copy link
Contributor Author

The width issue feels related to the Row block, but excellent point, it seems like we could definitely unify a) the tab in which width lives, and b) make sure there's only ever one width control.

Perhaps the final question here is whether we can/should extract the Alternative text as a separate panel, or not. If we want to still do that, we can commandeer this issue to be about that.

@jasmussen
Copy link
Contributor Author

I'll close this for now. Let's see what organically emerges.

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] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Inspector Controls The interface showing block settings and the controls available for each block [Feature] UI Components Impacts or related to the UI component system Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

5 participants