Try unsetting min-height when applying aspect ratio and vice versa

docs/reference-guides/core-blocks.md

@@ -61,7 +61,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
 -	**Name:** core/buttons
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Calendar
 
@@ -172,7 +172,7 @@ Contains the block elements used to display a comment, like the title, date, aut
 -	**Category:** design
 -	**Parent:** core/comments
 -	**Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Comments
 
@@ -211,7 +211,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
 -	**Category:** theme
 -	**Parent:** core/comments-pagination
 -	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Comments Previous Page
 
@@ -275,7 +275,7 @@ Display footnotes added to the page. ([Source](https://github.com/WordPress/gute
 -	**Name:** core/footnotes
 -	**Category:** text
 -	**Supports:** color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Form
 
@@ -304,7 +304,7 @@ Provide a notification message after the form has been submitted. ([Source](http
 -	**Name:** core/form-submission-notification
 -	**Experimental:** true
 -	**Category:** common
--	**Supports:**
+-	**Supports:** 
 -	**Attributes:** type
 
 ## Form Submit Button
@@ -314,8 +314,8 @@ A submission button for forms. ([Source](https://github.com/WordPress/gutenberg/
 -	**Name:** core/form-submit-button
 -	**Experimental:** true
 -	**Category:** common
--	**Supports:**
--	**Attributes:**
+-	**Supports:** 
+-	**Attributes:** 
 
 ## Classic
 
@@ -491,7 +491,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
 -	**Category:** design
 -	**Parent:** core/post-content
 -	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Page List
 
@@ -603,7 +603,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
 -	**Name:** core/post-content
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Date
 
@@ -649,7 +649,7 @@ Contains the block elements used to render a post, like the title, date, feature
 -	**Category:** theme
 -	**Parent:** core/query
 -	**Supports:** align (full, wide), color (background, gradients, link, text), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Post Terms
 
@@ -714,7 +714,7 @@ Contains the block elements used to render content when no query results are fou
 -	**Category:** theme
 -	**Parent:** core/query
 -	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:**
+-	**Attributes:** 
 
 ## Pagination
 

lib/class-wp-theme-json-gutenberg.php

@@ -2098,12 +2098,11 @@ protected static function compute_style_properties( $styles, $settings = array()
 			}
 
 			if ( 'aspect-ratio' === $css_property ) {
-				// For aspect ratio to work, the width must be 100%.
-				// If a width support is added in the future, this should be updated
-				// to check if a width value is present before outputting this rule.
+				// 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'  => 'width',
-					'value' => '100%',
+					'name'  => 'min-height',
+					'value' => 'unset',
 				);
 			}
 

packages/block-editor/src/components/global-styles/dimensions-panel.js

@@ -354,8 +354,18 @@ export default function DimensionsPanel( {
 	const showMinHeightControl = useHasMinHeight( settings );
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
+		const tempValue = setImmutably(
+			value,
+			[ 'dimensions', 'minHeight' ],
+			newValue
+		);
+		// Apply min-height, while removing any applied aspect ratio.
 		onChange(
-			setImmutably( value, [ 'dimensions', 'minHeight' ], newValue )
+			setImmutably(
+				tempValue,
+				[ 'dimensions', 'aspectRatio' ],
+				undefined
+			)
 		);
 	};
 	const resetMinHeightValue = () => {
@@ -368,9 +378,16 @@ export default function DimensionsPanel( {
 	const aspectRatioValue = decodeValue(
 		inheritedValue?.dimensions?.aspectRatio
 	);
+	// Gotta change something here
 	const setAspectRatioValue = ( newValue ) => {
+		const tempValue = setImmutably(
+			value,
+			[ 'dimensions', 'aspectRatio' ],
+			newValue
+		);
+		// Apply aspect-ratio, while removing any applied min-height.
 		onChange(
-			setImmutably( value, [ 'dimensions', 'aspectRatio' ], newValue )
+			setImmutably( tempValue, [ 'dimensions', 'minHeight' ], undefined )
 		);
 	};
 	const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;