Add all input inspector controls

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

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function BaseControl( { id, label, className, children, ...props } ) {
+	return (
+		<div className={ classnames( 'blocks-base-control', className ) } { ...props }>
+			{ label && <label className="blocks-base-control__label" htmlFor={ id }>{ label }</label> }
+			{ children }
+		</div>
+	);
+}
+
+export default BaseControl;

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

@@ -0,0 +1,9 @@
+.blocks-base-control:not(:last-child) {
+	margin-bottom: 15px;
+}
+
+.blocks-base-control__label {
+	display: block;
+	font-weight: 500;
+	margin-bottom: 5px;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from './../base-control';
+import './style.scss';
+
+function CheckboxControl( { label, heading, checked, instanceId, onChange, ...props } ) {
+	const id = 'inspector-checkbox-control-' + instanceId;
+	const onChangeValue = ( event ) => onChange( event.target.value );
+
+	return (
+		<BaseControl label={ heading } id={ id }>
+			<label className="blocks-checkbox-control__label" htmlFor={ id }>
+				<input
+					id={ id }
+					className="blocks-checkbox-control__input"
+					type="checkbox"
+					value="1"
+					onChange={ onChangeValue }
+					checked={ checked }
+					{ ...props }
+				/>
+				{ label }
+			</label>
+		</BaseControl>
+	);
+}
+
+export default withInstanceId( CheckboxControl );

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

@@ -0,0 +1,3 @@
+.blocks-checkbox-control__input[type=checkbox] {
+	margin-right: 6px;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+import { isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from './../base-control';
+import './style.scss';
+
+function RadioControl( { label, selected, instanceId, onChange, options = [] } ) {
+	const id = 'inspector-radio-control-' + instanceId;
+	const onChangeValue = ( event ) => onChange( event.target.value );
+
+	return ! isEmpty( options ) && (
+		<BaseControl label={ label } id={ id } className={ [ 'blocks-radio-control' ] }>
+			{ options.map( ( option, index ) =>
+				<div className="blocks-radio-control__option">
+					<input
+						id={ ( id + '-' + index ) }
+						className="blocks-radio-control__input"
+						type="radio"
+						name={ id }
+						value={ option.value }
+						onChange={ onChangeValue }
+						selected={ option.value === selected }
+					/>
+					<label key={ option.value } htmlFor={ ( id + '-' + index ) }>
+						{ option.label }
+					</label>
+				</div>
+			) }
+		</BaseControl>
+	);
+}
+
+export default withInstanceId( RadioControl );

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

@@ -0,0 +1,13 @@
+.blocks-radio-control {
+	display: flex;
+	flex-direction: column;
+}
+
+.blocks-radio-control__option:not(:last-child) {
+	margin-bottom: 4px;
+}
+
+.blocks-radio-control__input[type=radio] {
+	margin-top: 0;
+	margin-right: 6px;
+}

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

@@ -6,17 +6,19 @@ import { withInstanceId } from 'components';
 /**
  * Internal dependencies
  */
+import BaseControl from './../base-control';
 import './style.scss';
 
 function RangeControl( { label, value, instanceId, onChange, ...props } ) {
 	const id = 'inspector-range-control-' + instanceId;
 
 	return (
-		<div className="blocks-range-control">
-			<label className="blocks-range-control__label" htmlFor={ id }>{ label }</label>
-			<input className="blocks-range-control__input" id={ id } type="range" value={ value } onChange={ onChange } { ...props } />
-			<span>{ value }</span>
-		</div>
+		<BaseControl label={ label } id={ id }>
+			<div className="blocks-range-control">
+				<input className="blocks-range-control__input" id={ id } type="range" value={ value } onChange={ onChange } { ...props } />
+				<span className="blocks-range-control__hint">{ value }</span>
+			</div>
+		</BaseControl>
 	);
 }
 

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

@@ -1,9 +1,14 @@
 .blocks-range-control {
-	margin-bottom: 10px;
+	display: flex;
+	justify-content: center;
 }
 
-.blocks-range-control__label {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
+.blocks-range-control__input {
+	width: 100%;
 }
+
+.blocks-range-control__hint {
+	display: inline-block;
+	margin-left: 10px;
+	font-weight: 500;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+import { isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from './../base-control';
+import './style.scss';
+
+function SelectControl( { label, selected, instanceId, onBlur, options = [], ...props } ) {
+	const id = 'inspector-select-control-' + instanceId;
+	const onBlurValue = ( event ) => onBlur( event.target.value );
+
+	return ! isEmpty( options ) && (
+		<BaseControl label={ label } id={ id }>
+			<select
+				id={ id }
+				className="blocks-select-control__input"
+				onBlur={ onBlurValue }
+				{ ...props }
+			>
+				{ options.map( ( option ) =>
+					<option
+						key={ option.value }
+						value={ option.value }
+						selected={ option.value === selected }
+					>
+						{ label }
+					</option>
+				) }
+			</select>
+		</BaseControl>
+	);
+}
+
+export default withInstanceId( SelectControl );

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

@@ -0,0 +1,3 @@
+.blocks-select-control__input {
+	width: 100%;
+}

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

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

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

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

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

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from './../base-control';
+import './style.scss';
+
+function TextareaControl( { label, value, instanceId, onChange, rows = 4, ...props } ) {
+	const id = 'inspector-textarea-control-' + instanceId;
+	const onChangeValue = ( event ) => onChange( event.target.value );
+
+	return (
+		<BaseControl label={ label } id={ id }>
+			<textarea className="blocks-textarea-control__input" id={ id } rows={ rows } onChange={ onChangeValue } { ...props }>
+				{ value }
+			</textarea>
+		</BaseControl>
+	);
+}
+
+export default withInstanceId( TextareaControl );

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

@@ -0,0 +1,4 @@
+.blocks-textarea-control__input {
+	width: 100%;
+	padding: 6px 8px;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+import Toggle from 'components/form-toggle';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from './../base-control';
+import './style.scss';
+
+function ToggleControl( { label, checked, instanceId, onChange } ) {
+	const id = 'inspector-toggle-control-' + instanceId;
+
+	return (
+		<BaseControl label={ label } id={ id } className={ [ 'blocks-toggle-control' ] }>
+			<Toggle id={ id } checked={ checked } onChange={ onChange } />
+		</BaseControl>
+	);
+}
+
+export default withInstanceId( ToggleControl );

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

@@ -0,0 +1,4 @@
+.blocks-toggle-control {
+	display: flex;
+	justify-content: space-between;
+}

blocks/library/text/index.js

@@ -3,7 +3,6 @@
  */
 import { __ } from 'i18n';
 import { Children, cloneElement } from 'element';
-import Toggle from 'components/form-toggle';
 
 /**
  * Internal dependencies
@@ -13,6 +12,7 @@ import AlignmentToolbar from '../../alignment-toolbar';
 import BlockControls from '../../block-controls';
 import Editable from '../../editable';
 import InspectorControls from '../../inspector-controls';
+import ToggleControl from '../../inspector-controls/toggle-control';
 
 const { children } = query;
 
@@ -49,14 +49,11 @@ registerBlockType( 'core/text', {
 			),
 			focus && (
 				<InspectorControls key="inspector">
-					<div className="blocks-text__drop-cap" style={ { display: 'flex', justifyContent: 'space-between' } }>
-						<label htmlFor="blocks-text__drop-cap">{ __( 'Drop Cap' ) }</label>
-						<Toggle
-							checked={ !! dropCap }
-							onChange={ toggleDropCap }
-							id="blocks-text__drop-cap-toggle"
-						/>
-					</div>
+					<ToggleControl 
+						label={ __( 'Drop Cap' ) }
+						checked={ !! dropCap }
+						onChange={ toggleDropCap }
+					/>
 				</InspectorControls>
 			),
 			<Editable