Predefined set of font sizes (#5269)

* Add ButtonGroup UI component. This component renders a row of button controls. * Add predefined sets of font size values paired with classes. When font size control is used and the value matches one of the predefined values, the editor would output a special class instead of an inline fontSize number. * Load default font-sizes in the front. * Use button-group for font-size buttons. * Use a more sensible max value for the slider. * Group reset button with predefined sizes. * Add aria-pressed attr and display afterIcon in range slider. * Refactored to the two attributes approach customFontSize and fontSize. * Implemented deprecation logic to convert existing paragraph blocks.
WordPress · Mar 20, 2018 · f4cc3bf · f4cc3bf
1 parent f6e5444
commit f4cc3bf
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 23 deletions.
diff --git a/blocks/library/paragraph/editor.scss b/blocks/library/paragraph/editor.scss
@@ -1,3 +1,13 @@
 .editor-block-list__block:not( .is-multi-selected ) .wp-block-paragraph {
 	background: white;
 }
+
+.blocks-font-size__main {
+	display: flex;
+	justify-content: space-between;
+}
+
+.blocks-font-size .blocks-range-control__slider + .dashicon {
+	width: 30px;
+	height: 30px;
+}
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { findKey, isFinite, map, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,6 +15,8 @@ import {
 	PanelColor,
 	RangeControl,
 	ToggleControl,
+	Button,
+	ButtonGroup,
 	withFallbackStyles,
 } from '@wordpress/components';
 
@@ -46,13 +49,22 @@ const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps )
 	};
 } )( ContrastChecker );
 
