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
This commit is contained in:
isabel_brison 2024-05-30 03:10:10 +00:00
parent e3f4aa35d8
commit 1b218aaa39
4 changed files with 63 additions and 3 deletions

View File

@ -123,9 +123,19 @@ class WP_Theme_JSON {
* `prevent_override` value for `color.duotone` to use `color.defaultDuotone`. * `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
* @since 6.2.0 Added 'shadow' presets. * @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.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 * @var array
*/ */
const PRESETS_METADATA = 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( array(
'path' => array( 'color', 'palette' ), 'path' => array( 'color', 'palette' ),
'prevent_override' => array( 'color', 'defaultPalette' ), 'prevent_override' => array( 'color', 'defaultPalette' ),
@ -365,6 +375,7 @@ class WP_Theme_JSON {
* `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`. * `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
* @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`, * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`,
* `background.backgroundSize` and `dimensions.aspectRatio`. * `background.backgroundSize` and `dimensions.aspectRatio`.
* @since 6.6.0 Added support for `dimensions.aspectRatios` and `dimensions.defaultAspectRatios`.
* @var array * @var array
*/ */
const VALID_SETTINGS = array( const VALID_SETTINGS = array(
@ -400,6 +411,8 @@ class WP_Theme_JSON {
'custom' => null, 'custom' => null,
'dimensions' => array( 'dimensions' => array(
'aspectRatio' => null, 'aspectRatio' => null,
'aspectRatios' => null,
'defaultAspectRatios' => null,
'minHeight' => null, 'minHeight' => null,
), ),
'layout' => array( 'layout' => array(

View File

@ -37,6 +37,13 @@
} }
] ]
}, },
"dimensions": {
"aspectRatios": [
{
"name": "Aspect ratio name"
}
]
},
"blocks": { "blocks": {
"*": { "*": {
"typography": { "typography": {

View File

@ -190,6 +190,46 @@
], ],
"text": true "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": { "shadow": {
"defaultPresets": true, "defaultPresets": true,
"presets": [ "presets": [

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.