Add aspect ratio presets support via theme.json (#47271)

Co-authored-by: jffng <jffng@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: mtias <matveb@git.wordpress.org> Co-authored-by: ndiego <ndiego@git.wordpress.org> Co-authored-by: unscripted <cwhitmore@git.wordpress.org> Co-authored-by: strarsis <strarsis@git.wordpress.org> Co-authored-by: markhowellsmead <markhowellsmead@git.wordpress.org> Co-authored-by: bacoords <bacoords@git.wordpress.org>
WordPress · May 7, 2024 · 613c05e · 613c05e
1 parent 0f4f077
commit 613c05e
Show file tree

Hide file tree

Showing 12 changed files with 280 additions and 167 deletions.
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -116,6 +116,8 @@ Settings related to dimensions.
 | Property  | Type   | Default | Props  |
 | ---    | ---    | ---    |---   |
 | aspectRatio | boolean | false |  |
+| defaultAspectRatios | boolean | true |  |
+| aspectRatios | array |  | name, ratio, slug |
 | minHeight | boolean | false |  |
 
 ---

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -123,9 +123,19 @@ class WP_Theme_JSON_Gutenberg {
 	 * @since 6.0.0 Replaced `override` with `prevent_override` and updated the
 	 *              `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
 	 * @since 6.2.0 Added 'shadow' presets.
+	 * @since 6.6.0 Added `aspectRatios`.
 	 * @var array
 	 */
 	const PRESETS_METADATA = array(
+		array(
+			'path'              => array( 'dimensions', 'aspectRatios' ),
+			'prevent_override'  => array( 'dimensions', 'defaultAspectRatios' ),
+			'use_default_names' => false,
+			'value_key'         => 'ratio',
+			'css_vars'          => '--wp--preset--aspect-ratio--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'aspect-ratio' ),
+		),
 		array(
 			'path'              => array( 'color', 'palette' ),
 			'prevent_override'  => array( 'color', 'defaultPalette' ),
@@ -397,8 +407,10 @@ class WP_Theme_JSON_Gutenberg {
 		),
 		'custom'                        => null,
 		'dimensions'                    => array(
-			'aspectRatio' => null,
-			'minHeight'   => null,
+			'aspectRatio'         => null,
+			'aspectRatios'        => null,
+			'defaultAspectRatios' => null,
+			'minHeight'           => null,
 		),
 		'layout'                        => array(
 			'contentSize'                   => null,
@@ -483,7 +495,7 @@ class WP_Theme_JSON_Gutenberg {
 	 *              updated `blockGap` to be allowed at any level.
 	 * @since 6.2.0 Added `outline`, and `minHeight` properties.
 	 * @since 6.6.0 Added `background` sub properties to top-level only.
-	 *
+	 * @since 6.6.0 Added `dimensions.aspectRatio`.
 	 * @var array
 	 */
 	const VALID_STYLES = array(

diff --git a/lib/theme.json b/lib/theme.json
@@ -190,6 +190,46 @@
 			],
 			"text": true
 		},
+		"dimensions": {
+			"defaultAspectRatios": true,
+			"aspectRatios": [
+				{
+					"name": "Square - 1:1",
+					"slug": "square",
+					"ratio": "1"
+				},
+				{
+					"name": "Standard - 4:3",
+					"slug": "4-3",
+					"ratio": "4/3"
+				},
+				{
+					"name": "Portrait - 3:4",
+					"slug": "3-4",
+					"ratio": "3/4"
+				},
+				{
+					"name": "Classic - 3:2",
+					"slug": "3-2",
+					"ratio": "3/2"
+				},
+				{
+					"name": "Classic Portrait - 2:3",
+					"slug": "2-3",
+					"ratio": "2/3"
+				},
+				{
+					"name": "Wide - 16:9",
+					"slug": "16-9",
+					"ratio": "16/9"
+				},
+				{
+					"name": "Tall - 9:16",
+					"slug": "9-16",
+					"ratio": "9/16"
+				}
+			]
+		},
 		"shadow": {
 			"defaultPresets": true,
 			"presets": [

diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
@@ -6,75 +6,14 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-
 /**
- * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ * Internal dependencies
  */
+import { useSettings } from '../use-settings';
 
 /**
- * @type {SelectControlProps[]}
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
  */
-export const DEFAULT_ASPECT_RATIO_OPTIONS = [
-	{
-		label: _x( 'Original', 'Aspect ratio option for dimensions control' ),
-		value: 'auto',
-	},
-	{
-		label: _x(
-			'Square - 1:1',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '1',
-	},
-	{
-		label: _x(
-			'Standard - 4:3',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '4/3',
-	},
-	{
-		label: _x(
-			'Portrait - 3:4',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '3/4',
-	},
-	{
-		label: _x(
-			'Classic - 3:2',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '3/2',
-	},
-	{
-		label: _x(
-			'Classic Portrait - 2:3',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '2/3',
-	},
-	{
-		label: _x(
-			'Wide - 16:9',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '16/9',
-	},
-	{
-		label: _x(
-			'Tall - 9:16',
-			'Aspect ratio option for dimensions control'
-		),
-		value: '9/16',
-	},
-	{
-		label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
-		value: 'custom',
-		disabled: true,
-		hidden: true,
-	},
-];
 
 /**
  * @callback AspectRatioToolPropsOnChange
@@ -96,14 +35,48 @@ export default function AspectRatioTool( {
 	panelId,
 	value,
 	onChange = () => {},
-	options = DEFAULT_ASPECT_RATIO_OPTIONS,
-	defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+	options,
+	defaultValue = 'auto',
 	hasValue,
 	isShownByDefault = true,
 } ) {
 	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
 	const displayValue = value ?? 'auto';
 
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+
+	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const aspectRatioOptions = [
+		{
+			label: _x(
+				'Original',
+				'Aspect ratio option for dimensions control'
+			),
+			value: 'auto',
+		},
+		...( showDefaultRatios ? defaultOptions : [] ),
+		...( themeOptions ? themeOptions : [] ),
+		{
+			label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
+			value: 'custom',
+			disabled: true,
+			hidden: true,
+		},
+	];
+
 	return (
 		<ToolsPanelItem
 			hasValue={
@@ -117,7 +90,7 @@ export default function AspectRatioTool( {
 			<SelectControl
 				label={ __( 'Aspect ratio' ) }
 				value={ displayValue }
-				options={ options }
+				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
 				size={ '__unstable-large' }
 				__nextHasNoMarginBottom

diff --git a/packages/block-editor/src/components/dimensions-tool/test/index.js b/packages/block-editor/src/components/dimensions-tool/test/index.js
@@ -33,6 +33,16 @@ function Example( { initialValue, onChange, ...props } ) {
 				} }
 				defaultScale="cover"
 				defaultAspectRatio="auto"
+				aspectRatioOptions={ [
+					{ label: 'Original', value: 'auto' },
+					{ label: '16/9', value: '16/9' },
+					{
+						label: 'Custom',
+						value: 'custom',
+						disabled: true,
+						hidden: true,
+					},
+				] }
 				value={ value }
 				{ ...props }
 			/>