Predefined set of font sizes

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;
+}

blocks/library/paragraph/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { findKey, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,6 +15,8 @@ import {
 	PanelColor,
 	RangeControl,
 	ToggleControl,
+	Button,
+	ButtonGroup,
 	withFallbackStyles,
 } from '@wordpress/components';
 
@@ -46,6 +49,13 @@ const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps )
 	};
 } )( ContrastChecker );
 
+const FONT_SIZES = {
+	small: 14,
+	regular: 16,
+	large: 36,
+	larger: 48,
+};
+
 class ParagraphBlock extends Component {
 	constructor() {
 		super( ...arguments );
@@ -81,6 +91,12 @@ class ParagraphBlock extends Component {
 		this.nodeRef = node;
 	}
 
+	setFontSize( fontSize ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( { fontSize } );
+	}
+
 	render() {
 		const {
 			attributes,
@@ -116,21 +132,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( null ) }
+							>
+								{ __( '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
@@ -314,16 +356,29 @@ export const settings = {
 	edit: ParagraphBlock,
 
 	save( { attributes } ) {
-		const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;
+		const {
+			width,
+			align,
+			content,
+			dropCap,
+			backgroundColor,
+			textColor,
+			fontSize,
+		} = attributes;
+
+		const thresholdFontSize = findKey( FONT_SIZES, ( size ) => size === fontSize );
+
 		const className = classnames( {
 			[ `align${ width }` ]: width,
 			'has-background': backgroundColor,
 			'has-drop-cap': dropCap,
+			[ `is-${ thresholdFontSize }-text` ]: thresholdFontSize,
 		} );
+
 		const styles = {
 			backgroundColor: backgroundColor,
 			color: textColor,
-			fontSize: fontSize,
+			fontSize: thresholdFontSize ? null : fontSize,
 			textAlign: align,
 		};
 

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;
+		}
 	}
 }
 

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;

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;
+		}
+	}
+}

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';