From bf39d96b591fe9ab699f9624518e7e310287228e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:01:21 +1100
Subject: [PATCH] Try outputting has-aspect-ratio classname

---
 packages/block-editor/src/hooks/dimensions.js | 50 ++++++++++++++++++-
 packages/block-editor/src/hooks/index.js      |  2 +
 packages/block-library/src/common.scss        |  5 ++
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 4dcba5c4abef6..51f6dd3907253 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import { Platform, useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
@@ -19,7 +24,6 @@ import { MarginVisualizer } from './margin';
 import { PaddingVisualizer } from './padding';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
-
 import { cleanEmptyObject } from './utils';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
@@ -131,6 +135,48 @@ function DimensionsPanelPure( { clientId, name, setAttributes, settings } ) {
 // and not the whole attributes object.
 export const DimensionsPanel = pure( DimensionsPanelPure );
 
+/**
+ * Determine whether there is block support for dimensions.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature   Background image feature to check for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasDimensionsSupport( blockName, feature = 'any' ) {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return !! support?.dimensions;
+	}
+
+	return !! support?.[ feature ];
+}
+
+export default {
+	useBlockProps,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasDimensionsSupport( name, 'aspectRatio' );
+	},
+};
+
+function useBlockProps( { style } ) {
+	const className = classnames( {
+		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
+	} );
+
+	return { className };
+}
+
 /**
  * @deprecated
  */
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 506f2a50a83a7..0319d336609d2 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -12,6 +12,7 @@ import './generated-class-name';
 import style from './style';
 import './settings';
 import color from './color';
+import dimensions from './dimensions';
 import duotone from './duotone';
 import './font-family';
 import fontSize from './font-size';
@@ -42,6 +43,7 @@ createBlockEditFilter(
 createBlockListBlockFilter( [
 	align,
 	color,
+	dimensions,
 	duotone,
 	fontSize,
 	border,
diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
index 2e1c2b8b706bc..7243811bb4af7 100644
--- a/packages/block-library/src/common.scss
+++ b/packages/block-library/src/common.scss
@@ -180,3 +180,8 @@ html :where(.is-position-sticky) {
 		/* stylelint-enable length-zero-no-unit */
 	}
 }
+
+// TODO: Put this rule somewhere else
+.has-aspect-ratio {
+	width: 100%;
+}