From 1b218aaa399f2cf17728afc70bbc8e9fd1c16377 Mon Sep 17 00:00:00 2001 From: isabel_brison Date: Thu, 30 May 2024 03:10:10 +0000 Subject: [PATCH] Editor: add aspect ratio presets support. Enables customizing the list of aspect ratio options available through theme.json. Props fabiankaegy, isabel_brison, swissspidy. Built from https://develop.svn.wordpress.org/trunk@58242 git-svn-id: http://core.svn.wordpress.org/trunk@57705 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/class-wp-theme-json.php | 17 ++++++++++-- wp-includes/theme-i18n.json | 7 +++++ wp-includes/theme.json | 40 +++++++++++++++++++++++++++++ wp-includes/version.php | 2 +- 4 files changed, 63 insertions(+), 3 deletions(-) diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 22b7c44b4e..3dba653520 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -123,9 +123,19 @@ class WP_Theme_JSON { * `prevent_override` value for `color.duotone` to use `color.defaultDuotone`. * @since 6.2.0 Added 'shadow' presets. * @since 6.3.0 Replaced value_func for duotone with `null`. Custom properties are handled by class-wp-duotone.php. + * @since 6.6.0 Added the `dimensions.aspectRatios` & `dimensions.defaultAspectRatios` preset. * @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' ), @@ -365,6 +375,7 @@ class WP_Theme_JSON { * `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`. * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`, * `background.backgroundSize` and `dimensions.aspectRatio`. + * @since 6.6.0 Added support for `dimensions.aspectRatios` and `dimensions.defaultAspectRatios`. * @var array */ const VALID_SETTINGS = array( @@ -399,8 +410,10 @@ class WP_Theme_JSON { ), 'custom' => null, 'dimensions' => array( - 'aspectRatio' => null, - 'minHeight' => null, + 'aspectRatio' => null, + 'aspectRatios' => null, + 'defaultAspectRatios' => null, + 'minHeight' => null, ), 'layout' => array( 'contentSize' => null, diff --git a/wp-includes/theme-i18n.json b/wp-includes/theme-i18n.json index 82f89bd3d2..7ce52317ed 100644 --- a/wp-includes/theme-i18n.json +++ b/wp-includes/theme-i18n.json @@ -37,6 +37,13 @@ } ] }, + "dimensions": { + "aspectRatios": [ + { + "name": "Aspect ratio name" + } + ] + }, "blocks": { "*": { "typography": { diff --git a/wp-includes/theme.json b/wp-includes/theme.json index d9ed47816c..47aea2d24b 100644 --- a/wp-includes/theme.json +++ b/wp-includes/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/wp-includes/version.php b/wp-includes/version.php index c367b4124e..071e2a5671 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.6-alpha-58241'; +$wp_version = '6.6-alpha-58242'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.