Changeset 57491 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

01/31/2024 02:52:25 AM (12 months ago)

Author:

isabel_brison

Message:

Editor: introduce dimensions.aspectRatio block support.

Adds front end rendering logic for the dimensions.aspectRatio block support as well as the required logic in WP_Theme_JSON and the style engine.

Props andrewserong.
Fixes #60365.

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (9 diffs)

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

@@ -205 +205 @@
      * @since 6.3.0 Added `column-count` property.
      * @since 6.4.0 Added `writing-mode` property.
+     * @since 6.5.0 Added `aspect-ratio` property.
      *
      * @var array
      */
     const PROPERTIES_METADATA = array(
+        'aspect-ratio'                      => array( 'dimensions', 'aspectRatio' ),
         'background'                        => array( 'color', 'gradient' ),
         'background-color'                  => array( 'color', 'background' ),
@@ -345 +347 @@
      * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
      *              `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
-     * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
-     *              `background.backgroundSize`.
+     * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`,
+     *              `background.backgroundSize` and `dimensions.aspectRatio`.
      * @var array
      */
@@ -381 +383 @@
         'custom'                        => null,
         'dimensions'                    => array(
-            'minHeight' => null,
+            'aspectRatio' => null,
+            'minHeight'   => null,
         ),
         'layout'                        => array(
@@ -439 +442 @@
      * @since 6.2.0 Added `outline`, and `minHeight` properties.
      * @since 6.3.0 Added support for `typography.textColumns`.
+     * @since 6.5.0 Added support for `dimensions.aspectRatio`.
      *
      * @var array
@@ -459 +463 @@
         ),
         'dimensions' => array(
-            'minHeight' => null,
+            'aspectRatio' => null,
+            'minHeight'   => null,
         ),
         'filter'     => array(
@@ -576 +581 @@
      * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
      * @since 6.4.0 Added `background.backgroundImage`.
-     * @since 6.5.0 Added `background.backgroundSize`.
+     * @since 6.5.0 Added `background.backgroundSize` and `dimensions.aspectRatio`.
      * @var array
      */
@@ -590 +595 @@
         array( 'color', 'button' ),
         array( 'color', 'caption' ),
+        array( 'dimensions', 'aspectRatio' ),
         array( 'dimensions', 'minHeight' ),
         array( 'position', 'sticky' ),
@@ -1922 +1928 @@
      * @since 5.9.0 Added the `$settings` and `$properties` parameters.
      * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
+     * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
      *
      * @param array   $styles Styles to process.
@@ -1991 +1998 @@
                  */
                 $value = wp_get_typography_font_size_value( array( 'size' => $value ) );
+            }
+
+            if ( 'aspect-ratio' === $css_property ) {
+                // For aspect ratio to work, other dimensions rules must be unset.
+                // This ensures that a fixed height does not override the aspect ratio.
+                $declarations[] = array(
+                    'name'  => 'min-height',
+                    'value' => 'unset',
+                );
             }