Typography Panel: Update typography controls for display in ToolsPanel

packages/block-editor/src/components/line-height-control/style.scss

@@ -6,3 +6,13 @@
 		max-width: 60px;
 	}
 }
+
+.components-tools-panel {
+	.block-editor-line-height-control {
+		margin-bottom: 0;
+
+		input {
+			max-width: 100%;
+		}
+	}
+}

packages/components/CHANGELOG.md

@@ -12,6 +12,7 @@
 ### New Feature
 
 -   Add an experimental `Navigator` components ([#34904](https://github.com/WordPress/gutenberg/pull/34904)) as a replacement for the previous `Navigation` related components.
+-   Added `showResetButton` prop to `FontSizePicker` component allowing optional display of the reset button ([35451](https://github.com/WordPress/gutenberg/pull/35451)).
 
 ### Bug Fix
 

packages/components/src/font-size-picker/README.md

@@ -83,6 +83,15 @@ If onChange is called without any parameter, it should reset the value, attendin
 -   Type: `function`
 -   Required: Yes
 
+### showResetButton
+
+If `true`, a reset button will be displayed alongside the predefined and custom
+font size fields.
+
+-   Type: `Boolean`
+-   Required: no
+-   Default: `true`
+
 ### value
 
 The current font size value.

packages/components/src/font-size-picker/index.js

@@ -60,6 +60,7 @@ function FontSizePicker(
 		onChange,
 		value,
 		withSlider = false,
+		showResetButton = true,
 	},
 	ref
 ) {
@@ -143,17 +144,19 @@ function FontSizePicker(
 						units={ hasUnits ? units : false }
 					/>
 				) }
-				<Button
-					className="components-color-palette__clear"
-					disabled={ value === undefined }
-					onClick={ () => {
-						onChange( undefined );
-					} }
-					isSmall
-					variant="secondary"
-				>
-					{ __( 'Reset' ) }
-				</Button>
+				{ showResetButton && (
+					<Button
+						className="components-color-palette__clear"
+						disabled={ value === undefined }
+						onClick={ () => {
+							onChange( undefined );
+						} }
+						isSmall
+						variant="secondary"
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				) }
 			</div>
 			{ withSlider && (
 				<RangeControl

packages/components/src/font-size-picker/style.scss

@@ -5,18 +5,30 @@
 	align-items: center;
 	margin-bottom: $grid-unit-30;
 
+	// Leave the spacing to the ToolsPanel grid layout.
+	.components-tools-panel & {
+		margin-bottom: 0;
+	}
+
 	.components-unit-control-wrapper {
 		margin-right: $grid-unit-10;
 
+		// Remove margin when reset button has been omitted.
+		&:last-child {
+			margin-right: 0;
+		}
+
 		.components-input-control__label {
 			font-weight: 300;
 			padding-bottom: 0 !important;
 			margin-bottom: $grid-unit-10 !important;
+			line-height: 1.4; // Make label line-height consistent between inputs.
 		}
 	}
 
 	.components-custom-select-control__button {
 		min-width: 120px;
+		width: 100%; // Allow the button to stretch when reset button is omitted.
 	}
 
 	// Apply the same height as the isSmall Reset button.
@@ -46,6 +58,7 @@
 
 	// Allow the font-size picker dropdown to grow in width.
 	.components-font-size-picker__select {
+		flex: 1;
 		margin-right: $grid-unit-10;
 	}