Blocks: Fix custom size slider for Paragraph block

WordPress · Apr 5, 2018 · 96abec8 · 96abec8
1 parent 320cdc0
commit 96abec8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/blocks/library/paragraph/editor.scss b/blocks/library/paragraph/editor.scss
@@ -3,7 +3,9 @@
 	justify-content: space-between;
 }
 
-.blocks-font-size .blocks-range-control__slider + .dashicon {
-	width: 30px;
-	height: 30px;
+.blocks-paragraph__custom-size-slider {
+	.components-range-control__slider + .dashicon {
+		width: 30px;
+		height: 30px;
+	}
 }
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -102,6 +102,8 @@ class ParagraphBlock extends Component {
 		if ( customFontSize ) {
 			return customFontSize;
 		}
+
+		return FONT_SIZES.regular;
 	}
 
 	setFontSize( fontSizeValue ) {
@@ -184,8 +186,9 @@ class ParagraphBlock extends Component {
 							</Button>
 						</div>
 						<RangeControl
+							className="blocks-paragraph__custom-size-slider"
 							label={ __( 'Custom Size' ) }
-							value={ fontSize || '' }
+							value={ fontSize }
 							onChange={ ( value ) => this.setFontSize( value ) }
 							min={ 12 }
 							max={ 100 }
@@ -239,7 +242,7 @@ class ParagraphBlock extends Component {
 							style={ {
 								backgroundColor: backgroundColor,
 								color: textColor,
-								fontSize: fontSize ? fontSize + 'px' : undefined,
+								fontSize: fontSize !== FONT_SIZES.regular ? fontSize + 'px' : undefined,
 								textAlign: align,
 							} }
 							value={ content }

diff --git a/components/range-control/index.js b/components/range-control/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -10,13 +11,18 @@ import { BaseControl, Button, Dashicon } from '../';
 import withInstanceId from '../higher-order/with-instance-id';
 import './style.scss';
 
-function RangeControl( { label, value, instanceId, onChange, beforeIcon, afterIcon, help, allowReset, ...props } ) {
+function RangeControl( { className, label, value, instanceId, onChange, beforeIcon, afterIcon, help, allowReset, ...props } ) {
 	const id = `inspector-range-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( Number( event.target.value ) );
 
 	return (
-		<BaseControl label={ label } id={ id } help={ help } className="components-range-control">
-			{ beforeIcon && <Dashicon icon={ beforeIcon } size={ 20 } /> }
+		<BaseControl
+			label={ label }
+			id={ id }
+			help={ help }
+			className={ classnames( 'components-range-control', className ) }
+		>
+			{ beforeIcon && <Dashicon icon={ beforeIcon } /> }
 			<input
 				className="components-range-control__slider"
 				id={ id }