search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.55k stars 4.22k forks source link

Tracking: Aspect Ratio #48079

Open richtabor opened 1 year ago

richtabor commented 1 year ago

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 https://github.com/WordPress/gutenberg/issues/38990#issuecomment-1396621330, 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

Secondary

richtabor commented 1 year ago

Ensure that srcset still works correctly with aspect ratio enabled

Confirmed this is working as expected:

CleanShot 2023-10-04 at 14 50 29 CleanShot 2023-10-04 at 14 50 24

fabiankaegy commented 10 months ago

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 commented 10 months ago

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.