Updates based on PR feedback

WordPress · Jan 27, 2023 · 25e09c9 · 25e09c9
1 parent ffeb9da
commit 25e09c9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
@@ -7,7 +7,6 @@ import {
 	SelectControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -47,11 +46,12 @@ export default function ImageSizeControl( {
 				/>
 			) }
 			{ isResizable && (
-				<VStack className="block-editor-image-size-control" spacing="0">
+				<div className="block-editor-image-size-control">
 					<p>{ __( 'Image dimensions' ) }</p>
 
 					<HStack align="baseline" spacing="3">
 						<NumberControl
+							className="block-editor-image-size-control__width"
 							label={ __( 'Width' ) }
 							value={ currentWidth }
 							min={ 1 }
@@ -60,6 +60,7 @@ export default function ImageSizeControl( {
 							}
 						/>
 						<NumberControl
+							className="block-editor-image-size-control__height"
 							label={ __( 'Height' ) }
 							value={ currentHeight }
 							min={ 1 }
@@ -106,7 +107,7 @@ export default function ImageSizeControl( {
 							{ __( 'Reset' ) }
 						</Button>
 					</HStack>
-				</VStack>
+				</div>
 			) }
 		</>
 	);

diff --git a/packages/block-editor/src/components/image-size-control/style.scss b/packages/block-editor/src/components/image-size-control/style.scss
@@ -1,3 +1,8 @@
 .block-editor-image-size-control {
 	margin-bottom: 1em;
+
+	.block-editor-image-size-control__width,
+	.block-editor-image-size-control__height {
+		margin-bottom: 1.115em;
+	}
 }
diff --git a/packages/editor/src/components/page-attributes/order.js b/packages/editor/src/components/page-attributes/order.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import {
+	Flex,
+	FlexBlock,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
@@ -25,15 +29,19 @@ export const PageAttributesOrder = ( { onUpdateOrder, order = 0 } ) => {
 	};
 	const value = orderInput === null ? order : orderInput;
 	return (
-		<NumberControl
-			label={ __( 'Order' ) }
-			value={ value }
-			onChange={ setUpdatedOrder }
-			labelPosition="side"
-			onBlur={ () => {
-				setOrderInput( null );
-			} }
-		/>
+		<Flex>
+			<FlexBlock>
+				<NumberControl
+					label={ __( 'Order' ) }
+					value={ value }
+					onChange={ setUpdatedOrder }
+					labelPosition="side"
+					onBlur={ () => {
+						setOrderInput( null );
+					} }
+				/>
+			</FlexBlock>
+		</Flex>
 	);
 };