@wordpress/block-library 9.48.1 → 10.0.1-next.v.202606191442.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.48.1",
+	"version": "10.0.1-next.v.202606191442.0+17fe7db8a",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,8 +28,7 @@
 		"build-module",
 		"build-style",
 		"build-types",
-		"*.md",
-		"babel-plugin.cjs"
+		"*.md"
 	],
 	"main": "build/index.cjs",
 	"module": "build-module/index.mjs",
@@ -38,7 +37,6 @@
 			"import": "./build-module/index.mjs",
 			"require": "./build/index.cjs"
 		},
-		"./babel-plugin": "./babel-plugin.cjs",
 		"./build-module/*": "./build-module/*",
 		"./build-style/*": "./build-style/*",
 		"./package.json": "./package.json"
@@ -94,45 +92,44 @@
 	],
 	"dependencies": {
 		"@arraypress/waveform-player": "^1.2.1",
-		"@types/react": "^18.3.27",
-		"@wordpress/a11y": "^4.48.1",
-		"@wordpress/api-fetch": "^7.48.1",
-		"@wordpress/autop": "^4.48.1",
-		"@wordpress/base-styles": "^10.0.1",
-		"@wordpress/blob": "^4.48.1",
-		"@wordpress/block-editor": "^15.21.1",
-		"@wordpress/blocks": "^15.21.1",
-		"@wordpress/components": "^35.0.1",
-		"@wordpress/compose": "^8.1.1",
-		"@wordpress/core-data": "^7.48.1",
-		"@wordpress/data": "^10.48.1",
-		"@wordpress/date": "^5.48.1",
-		"@wordpress/deprecated": "^4.48.1",
-		"@wordpress/dom": "^4.48.1",
-		"@wordpress/element": "^8.0.1",
-		"@wordpress/escape-html": "^3.48.1",
-		"@wordpress/hooks": "^4.48.1",
-		"@wordpress/html-entities": "^4.48.1",
-		"@wordpress/i18n": "^6.21.1",
-		"@wordpress/icons": "^14.0.1",
-		"@wordpress/interactivity": "^6.48.1",
-		"@wordpress/interactivity-router": "^2.48.1",
-		"@wordpress/keyboard-shortcuts": "^5.48.1",
-		"@wordpress/keycodes": "^4.48.1",
-		"@wordpress/latex-to-mathml": "^1.16.1",
-		"@wordpress/notices": "^5.48.1",
-		"@wordpress/patterns": "^2.48.1",
-		"@wordpress/primitives": "^4.48.1",
-		"@wordpress/private-apis": "^1.48.1",
-		"@wordpress/reusable-blocks": "^5.48.1",
-		"@wordpress/rich-text": "^7.48.1",
-		"@wordpress/server-side-render": "^6.24.1",
-		"@wordpress/shortcode": "^4.48.1",
-		"@wordpress/ui": "^0.15.1",
-		"@wordpress/upload-media": "^0.33.1",
-		"@wordpress/url": "^4.48.1",
-		"@wordpress/viewport": "^6.48.1",
-		"@wordpress/wordcount": "^4.48.1",
+		"@wordpress/a11y": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/api-fetch": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/autop": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/base-styles": "^10.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/blob": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/block-editor": "^15.22.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/blocks": "^15.21.3-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/components": "^35.1.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/compose": "^8.1.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/core-data": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/data": "^10.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/date": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/deprecated": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/dom": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/escape-html": "^3.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/hooks": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/html-entities": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/i18n": "^6.21.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/icons": "^14.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/interactivity": "^6.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/interactivity-router": "^2.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keyboard-shortcuts": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keycodes": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/latex-to-mathml": "^1.16.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/notices": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/patterns": "^2.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/primitives": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/private-apis": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/reusable-blocks": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/rich-text": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/server-side-render": "^6.24.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/shortcode": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/ui": "^0.16.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/upload-media": "^0.34.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/url": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/viewport": "^6.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/wordcount": "^4.48.2-next.v.202606191442.0+17fe7db8a",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -144,18 +141,24 @@
 		"uuid": "^14.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.25.7",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
+		"@wordpress/stylelint-tools": "file:../../tools/stylelint",
 		"deep-freeze": "^0.0.1"
 	},
 	"peerDependencies": {
+		"@types/react": "^18.3.27",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
+	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
 }