+const FONT_SIZES = {
+	small: 14,
+	regular: 16,
+	large: 36,
+	larger: 48,
+};
+
 class ParagraphBlock extends Component {
 	constructor() {
 		super( ...arguments );
 		this.nodeRef = null;
 		this.bindRef = this.bindRef.bind( this );
 		this.onReplace = this.onReplace.bind( this );
 		this.toggleDropCap = this.toggleDropCap.bind( this );
+		this.getFontSize = this.getFontSize.bind( this );
+		this.setFontSize = this.setFontSize.bind( this );
 	}
 
 	onReplace( blocks ) {
@@ -81,6 +93,33 @@ class ParagraphBlock extends Component {
 		this.nodeRef = node;
 	}
 
+	getFontSize() {
+		const { customFontSize, fontSize } = this.props.attributes;
+		if ( fontSize ) {
+			return FONT_SIZES[ fontSize ];
+		}
+
+		if ( customFontSize ) {
+			return customFontSize;
+		}
+	}
+
+	setFontSize( fontSizeValue ) {
+		const { setAttributes } = this.props;
+		const thresholdFontSize = findKey( FONT_SIZES, ( size ) => size === fontSizeValue );
+		if ( thresholdFontSize ) {
+			setAttributes( {
+				fontSize: thresholdFontSize,
+				customFontSize: undefined,
+			} );
+			return;
+		}
+		setAttributes( {
+			fontSize: undefined,
+			customFontSize: fontSizeValue,
+		} );
+	}
+
 	render() {
 		const {
 			attributes,
@@ -97,12 +136,13 @@ class ParagraphBlock extends Component {
 			content,
 			dropCap,
 			placeholder,
-			fontSize,
 			backgroundColor,
 			textColor,
 			width,
 		} = attributes;
 
+		const fontSize = this.getFontSize();
+
 		return [
 			isSelected && (
 				<BlockControls key="controls">
@@ -116,21 +156,47 @@ class ParagraphBlock extends Component {
 			),
 			isSelected && (
 				<InspectorControls key="inspector">
-					<PanelBody title={ __( 'Text Settings' ) }>
+					<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
+							label={ __( 'Custom Size' ) }
+							value={ fontSize || '' }
+							onChange={ ( value ) => this.setFontSize( value ) }
+							min={ 12 }
+							max={ 100 }
+							beforeIcon="editor-textcolor"
+							afterIcon="editor-textcolor"
+						/>
 						<ToggleControl
 							label={ __( 'Drop Cap' ) }
 							checked={ !! dropCap }
 							onChange={ this.toggleDropCap }
 						/>
-						<RangeControl
-							label={ __( 'Font Size' ) }
-							value={ fontSize || '' }
-							onChange={ ( value ) => setAttributes( { fontSize: value } ) }
-							min={ 10 }
-							max={ 200 }
-							beforeIcon="editor-textcolor"
-							allowReset
-						/>
 					</PanelBody>
 					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor } initialOpen={ false }>
 						<ColorPalette
@@ -240,6 +306,9 @@ const schema = {
 		type: 'string',
 	},
 	fontSize: {
+		type: 'string',
+	},
+	customFontSize: {
 		type: 'number',
 	},
 };
@@ -275,6 +344,40 @@ export const settings = {
 	},
 
 	deprecated: [
+		{
+			supports,
+			attributes: omit( {
+				...schema,
+				fontSize: {
+					type: 'number',
+				},
+			}, 'customFontSize' ),
+			save( { attributes } ) {
+				const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;
+				const className = classnames( {
+					[ `align${ width }` ]: width,
+					'has-background': backgroundColor,
+					'has-drop-cap': dropCap,
+				} );
+				const styles = {
+					backgroundColor: backgroundColor,
+					color: textColor,
+					fontSize: fontSize,
+					textAlign: align,
+				};
+
+				return <p style={ styles } className={ className ? className : undefined }>{ content }</p>;
+			},
+			migrate( attributes ) {
+				if ( isFinite( attributes.fontSize ) ) {
+					return omit( {
+						...attributes,
+						customFontSize: attributes.fontSize,
+					}, 'fontSize' );
+				}
+				return attributes;
+			},
+		},
 		{
 			supports,
 			attributes: {
@@ -314,16 +417,28 @@ export const settings = {
 	edit: ParagraphBlock,
 
 	save( { attributes } ) {
-		const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;
+		const {
+			width,
+			align,
+			content,
+			dropCap,
+			backgroundColor,
+			textColor,
+			fontSize,
+			customFontSize,
+		} = attributes;
+
 		const className = classnames( {
 			[ `align${ width }` ]: width,
 			'has-background': backgroundColor,
 			'has-drop-cap': dropCap,
+			[ `is-${ fontSize }-text` ]: fontSize && FONT_SIZES[ fontSize ],
 		} );
+
 		const styles = {
 			backgroundColor: backgroundColor,
 			color: textColor,
-			fontSize: fontSize,
+			fontSize: ! fontSize && customFontSize ? customFontSize : undefined,
 			textAlign: align,
 		};
 

diff --git a/blocks/library/paragraph/style.scss b/blocks/library/paragraph/style.scss
@@ -1,13 +1,31 @@
-p.has-drop-cap {
-	&:first-letter {
-		float: left;
-		font-size: 4.1em;
-		line-height: 0.7;
-		font-family: serif;
-		font-weight: bold;
-		margin: .07em .23em 0 0;
-		text-transform: uppercase;
-		font-style: normal;
+p {
+	&.is-small-text {
+		font-size: 14px;
+	}
+
+	&.is-regular-text {
+		font-size: 16px;
+	}
+
+	&.is-large-text {
+		font-size: 36px;
+	}
+
+	&.is-larger-text {
+		font-size: 48px;
+	}
+
+	&.has-drop-cap {
+		&:first-letter {
+			float: left;
+			font-size: 4.1em;
+			line-height: 0.7;
+			font-family: serif;
+			font-weight: bold;
+			margin: .07em .23em 0 0;
+			text-transform: uppercase;
+			font-style: normal;
+		}
 	}
 }
 

diff --git a/components/button-group/index.js b/components/button-group/index.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function ButtonGroup( { className, ...props } ) {
+	const classes = classnames( 'components-button-group', className );
+
+	return (
+		<div { ...props } className={ classes } role="group" />
+	);
+}
+
+export default ButtonGroup;
diff --git a/components/button-group/style.scss b/components/button-group/style.scss
@@ -0,0 +1,19 @@
+.components-button-group {
+	display: inline-block;
+	margin-bottom: 20px;
+
+	.components-button {
+		border-radius: 0;
+		& + .components-button {
+			margin-left: -1px;
+		}
+
+		&:first-child {
+			border-radius: 3px 0 0 3px;
+		}
+
+		&:last-child {
+			border-radius: 0 3px 3px 0;
+		}
+	}
+}
diff --git a/components/index.js b/components/index.js
@@ -3,6 +3,7 @@ export { default as APIProvider } from './higher-order/with-api-data/provider';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';
 export { default as Button } from './button';
+export { default as ButtonGroup } from './button-group';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as CodeEditor } from './code-editor';