Allow defining custom Aspect Ratio options through theme.json

[fabiankaegy]

There are a few places now where we allow users to select an Aspect Ratio for their Image. The list of available Aspect Ratios is hard-coded however. (See:

gutenberg/packages/block-library/src/post-featured-image/dimension-controls.js

Lines 93 to 126 in 5d063e3

	options={ [
	// These should use the same values as AspectRatioDropdown in @wordpress/block-editor
	{
	label: __( 'Original' ),
	value: 'auto',
	},
	{
	label: __( 'Square' ),
	value: '1',
	},
	{
	label: __( '16:9' ),
	value: '16/9',
	},
	{
	label: __( '4:3' ),
	value: '4/3',
	},
	{
	label: __( '3:2' ),
	value: '3/2',
	},
	{
	label: __( '9:16' ),
	value: '9/16',
	},
	{
	label: __( '3:4' ),
	value: '3/4',
	},
	{
	label: __( '2:3' ),
	value: '2/3',
	},

)

This means that there is currently no way to use any aspect ratios that are not a part of this predetermined list.

Especially in more custom designs we are working with style guides that go down to the aspect ratio level and not being able to filter / override the ratios that should be available is a real issue.

Ideally this could work similar to the spazingSizes preset in theme.json where a theme author and eventually maybe even the global styles interface would be able to define the available aspect ratios.

My proposed syntax would be:

{
    "version": 2,
    "settings": {
        "dimensions": {
            "aspectRatios": [ // allows you to define custom aspect ratios
                {
                    "slug": "5by4",
                    "label": "5:4",
                    "value": "5/4"
                }
            ],
            "defaultAspectRatios": false // disables the core provided ones
        }
    }
}

[fabiankaegy]

Regarding the AspectGroups I think we should be able to programmatically determine whether something is Landscape or Horizontal:

gutenberg/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js

Lines 49 to 114 in 5d063e3

	<AspectGroup
	isDisabled={ isInProgress }
	onClick={ ( newAspect ) => {
	setAspect( newAspect );
	onClose();
	} }
	value={ aspect }
	aspectRatios={ [
	// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
	{
	title: __( 'Original' ),
	aspect: defaultAspect,
	},
	{
	title: __( 'Square' ),
	aspect: 1,
	},
	] }
	/>
	<AspectGroup
	label={ __( 'Landscape' ) }
	isDisabled={ isInProgress }
	onClick={ ( newAspect ) => {
	setAspect( newAspect );
	onClose();
	} }
	value={ aspect }
	aspectRatios={ [
	{
	title: __( '16:9' ),
	aspect: 16 / 9,
	},
	{
	title: __( '4:3' ),
	aspect: 4 / 3,
	},
	{
	title: __( '3:2' ),
	aspect: 3 / 2,
	},
	] }
	/>
	<AspectGroup
	label={ __( 'Portrait' ) }
	isDisabled={ isInProgress }
	onClick={ ( newAspect ) => {
	setAspect( newAspect );
	onClose();
	} }
	value={ aspect }
	aspectRatios={ [
	{
	title: __( '9:16' ),
	aspect: 9 / 16,
	},
	{
	title: __( '3:4' ),
	aspect: 3 / 4,
	},
	{
	title: __( '2:3' ),
	aspect: 2 / 3,
	},
	] }
	/>
	</>

[justintadlock]

There's a PR for theme-defined aspect ratios here: #47271

[annezazu]

Looks like this can be closed out with #47271 merged. Closing but happy to reopen if I'm missing an aspect of this.