package/src/avatar/index.php

@@ -67,7 +67,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 			// translators: 1: Author archive link. 2: Link target. %3$s Aria label. %4$s Avatar image.
 			$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( get_author_posts_url( $author_id ) ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 		}
-		return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
+		return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $avatar_block );
 	}
 	$comment = get_comment( $block->context['commentId'] );
 	if ( ! $comment ) {
@@ -93,7 +93,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		}
 		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 	}
-	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
+	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $avatar_block );
 }
 
 /**

package/src/block/index.php

@@ -1,4 +1,4 @@
-<?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName // Needed for WP_Block_Cloner helper class.
+<?php
 /**
  * Server-side rendering of the `core/block` block.
  *
@@ -83,31 +83,7 @@ function render_block_core_block( $attributes, $content, $block_instance ) {
 	 */
 	$block_instance->parsed_block['innerBlocks']  = parse_blocks( $content );
 	$block_instance->parsed_block['innerContent'] = array_fill( 0, count( $block_instance->parsed_block['innerBlocks'] ), null );
-	if ( method_exists( $block_instance, 'refresh_context_dependents' ) ) {
-		// WP_Block::refresh_context_dependents() was introduced in WordPress 6.8.
-		$block_instance->refresh_context_dependents();
-	} else {
-		// This branch can be removed once Gutenberg requires WordPress 6.8 or later.
-		if ( ! class_exists( 'WP_Block_Cloner' ) ) {
-			// phpcs:ignore Gutenberg.Commenting.SinceTag.MissingClassSinceTag
-			class WP_Block_Cloner extends WP_Block {
-				/**
-				 * Static methods of subclasses have access to protected properties
-				 * of instances of the parent class.
-				 * In this case, this gives us access to `available_context` and `registry`.
-				 */
-				// phpcs:ignore Gutenberg.Commenting.SinceTag.MissingMethodSinceTag
-				public static function clone_instance( $instance ) {
-					return new WP_Block(
-						$instance->parsed_block,
-						$instance->available_context,
-						$instance->registry
-					);
-				}
-			}
-		}
-		$block_instance = WP_Block_Cloner::clone_instance( $block_instance );
-	}
+	$block_instance->refresh_context_dependents();
 
 	$content = $block_instance->render( array( 'dynamic' => false ) );
 	unset( $seen_refs[ $attributes['ref'] ] );

package/src/comment-author-avatar/index.php

@@ -57,14 +57,14 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 		array(
 			'height'     => $height,
 			'width'      => $width,
-			'extra_attr' => sprintf( 'style="%1s"', $styles ),
+			'extra_attr' => sprintf( 'style="%s"', $styles ),
 			'class'      => $classes,
 		)
 	);
 	if ( isset( $spacing_attributes ) ) {
-		return sprintf( '<div style="%1s">%2s</div>', esc_attr( $spacing_string ), $avatar_block );
+		return sprintf( '<div style="%1$s">%2$s</div>', esc_attr( $spacing_string ), $avatar_block );
 	}
