Used fallBack styles to compute font size slider initial value.

blocks/library/paragraph/index.js

@@ -37,17 +37,17 @@ import ContrastChecker from '../../contrast-checker';
 
 const { getComputedStyle } = window;
 
-const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
-	const { textColor, backgroundColor } = ownProps;
-	//avoid the use of querySelector if both colors are known and verify if node is available.
-	const editableNode = ( ! textColor || ! backgroundColor ) && node ? node.querySelector( '[contenteditable="true"]' ) : null;
+const FallbackStyles = withFallbackStyles( ( node, ownProps ) => {
+	const { textColor, backgroundColor, fontSize, customFontSize } = ownProps.attributes;
+	const editableNode = node.querySelector( '[contenteditable="true"]' );
 	//verify if editableNode is available, before using getComputedStyle.
 	const computedStyles = editableNode ? getComputedStyle( editableNode ) : null;
 	return {
 		fallbackBackgroundColor: backgroundColor || ! computedStyles ? undefined : computedStyles.backgroundColor,
 		fallbackTextColor: textColor || ! computedStyles ? undefined : computedStyles.color,
+		fallbackFontSize: fontSize || customFontSize || ! computedStyles ? undefined : parseInt( computedStyles.fontSize ) || undefined,
 	};
-} )( ContrastChecker );
+} );
 
 const FONT_SIZES = {
 	small: 14,
@@ -61,8 +61,6 @@ const autocompleters = [ blockAutocompleter, ...defaultAutocompleters ];
 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 );
@@ -88,13 +86,6 @@ class ParagraphBlock extends Component {
 		setAttributes( { dropCap: ! attributes.dropCap } );
 	}
 
-	bindRef( node ) {
-		if ( ! node ) {
-			return;
-		}
-		this.nodeRef = node;
-	}
-
 	getFontSize() {
 		const { customFontSize, fontSize } = this.props.attributes;
 		if ( fontSize ) {
@@ -131,6 +122,9 @@ class ParagraphBlock extends Component {
 			mergeBlocks,
 			onReplace,
 			className,
+			fallbackBackgroundColor,
+			fallbackTextColor,
+			fallbackFontSize,
 		} = this.props;
 
 		const {
@@ -189,6 +183,7 @@ class ParagraphBlock extends Component {
 							className="blocks-paragraph__custom-size-slider"
 							label={ __( 'Custom Size' ) }
 							value={ fontSize || '' }
+							initialPosition={ fallbackFontSize }
 							onChange={ ( value ) => this.setFontSize( value ) }
 							min={ 12 }
 							max={ 100 }
@@ -213,12 +208,15 @@ class ParagraphBlock extends Component {
 							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
 						/>
 					</PanelColor>
-					{ this.nodeRef && <ContrastCheckerWithFallbackStyles
-						node={ this.nodeRef }
-						textColor={ textColor }
-						backgroundColor={ backgroundColor }
+					<ContrastChecker
+						{ ...{
+							textColor,
+							backgroundColor,
+							fallbackBackgroundColor,
+							fallbackTextColor,
+						} }
 						isLargeText={ fontSize >= 18 }
-					/> }
+					/>
 					<PanelBody title={ __( 'Block Alignment' ) }>
 						<BlockAlignmentToolbar
 							value={ width }
@@ -227,7 +225,7 @@ class ParagraphBlock extends Component {
 					</PanelBody>
 				</InspectorControls>
 			),
-			<div key="editable" ref={ this.bindRef }>
+			<div key="editable">
 				<RichText
 					tagName="p"
 					className={ classnames( 'wp-block-paragraph', className, {
@@ -408,7 +406,7 @@ export const settings = {
 		}
 	},
 
-	edit: ParagraphBlock,
+	edit: FallbackStyles( ParagraphBlock ),
 
 	save( { attributes } ) {
 		const {

blocks/library/paragraph/test/__snapshots__/index.js.snap

@@ -2,32 +2,36 @@
 
 exports[`core/paragraph block edit matches snapshot 1`] = `
 <div>
-  <div
-    class="blocks-rich-text"
-  >
-    <div>
+
+  <div>
+    <div
+      class="blocks-rich-text"
+    >
       <div>
-        <div
-          class="components-autocomplete"
-        >
-          <p
-            aria-autocomplete="list"
-            aria-expanded="false"
-            aria-label="Add text or type / to add content"
-            aria-multiline="false"
-            class="wp-block-paragraph blocks-rich-text__tinymce"
-            contenteditable="true"
-            data-is-placeholder-visible="true"
-            role="textbox"
-          />
-          <p
-            class="blocks-rich-text__tinymce wp-block-paragraph"
+        <div>
+          <div
+            class="components-autocomplete"
           >
-            Add text or type / to add content
-          </p>
+            <p
+              aria-autocomplete="list"
+              aria-expanded="false"
+              aria-label="Add text or type / to add content"
+              aria-multiline="false"
+              class="wp-block-paragraph blocks-rich-text__tinymce"
+              contenteditable="true"
+              data-is-placeholder-visible="true"
+              role="textbox"
+            />
+            <p
+              class="blocks-rich-text__tinymce wp-block-paragraph"
+            >
+              Add text or type / to add content
+            </p>
+          </div>
         </div>
       </div>
     </div>
   </div>
+
 </div>
 `;

components/range-control/README.md

@@ -58,6 +58,13 @@ If this property is true, a button to reset the the slider is rendered.
 - Type: `Boolean`
 - Required: No
 
+### initialPosition
+
+In no value exists this prop contains the slider starting position.
+
+- Type: `Number`
+- Required: No
+
 ### value
 
 The current value of the range slider.

components/range-control/index.js

@@ -11,9 +11,22 @@ import { BaseControl, Button, Dashicon } from '../';
 import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
-function RangeControl( { className, label, value, instanceId, onChange, beforeIcon, afterIcon, help, allowReset, ...props } ) {
+function RangeControl( {
+	className,
+	label,
+	value,
+	instanceId,
+	onChange,
+	beforeIcon,
+	afterIcon,
+	help,
+	allowReset,
+	initialPosition,
+	...props
+} ) {
 	const id = `inspector-range-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( Number( event.target.value ) );
+	const initialSliderValue = value || initialPosition || '';
 
 	return (
 		<BaseControl
@@ -27,7 +40,7 @@ function RangeControl( { className, label, value, instanceId, onChange, beforeIc
 				className="components-range-control__slider"
 				id={ id }
 				type="range"
-				value={ value }
+				value={ initialSliderValue }
 				onChange={ onChangeValue }
 				aria-describedby={ !! help ? id + '__help' : undefined }
 				{ ...props } />