@wordpress/block-library 9.48.0 → 10.0.0

package/src/post-excerpt/README.md

@@ -0,0 +1,66 @@
+# Excerpt
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Display the excerpt.
+
+- **Name:** `core/post-excerpt`
+- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Dynamic](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (server-rendered)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `moreText` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `showMoreOnNewLine` | `boolean` | `true` | — |
+| `excerptLength` | `number` | `55` | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+  - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `margin`: `true`
+  - `padding`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+  - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
+  - `textColumns`: `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `postId`
+- `postType`
+- `queryId`
+
+## Block Markup
+
+This is a [**dynamic block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It is rendered on the server and does not save HTML in post content.
+
+In post content, it is stored as a block comment:
+
+```html
+<!-- wp:post-excerpt /-->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-excerpt/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-excerpt/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/post-featured-image/README.md

@@ -0,0 +1,86 @@
+# Featured Image
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Display a post's featured image.
+
+- **Name:** `core/post-featured-image`
+- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Dynamic](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (server-rendered)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `isLink` | `boolean` | `false` | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `aspectRatio` | `string` | — | — |
+| `width` | `string` | — | — |
+| `height` | `string` | — | — |
+| `scale` | `string` | `"cover"` | — |
+| `sizeSlug` | `string` | — | — |
+| `rel` | `string` | `""` | [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `rel`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `linkTarget` | `string` | `"_self"` | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `overlayColor` | `string` | — | — |
+| `customOverlayColor` | `string` | — | — |
+| `dimRatio` | `number` | `0` | — |
+| `gradient` | `string` | — | — |
+| `customGradient` | `string` | — | — |
+| `useFirstImageFromPost` | `boolean` | `false` | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"left"`, `"right"`, `"center"`, `"wide"`, `"full"`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `false`
+  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `false`
+- [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
+  - [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `margin`: `true`
+  - `padding`: `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `postId`
+- `postType`
+- `queryId`
+
+## CSS Selectors
+
+_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
+
+- **dimensions**: `.wp-block-post-featured-image img`
+- **border**: `.wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay`
+- **shadow**: `.wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder`
+- **filter**:
+  - duotone: `.wp-block-post-featured-image img, .wp-block-post-featured-image .wp-block-post-featured-image__placeholder, .wp-block-post-featured-image .components-placeholder__illustration, .wp-block-post-featured-image .components-placeholder::before`
+
+## Block Markup
+
+This is a [**dynamic block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It is rendered on the server and does not save HTML in post content.
+
+In post content, it is stored as a block comment:
+
+```html
+<!-- wp:post-featured-image /-->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-featured-image/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-featured-image/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/post-featured-image/block.json

@@ -98,6 +98,7 @@
 		}
 	},
 	"selectors": {
+		"dimensions": ".wp-block-post-featured-image img",
 		"border": ".wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay",
 		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder",
 		"filter": {

package/src/post-featured-image/dimension-controls.js

@@ -2,207 +2,128 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
+import { __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
 import {
-	SelectControl,
-	__experimentalUnitControl as UnitControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { useSettings } from '@wordpress/block-editor';
+	privateApis as blockEditorPrivateApis,
+	useSettings,
+} from '@wordpress/block-editor';
 
-const SCALE_OPTIONS = (
-	<>
-		<ToggleGroupControlOption
-			value="cover"
-			label={ _x( 'Cover', 'Scale option for Image dimension control' ) }
-		/>
-		<ToggleGroupControlOption
-			value="contain"
-			label={ _x(
-				'Contain',
-				'Scale option for Image dimension control'
-			) }
-		/>
-		<ToggleGroupControlOption
-			value="fill"
-			label={ _x( 'Fill', 'Scale option for Image dimension control' ) }
-		/>
-	</>
-);
+/**
+ * Internal dependencies
+ */
+import {
+	getActiveDimensionValue,
+	getDimensionUpdateAttributes,
+	getStyleStateKey,
+} from '../utils/style-state';
+import { unlock } from '../lock-unlock';
+
+const { DimensionsTool } = unlock( blockEditorPrivateApis );
 
 const DEFAULT_SCALE = 'cover';
+const DIMENSION_KEYS = [ 'aspectRatio', 'width', 'height', 'scale' ];
 
-const scaleHelp = {
-	cover: __(
-		'Image is scaled and cropped to fill the entire space without being distorted.'
-	),
-	contain: __(
-		'Image is scaled to fill the space without clipping nor distorting.'
-	),
-	fill: __(
-		'Image will be stretched and distorted to completely fill the space.'
-	),
-};
+const scaleOptions = [
+	{
+		value: 'cover',
+		label: _x( 'Cover', 'Scale option for Image dimension control' ),
+		help: __(
+			'Image is scaled and cropped to fill the entire space without being distorted.'
+		),
+	},
+	{
+		value: 'contain',
+		label: _x( 'Contain', 'Scale option for Image dimension control' ),
+		help: __(
+			'Image is scaled to fill the space without clipping nor distorting.'
+		),
+	},
+	{
+		value: 'fill',
+		label: _x( 'Fill', 'Scale option for Image dimension control' ),
+		help: __(
+			'Image will be stretched and distorted to completely fill the space.'
+		),
+	},
+];
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { aspectRatio, width, height, scale },
+	attributes,
 	setAttributes,
+	selectedStyleState,
+	hasSelectedStyleState = false,
 } ) => {
-	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
-		useSettings(
-			'spacing.units',
-			'dimensions.aspectRatios.default',
-			'dimensions.aspectRatios.theme',
-			'dimensions.defaultAspectRatios'
-		);
+	const { style } = attributes;
+	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
+	const activeAspectRatio = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'aspectRatio',
+	} );
+	const activeWidth = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'width',
+	} );
+	const activeHeight = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'height',
+	} );
+	const activeScale = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'scale',
+		styleKey: 'objectFit',
+	} );
+
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
 
-	const onDimensionChange = ( dimension, nextValue ) => {
-		const parsedValue = parseFloat( nextValue );
-		/**
-		 * If we have no value set and we change the unit,
-		 * we don't want to set the attribute, as it would
-		 * end up having the unit as value without any number.
-		 */
-		if ( isNaN( parsedValue ) && nextValue ) {
-			return;
-		}
-		setAttributes( {
-			[ dimension ]: parsedValue < 0 ? '0' : nextValue,
-		} );
-	};
-	const scaleLabel = _x( 'Scale', 'Image scaling options' );
-
-	const showScaleControl =
-		height || ( aspectRatio && aspectRatio !== 'auto' );
+	const setDimensionAttributes = ( nextDimensions ) => {
+		const nextImageDimensions = {
+			...nextDimensions,
+			width:
+				! nextDimensions.width && nextDimensions.height
+					? 'auto'
+					: nextDimensions.width,
+		};
 
-	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
-		label: name,
-		value: ratio,
-	} ) );
-
-	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
-		label: name,
-		value: ratio,
-	} ) );
-
-	const aspectRatioOptions = [
-		{
-			label: _x(
-				'Original',
-				'Aspect ratio option for dimensions control'
-			),
-			value: 'auto',
-		},
-		...( showDefaultRatios ? defaultOptions : [] ),
-		...( themeOptions ? themeOptions : [] ),
-	];
+		setAttributes(
+			getDimensionUpdateAttributes( {
+				style,
+				selectedState: selectedStyleState,
+				hasSelectedStyleState,
+				nextDimensions: nextImageDimensions,
+				dimensionKeyMap: { scale: 'objectFit' },
+				dimensionKeys: DIMENSION_KEYS,
+			} )
+		);
+	};
 
 	return (
-		<>
-			<ToolsPanelItem
-				hasValue={ () => !! aspectRatio }
-				label={ __( 'Aspect ratio' ) }
-				onDeselect={ () => setAttributes( { aspectRatio: undefined } ) }
-				resetAllFilter={ () => ( {
-					aspectRatio: undefined,
-				} ) }
-				isShownByDefault
-				panelId={ clientId }
-			>
-				<SelectControl
-					__next40pxDefaultSize
-					label={ __( 'Aspect ratio' ) }
-					value={ aspectRatio || 'auto' }
-					options={ aspectRatioOptions }
-					onChange={ ( nextAspectRatio ) =>
-						setAttributes( { aspectRatio: nextAspectRatio } )
-					}
-				/>
-			</ToolsPanelItem>
-			<ToolsPanelItem
-				className="single-column"
-				hasValue={ () => !! height }
-				label={ __( 'Height' ) }
-				onDeselect={ () => setAttributes( { height: undefined } ) }
-				resetAllFilter={ () => ( {
-					height: undefined,
-				} ) }
-				isShownByDefault
-				panelId={ clientId }
-			>
-				<UnitControl
-					__next40pxDefaultSize
-					label={ __( 'Height' ) }
-					labelPosition="top"
-					value={ height || '' }
-					min={ 0 }
-					onChange={ ( nextHeight ) =>
-						onDimensionChange( 'height', nextHeight )
-					}
-					units={ units }
-				/>
-			</ToolsPanelItem>
-			<ToolsPanelItem
-				className="single-column"
-				hasValue={ () => !! width }
-				label={ __( 'Width' ) }
-				onDeselect={ () => setAttributes( { width: undefined } ) }
-				resetAllFilter={ () => ( {
-					width: undefined,
-				} ) }
-				isShownByDefault
-				panelId={ clientId }
-			>
-				<UnitControl
-					__next40pxDefaultSize
-					label={ __( 'Width' ) }
-					labelPosition="top"
-					value={ width || '' }
-					min={ 0 }
-					onChange={ ( nextWidth ) =>
-						onDimensionChange( 'width', nextWidth )
-					}
-					units={ units }
-				/>
-			</ToolsPanelItem>
-			{ showScaleControl && (
-				<ToolsPanelItem
-					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
-					label={ scaleLabel }
-					onDeselect={ () =>
-						setAttributes( {
-							scale: DEFAULT_SCALE,
-						} )
-					}
-					resetAllFilter={ () => ( {
-						scale: DEFAULT_SCALE,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<ToggleGroupControl
-						__next40pxDefaultSize
-						label={ scaleLabel }
-						value={ scale }
-						help={ scaleHelp[ scale ] }
-						onChange={ ( value ) =>
-							setAttributes( {
-								scale: value,
-							} )
-						}
-						isBlock
-					>
-						{ SCALE_OPTIONS }
-					</ToggleGroupControl>
-				</ToolsPanelItem>
-			) }
-		</>
+		<DimensionsTool
+			key={ selectedStyleStateKey }
+			panelId={ clientId }
+			value={ {
+				aspectRatio: activeAspectRatio,
+				width: activeWidth,
+				height: activeHeight,
+				scale: activeScale,
+			} }
+			onChange={ setDimensionAttributes }
+			defaultScale={ DEFAULT_SCALE }
+			defaultAspectRatio="auto"
+			scaleOptions={ scaleOptions }
+			unitsOptions={ units }
+		/>
 	);
 };
 

package/src/post-featured-image/edit.js

@@ -49,9 +49,15 @@ import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { unlock } from '../lock-unlock';
+import { getDimensionResetAttributes } from '../utils/style-state';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const { ResolutionTool } = unlock( blockEditorPrivateApis );
+const { isDefaultBlockStyleState, ResolutionTool } = unlock(
+	blockEditorPrivateApis
+);
+
+const hasDimensionValue = ( value ) =>
+	value !== undefined && value !== null && value !== '';
 const DEFAULT_MEDIA_SIZE_SLUG = 'full';
 
 function FeaturedImageResolutionTool( { image, value, onChange } ) {
@@ -137,12 +143,13 @@ export default function PostFeaturedImageEdit( {
 		return imageId;
 	}, [ storedFeaturedImage, useFirstImageFromPost, postContent ] );
 
-	const { media, postType, postPermalink, hasSelectedStyleState } = useSelect(
+	const { media, postType, postPermalink, selectedStyleState } = useSelect(
 		( select ) => {
 			const { getEntityRecord, getPostType, getEditedEntityRecord } =
 				select( coreStore );
-			const { hasSelectedStyleState: hasSelectedBlockStyleState } =
-				unlock( select( blockEditorStore ) );
+			const { getSelectedBlockStyleState } = unlock(
+				select( blockEditorStore )
+			);
 			return {
 				media:
 					featuredImage &&
@@ -155,18 +162,19 @@ export default function PostFeaturedImageEdit( {
 					postTypeSlug,
 					postId
 				)?.link,
-				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+				selectedStyleState: getSelectedBlockStyleState( clientId ),
 			};
 		},
 		[ clientId, featuredImage, postTypeSlug, postId ]
 	);
+	const hasSelectedStyleState =
+		! isDefaultBlockStyleState( selectedStyleState );
 
 	const mediaUrl =
 		media?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
 		media?.source_url;
 
 	const blockProps = useBlockProps( {
-		style: { width, height, aspectRatio },
 		className: clsx( {
 			'is-transient': temporaryURL,
 		} ),
@@ -184,8 +192,13 @@ export default function PostFeaturedImageEdit( {
 				) }
 				withIllustration
 				style={ {
-					height: !! aspectRatio && '100%',
-					width: !! aspectRatio && '100%',
+					aspectRatio,
+					height: hasDimensionValue( height )
+						? height
+						: hasDimensionValue( width ) && 'auto',
+					width: hasDimensionValue( width )
+						? width
+						: !! aspectRatio && '100%',
 					...borderProps.style,
 					...shadowProps.style,
 				} }
@@ -240,16 +253,32 @@ export default function PostFeaturedImageEdit( {
 					clientId={ clientId }
 				/>
 			</InspectorControls>
-			{ ! hasSelectedStyleState && (
-				<InspectorControls group="dimensions">
-					<DimensionControls
-						clientId={ clientId }
-						attributes={ attributes }
-						setAttributes={ setAttributes }
-						media={ media }
-					/>
-				</InspectorControls>
-			) }
+			<InspectorControls
+				group="dimensions"
+				resetAllFilter={ ( attrs ) => {
+					return getDimensionResetAttributes( {
+						attributes: attrs,
+						selectedState: selectedStyleState,
+						hasSelectedStyleState,
+						keys: [ 'aspectRatio', 'height', 'objectFit', 'width' ],
+						defaultAttributes: {
+							aspectRatio: undefined,
+							height: undefined,
+							scale: undefined,
+							width: undefined,
+						},
+					} );
+				} }
+			>
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					media={ media }
+					selectedStyleState={ selectedStyleState }
+					hasSelectedStyleState={ hasSelectedStyleState }
+				/>
+			</InspectorControls>
 			{ ( featuredImage || isDescendentOfQueryLoop || ! postId ) && (
 				<InspectorControls>
 					<ToolsPanel
@@ -266,7 +295,7 @@ export default function PostFeaturedImageEdit( {
 					>
 						<ToolsPanelItem
 							label={
-								postType?.labels.singular_name
+								postType?.labels?.singular_name
 									? sprintf(
 											// translators: %s: Name of the post type e.g: "post".
 											__( 'Link to %s' ),
@@ -327,7 +356,6 @@ export default function PostFeaturedImageEdit( {
 								}
 							>
 								<TextControl
-									__next40pxDefaultSize
 									label={ __( 'Link relation' ) }
 									help={ createInterpolateElement(
 										__(
@@ -398,8 +426,11 @@ export default function PostFeaturedImageEdit( {
 	const imageStyles = {
 		...borderProps.style,
 		...shadowProps.style,
-		height: aspectRatio ? '100%' : height,
-		width: !! aspectRatio && '100%',
+		aspectRatio,
+		height: hasDimensionValue( height )
+			? height
+			: hasDimensionValue( width ) && 'auto',
+		width: hasDimensionValue( width ) ? width : !! aspectRatio && '100%',
 		objectFit: !! ( height || aspectRatio ) && scale,
 	};