Add inspector range control

blocks/inspector-controls/index.js

@@ -3,6 +3,11 @@
  */
 import { Fill } from 'react-slot-fill';
 
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
 export default function InspectorControls( { children } ) {
 	return (
 		<Fill name="Inspector.Controls">

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

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function RangeControl( { label, value, instanceId, onChange, ...attributes } ) {
+	const id = 'inspector-range-control-' + instanceId;
+
+	return (
+        <div className="blocks-inspector-control">
+            <label className="blocks-inspector-control__label" htmlFor={ id }>{ label }</label>
+            <div className="blocks-range-control">
+                <input id={ id } type="range" value={ value } onChange={ onChange } { ...attributes } />
+    			<span>{ value }</span>
+            </div>
+        </div>
+	);
+}
+
+export default withInstanceId( RangeControl );

blocks/inspector-controls/range-control/style.scss

@@ -0,0 +1,10 @@
+.blocks-range-control {
+    display: flex;
+
+    input[type="range"] {
+        width: 100%;
+    }
+    > span {
+        margin-left: 10px;
+    }
+}

blocks/inspector-controls/text-control/style.scss → blocks/inspector-controls/style.scss

@@ -1,14 +1,14 @@
-.blocks-text-control {
+.blocks-inspector-control {
 	margin-bottom: 10px;
 }
 
-.blocks-text-control__label {
+.blocks-inspector-control__label {
 	display: block;
 	font-weight: 500;
 	margin-bottom: 5px;
 }
 
-.blocks-text-control__input {
+.blocks-inspector-control__input {
 	width: 100%;
 	padding: 6px 10px;
-}
+}

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

@@ -3,19 +3,15 @@
  */
 import { withInstanceId } from 'components';
 
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-function TextControl( { label, value, instanceId, onChange } ) {
+function TextControl( { label, value, instanceId, onChange, ...attributes } ) {
 	const id = 'inspector-text-control-' + instanceId;
+    const type = attributes.type || 'text';
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<div className="blocks-text-control">
-			<label className="blocks-text-control__label" htmlFor={ id }>{ label }</label>
-			<input className="blocks-text-control__input" id={ id } value={ value } onChange={ onChangeValue } />
+		<div className="blocks-inspector-control">
+			<label className="blocks-inspector-control__label" htmlFor={ id }>{ label }</label>
+			<input className="blocks-inspector-control__input" type={ type } id={ id } value={ value } onChange={ onChangeValue } { ...attributes } />
 		</div>
 	);
 }

blocks/library/gallery/index.js

@@ -13,6 +13,7 @@ import { Toolbar, Placeholder } from 'components';
 
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
+import RangeControl from '../../inspector-controls/range-control';
 
 import GalleryImage from './gallery-image';
 
@@ -120,8 +121,7 @@ registerBlockType( 'core/gallery', {
 
 	edit( { attributes, setAttributes, focus, id } ) {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
-		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
-		const rangeId = `blocks-gallery-range-${ id }`;
+        const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
 		if ( images.length === 0 ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
@@ -156,9 +156,7 @@ registerBlockType( 'core/gallery', {
 				) ) }
 				{ focus && images.length > 1 &&
 					<InspectorControls>
-						<label className="blocks-text-control__label" htmlFor={ rangeId }>{ __( 'Columns' ) }</label>
-						<input id={ rangeId } type="range" min="1" max={ Math.min( MAX_COLUMNS, images.length ) } value={ columns } onChange={ setColumnsNumber } />
-						<span>{columns}</span>
+                        <RangeControl label={ __( 'Columns' ) } value={ columns } onChange={ setColumnsNumber } min="1" max={ Math.min( MAX_COLUMNS, images.length ) } />
 					</InspectorControls> }
 			</div>
 		);