Tracking: Aspect Ratio

[richtabor]

Why aspect ratios

When you add a pattern from the directory to a page, then replace any images with one of your own, the new images are unlikely to fit within the intended design of the pattern. I.e. square images in the pattern won't be square — unless you crop your image further in the editor. The expectation is that you can replace images without breaking the layout.

This would be especially beneficial for wireframe-style patterns, where an image placeholder could be represented accurately in size and ratio. Patterns actually wouldn't need to include images altogether.

In the current state, the aspect ratio control exists within the core/post-featured-image block. Ideally the aspect ratio control would be exposed to other image-like blocks (and their placeholder states).

Theme.json aspect ratios

As detailed in #38990 (comment), the available aspect ratio options should be customizable from the theme.json file.

This way the available ratios could be tailored to a specific site's design language, or new aspect ratios could be added. The expectation here the aspect ratios would be shared across any aspect ratio controls (including the hard-crop image edit control).

Priority

• Clean up default aspect ratio values #48041
• Add unit support for image block height and width #55059
• Add support for aspect ratio on wide and full images #53652
• A consistent aspect ratio component #47962

Secondary

• Add aspect ratio selector to Cover Block #54032
• Add aspect ratio presets support via theme.json #47271
• Explore using a popover for aspect ratio control #48110
• Ensure that srcset still works correctly with aspect ratio enabled
• Add aspect ratio support to Post Featured Image block #47274
• Image Block: Surface aspect-ratio tool for custom image dimensions #38990
• Add aspect ratio support to image block placeholder state #48081
• Explore a range-based aspect ratio control #48080
• Post Featured Image Aspect Ratio: Link width and height controls #47963

[richtabor]

Ensure that srcset still works correctly with aspect ratio enabled

Confirmed this is working as expected:

[fabiankaegy]

Hey @richtabor 👋

What's currently blocking us from moving forward with a spec for defining aspect ratio sizes in theme.json?

In the PR you mention there are some thing to be worked out first but I'm not finding any further insights about what they are.

Any insights would be greatly appreciated.

We are very interested in helping move this forward as it is a very common issue we encounter in the enterprise world where style guides call for specific aspect ratios

[jasmussen]

Now that the Cover block has aspect ratio support, it'd be nice to revisit the flyout (#48110) so there's some preview of the shape.