@wordpress/block-editor 10.0.3 → 10.0.4

package/build-style/style-rtl.css

@@ -4317,7 +4317,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .tools-panel-item-spacing {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-row-gap: 4px;
+  align-items: center;
+  grid-template-rows: 25px auto;
 }
 
 .component-spacing-sizes-control {
@@ -4332,19 +4333,28 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-row: 1/1;
   align-self: center;
 }
+.component-spacing-sizes-control .components-base-control__label {
+  margin-bottom: 0;
+  height: 16px;
+}
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
   grid-column: 1/1;
-  min-height: 30px;
   justify-content: left;
+  height: 16px;
+  margin-top: 12px;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
-  margin-top: 0;
-  margin-right: 0;
+.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
+  grid-column: 1/1;
+  justify-self: left;
+  margin-bottom: 0;
+}
+.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control {
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   color: #757575;
-  font-size: 12px;
+  margin-bottom: 0;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   grid-column: 2/2;
@@ -4359,6 +4369,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   justify-self: end;
   padding: 0;
 }
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+  height: 16px;
+}
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
   margin-left: 4px;
 }
@@ -4366,10 +4381,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 3/3;
   justify-self: end;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
   padding: 0;
   min-width: 24px;
+  height: 16px;
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
   grid-column: 3/3;
@@ -4379,7 +4395,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
   margin-right: 8px;
-  padding-left: 8px;
   height: 30px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
@@ -4387,11 +4402,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  padding-left: 8px;
-  height: 30px;
-}
-.component-spacing-sizes-control .components-range-control__wrapper {
-  margin-bottom: 0;
+  height: 40px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;
@@ -4408,12 +4419,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
   z-index: 3;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
-  margin-left: 4px;
-  grid-column: 1/1;
-  justify-self: left;
-  font-size: 12px;
-}
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
   grid-column: span 3;
 }

package/build-style/style.css

@@ -4317,7 +4317,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .tools-panel-item-spacing {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-row-gap: 4px;
+  align-items: center;
+  grid-template-rows: 25px auto;
 }
 
 .component-spacing-sizes-control {
@@ -4332,19 +4333,28 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-row: 1/1;
   align-self: center;
 }
+.component-spacing-sizes-control .components-base-control__label {
+  margin-bottom: 0;
+  height: 16px;
+}
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
   grid-column: 1/1;
-  min-height: 30px;
   justify-content: left;
+  height: 16px;
+  margin-top: 12px;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
-  margin-top: 0;
-  margin-left: 0;
+.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
+  grid-column: 1/1;
+  justify-self: left;
+  margin-bottom: 0;
+}
+.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control {
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   color: #757575;
-  font-size: 12px;
+  margin-bottom: 0;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   grid-column: 2/2;
@@ -4359,6 +4369,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   justify-self: end;
   padding: 0;
 }
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+  height: 16px;
+}
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
   margin-right: 4px;
 }
@@ -4366,10 +4381,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 3/3;
   justify-self: end;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
   padding: 0;
   min-width: 24px;
+  height: 16px;
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
   grid-column: 3/3;
@@ -4379,7 +4395,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
   margin-left: 8px;
-  padding-right: 8px;
   height: 30px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
@@ -4387,11 +4402,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  padding-right: 8px;
-  height: 30px;
-}
-.component-spacing-sizes-control .components-range-control__wrapper {
-  margin-bottom: 0;
+  height: 40px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;
@@ -4408,12 +4419,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
   z-index: 3;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
-  margin-right: 4px;
-  grid-column: 1/1;
-  justify-self: left;
-  font-size: 12px;
-}
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
   grid-column: span 3;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.0.3",
+	"version": "10.0.4",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,10 +36,10 @@
 		"@wordpress/a11y": "^3.17.1",
 		"@wordpress/api-fetch": "^6.14.1",
 		"@wordpress/blob": "^3.17.1",
-		"@wordpress/blocks": "^11.16.3",
-		"@wordpress/components": "^21.0.3",
+		"@wordpress/blocks": "^11.16.4",
+		"@wordpress/components": "^21.0.4",
 		"@wordpress/compose": "^5.15.2",
-		"@wordpress/data": "^7.1.2",
+		"@wordpress/data": "^7.1.3",
 		"@wordpress/date": "^4.17.1",
 		"@wordpress/deprecated": "^3.17.1",
 		"@wordpress/dom": "^3.17.2",
@@ -49,12 +49,12 @@
 		"@wordpress/i18n": "^4.17.1",
 		"@wordpress/icons": "^9.8.1",
 		"@wordpress/is-shallow-equal": "^4.17.1",
-		"@wordpress/keyboard-shortcuts": "^3.15.2",
+		"@wordpress/keyboard-shortcuts": "^3.15.3",
 		"@wordpress/keycodes": "^3.17.1",
