Update design of FontSizePicker when withSlider is set (#44598)

* Update design of FontSizePicker when withSlider is true

* splitNumberAndUnitFromSize -> parseNumberAndUnitFromSize

* Add 8px margin to slider

* Add min=0 to UnitControl

* Go back to rounding pixel values when there are no units

* Restore previous logic for determining hasUnits

* Guard against missing first size

* Use existing parseQuantityAndUnitFromRawValue

* Use same min, max and step values as in SpacingSizesControl

* Update CHANGELOG.md

packages/block-editor/src/hooks/font-size.js

@@ -150,6 +150,7 @@ export function FontSizeEdit( props ) {
 			onChange={ onChange }
 			value={ fontSizeValue }
 			withReset={ false }
+			withSlider
 			size="__unstable-large"
 			__nextHasNoMarginBottom
 		/>

packages/components/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   `BoxControl` & `CustomSelectControl`: Add `onMouseOver` and `onMouseOut` callback props to allow handling of these events by parent components ([#44955](https://github.com/WordPress/gutenberg/pull/44955))
 
+## Enhancements
+
+-   `FontSizePicker`: Improved slider design when `withSlider` is set ([#44598](https://github.com/WordPress/gutenberg/pull/44598)).
+
 ### Bug Fix
 
 -   `Button`: Fix RTL alignment for buttons containing an icon and text ([#44787](https://github.com/WordPress/gutenberg/pull/44787)).

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

@@ -93,15 +93,15 @@ The current font size value.
 
 ### withSlider
 
-If `true`, the UI will contain a slider, instead of a numeric text input field. If `false`, no slider will be present.
+If `true`, a slider will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
 
 -   Type: `Boolean`
 -   Required: no
 -   Default: `false`
 
 ### withReset
 
-If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.
+If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
 
 -   Type: `Boolean`
 -   Required: no
@@ -113,4 +113,4 @@ Start opting into the new margin-free styles that will become the default in a f
 
 -   Type: `Boolean`
 -   Required: no
--   Default: `false`
+-   Default: `false`