Add FontSizePicker component and refactor paragraph block to use it.

This change makes font size UI generic and allows other blocks to take advantage of the same UI used in the paragraph. Other changes will follow that will abstract other font size logic from paragraph (not just the UI). Themes will also be able to configure the font sizes. The future changes will use this work.
WordPress · May 7, 2018 · cfda02b · cfda02b
1 parent 4dc4c7b
commit cfda02b
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 54 deletions.
diff --git a/components/font-size-picker/index.js b/components/font-size-picker/index.js
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Button from '../button';
+import ButtonGroup from '../button-group';
+import RangeControl from '../range-control';
+
+export default function FontSizePicker( { fontSizes = [], fallbackFontSize, value, onChange } ) {
+	return (
+		<Fragment>
+			<div className="components-font-size-picker__buttons">
+				<ButtonGroup aria-label={ __( 'Font Size' ) }>
+					{ map( fontSizes, ( { size, shortName } ) => (
+						<Button
+							key={ size }
+							isLarge
+							isPrimary={ value === size }
+							aria-pressed={ value === size }
+							onClick={ () => onChange( size ) }
+						>
+							{ shortName }
+						</Button>
+					) ) }
+				</ButtonGroup>
+				<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"
+			/>
+		</Fragment>
+	);
+}
diff --git a/core-blocks/paragraph/editor.scss → components/font-size-picker/style.scss b/core-blocks/paragraph/editor.scss → components/font-size-picker/style.scss
@@ -1,10 +1,10 @@
-.blocks-font-size__main {
+.components-font-size-picker__buttons {
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 1em;
 }
 
-.blocks-paragraph__custom-size-slider {
+.components-font-size-picker__custom-input {
 	.components-range-control__slider + .dashicon {
 		width: 30px;
 		height: 30px;

diff --git a/components/index.js b/components/index.js
@@ -18,6 +18,7 @@ export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as ExternalLink } from './external-link';
 export { default as FocusableIframe } from './focusable-iframe';
+export { default as FontSizePicker } from './font-size-picker';
 export { default as FormFileUpload } from './form-file-upload';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';

diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { findKey, isFinite, map, omit } from 'lodash';
+import { isFinite, find, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,11 +16,9 @@ import {
 	RawHTML,
 } from '@wordpress/element';
 import {
+	FontSizePicker,
 	PanelBody,
-	RangeControl,
 	ToggleControl,
-	Button,
-	ButtonGroup,
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
@@ -38,7 +36,6 @@ import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import './editor.scss';
 import './style.scss';
 
 const { getComputedStyle } = window;
@@ -55,12 +52,28 @@ const FallbackStyles = withFallbackStyles( ( node, ownProps ) => {
 	};
 } );
 
-const FONT_SIZES = {
-	small: 14,
-	regular: 16,
-	large: 36,
-	larger: 48,
-};
+const FONT_SIZES = [
+	{
+		name: 'small',
+		shortName: 'S',
+		size: 14,
+	},
+	{
+		name: 'regular',
+		shortName: 'M',
+		size: 16,
+	},
+	{
+		name: 'large',
+		shortName: 'L',
+		size: 36,
+	},
+	{
+		name: 'larger',
+		shortName: 'XL',
+		size: 48,
+	},
+];
 
 class ParagraphBlock extends Component {
 	constructor() {
@@ -97,7 +110,10 @@ class ParagraphBlock extends Component {
 	getFontSize() {
 		const { customFontSize, fontSize } = this.props.attributes;
 		if ( fontSize ) {
-			return FONT_SIZES[ fontSize ];
+			const fontSizeObj = find( FONT_SIZES, { name: fontSize } );
+			if ( fontSizeObj ) {
+				return fontSizeObj.size;
+			}
 		}
 
 		if ( customFontSize ) {
@@ -107,10 +123,10 @@ class ParagraphBlock extends Component {
 
 	setFontSize( fontSizeValue ) {
 		const { setAttributes } = this.props;
-		const thresholdFontSize = findKey( FONT_SIZES, ( size ) => size === fontSizeValue );
+		const thresholdFontSize = find( FONT_SIZES, { size: fontSizeValue } );
 		if ( thresholdFontSize ) {
 			setAttributes( {
-				fontSize: thresholdFontSize,
+				fontSize: thresholdFontSize.name,
 				customFontSize: undefined,
 			} );
 			return;
@@ -159,42 +175,11 @@ class ParagraphBlock extends Component {
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'Text Settings' ) } className="blocks-font-size">
-						<div className="blocks-font-size__main">
-							<ButtonGroup aria-label={ __( 'Font Size' ) }>
-								{ map( {
-									S: 'small',
-									M: 'regular',
-									L: 'large',
-									XL: 'larger',
-								}, ( size, label ) => (
-									<Button
-										key={ label }
-										isLarge
-										isPrimary={ fontSize === FONT_SIZES[ size ] }
-										aria-pressed={ fontSize === FONT_SIZES[ size ] }
-										onClick={ () => this.setFontSize( FONT_SIZES[ size ] ) }
-									>
-										{ label }
-									</Button>
-								) ) }
-							</ButtonGroup>
-							<Button
-								isLarge
-								onClick={ () => this.setFontSize( undefined ) }
-							>
-								{ __( 'Reset' ) }
-							</Button>
-						</div>
-						<RangeControl
-							className="blocks-paragraph__custom-size-slider"
-							label={ __( 'Custom Size' ) }
-							value={ fontSize || '' }
-							initialPosition={ fallbackFontSize }
-							onChange={ ( value ) => this.setFontSize( value ) }
-							min={ 12 }
-							max={ 100 }
-							beforeIcon="editor-textcolor"
-							afterIcon="editor-textcolor"
+						<FontSizePicker
+							fontSizes={ FONT_SIZES }
+							fallbackFontSize={ fallbackFontSize }
+							value={ fontSize }
+							onChange={ this.setFontSize }
 						/>
 						<ToggleControl
 							label={ __( 'Drop Cap' ) }
@@ -366,7 +351,7 @@ export const settings = {
 
 				const textClass = getColorClass( 'color', textColor );
 				const backgroundClass = getColorClass( 'background-color', backgroundColor );
-				const fontSizeClass = fontSize && FONT_SIZES[ fontSize ] && `is-${ fontSize }-text`;
+				const fontSizeClass = fontSize && `is-${ fontSize }-text`;
 
 				const className = classnames( {
 					[ `align${ width }` ]: width,
@@ -490,7 +475,7 @@ export const settings = {
 
 		const textClass = getColorClass( 'color', textColor );
 		const backgroundClass = getColorClass( 'background-color', backgroundColor );
-		const fontSizeClass = fontSize && FONT_SIZES[ fontSize ] && `is-${ fontSize }-text`;
+		const fontSizeClass = fontSize && `is-${ fontSize }-text`;
 
 		const className = classnames( {
 			'has-background': backgroundColor || customBackgroundColor,