diff --git a/components/font-size-picker/index.js b/components/font-size-picker/index.js
new file mode 100644
index 0000000000000..00988e34a5f68
--- /dev/null
+++ 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 b/components/font-size-picker/style.scss
similarity index 65%
rename from core-blocks/paragraph/editor.scss
rename to components/font-size-picker/style.scss
index a93686fa68e21..8a522831093dd 100644
--- a/core-blocks/paragraph/editor.scss
+++ b/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
index 2479b9a2c0ec9..3f76939bcfac2 100644
--- 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
index 05e8f4ed345be..72942b3c60972 100644
--- 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,