Changeset 58242

Timestamp:

05/30/2024 03:08:31 AM (4 months ago)

Author:

isabel_brison

Message:

Editor: add aspect ratio presets support.

Enables customizing the list of aspect ratio options available through theme.json.

Props fabiankaegy, isabel_brison, swissspidy.

Location:

trunk/src/wp-includes

Files:

• class-wp-theme-json.php (modified) (3 diffs)
• theme-i18n.json (modified) (1 diff)
• theme.json (modified) (1 diff)

trunk/src/wp-includes/class-wp-theme-json.php

@@ -124 +124 @@
      * @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' ),
@@ -366 +376 @@
      * @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
      */
@@ -400 +411 @@
         'custom'                        => null,
         'dimensions'                    => array(
-            'aspectRatio' => null,
-            'minHeight'   => null,
+            'aspectRatio'         => null,
+            'aspectRatios'        => null,
+            'defaultAspectRatios' => null,
+            'minHeight'           => null,
         ),
         'layout'                        => array(

trunk/src/wp-includes/theme-i18n.json

@@ -35 +35 @@
                 {
                     "name": "Space size name"
+                }
+            ]
+        },
+        "dimensions": {
+            "aspectRatios": [
+                {
+                    "name": "Aspect ratio name"
                 }
             ]

trunk/src/wp-includes/theme.json

@@ -190 +190 @@
             ],
             "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": {