-	return sprintf( '<div>%1s</div>', $avatar_block );
+	return sprintf( '<div>%s</div>', $avatar_block );
 }
 
 /**

package/src/comment-author-name/index.php

@@ -40,7 +40,7 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 	$link               = get_comment_author_url( $comment );
 
 	if ( ! empty( $link ) && ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
-		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
+		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1$s" target="%2$s" >%3$s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
 	}
 	if ( '0' === $comment->comment_approved && ! $show_pending_links ) {
 		$comment_author = wp_kses( $comment_author, array() );

package/src/comment-date/index.php

@@ -37,7 +37,7 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	$link = get_comment_link( $comment );
 
 	if ( ! empty( $attributes['isLink'] ) ) {
-		$formatted_date = sprintf( '<a href="%1s">%2s</a>', esc_url( $link ), $formatted_date );
+		$formatted_date = sprintf( '<a href="%1$s">%2$s</a>', esc_url( $link ), $formatted_date );
 	}
 
 	return sprintf(

package/src/cover/edit/block-controls.js

@@ -11,8 +11,8 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { link } from '@wordpress/icons';
+import { MenuItem, ToolbarButton } from '@wordpress/components';
+import { crop, link } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,6 +31,9 @@ export default function CoverBlockControls( {
 	toggleUseFeaturedImage,
 	onClearMedia,
 	onSelectEmbedUrl,
+	onEditMedia,
+	editMediaButtonRef,
+	showEditMediaButton,
 	blockEditingMode,
 } ) {
 	const {
@@ -106,6 +109,15 @@ export default function CoverBlockControls( {
 						onToggle={ toggleMinFullHeight }
 						isDisabled={ ! hasInnerBlocks }
 					/>
+					{ showEditMediaButton && (
+						<ToolbarButton
+							ref={ editMediaButtonRef }
+							icon={ crop }
+							label={ __( 'Crop background image' ) }
+							onClick={ onEditMedia }
+							aria-haspopup="dialog"
+						/>
+					) }
 				</BlockControls>
 			) }
 			<BlockControls group="other">

package/src/cover/edit/index.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import {
+	useCallback,
 	useEffect,
 	useLayoutEffect,
 	useMemo,
@@ -24,6 +25,7 @@ import {
 	__experimentalUseGradient,
 	store as blockEditorStore,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -55,6 +57,9 @@ import {
 } from './color-utils';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 import { getBackgroundEmbedHtml } from '../embed-video-utils';
+import { unlock } from '../../lock-unlock';
+
+const { openMediaEditorModalKey } = unlock( blockEditorPrivateApis );
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -123,6 +128,11 @@ function CoverEdit( {
 		postId
 	);
 	const { getSettings } = useSelect( blockEditorStore );
+	const openMediaEditorModal = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()[ openMediaEditorModalKey ],
+		[]
+	);
 
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -490,6 +500,7 @@ function CoverEdit( {
 	);
 
 	const mediaElement = useRef();
+	const editMediaButtonRef = useRef();
 	const currentSettings = {
 		isVideoBackground,
 		isImageBackground,
@@ -500,6 +511,78 @@ function CoverEdit( {
 		overlayColor,
 	};
 
+	const openCoverMediaEditorModal = useCallback( () => {
+		if ( ! id || ! openMediaEditorModal ) {
+			return;
+		}
+
+		openMediaEditorModal( {
+			id,
+			onClose: () => {
+				editMediaButtonRef.current?.focus();
+			},
+			onUpdate: async ( { id: newId, url: newUrl } ) => {
+				if ( typeof newId !== 'number' ) {
+					return;
+				}
+
+				const nextAttributes = {
+					id: newId,
+					backgroundType: IMAGE_BACKGROUND_TYPE,
+					...( newUrl ? { url: newUrl } : {} ),
+					...( newId !== id
+						? { sizeSlug: DEFAULT_MEDIA_SIZE_SLUG }
+						: {} ),
+				};
+
+				if ( newUrl ) {
+					const averageBackgroundColor =
+						await getMediaColor( newUrl );
+
+					// Read latest values after await to avoid stale closures.
+					const {
+						attributes: currentAttrs,
+						overlayColor: currentOverlay,
+					} = propsRef.current;
+
+					let newOverlayColor = currentOverlay.color;
+					if ( ! currentAttrs.isUserOverlayColor ) {
+						newOverlayColor = averageBackgroundColor;
+						setOverlayColor( newOverlayColor );
+
+						// Make undo revert the next setAttributes and the previous setOverlayColor.
+						__unstableMarkNextChangeAsNotPersistent();
+					}
+
+					nextAttributes.isDark = compositeIsDark(
+						currentAttrs.dimRatio,
+						newOverlayColor,
+						averageBackgroundColor
+					);
+					nextAttributes.isUserOverlayColor =
+						currentAttrs.isUserOverlayColor || false;
+				}
+
+				setAttributes( nextAttributes );
+			},
+		} );
+	}, [
+		id,
+		openMediaEditorModal,
+		setAttributes,
+		setOverlayColor,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
+	const showEditMediaButton =
+		hasNonContentControls &&
+		! useFeaturedImage &&
+		isImageBackground &&
+		!! id &&
+		!! url &&
+		! isUploadingMedia &&
+		!! openMediaEditorModal;
+
 	const toggleUseFeaturedImage = async () => {
 		const newUseFeaturedImage = ! useFeaturedImage;
 
@@ -556,6 +639,9 @@ function CoverEdit( {
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			onClearMedia={ onClearMedia }
 			blockEditingMode={ blockEditingMode }
+			onEditMedia={ openCoverMediaEditorModal }
+			editMediaButtonRef={ editMediaButtonRef }
+			showEditMediaButton={ showEditMediaButton }
 		/>
 	);
 

package/src/cover/edit/inspector-controls.js

@@ -34,12 +34,21 @@ import { Link } from '@wordpress/ui';
 import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import {
+	getActiveDimensionValue,
+	getDimensionResetAttributes,
+	getDimensionUpdateAttributes,
+	getStyleStateKey,
+} from '../../utils/style-state';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 import PosterImage from '../../utils/poster-image';
 
-const { cleanEmptyObject, ResolutionTool, HTMLElementControl } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	cleanEmptyObject,
+	isDefaultBlockStyleState,
+	ResolutionTool,
+	HTMLElementControl,
+} = unlock( blockEditorPrivateApis );
 
 function CoverHeightInput( {
 	onChange,
@@ -124,20 +133,45 @@ export default function CoverInspectorControls( {
 	const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
 	const { gradientValue, setGradient } = __experimentalUseGradient();
-	const { imageSizes, hasSelectedStyleState } = useSelect(
+	const { imageSizes, selectedStyleState } = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				hasSelectedStyleState: hasSelectedBlockStyleState,
-			} = unlock( select( blockEditorStore ) );
+			const { getSettings, getSelectedBlockStyleState } = unlock(
+				select( blockEditorStore )
+			);
 
 			return {
 				imageSizes: getSettings()?.imageSizes,
-				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+				selectedStyleState: getSelectedBlockStyleState( clientId ),
 			};
 		},
 		[ clientId ]
 	);
+	const hasSelectedStyleState =
+		! isDefaultBlockStyleState( selectedStyleState );
+	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
+	const stateMinHeight = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'minHeight',
+		styleKey: 'minHeight',
+		rootValue: undefined,
+	} );
+	const [ stateMinHeightValue, stateMinHeightUnit ] =
+		parseQuantityAndUnitFromRawValue( stateMinHeight || '' );
+	const activeMinHeight = hasSelectedStyleState
+		? stateMinHeightValue
+		: minHeight;
+	const activeMinHeightUnit = hasSelectedStyleState
+		? stateMinHeightUnit || minHeightUnit
+		: minHeightUnit;
+	const activeAspectRatio = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'aspectRatio',
+		rootValue: attributes?.style?.dimensions?.aspectRatio,
+	} );
 
 	const image = useSelect(
 		( select ) =>
@@ -203,6 +237,52 @@ export default function CoverInspectorControls( {
 	const showOverlayControls =
 		colorGradientSettings.hasColorsOrGradients && ! hasSelectedStyleState;
 
+	const setMinHeightAttributes = ( nextMinHeight, nextUnit ) => {
+		if ( hasSelectedStyleState ) {
+			setAttributes(
+				getDimensionUpdateAttributes( {
+					style: attributes.style,
+					selectedState: selectedStyleState,
+					hasSelectedStyleState,
+					nextDimensions: {
+						minHeight:
+							nextMinHeight === undefined
+								? undefined
+								: `${ nextMinHeight }${
+										nextUnit || activeMinHeightUnit || 'px'
+								  }`,
+						aspectRatio: undefined,
+					},
+				} )
+			);
+			return;
+		}
+
+		setAttributes( {
+			minHeight: nextMinHeight,
+			style: cleanEmptyObject( {
+				...attributes?.style,
+				dimensions: {
+					...attributes?.style?.dimensions,
+					aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
+				},
+			} ),
+		} );
+	};
+
+	const getResetMinHeightAttributes = ( attrs = attributes ) => {
+		return getDimensionResetAttributes( {
+			style: attrs.style,
+			selectedState: selectedStyleState,
+			hasSelectedStyleState,
+			keys: [ 'minHeight' ],
+			defaultAttributes: {
+				minHeight: undefined,
+				minHeightUnit: undefined,
+			},
+		} );
+	};
+
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
@@ -401,53 +481,43 @@ export default function CoverInspectorControls( {
 					</ToolsPanelItem>
 				</InspectorControls>
 			) }
-			{ ! hasSelectedStyleState && (
-				<InspectorControls group="dimensions">
-					<ToolsPanelItem
-						className="single-column"
-						hasValue={ () => !! minHeight }
-						label={ __( 'Minimum height' ) }
-						onDeselect={ () =>
-							setAttributes( {
-								minHeight: undefined,
-								minHeightUnit: undefined,
-							} )
+			<InspectorControls group="dimensions">
+				<ToolsPanelItem
+					key={ selectedStyleStateKey }
+					className="single-column"
+					hasValue={ () => !! activeMinHeight }
+					label={ __( 'Minimum height' ) }
+					onDeselect={ () =>
+						setAttributes( getResetMinHeightAttributes() )
+					}
+					resetAllFilter={ getResetMinHeightAttributes }
+					isShownByDefault
+					panelId={ clientId }
+				>
+					<CoverHeightInput
+						value={ activeAspectRatio ? '' : activeMinHeight }
+						unit={ activeMinHeightUnit }
+						onChange={ ( newMinHeight ) =>
+							setMinHeightAttributes( newMinHeight )
 						}
-						resetAllFilter={ () => ( {
-							minHeight: undefined,
-							minHeightUnit: undefined,
-						} ) }
-						isShownByDefault
-						panelId={ clientId }
-					>
-						<CoverHeightInput
-							value={
-								attributes?.style?.dimensions?.aspectRatio
-									? ''
-									: minHeight
-							}
-							unit={ minHeightUnit }
-							onChange={ ( newMinHeight ) =>
-								setAttributes( {
-									minHeight: newMinHeight,
-									style: cleanEmptyObject( {
-										...attributes?.style,
-										dimensions: {
-											...attributes?.style?.dimensions,
-											aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
-										},
-									} ),
-								} )
-							}
-							onUnitChange={ ( nextUnit ) =>
-								setAttributes( {
-									minHeightUnit: nextUnit,
-								} )
+						onUnitChange={ ( nextUnit ) => {
+							if ( hasSelectedStyleState ) {
+								if ( activeMinHeight !== undefined ) {
+									setMinHeightAttributes(
+										activeMinHeight,
+										nextUnit
+									);
+								}
+								return;
 							}
-						/>
-					</ToolsPanelItem>
-				</InspectorControls>
-			) }
+
+							setAttributes( {
+								minHeightUnit: nextUnit,
+							} );
+						} }
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
 			<InspectorControls group="advanced">
 				<HTMLElementControl
 					tagName={ tagName }

package/src/editor.scss

@@ -50,7 +50,6 @@
 @use "./spacer/editor.scss" as *;
 @use "./table/editor.scss" as *;
 @use "./tab-list/editor.scss" as *;
-@use "./tab/editor.scss" as *;
 @use "./template-part/editor.scss" as *;
 @use "./term-template/editor.scss" as *;
 @use "./text-columns/editor.scss" as *;