-		"@wordpress/notices": "^3.17.2",
-		"@wordpress/rich-text": "^5.15.2",
+		"@wordpress/notices": "^3.17.3",
+		"@wordpress/rich-text": "^5.15.3",
 		"@wordpress/shortcode": "^3.17.1",
-		"@wordpress/style-engine": "^1.0.2",
+		"@wordpress/style-engine": "^1.0.3",
 		"@wordpress/token-list": "^2.17.1",
 		"@wordpress/url": "^3.18.1",
 		"@wordpress/warning": "^2.17.1",
@@ -79,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "54a676dba557a76062d3bf91bfe8a3e3ea12d254"
+	"gitHead": "491b4b522dffb4d25aca066ec55500f456ac4aa3"
 }

package/src/components/block-parent-selector/index.js

@@ -83,10 +83,10 @@ export default function BlockParentSelector() {
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
 					__( 'Select %s' ),
-					blockInformation.title
+					blockInformation?.title
 				) }
 				showTooltip
-				icon={ <BlockIcon icon={ blockInformation.icon } /> }
+				icon={ <BlockIcon icon={ blockInformation?.icon } /> }
 			/>
 		</div>
 	);

package/src/components/block-popover/inbetween.js

@@ -226,7 +226,7 @@ function BlockPopoverInbetween( {
 			forcePopoverRecompute
 		);
 		return () => {
-			previousElement.ownerDocument.defaultView.removeEventListener(
+			previousElement.ownerDocument.defaultView?.removeEventListener(
 				'resize',
 				forcePopoverRecompute
 			);

package/src/components/block-popover/index.js

@@ -42,24 +42,15 @@ function BlockPopover(
 		ref,
 		usePopoverScroll( __unstableContentRef ),
 	] );
-	const style = useMemo( () => {
-		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
-			return {};
-		}
-
-		return {
-			position: 'absolute',
-			width: selectedElement.offsetWidth,
-			height: selectedElement.offsetHeight,
-		};
-	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
-	const [ popoverAnchorRecomputeCounter, forceRecomputePopoverAnchor ] =
-		useReducer(
-			// Module is there to make sure that the counter doesn't overflow.
-			( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
-			0
-		);
+	const [
+		popoverDimensionsRecomputeCounter,
+		forceRecomputePopoverDimensions,
+	] = useReducer(
+		// Module is there to make sure that the counter doesn't overflow.
+		( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
+		0
+	);
 
 	// When blocks are moved up/down, they are animated to their new position by
 	// updating the `transform` property manually (i.e. without using CSS
@@ -74,7 +65,7 @@ function BlockPopover(
 		}
 
 		const observer = new window.MutationObserver(
-			forceRecomputePopoverAnchor
+			forceRecomputePopoverDimensions
 		);
 		observer.observe( selectedElement, { attributes: true } );
 
@@ -83,12 +74,36 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
+	const style = useMemo( () => {
+		if (
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
+			// than 0. This check is only there to satisfy the correctness of the
+			// exhaustive-deps rule for the `useMemo` hook.
+			popoverDimensionsRecomputeCounter < 0 ||
+			! selectedElement ||
+			lastSelectedElement !== selectedElement
+		) {
+			return {};
+		}
+
+		return {
+			position: 'absolute',
+			width: selectedElement.offsetWidth,
+			height: selectedElement.offsetHeight,
+		};
+	}, [
+		selectedElement,
+		lastSelectedElement,
+		__unstableRefreshSize,
+		popoverDimensionsRecomputeCounter,
+	] );
+
 	const popoverAnchor = useMemo( () => {
 		if (
-			// popoverAnchorRecomputeCounter is by definition always equal or greater
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
-			popoverAnchorRecomputeCounter < 0 ||
+			popoverDimensionsRecomputeCounter < 0 ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -132,7 +147,7 @@ function BlockPopover(
 		bottomClientId,
 		lastSelectedElement,
 		selectedElement,
-		popoverAnchorRecomputeCounter,
+		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

package/src/components/image-editor/use-transform-image.js

@@ -41,7 +41,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 		if ( angle === 0 ) {
 			setEditedUrl();
 			setRotation( angle );
-			setAspect( 1 / aspect );
+			setAspect( naturalWidth / naturalHeight );
 			setPosition( {
 				x: -( position.y * naturalAspectRatio ),
 				y: position.x * naturalAspectRatio,
@@ -80,7 +80,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 			canvas.toBlob( ( blob ) => {
 				setEditedUrl( URL.createObjectURL( blob ) );
 				setRotation( angle );
-				setAspect( 1 / aspect );
+				setAspect( canvas.width / canvas.height );
 				setPosition( {
 					x: -( position.y * naturalAspectRatio ),
 					y: position.x * naturalAspectRatio,

package/src/components/spacing-sizes-control/index.js

@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { __experimentalText as Text } from '@wordpress/components';
+import { BaseControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -68,8 +73,15 @@ export default function SpacingSizesControl( {
 	};
 
 	return (
-		<fieldset role="region" className="component-spacing-sizes-control">
-			<Text as="legend">{ label }</Text>
+		<fieldset
+			role="region"
+			className={ classnames( 'component-spacing-sizes-control', {
+				'is-unlinked': ! isLinked,
+			} ) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
 			{ ! hasOneSide && (
 				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
 			) }

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -9,12 +9,12 @@ import classnames from 'classnames';
 import { useState, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
+	BaseControl,
 	Button,
 	RangeControl,
 	CustomSelectControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
@@ -167,21 +167,21 @@ export default function SpacingInputControl( {
 		<>
 			{ side !== 'all' && (
 				<HStack className="components-spacing-sizes-control__side-labels">
-					<Text className="components-spacing-sizes-control__side-label">
+					<BaseControl.VisualLabel className="components-spacing-sizes-control__side-label">
 						{ LABELS[ side ] }
-					</Text>
+					</BaseControl.VisualLabel>
 
 					{ showHint && (
-						<Text className="components-spacing-sizes-control__hint-single">
+						<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-single">
 							{ currentValueHint }
-						</Text>
+						</BaseControl.VisualLabel>
 					) }
 				</HStack>
 			) }
 			{ side === 'all' && showHint && (
-				<Text className="components-spacing-sizes-control__hint-all">
+				<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-all">
 					{ currentValueHint }
-				</Text>
+				</BaseControl.VisualLabel>
 			) }
 
 			{ ! disableCustomSpacingSizes && (
@@ -256,6 +256,7 @@ export default function SpacingInputControl( {
 					marks={ marks }
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
+					__nextHasNoMarginBottom={ true }
 				/>
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (

package/src/components/spacing-sizes-control/style.scss

@@ -1,7 +1,8 @@
 .tools-panel-item-spacing {
 	display: grid;
 	grid-template-columns: auto 1fr auto;
-	grid-row-gap: $grid-unit-05;
+	align-items: center;
+	grid-template-rows: 25px auto;
 }
 
 .component-spacing-sizes-control {
@@ -17,21 +18,34 @@
 		align-self: center;
 	}
 
+	.components-base-control__label {
+		margin-bottom: 0;
+		height: $grid-unit-20;
+	}
+
 	.components-spacing-sizes-control__side-labels {
 		grid-column: 1 / 1;
-		min-height: 30px;
 		justify-content: left;
+		height: $grid-unit-20;
+		margin-top: $grid-unit-15;
+	}
+
+	.components-spacing-sizes-control__side-label {
+		grid-column: 1 / 1;
+		justify-self: left;
+		margin-bottom: 0;
 	}
 
-	.components-spacing-sizes-control__hint-single {
-		margin-top: 0;
-		margin-left: 0;
+	&.is-unlinked {
+		.components-range-control.components-spacing-sizes-control__range-control {
+			margin-top: $grid-unit-15;
+		}
 	}
 
 	.components-spacing-sizes-control__hint-single,
 	.components-spacing-sizes-control__hint-all {
 		color: $gray-700;
-		font-size: 12px;
+		margin-bottom: 0;
 	}
 
 	.components-spacing-sizes-control__hint-all {
@@ -47,6 +61,11 @@
 		grid-row: 1 / 1;
 		justify-self: end;
 		padding: 0;
+		&.is-small.has-icon {
+			padding: 0;
+			min-width: $icon-size;
+			height: $grid-unit-20;
+		}
 	}
 
 	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
@@ -56,13 +75,11 @@
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-all,
-	.components-spacing-sizes-control__custom-toggle-single {
 		&.is-small.has-icon {
 			padding: 0;
 			min-width: $icon-size;
+			height: $grid-unit-20;
+			margin-top: $grid-unit-15;
 		}
 	}
 
@@ -75,7 +92,6 @@
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
 		margin-left: $grid-unit-10;
-		padding-right: $grid-unit-10;
 		height: 30px;
 	}
 
@@ -85,12 +101,7 @@
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		padding-right: $grid-unit-10;
-		height: 30px;
-	}
-
-	.components-range-control__wrapper {
-		margin-bottom: 0;
+		height: 40px;
 	}
 
 	.components-range-control__mark {
@@ -112,13 +123,6 @@
 		z-index: 3;
 	}
 
-	.components-spacing-sizes-control__side-label {
-		margin-right: $grid-unit-05;
-		grid-column: 1 / 1;
-		justify-self: left;
-		font-size: 12px;
-	}
-
 	.components-spacing-sizes-control__custom-select-control {
 		grid-column: span 3;
 	}

package/src/hooks/index.js

@@ -20,6 +20,7 @@ import './metadata';
 import './metadata-name';
 
 export { useCustomSides } from './dimensions';
+export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';