Rework font-size selection to improve clarity of options and the UI.

WordPress · Oct 3, 2018 · 713526e · 713526e
1 parent 2fe8cc0
commit 713526e
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 37 deletions.
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
@@ -110,17 +110,17 @@
 }
 
 .has-small-font-size {
-	font-size: 14px;
+	font-size: 13px;
 }
 
 .has-regular-font-size {
-	font-size: 16px;
+	font-size: 18px;
 }
 
 .has-large-font-size {
-	font-size: 36px;
+	font-size: 22px;
 }
 
 .has-larger-font-size {
-	font-size: 48px;
+	font-size: 32px;
 }
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -15,42 +15,64 @@ import { __ } from '@wordpress/i18n';
 import Button from '../button';
 import ButtonGroup from '../button-group';
 import RangeControl from '../range-control';
+import Tooltip from '../tooltip';
 
-export default function FontSizePicker( { fontSizes = [], fallbackFontSize, value, onChange } ) {
+export default function FontSizePicker( { fontSizes = [], fallbackFontSize, value, onChange, withSlider } ) {
+	const onChangeValue = ( event ) => {
+		const newValue = event.target.value;
+		if ( newValue === '' ) {
+			onChange( undefined );
+			return;
+		}
+		onChange( Number( newValue ) );
+	};
 	return (
 		<Fragment>
 			<div className="components-font-size-picker__buttons">
 				<ButtonGroup aria-label={ __( 'Font Size' ) }>
 					{ map( fontSizes, ( { name, size, shortName } ) => (
-						<Button
-							key={ size }
-							isLarge
-							isPrimary={ value === size }
-							aria-pressed={ value === size }
-							onClick={ () => onChange( size ) }
-						>
-							{ shortName || name }
-						</Button>
+						<Tooltip text={ name || shortName }>
+							<Button
+								key={ size }
+								isLarge
+								isPrimary={ value === size }
+								aria-pressed={ value === size }
+								onClick={ () => onChange( size ) }
+								style={ { fontSize: size } }
+							>
+								A
+							</Button>
+						</Tooltip>
 					) ) }
 				</ButtonGroup>
+				{ ! withSlider &&
+					<input
+						className="components-range-control__number"
+						type="number"
+						onChange={ onChangeValue }
+						aria-label={ __( 'Custom Size' ) }
+						value={ value }
+					/>
+				}
 				<Button
-					isLarge
 					onClick={ () => onChange( undefined ) }
 				>
 					{ __( 'Reset' ) }
 				</Button>
 			</div>
-			<RangeControl
-				className="components-font-size-picker__custom-input"
-				label={ __( 'Custom Size' ) }
-				value={ value || '' }
-				initialPosition={ fallbackFontSize }
-				onChange={ onChange }
-				min={ 12 }
-				max={ 100 }
-				beforeIcon="editor-textcolor"
-				afterIcon="editor-textcolor"
-			/>
+			{ withSlider &&
+				<RangeControl
+					className="components-font-size-picker__custom-input"
+					label={ __( 'Custom Size' ) }
+					value={ value || '' }
+					initialPosition={ fallbackFontSize }
+					onChange={ onChange }
+					min={ 12 }
+					max={ 100 }
+					beforeIcon="editor-textcolor"
+					afterIcon="editor-textcolor"
+				/>
+			}
 		</Fragment>
 	);
 }
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
@@ -2,6 +2,10 @@
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 1em;
+
+	.components-button {
+		overflow: hidden;
+	}
 }
 
 .components-font-size-picker__custom-input {

diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js
@@ -82,27 +82,21 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 		{
 			name: __( 'Small' ),
 			shortName: __( 'S' ),
-			size: 14,
+			size: 13,
 			slug: 'small',
 		},
 		{
-			name: __( 'Regular' ),
+			name: __( 'Medium' ),
 			shortName: __( 'M' ),
-			size: 16,
-			slug: 'regular',
+			size: 18,
+			slug: 'medium',
 		},
 		{
 			name: __( 'Large' ),
 			shortName: __( 'L' ),
-			size: 36,
+			size: 22,
 			slug: 'large',
 		},
-		{
-			name: __( 'Larger' ),
-			shortName: __( 'XL' ),
-			size: 48,
-			slug: 'larger',
-		},
 	],
 
 	// This is current max width of the block inner area