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

package/src/post-date/README.md

@@ -0,0 +1,65 @@
+# Date
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Display a custom date.
+
+- **Name:** `core/post-date`
+- **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 |
+|-----------|------|---------|-------------|
+| `datetime` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `format` | `string` | — | — |
+| `isLink` | `boolean` | `false` | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+
+## 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`
+- [`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-date /-->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-date/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-date/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/post-date/edit.js

@@ -210,7 +210,7 @@ export default function PostDateEdit( props ) {
 					<ToolsPanelItem
 						hasValue={ () => isLink !== false }
 						label={
-							postType?.labels.singular_name
+							postType?.labels?.singular_name
 								? sprintf(
 										// translators: %s: Name of the post type e.g: "post".
 										__( 'Link to %s' ),
@@ -223,7 +223,7 @@ export default function PostDateEdit( props ) {
 					>
 						<ToggleControl
 							label={
-								postType?.labels.singular_name
+								postType?.labels?.singular_name
 									? sprintf(
 											// translators: %s: Name of the post type e.g: "post".
 											__( 'Link to %s' ),

package/src/post-date/index.php

@@ -84,7 +84,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	$time_tag = sprintf( '<time datetime="%1$s">%2$s</time>', $unformatted_date, $formatted_date );
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] && isset( $block->context['postId'] ) ) {
-		$time_tag = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $block->context['postId'] ), $time_tag );
+		$time_tag = sprintf( '<a href="%1$s">%2$s</a>', esc_url( get_the_permalink( $block->context['postId'] ) ), $time_tag );
 	}
 
 	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $time_tag );

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 }
+		/>
 	);
 };