Skip to content

Image block: Implement aspect ratio control #51138

@richtabor

Description

@richtabor

Based on the design explorations in #38990, let's implement the aspect ratio control for the core/image block.

Visual

CleanShot 2023-05-31 at 15 58 05

Figma Prototype

Objective

If I have an aspect ratio applied to an Image block with a set height and width, I should be able to drop in another image and the aspect ratio, height, and width values are all maintained.

Tasks

  • Add "Aspect Ratio" SelectControl below "Resolution" to core/image block.
  • Set default value of the aspect ratio control to "Original".
  • Update edit/save.
  • If block has aspect ratio and intrinsic height/width, set both inputs to "Auto"
  • If block has aspect ratio value, render Contain/Cover ToggleGroup.
  • If one input is changed, calculate the other (maintaining "Auto" visually).
  • If both inputs are changed, set aspect ratio select to "Custom" and use the non-intrinsic height/width values as the aspect-ratio css.

Follow-up

  • Add support for height, width, and aspect ratio controls for Image blocks without media (placeholder).

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions