Set font size slider to 1 as default, em units

blocks/api/source.js

@@ -50,6 +50,19 @@ export const children = withKnownSourceFlag( ( selector ) => {
 		return [];
 	};
 } );
+export const childrenFirstMatch = withKnownSourceFlag( ( selectors ) => {
+	return ( domNode ) => {
+		let match = [];
+
+		selectors.forEach( ( selector ) => {
+			if ( match.length === 0 ) {
+				match = children( selector )( domNode );
+			}
+		} );
+
+		return match;
+	};
+} );
 export const node = withKnownSourceFlag( ( selector ) => {
 	return ( domNode ) => {
 		let match = domNode;

blocks/api/test/source.js

@@ -37,6 +37,22 @@ describe( 'sources', () => {
 		} );
 	} );
 
+	describe( 'childrenFirstMatch()', () => {
+		it( 'should return a source function', () => {
+			const source = sources.childrenFirstMatch();
+
+			expect( typeof source ).toBe( 'function' );
+		} );
+
+		it( 'should return HTML equivalent WPElement of the first selector that matches', () => {
+			const html = '<p><span><b>I am the content.</b></span></p>';
+			const selectors = [ 'p > div', 'p > span', 'p' ];
+			const match = parse( html, sources.childrenFirstMatch( selectors ) );
+
+			expect( renderToString( match ) ).toBe( '<b>I am the content.</b>' );
+		} );
+	} );
+
 	describe( 'node()', () => {
 		it( 'should return a source function', () => {
 			const source = sources.node();

blocks/inspector-controls/range-control/index.js

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIcon, help, allowReset, ...props } ) {
+function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIcon, help, allowReset, units, ...props } ) {
 	const id = 'inspector-range-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( Number( event.target.value ) );
 
@@ -33,6 +33,7 @@ function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIc
 				value={ value }
 				{ ...props }
 			/>
+			{ units }
 			{ allowReset &&
 				<Button onClick={ () => onChange() } disabled={ value === undefined }>
 					{ __( 'Reset' ) }

blocks/library/paragraph/index.js

@@ -26,7 +26,19 @@ import RangeControl from '../../inspector-controls/range-control';
 import ColorPalette from '../../color-palette';
 import BlockDescription from '../../block-description';
 
-const { children } = source;
+const { childrenFirstMatch } = source;
+const MAX_FONT_SIZE = 10;
+
+const wrapFontSize = function( content, fontSize ) {
+	if ( fontSize && fontSize !== 1 ) {
+		const styles = {
+			fontSize: fontSize + 'em',
+		};
+		const wrappedContent = <span style={ styles }>{ content }</span>;
+		return [ wrappedContent ];
+	}
+	return content;
+};
 
 registerBlockType( 'core/paragraph', {
 	title: __( 'Paragraph' ),
@@ -42,7 +54,7 @@ registerBlockType( 'core/paragraph', {
 	attributes: {
 		content: {
 			type: 'array',
-			source: children( 'p' ),
+			source: childrenFirstMatch( [ 'p > span', 'p' ] ),
 		},
 		align: {
 			type: 'string',
@@ -95,10 +107,11 @@ registerBlockType( 'core/paragraph', {
 	},
 
 	edit( { attributes, setAttributes, insertBlocksAfter, focus, setFocus, mergeBlocks, onReplace } ) {
-		const { align, content, dropCap, placeholder, fontSize, backgroundColor, textColor, width } = attributes;
+		const { align, content, dropCap, placeholder, backgroundColor, textColor, width } = attributes;
 		const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
 		const className = dropCap ? 'has-drop-cap' : null;
-
+		// if the font size was previously set in pixels, divide by 16 to get em
+		const fontSize = attributes.fontSize >= MAX_FONT_SIZE ? Math.max( MAX_FONT_SIZE, attributes.fontSize / 16 ) : attributes.fontSize;
 		return [
 			focus && (
 				<BlockControls key="controls">
@@ -123,11 +136,13 @@ registerBlockType( 'core/paragraph', {
 						/>
 						<RangeControl
 							label={ __( 'Font Size' ) }
-							value={ fontSize || '' }
+							value={ fontSize || 1 }
 							onChange={ ( value ) => setAttributes( { fontSize: value } ) }
-							min={ 10 }
-							max={ 200 }
+							min={ 0.5 }
+							max={ MAX_FONT_SIZE }
+							step={ 0.1 }
 							beforeIcon="editor-textcolor"
+							units="em"
 							allowReset
 						/>
 					</PanelBody>
@@ -162,10 +177,9 @@ registerBlockType( 'core/paragraph', {
 					style={ {
 						backgroundColor: backgroundColor,
 						color: textColor,
-						fontSize: fontSize ? fontSize + 'px' : undefined,
 						textAlign: align,
 					} }
-					value={ content }
+					value={ wrapFontSize( content, fontSize ) }
 					onChange={ ( nextContent ) => {
 						setAttributes( {
 							content: nextContent,
@@ -198,11 +212,10 @@ registerBlockType( 'core/paragraph', {
 		const styles = {
 			backgroundColor: backgroundColor,
 			color: textColor,
-			fontSize: fontSize,
 			textAlign: align,
 		};
 
-		return <p style={ styles } className={ className ? className : undefined }>{ content }</p>;
+		return <p style={ styles } className={ className ? className : undefined }>{ wrapFontSize( content, fontSize ) }</p>;
 	},
 } );