From 81bd72d53365a6828f593daa04d771871f645cf2 Mon Sep 17 00:00:00 2001
From: Kiril Zhelyazkov <kiril.zhelyazkov@siteground.com>
Date: Mon, 5 Oct 2020 13:41:39 +0300
Subject: [PATCH 1/4] Make custom-font-size accept string value

---
 .../components/src/font-size-picker/index.js  | 45 +++++++++++++------
 .../src/font-size-picker/style.scss           |  6 +++
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index a762aa979c591..e22f8344171ef 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { textColor } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,6 +13,7 @@ import Button from '../button';
 import RangeControl from '../range-control';
 import CustomSelectControl from '../custom-select-control';
 import VisuallyHidden from '../visually-hidden';
+import ToggleControl from '../toggle-control';
 
 const DEFAULT_FONT_SIZE = 'default';
 const CUSTOM_FONT_SIZE = 'custom';
@@ -60,6 +61,8 @@ export default function FontSizePicker( {
 		[ fontSizes, disableCustomFontSizes ]
 	);
 
+	const [ advancedFontSizing, setAdvancedFontSizing ] = useState( false );
+
 	if ( ! options ) {
 		return null;
 	}
@@ -68,11 +71,30 @@ export default function FontSizePicker( {
 
 	const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;
 
+	const customInputProps = advancedFontSizing
+		? {
+				id: fontSizePickerNumberId,
+				className: 'components-font-size-picker__number-full-size',
+				onChange: ( event ) => onChange( event.target.value ),
+				ariaLabel: __( 'Custom' ),
+				value: value || '',
+				placeholder: 'e.g. calc(2rem - 13.5px)',
+		  }
+		: {
+				id: fontSizePickerNumberId,
+				className: 'components-font-size-picker__number',
+				type: 'number',
+				min: 1,
+				onChange: ( event ) => onChange( Number( event.target.value ) ),
+				ariaLabel: __( 'Custom' ),
+				value: value || '',
+		  };
+
 	return (
 		<fieldset className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<div className="components-font-size-picker__controls">
-				{ fontSizes.length > 0 && (
+				{ fontSizes.length > 0 && ! advancedFontSizing && (
 					<CustomSelectControl
 						className={ 'components-font-size-picker__select' }
 						label={ __( 'Font size' ) }
@@ -93,17 +115,7 @@ export default function FontSizePicker( {
 						<label htmlFor={ fontSizePickerNumberId }>
 							{ __( 'Custom' ) }
 						</label>
-						<input
-							id={ fontSizePickerNumberId }
-							className="components-font-size-picker__number"
-							type="number"
-							min={ 1 }
-							onChange={ ( event ) => {
-								onChange( Number( event.target.value ) );
-							} }
-							aria-label={ __( 'Custom' ) }
-							value={ value || '' }
-						/>
+						<input { ...customInputProps } />
 					</div>
 				) }
 				<Button
@@ -118,6 +130,13 @@ export default function FontSizePicker( {
 					{ __( 'Reset' ) }
 				</Button>
 			</div>
+			<div>
+				<ToggleControl
+					label="Advanced font sizing"
+					onChange={ () => setAdvancedFontSizing( !advancedFontSizing ) }
+					checked={ advancedFontSizing }
+				/>
+			</div>
 			{ withSlider && (
 				<RangeControl
 					className="components-font-size-picker__custom-input"
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
index a6e698e9e0ce3..c8e9ac0554039 100644
--- a/packages/components/src/font-size-picker/style.scss
+++ b/packages/components/src/font-size-picker/style.scss
@@ -27,9 +27,15 @@
 		&-container {
 			display: flex;
 			flex-direction: column;
+			flex-grow: 1;
 		}
 	}
 
+	.components-font-size-picker__number-full-size {
+		@extend .components-font-size-picker__number;
+		width: calc(100% - #{$grid-unit-10 + 2 * $border-width});
+	}
+
 	// Allow the font-size picker dropdown to grow in width.
 	.components-font-size-picker__select {
 		margin-right: $grid-unit-10;

From e09129623bd21c4658e8cfe319ed390a57336752 Mon Sep 17 00:00:00 2001
From: Kiril Zhelyazkov <kiril.zhelyazkov@siteground.com>
Date: Mon, 5 Oct 2020 14:32:38 +0300
Subject: [PATCH 2/4] updated styles

---
 .../components/src/font-size-picker/index.js  | 28 ++++++++++++++++---
 .../src/font-size-picker/style.scss           | 13 +++++----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index e22f8344171ef..c8d0e959f3371 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -61,7 +66,9 @@ export default function FontSizePicker( {
 		[ fontSizes, disableCustomFontSizes ]
 	);
 
-	const [ advancedFontSizing, setAdvancedFontSizing ] = useState( false );
+	const [ advancedFontSizing, setAdvancedFontSizing ] = useState(
+		! Number.isFinite( value ) && value !== undefined
+	);
 
 	if ( ! options ) {
 		return null;
@@ -74,7 +81,11 @@ export default function FontSizePicker( {
 	const customInputProps = advancedFontSizing
 		? {
 				id: fontSizePickerNumberId,
-				className: 'components-font-size-picker__number-full-size',
+				className: classnames(
+					'components-font-size-picker__number',
+					advancedFontSizing &&
+						'components-font-size-picker__number--full-size'
+				),
 				onChange: ( event ) => onChange( event.target.value ),
 				ariaLabel: __( 'Custom' ),
 				value: value || '',
@@ -93,7 +104,13 @@ export default function FontSizePicker( {
 	return (
 		<fieldset className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
-			<div className="components-font-size-picker__controls">
+			<div
+				className={ classnames(
+					'components-font-size-picker__controls',
+					advancedFontSizing &&
+						'components-font-size-picker__controls--full-size'
+				) }
+			>
 				{ fontSizes.length > 0 && ! advancedFontSizing && (
 					<CustomSelectControl
 						className={ 'components-font-size-picker__select' }
@@ -133,7 +150,10 @@ export default function FontSizePicker( {
 			<div>
 				<ToggleControl
 					label="Advanced font sizing"
-					onChange={ () => setAdvancedFontSizing( !advancedFontSizing ) }
+					onChange={ () =>
+						setAdvancedFontSizing( ! advancedFontSizing )
+					}
+					help="Toggle to activate custom font-sizing settings"
 					checked={ advancedFontSizing }
 				/>
 			</div>
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
index c8e9ac0554039..58efc30197367 100644
--- a/packages/components/src/font-size-picker/style.scss
+++ b/packages/components/src/font-size-picker/style.scss
@@ -15,7 +15,7 @@
 		margin-left: 0;
 		margin-right: $grid-unit-10;
 		margin-top: $grid-unit-10;
-		width: 54px;
+		width: 56px;
 
 		// Show the reset button as disabled until a value is entered.
 		&[value=""] + .components-button {
@@ -29,11 +29,10 @@
 			flex-direction: column;
 			flex-grow: 1;
 		}
-	}
 
-	.components-font-size-picker__number-full-size {
-		@extend .components-font-size-picker__number;
-		width: calc(100% - #{$grid-unit-10 + 2 * $border-width});
+		&--full-size {
+			width: auto;
+		}
 	}
 
 	// Allow the font-size picker dropdown to grow in width.
@@ -45,6 +44,10 @@
 		height: 30px;
 		margin-top: 26px;
 	}
+
+	&--full-size {
+		flex: 0 0 100%;
+	}
 }
 
 .components-font-size-picker__custom-input {

From d9341227ea7c707ffedef98a279923ecd2381104 Mon Sep 17 00:00:00 2001
From: Kiril Zhelyazkov <kiril.zhelyazkov@siteground.com>
Date: Mon, 5 Oct 2020 14:38:32 +0300
Subject: [PATCH 3/4] preferring lodash for checks

---
 packages/components/src/font-size-picker/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index c8d0e959f3371..ca183d81ed75c 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { isNil, isNumber } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -67,7 +68,7 @@ export default function FontSizePicker( {
 	);
 
 	const [ advancedFontSizing, setAdvancedFontSizing ] = useState(
-		! Number.isFinite( value ) && value !== undefined
+		! isNumber( value ) && ! isNil( value )
 	);
 
 	if ( ! options ) {

From ade76846140e112e01ba2d1c09e8e9053940ac0b Mon Sep 17 00:00:00 2001
From: Kiril Zhelyazkov <kiril.zhelyazkov@siteground.com>
Date: Mon, 19 Oct 2020 09:58:01 +0300
Subject: [PATCH 4/4] update strings to translations

---
 packages/components/src/font-size-picker/index.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index ca183d81ed75c..829a6cbde6045 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -90,7 +90,7 @@ export default function FontSizePicker( {
 				onChange: ( event ) => onChange( event.target.value ),
 				ariaLabel: __( 'Custom' ),
 				value: value || '',
-				placeholder: 'e.g. calc(2rem - 13.5px)',
+				placeholder: __( 'e.g. calc(2rem - 13.5px)' ),
 		  }
 		: {
 				id: fontSizePickerNumberId,
@@ -150,11 +150,13 @@ export default function FontSizePicker( {
 			</div>
 			<div>
 				<ToggleControl
-					label="Advanced font sizing"
+					label={ __( 'Advanced font sizing' ) }
 					onChange={ () =>
 						setAdvancedFontSizing( ! advancedFontSizing )
 					}
-					help="Toggle to activate custom font-sizing settings"
+					help={ __(
+						'Toggle to activate custom font-sizing settings'
+					) }
 					checked={ advancedFontSizing }
 				/>
 			</div>