From 7d84507f4118d22903697c51fe1b329f079fd352 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 16:50:07 +0100
Subject: [PATCH 01/17] =?UTF-8?q?Do=20not=20add=20bottom=20margin=20for=20?=
 =?UTF-8?q?controls=20which=20aren=E2=80=99t=20the=20last=20item.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blocks/inspector-controls/range-control/style.scss | 4 +++-
 blocks/inspector-controls/text-control/style.scss  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
index 81b946ecd9393..deb92d16c3911 100644
--- a/blocks/inspector-controls/range-control/style.scss
+++ b/blocks/inspector-controls/range-control/style.scss
@@ -1,5 +1,7 @@
 .blocks-range-control {
-	margin-bottom: 10px;
+	&:not(:last-child) {
+		margin-bottom: 10px;
+	}
 }
 
 .blocks-range-control__label {
diff --git a/blocks/inspector-controls/text-control/style.scss b/blocks/inspector-controls/text-control/style.scss
index be49efd08ff5c..bbd7b7699bb25 100644
--- a/blocks/inspector-controls/text-control/style.scss
+++ b/blocks/inspector-controls/text-control/style.scss
@@ -1,5 +1,7 @@
 .blocks-text-control {
-	margin-bottom: 10px;
+	&:not(:last-child) {
+		margin-bottom: 10px;
+	}
 }
 
 .blocks-text-control__label {

From bf6333a08d0ca396d3ad9dba6b1a9cb84c6eb8a8 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 16:51:06 +0100
Subject: [PATCH 02/17] Added ToggleControl.

---
 .../toggle-control/index.js                   | 23 +++++++++++++++++++
 .../toggle-control/style.scss                 | 15 ++++++++++++
 blocks/library/text/index.js                  | 15 +++++-------
 3 files changed, 44 insertions(+), 9 deletions(-)
 create mode 100644 blocks/inspector-controls/toggle-control/index.js
 create mode 100644 blocks/inspector-controls/toggle-control/style.scss

diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
new file mode 100644
index 0000000000000..04434a8416b07
--- /dev/null
+++ b/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 './style.scss';
+
+function ToggleControl( { label, checked, instanceId, onChange, ...props } ) {
+	const id = 'inspector-toggle-control-' + instanceId;
+
+	return (
+		<div className="blocks-toggle-control">
+			<label className="blocks-toggle-control__label" htmlFor={ id }>{ label }</label>
+			<Toggle id={ id } checked={ checked } onChange={ onChange } />
+		</div>
+	);
+}
+
+export default withInstanceId( ToggleControl );
diff --git a/blocks/inspector-controls/toggle-control/style.scss b/blocks/inspector-controls/toggle-control/style.scss
new file mode 100644
index 0000000000000..0cf63112d2400
--- /dev/null
+++ b/blocks/inspector-controls/toggle-control/style.scss
@@ -0,0 +1,15 @@
+.blocks-toggle-control {
+	display: flex;
+	justify-content: space-between;
+	
+	&:not(:last-child) {
+		margin-bottom: 10px;
+	}
+}
+
+.blocks-toggle-control__label {
+	display: block;
+	font-weight: 500;
+	margin-bottom: 5px;
+}
+
diff --git a/blocks/library/text/index.js b/blocks/library/text/index.js
index c2b29e03ba166..c111ac5e56f76 100644
--- a/blocks/library/text/index.js
+++ b/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

From 33b1a2f89016ef55e15d8e22034d5454ef1581f1 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 17:20:21 +0100
Subject: [PATCH 03/17] Increase bottom margin.

---
 blocks/inspector-controls/range-control/style.scss  | 6 ++----
 blocks/inspector-controls/text-control/style.scss   | 6 ++----
 blocks/inspector-controls/toggle-control/style.scss | 2 +-
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
index deb92d16c3911..f41926663342a 100644
--- a/blocks/inspector-controls/range-control/style.scss
+++ b/blocks/inspector-controls/range-control/style.scss
@@ -1,7 +1,5 @@
-.blocks-range-control {
-	&:not(:last-child) {
-		margin-bottom: 10px;
-	}
+.blocks-range-control:not(:last-child) {
+	margin-bottom: 15px;
 }
 
 .blocks-range-control__label {
diff --git a/blocks/inspector-controls/text-control/style.scss b/blocks/inspector-controls/text-control/style.scss
index bbd7b7699bb25..0f2f0de715988 100644
--- a/blocks/inspector-controls/text-control/style.scss
+++ b/blocks/inspector-controls/text-control/style.scss
@@ -1,7 +1,5 @@
-.blocks-text-control {
-	&:not(:last-child) {
-		margin-bottom: 10px;
-	}
+.blocks-text-control:not(:last-child) {
+	margin-bottom: 15px;
 }
 
 .blocks-text-control__label {
diff --git a/blocks/inspector-controls/toggle-control/style.scss b/blocks/inspector-controls/toggle-control/style.scss
index 0cf63112d2400..f2cd10e363ca5 100644
--- a/blocks/inspector-controls/toggle-control/style.scss
+++ b/blocks/inspector-controls/toggle-control/style.scss
@@ -3,7 +3,7 @@
 	justify-content: space-between;
 	
 	&:not(:last-child) {
-		margin-bottom: 10px;
+		margin-bottom: 15px;
 	}
 }
 

From 7b2355aca16c21947987cd2805f2af5d9cfd947e Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 17:21:14 +0100
Subject: [PATCH 04/17] Improve range control alignment.

---
 blocks/inspector-controls/range-control/index.js   |  6 ++++--
 blocks/inspector-controls/range-control/style.scss | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js
index a596513fdd9ca..f4cc6c06e2275 100644
--- a/blocks/inspector-controls/range-control/index.js
+++ b/blocks/inspector-controls/range-control/index.js
@@ -14,8 +14,10 @@ function RangeControl( { label, value, instanceId, onChange, ...props } ) {
 	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 className="blocks-range-control__field">
+				<input className="blocks-range-control__input" id={ id } type="range" value={ value } onChange={ onChange } { ...props } />
+				<span>{ value }</span>
+			</div>
 		</div>
 	);
 }
diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
index f41926663342a..fadc86207eb60 100644
--- a/blocks/inspector-controls/range-control/style.scss
+++ b/blocks/inspector-controls/range-control/style.scss
@@ -7,3 +7,17 @@
 	font-weight: 500;
 	margin-bottom: 5px;
 }
+
+.blocks-range-control__input {
+	width: 100%;
+	vertical-align: top;
+}
+
+.blocks-range-control__field {
+	display: flex;
+	justify-content: center;
+	
+	> span {
+		margin-left: 10px;
+	}
+}
\ No newline at end of file

From ceb4b913d5f57b254328877810b530f36879b803 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 17:32:55 +0100
Subject: [PATCH 05/17] Further style improvements to range control.

---
 blocks/inspector-controls/range-control/index.js   |  2 +-
 blocks/inspector-controls/range-control/style.scss | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js
index f4cc6c06e2275..f84174b413c3e 100644
--- a/blocks/inspector-controls/range-control/index.js
+++ b/blocks/inspector-controls/range-control/index.js
@@ -16,7 +16,7 @@ function RangeControl( { label, value, instanceId, onChange, ...props } ) {
 			<label className="blocks-range-control__label" htmlFor={ id }>{ label }</label>
 			<div className="blocks-range-control__field">
 				<input className="blocks-range-control__input" id={ id } type="range" value={ value } onChange={ onChange } { ...props } />
-				<span>{ value }</span>
+				<span className="blocks-range-control__hint">{ value }</span>
 			</div>
 		</div>
 	);
diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
index fadc86207eb60..0f646a9a4403b 100644
--- a/blocks/inspector-controls/range-control/style.scss
+++ b/blocks/inspector-controls/range-control/style.scss
@@ -16,8 +16,10 @@
 .blocks-range-control__field {
 	display: flex;
 	justify-content: center;
-	
-	> span {
-		margin-left: 10px;
-	}
+}
+
+.blocks-range-control__hint {
+	display: inline-block;
+	margin-left: 10px;
+	font-weight: 500;
 }
\ No newline at end of file

From 765739d13cbc049b882ceb1e796c1b7f63bc265d Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 17:37:07 +0100
Subject: [PATCH 06/17] Added TextareaControl. Reduce input side padding for
 consistency.

---
 .../text-control/style.scss                   |  3 +--
 .../textarea-control/index.js                 | 25 +++++++++++++++++++
 .../textarea-control/style.scss               | 14 +++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 blocks/inspector-controls/textarea-control/index.js
 create mode 100644 blocks/inspector-controls/textarea-control/style.scss

diff --git a/blocks/inspector-controls/text-control/style.scss b/blocks/inspector-controls/text-control/style.scss
index 0f2f0de715988..b6871bef1d730 100644
--- a/blocks/inspector-controls/text-control/style.scss
+++ b/blocks/inspector-controls/text-control/style.scss
@@ -10,6 +10,5 @@
 
 .blocks-text-control__input {
 	width: 100%;
-	padding: 6px 10px;
+	padding: 6px 8px;
 }
-
diff --git a/blocks/inspector-controls/textarea-control/index.js b/blocks/inspector-controls/textarea-control/index.js
new file mode 100644
index 0000000000000..7f5718d191564
--- /dev/null
+++ b/blocks/inspector-controls/textarea-control/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function TextareaControl( { label, value, instanceId, onChange, rows = 3, ...props } ) {
+	const id = 'inspector-textarea-control-' + instanceId;
+	const onChangeValue = ( event ) => onChange( event.target.value );
+
+	return (
+		<div className="blocks-textarea-control">
+			<label className="blocks-textarea-control__label" htmlFor={ id }>{ label }</label>
+			<textarea className="blocks-textarea-control__input" id={ id } rows={ rows } onChange={ onChangeValue } { ...props }>
+				{ value }
+			</textarea>
+		</div>
+	);
+}
+
+export default withInstanceId( TextareaControl );
diff --git a/blocks/inspector-controls/textarea-control/style.scss b/blocks/inspector-controls/textarea-control/style.scss
new file mode 100644
index 0000000000000..e56001882aab8
--- /dev/null
+++ b/blocks/inspector-controls/textarea-control/style.scss
@@ -0,0 +1,14 @@
+.blocks-textarea-control:not(:last-child) {
+	margin-bottom: 15px;
+}
+
+.blocks-textarea-control__label {
+	display: block;
+	font-weight: 500;
+	margin-bottom: 5px;
+}
+
+.blocks-textarea-control__input {
+	width: 100%;
+	padding: 6px 8px;
+}

From d06f290e6ec08892aa7964cf104796523441db82 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 18:06:58 +0100
Subject: [PATCH 07/17] Added SelectControl.

---
 .../select-control/index.js                   | 31 +++++++++++++++++++
 .../select-control/style.scss                 | 13 ++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 blocks/inspector-controls/select-control/index.js
 create mode 100644 blocks/inspector-controls/select-control/style.scss

diff --git a/blocks/inspector-controls/select-control/index.js b/blocks/inspector-controls/select-control/index.js
new file mode 100644
index 0000000000000..21809cb10223e
--- /dev/null
+++ b/blocks/inspector-controls/select-control/index.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+import { isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function SelectControl( { label, value, instanceId, onChange, options = [], ...props } ) {
+	const id = 'inspector-select-control-' + instanceId;
+	const onChangeValue = ( event ) => onChange( event.target.value );
+	const selectedValue = value;
+	
+	return ! isEmpty( options ) && (
+		<div className="blocks-select-control">
+			<label className="blocks-select-control__label" htmlFor={ id }>{ label }</label>
+			<select className="blocks-select-control__input" id={ id } onChange={ onChangeValue } { ...props }>
+				{ options.map( ( { value, label } ) =>
+					<option key={ value } value={ value } selected={ value == selectedValue }>
+						{ label }
+					</option>
+				) }
+			</select>
+		</div>
+	);
+}
+
+export default withInstanceId( SelectControl );
diff --git a/blocks/inspector-controls/select-control/style.scss b/blocks/inspector-controls/select-control/style.scss
new file mode 100644
index 0000000000000..836e4b687e5bb
--- /dev/null
+++ b/blocks/inspector-controls/select-control/style.scss
@@ -0,0 +1,13 @@
+.blocks-select-control:not(:last-child) {
+	margin-bottom: 15px;
+}
+
+.blocks-select-control__label {
+	display: block;
+	font-weight: 500;
+	margin-bottom: 5px;
+}
+
+.blocks-select-control__input {
+	width: 100%;
+}
\ No newline at end of file

From acfa21e84575a3040b758f25227773f38a0a7ec2 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 18:23:40 +0100
Subject: [PATCH 08/17] Change value key to selected.

---
 blocks/inspector-controls/select-control/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/blocks/inspector-controls/select-control/index.js b/blocks/inspector-controls/select-control/index.js
index 21809cb10223e..94aa318f61b19 100644
--- a/blocks/inspector-controls/select-control/index.js
+++ b/blocks/inspector-controls/select-control/index.js
@@ -9,17 +9,16 @@ import { isEmpty } from 'lodash';
  */
 import './style.scss';
 
-function SelectControl( { label, value, instanceId, onChange, options = [], ...props } ) {
+function SelectControl( { label, selected, instanceId, onChange, options = [], ...props } ) {
 	const id = 'inspector-select-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( event.target.value );
-	const selectedValue = value;
 	
 	return ! isEmpty( options ) && (
 		<div className="blocks-select-control">
 			<label className="blocks-select-control__label" htmlFor={ id }>{ label }</label>
 			<select className="blocks-select-control__input" id={ id } onChange={ onChangeValue } { ...props }>
 				{ options.map( ( { value, label } ) =>
-					<option key={ value } value={ value } selected={ value == selectedValue }>
+					<option key={ value } value={ value } selected={ value == selected }>
 						{ label }
 					</option>
 				) }

From cf5ff38279c4c7704571b23e089342bb1e09d17f Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 18:26:08 +0100
Subject: [PATCH 09/17] Added CheckboxControl.

---
 .../checkbox-control/index.js                 | 33 +++++++++++++++++++
 .../checkbox-control/style.scss               | 13 ++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 blocks/inspector-controls/checkbox-control/index.js
 create mode 100644 blocks/inspector-controls/checkbox-control/style.scss

diff --git a/blocks/inspector-controls/checkbox-control/index.js b/blocks/inspector-controls/checkbox-control/index.js
new file mode 100644
index 0000000000000..9173b310eb95d
--- /dev/null
+++ b/blocks/inspector-controls/checkbox-control/index.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+
+/**
+ * Internal dependencies
+ */
+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 (
+		<div className="blocks-checkbox-control">
+			{ heading && <span className="blocks-checkbox-control__heading">{ heading }</span> }
+			<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>
+		</div>
+	);
+}
+
+export default withInstanceId( CheckboxControl );
diff --git a/blocks/inspector-controls/checkbox-control/style.scss b/blocks/inspector-controls/checkbox-control/style.scss
new file mode 100644
index 0000000000000..0e2b4929958b2
--- /dev/null
+++ b/blocks/inspector-controls/checkbox-control/style.scss
@@ -0,0 +1,13 @@
+.blocks-checkbox-control:not(:last-child) {
+	margin-bottom: 15px;
+}
+
+.blocks-checkbox-control__heading {
+	display: block;
+	font-weight: 500;
+	margin-bottom: 5px;
+}
+
+input.blocks-checkbox-control__input {
+	margin-right: 7px;
+}
\ No newline at end of file

From 0bece73707f2fa1aa9ed4130675703563a93f3c3 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 18:52:59 +0100
Subject: [PATCH 10/17] Set textarea rows default to 4.

---
 blocks/inspector-controls/textarea-control/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/inspector-controls/textarea-control/index.js b/blocks/inspector-controls/textarea-control/index.js
index 7f5718d191564..4a9ce8eff129b 100644
--- a/blocks/inspector-controls/textarea-control/index.js
+++ b/blocks/inspector-controls/textarea-control/index.js
@@ -8,7 +8,7 @@ import { withInstanceId } from 'components';
  */
 import './style.scss';
 
-function TextareaControl( { label, value, instanceId, onChange, rows = 3, ...props } ) {
+function TextareaControl( { label, value, instanceId, onChange, rows = 4, ...props } ) {
 	const id = 'inspector-textarea-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 

From e103a28f5fb439f0bb3bda3fa536f8cd7cb1fbb7 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 19:06:41 +0100
Subject: [PATCH 11/17] Added RadioControl.

---
 .../checkbox-control/style.scss               |  4 +-
 .../inspector-controls/radio-control/index.js | 39 +++++++++++++++++++
 .../radio-control/style.scss                  | 23 +++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 blocks/inspector-controls/radio-control/index.js
 create mode 100644 blocks/inspector-controls/radio-control/style.scss

diff --git a/blocks/inspector-controls/checkbox-control/style.scss b/blocks/inspector-controls/checkbox-control/style.scss
index 0e2b4929958b2..579c1852bc877 100644
--- a/blocks/inspector-controls/checkbox-control/style.scss
+++ b/blocks/inspector-controls/checkbox-control/style.scss
@@ -8,6 +8,6 @@
 	margin-bottom: 5px;
 }
 
-input.blocks-checkbox-control__input {
-	margin-right: 7px;
+.blocks-checkbox-control__input[type=checkbox] {
+	margin-right: 6px;
 }
\ No newline at end of file
diff --git a/blocks/inspector-controls/radio-control/index.js b/blocks/inspector-controls/radio-control/index.js
new file mode 100644
index 0000000000000..bb701dcae811c
--- /dev/null
+++ b/blocks/inspector-controls/radio-control/index.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+import { isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function RadioControl( { label, selected, instanceId, options = [] } ) {
+	const id = 'inspector-radio-control-' + instanceId;
+	const onChangeValue = ( event ) => onChange( event.target.value );
+	
+	return ! isEmpty( options ) && (
+		<div className="blocks-radio-control">
+			<label className="blocks-radio-control__label">{ label }</label>
+			<div className="blocks-radio-control__inputs">
+				{ options.map( ( { value, label }, index ) =>
+					<label htmlFor={ ( id + '-' + index ) }>
+						<input
+							id={ ( id + '-' + index ) }
+							className="blocks-radio-control__input"
+							type="radio"
+							name={ id }
+							value={ value }
+							onChange={ onChangeValue }
+							selected={ value == selected }
+						/>
+						{ label }
+					</label>
+				) }
+			</div>
+		</div>
+	);
+}
+
+export default withInstanceId( RadioControl );
diff --git a/blocks/inspector-controls/radio-control/style.scss b/blocks/inspector-controls/radio-control/style.scss
new file mode 100644
index 0000000000000..4312b72228893
--- /dev/null
+++ b/blocks/inspector-controls/radio-control/style.scss
@@ -0,0 +1,23 @@
+.blocks-radio-control:not(:last-child) {
+	margin-bottom: 15px;
+}
+
+.blocks-radio-control__label {
+	display: block;
+	font-weight: 500;
+	margin-bottom: 5px;
+}
+
+.blocks-radio-control__inputs {
+	display: flex;
+	flex-direction: column;
+	
+	> label:not(:last-child) {
+		margin-bottom: 5px;
+	}
+}
+
+.blocks-radio-control__input[type=radio] {
+	margin-top: -3px;
+	margin-right: 6px;
+}
\ No newline at end of file

From 82268f74a044c346f17e2ed1d8e80d5e76da8bd4 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 20:08:19 +0100
Subject: [PATCH 12/17] Add BaseControl.

---
 .../inspector-controls/base-control/index.js  | 20 +++++++++++++++++++
 .../base-control/style.scss                   |  9 +++++++++
 .../checkbox-control/index.js                 |  6 +++---
 .../checkbox-control/style.scss               | 10 ----------
 .../inspector-controls/radio-control/index.js |  8 ++++----
 .../radio-control/style.scss                  | 12 +----------
 .../inspector-controls/range-control/index.js |  8 ++++----
 .../range-control/style.scss                  | 17 +++-------------
 .../select-control/index.js                   |  6 +++---
 .../select-control/style.scss                 | 10 ----------
 .../inspector-controls/text-control/index.js  |  6 +++---
 .../text-control/style.scss                   | 10 ----------
 .../textarea-control/index.js                 |  6 +++---
 .../textarea-control/style.scss               | 10 ----------
 .../toggle-control/index.js                   |  8 ++++----
 .../toggle-control/style.scss                 | 15 ++------------
 16 files changed, 59 insertions(+), 102 deletions(-)
 create mode 100644 blocks/inspector-controls/base-control/index.js
 create mode 100644 blocks/inspector-controls/base-control/style.scss

diff --git a/blocks/inspector-controls/base-control/index.js b/blocks/inspector-controls/base-control/index.js
new file mode 100644
index 0000000000000..b04ae957853d9
--- /dev/null
+++ b/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, type = 'base', children } ) {
+	return (
+		<div className={ classnames( 'blocks-base-control', `control-type-${ type }` ) }>
+			{ label && <label className="blocks-base-control__label" htmlFor={ id }>{ label }</label> }
+			{ children }
+		</div>
+	);
+}
+
+export default BaseControl;
diff --git a/blocks/inspector-controls/base-control/style.scss b/blocks/inspector-controls/base-control/style.scss
new file mode 100644
index 0000000000000..b09bb5814ac0e
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/blocks/inspector-controls/checkbox-control/index.js b/blocks/inspector-controls/checkbox-control/index.js
index 9173b310eb95d..f0a1218e9953a 100644
--- a/blocks/inspector-controls/checkbox-control/index.js
+++ b/blocks/inspector-controls/checkbox-control/index.js
@@ -6,6 +6,7 @@ import { withInstanceId } from 'components';
 /**
  * Internal dependencies
  */
+import BaseControl from './../base-control';
 import './style.scss';
 
 function CheckboxControl( { label, heading, checked, instanceId, onChange, ...props } ) {
@@ -13,8 +14,7 @@ function CheckboxControl( { label, heading, checked, instanceId, onChange, ...pr
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<div className="blocks-checkbox-control">
-			{ heading && <span className="blocks-checkbox-control__heading">{ heading }</span> }
+		<BaseControl type="checkbox" label={ heading } id={ id }>
 			<label className="blocks-checkbox-control__label" htmlFor={ id }>
 				<input
 					id={ id }
@@ -26,7 +26,7 @@ function CheckboxControl( { label, heading, checked, instanceId, onChange, ...pr
 					{ ...props } />
 				{ label }
 			</label>
-		</div>
+		</BaseControl>
 	);
 }
 
diff --git a/blocks/inspector-controls/checkbox-control/style.scss b/blocks/inspector-controls/checkbox-control/style.scss
index 579c1852bc877..cc072a2473e45 100644
--- a/blocks/inspector-controls/checkbox-control/style.scss
+++ b/blocks/inspector-controls/checkbox-control/style.scss
@@ -1,13 +1,3 @@
-.blocks-checkbox-control:not(:last-child) {
-	margin-bottom: 15px;
-}
-
-.blocks-checkbox-control__heading {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
-}
-
 .blocks-checkbox-control__input[type=checkbox] {
 	margin-right: 6px;
 }
\ No newline at end of file
diff --git a/blocks/inspector-controls/radio-control/index.js b/blocks/inspector-controls/radio-control/index.js
index bb701dcae811c..b48e280268972 100644
--- a/blocks/inspector-controls/radio-control/index.js
+++ b/blocks/inspector-controls/radio-control/index.js
@@ -7,6 +7,7 @@ import { isEmpty } from 'lodash';
 /**
  * Internal dependencies
  */
+import BaseControl from './../base-control';
 import './style.scss';
 
 function RadioControl( { label, selected, instanceId, options = [] } ) {
@@ -14,9 +15,8 @@ function RadioControl( { label, selected, instanceId, options = [] } ) {
 	const onChangeValue = ( event ) => onChange( event.target.value );
 	
 	return ! isEmpty( options ) && (
-		<div className="blocks-radio-control">
-			<label className="blocks-radio-control__label">{ label }</label>
-			<div className="blocks-radio-control__inputs">
+		<BaseControl type="radio" label={ label } id={ id }>
+			<div className="blocks-radio-control">
 				{ options.map( ( { value, label }, index ) =>
 					<label htmlFor={ ( id + '-' + index ) }>
 						<input
@@ -32,7 +32,7 @@ function RadioControl( { label, selected, instanceId, options = [] } ) {
 					</label>
 				) }
 			</div>
-		</div>
+		</BaseControl>
 	);
 }
 
diff --git a/blocks/inspector-controls/radio-control/style.scss b/blocks/inspector-controls/radio-control/style.scss
index 4312b72228893..ea91fd5b1d2da 100644
--- a/blocks/inspector-controls/radio-control/style.scss
+++ b/blocks/inspector-controls/radio-control/style.scss
@@ -1,14 +1,4 @@
-.blocks-radio-control:not(:last-child) {
-	margin-bottom: 15px;
-}
-
-.blocks-radio-control__label {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
-}
-
-.blocks-radio-control__inputs {
+.blocks-radio-control {
 	display: flex;
 	flex-direction: column;
 	
diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js
index f84174b413c3e..9f427d4fa3f09 100644
--- a/blocks/inspector-controls/range-control/index.js
+++ b/blocks/inspector-controls/range-control/index.js
@@ -6,19 +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>
-			<div className="blocks-range-control__field">
+		<BaseControl type="range" 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>
-		</div>
+		</BaseControl>
 	);
 }
 
diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
index 0f646a9a4403b..af4fcd62796f3 100644
--- a/blocks/inspector-controls/range-control/style.scss
+++ b/blocks/inspector-controls/range-control/style.scss
@@ -1,21 +1,10 @@
-.blocks-range-control:not(:last-child) {
-	margin-bottom: 15px;
-}
-
-.blocks-range-control__label {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
+.blocks-range-control {
+	display: flex;
+	justify-content: center;
 }
 
 .blocks-range-control__input {
 	width: 100%;
-	vertical-align: top;
-}
-
-.blocks-range-control__field {
-	display: flex;
-	justify-content: center;
 }
 
 .blocks-range-control__hint {
diff --git a/blocks/inspector-controls/select-control/index.js b/blocks/inspector-controls/select-control/index.js
index 94aa318f61b19..4642dfb606ecd 100644
--- a/blocks/inspector-controls/select-control/index.js
+++ b/blocks/inspector-controls/select-control/index.js
@@ -7,6 +7,7 @@ import { isEmpty } from 'lodash';
 /**
  * Internal dependencies
  */
+import BaseControl from './../base-control';
 import './style.scss';
 
 function SelectControl( { label, selected, instanceId, onChange, options = [], ...props } ) {
@@ -14,8 +15,7 @@ function SelectControl( { label, selected, instanceId, onChange, options = [], .
 	const onChangeValue = ( event ) => onChange( event.target.value );
 	
 	return ! isEmpty( options ) && (
-		<div className="blocks-select-control">
-			<label className="blocks-select-control__label" htmlFor={ id }>{ label }</label>
+		<BaseControl type="select" label={ label } id={ id }>
 			<select className="blocks-select-control__input" id={ id } onChange={ onChangeValue } { ...props }>
 				{ options.map( ( { value, label } ) =>
 					<option key={ value } value={ value } selected={ value == selected }>
@@ -23,7 +23,7 @@ function SelectControl( { label, selected, instanceId, onChange, options = [], .
 					</option>
 				) }
 			</select>
-		</div>
+		</BaseControl>
 	);
 }
 
diff --git a/blocks/inspector-controls/select-control/style.scss b/blocks/inspector-controls/select-control/style.scss
index 836e4b687e5bb..fbfa090c76f20 100644
--- a/blocks/inspector-controls/select-control/style.scss
+++ b/blocks/inspector-controls/select-control/style.scss
@@ -1,13 +1,3 @@
-.blocks-select-control:not(:last-child) {
-	margin-bottom: 15px;
-}
-
-.blocks-select-control__label {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
-}
-
 .blocks-select-control__input {
 	width: 100%;
 }
\ No newline at end of file
diff --git a/blocks/inspector-controls/text-control/index.js b/blocks/inspector-controls/text-control/index.js
index 4294e20c321f8..82ff0579f9a84 100644
--- a/blocks/inspector-controls/text-control/index.js
+++ b/blocks/inspector-controls/text-control/index.js
@@ -6,6 +6,7 @@ import { withInstanceId } from 'components';
 /**
  * Internal dependencies
  */
+import BaseControl from './../base-control';
 import './style.scss';
 
 function TextControl( { label, value, instanceId, onChange, type = 'text', ...props } ) {
@@ -13,10 +14,9 @@ function TextControl( { label, value, instanceId, onChange, type = 'text', ...pr
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<div className="blocks-text-control">
-			<label className="blocks-text-control__label" htmlFor={ id }>{ label }</label>
+		<BaseControl type="text" label={ label } id={ id }>
 			<input className="blocks-text-control__input" type={ type } id={ id } value={ value } onChange={ onChangeValue } { ...props } />
-		</div>
+		</BaseControl>
 	);
 }
 
diff --git a/blocks/inspector-controls/text-control/style.scss b/blocks/inspector-controls/text-control/style.scss
index b6871bef1d730..f363338fada1b 100644
--- a/blocks/inspector-controls/text-control/style.scss
+++ b/blocks/inspector-controls/text-control/style.scss
@@ -1,13 +1,3 @@
-.blocks-text-control:not(:last-child) {
-	margin-bottom: 15px;
-}
-
-.blocks-text-control__label {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
-}
-
 .blocks-text-control__input {
 	width: 100%;
 	padding: 6px 8px;
diff --git a/blocks/inspector-controls/textarea-control/index.js b/blocks/inspector-controls/textarea-control/index.js
index 4a9ce8eff129b..7195443a6e262 100644
--- a/blocks/inspector-controls/textarea-control/index.js
+++ b/blocks/inspector-controls/textarea-control/index.js
@@ -6,6 +6,7 @@ import { withInstanceId } from 'components';
 /**
  * Internal dependencies
  */
+import BaseControl from './../base-control';
 import './style.scss';
 
 function TextareaControl( { label, value, instanceId, onChange, rows = 4, ...props } ) {
@@ -13,12 +14,11 @@ function TextareaControl( { label, value, instanceId, onChange, rows = 4, ...pro
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<div className="blocks-textarea-control">
-			<label className="blocks-textarea-control__label" htmlFor={ id }>{ label }</label>
+		<BaseControl type="textarea" label={ label } id={ id }>
 			<textarea className="blocks-textarea-control__input" id={ id } rows={ rows } onChange={ onChangeValue } { ...props }>
 				{ value }
 			</textarea>
-		</div>
+		</BaseControl>
 	);
 }
 
diff --git a/blocks/inspector-controls/textarea-control/style.scss b/blocks/inspector-controls/textarea-control/style.scss
index e56001882aab8..8a646f39b6dc0 100644
--- a/blocks/inspector-controls/textarea-control/style.scss
+++ b/blocks/inspector-controls/textarea-control/style.scss
@@ -1,13 +1,3 @@
-.blocks-textarea-control:not(:last-child) {
-	margin-bottom: 15px;
-}
-
-.blocks-textarea-control__label {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
-}
-
 .blocks-textarea-control__input {
 	width: 100%;
 	padding: 6px 8px;
diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
index 04434a8416b07..72e2a7f458001 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/blocks/inspector-controls/toggle-control/index.js
@@ -7,16 +7,16 @@ import Toggle from 'components/form-toggle';
 /**
  * Internal dependencies
  */
+import BaseControl from './../base-control';
 import './style.scss';
 
 function ToggleControl( { label, checked, instanceId, onChange, ...props } ) {
 	const id = 'inspector-toggle-control-' + instanceId;
 
 	return (
-		<div className="blocks-toggle-control">
-			<label className="blocks-toggle-control__label" htmlFor={ id }>{ label }</label>
-			<Toggle id={ id } checked={ checked } onChange={ onChange } />
-		</div>
+		<BaseControl type="toggle" label={ label } id={ id }>
+  			<Toggle id={ id } checked={ checked } onChange={ onChange } />
+		</BaseControl>
 	);
 }
 
diff --git a/blocks/inspector-controls/toggle-control/style.scss b/blocks/inspector-controls/toggle-control/style.scss
index f2cd10e363ca5..897f45f9500c9 100644
--- a/blocks/inspector-controls/toggle-control/style.scss
+++ b/blocks/inspector-controls/toggle-control/style.scss
@@ -1,15 +1,4 @@
-.blocks-toggle-control {
+.blocks-base-control.control-type-toggle {
 	display: flex;
 	justify-content: space-between;
-	
-	&:not(:last-child) {
-		margin-bottom: 15px;
-	}
-}
-
-.blocks-toggle-control__label {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
-}
-
+}
\ No newline at end of file

From b5cc807c898fe6e9e551e2a4e8352c526a036f6c Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 20:21:30 +0100
Subject: [PATCH 13/17] =?UTF-8?q?Do=20not=20force=20a=20=E2=80=98type?=
 =?UTF-8?q?=E2=80=99=20prop=20for=20BaseControl,=20instead=20allow=20a=20c?=
 =?UTF-8?q?ustom=20class.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blocks/inspector-controls/base-control/index.js     | 4 ++--
 blocks/inspector-controls/checkbox-control/index.js | 2 +-
 blocks/inspector-controls/radio-control/index.js    | 2 +-
 blocks/inspector-controls/range-control/index.js    | 2 +-
 blocks/inspector-controls/select-control/index.js   | 2 +-
 blocks/inspector-controls/text-control/index.js     | 2 +-
 blocks/inspector-controls/textarea-control/index.js | 2 +-
 blocks/inspector-controls/toggle-control/index.js   | 4 ++--
 blocks/inspector-controls/toggle-control/style.scss | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/blocks/inspector-controls/base-control/index.js b/blocks/inspector-controls/base-control/index.js
index b04ae957853d9..f67a45e4577e1 100644
--- a/blocks/inspector-controls/base-control/index.js
+++ b/blocks/inspector-controls/base-control/index.js
@@ -8,9 +8,9 @@ import classnames from 'classnames';
  */
 import './style.scss';
 
-function BaseControl( { id, label, type = 'base', children } ) {
+function BaseControl( { id, label, classes, children, ...props } ) {
 	return (
-		<div className={ classnames( 'blocks-base-control', `control-type-${ type }` ) }>
+		<div className={ classnames( 'blocks-base-control', classes ) } { ...props }>
 			{ label && <label className="blocks-base-control__label" htmlFor={ id }>{ label }</label> }
 			{ children }
 		</div>
diff --git a/blocks/inspector-controls/checkbox-control/index.js b/blocks/inspector-controls/checkbox-control/index.js
index f0a1218e9953a..2fae04b9eba7f 100644
--- a/blocks/inspector-controls/checkbox-control/index.js
+++ b/blocks/inspector-controls/checkbox-control/index.js
@@ -14,7 +14,7 @@ function CheckboxControl( { label, heading, checked, instanceId, onChange, ...pr
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<BaseControl type="checkbox" label={ heading } id={ id }>
+		<BaseControl label={ heading } id={ id }>
 			<label className="blocks-checkbox-control__label" htmlFor={ id }>
 				<input
 					id={ id }
diff --git a/blocks/inspector-controls/radio-control/index.js b/blocks/inspector-controls/radio-control/index.js
index b48e280268972..7cdb317a6e809 100644
--- a/blocks/inspector-controls/radio-control/index.js
+++ b/blocks/inspector-controls/radio-control/index.js
@@ -15,7 +15,7 @@ function RadioControl( { label, selected, instanceId, options = [] } ) {
 	const onChangeValue = ( event ) => onChange( event.target.value );
 	
 	return ! isEmpty( options ) && (
-		<BaseControl type="radio" label={ label } id={ id }>
+		<BaseControl label={ label } id={ id }>
 			<div className="blocks-radio-control">
 				{ options.map( ( { value, label }, index ) =>
 					<label htmlFor={ ( id + '-' + index ) }>
diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js
index 9f427d4fa3f09..b02221099aba2 100644
--- a/blocks/inspector-controls/range-control/index.js
+++ b/blocks/inspector-controls/range-control/index.js
@@ -13,7 +13,7 @@ function RangeControl( { label, value, instanceId, onChange, ...props } ) {
 	const id = 'inspector-range-control-' + instanceId;
 
 	return (
-		<BaseControl type="range" label={ label } id={ id }>
+		<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>
diff --git a/blocks/inspector-controls/select-control/index.js b/blocks/inspector-controls/select-control/index.js
index 4642dfb606ecd..0b32b621e9ac4 100644
--- a/blocks/inspector-controls/select-control/index.js
+++ b/blocks/inspector-controls/select-control/index.js
@@ -15,7 +15,7 @@ function SelectControl( { label, selected, instanceId, onChange, options = [], .
 	const onChangeValue = ( event ) => onChange( event.target.value );
 	
 	return ! isEmpty( options ) && (
-		<BaseControl type="select" label={ label } id={ id }>
+		<BaseControl label={ label } id={ id }>
 			<select className="blocks-select-control__input" id={ id } onChange={ onChangeValue } { ...props }>
 				{ options.map( ( { value, label } ) =>
 					<option key={ value } value={ value } selected={ value == selected }>
diff --git a/blocks/inspector-controls/text-control/index.js b/blocks/inspector-controls/text-control/index.js
index 82ff0579f9a84..2b9874dd03a30 100644
--- a/blocks/inspector-controls/text-control/index.js
+++ b/blocks/inspector-controls/text-control/index.js
@@ -14,7 +14,7 @@ function TextControl( { label, value, instanceId, onChange, type = 'text', ...pr
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<BaseControl type="text" label={ label } id={ id }>
+		<BaseControl label={ label } id={ id }>
 			<input className="blocks-text-control__input" type={ type } id={ id } value={ value } onChange={ onChangeValue } { ...props } />
 		</BaseControl>
 	);
diff --git a/blocks/inspector-controls/textarea-control/index.js b/blocks/inspector-controls/textarea-control/index.js
index 7195443a6e262..3c01c2b0ba860 100644
--- a/blocks/inspector-controls/textarea-control/index.js
+++ b/blocks/inspector-controls/textarea-control/index.js
@@ -14,7 +14,7 @@ function TextareaControl( { label, value, instanceId, onChange, rows = 4, ...pro
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
-		<BaseControl type="textarea" label={ label } id={ id }>
+		<BaseControl label={ label } id={ id }>
 			<textarea className="blocks-textarea-control__input" id={ id } rows={ rows } onChange={ onChangeValue } { ...props }>
 				{ value }
 			</textarea>
diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
index 72e2a7f458001..e16af65735285 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/blocks/inspector-controls/toggle-control/index.js
@@ -14,8 +14,8 @@ function ToggleControl( { label, checked, instanceId, onChange, ...props } ) {
 	const id = 'inspector-toggle-control-' + instanceId;
 
 	return (
-		<BaseControl type="toggle" label={ label } id={ id }>
-  			<Toggle id={ id } checked={ checked } onChange={ onChange } />
+		<BaseControl label={ label } id={ id } classes={ [ 'blocks-toggle-control' ] }>
+			<Toggle id={ id } checked={ checked } onChange={ onChange } />
 		</BaseControl>
 	);
 }
diff --git a/blocks/inspector-controls/toggle-control/style.scss b/blocks/inspector-controls/toggle-control/style.scss
index 897f45f9500c9..56823361911d8 100644
--- a/blocks/inspector-controls/toggle-control/style.scss
+++ b/blocks/inspector-controls/toggle-control/style.scss
@@ -1,4 +1,4 @@
-.blocks-base-control.control-type-toggle {
+.blocks-toggle-control {
 	display: flex;
 	justify-content: space-between;
 }
\ No newline at end of file

From ec3b9ddc118ffdea3970106db7a90c35641cb97e Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Thu, 15 Jun 2017 20:40:49 +0100
Subject: [PATCH 14/17] Fixed a bunch of lint issues.

---
 .../checkbox-control/index.js                 |  4 ++--
 .../inspector-controls/radio-control/index.js | 16 +++++++-------
 .../select-control/index.js                   | 21 +++++++++++++------
 .../toggle-control/index.js                   |  2 +-
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/blocks/inspector-controls/checkbox-control/index.js b/blocks/inspector-controls/checkbox-control/index.js
index 2fae04b9eba7f..9da1262d98d3b 100644
--- a/blocks/inspector-controls/checkbox-control/index.js
+++ b/blocks/inspector-controls/checkbox-control/index.js
@@ -18,10 +18,10 @@ function CheckboxControl( { label, heading, checked, instanceId, onChange, ...pr
 			<label className="blocks-checkbox-control__label" htmlFor={ id }>
 				<input
 					id={ id }
-					className="blocks-checkbox-control__input" 
+					className="blocks-checkbox-control__input"
 					type="checkbox"
 					value="1"
-					onChange= { onChangeValue }
+					onChange={ onChangeValue }
 					checked={ checked }
 					{ ...props } />
 				{ label }
diff --git a/blocks/inspector-controls/radio-control/index.js b/blocks/inspector-controls/radio-control/index.js
index 7cdb317a6e809..56c0719e22880 100644
--- a/blocks/inspector-controls/radio-control/index.js
+++ b/blocks/inspector-controls/radio-control/index.js
@@ -10,25 +10,25 @@ import { isEmpty } from 'lodash';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function RadioControl( { label, selected, instanceId, options = [] } ) {
+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 }>
 			<div className="blocks-radio-control">
-				{ options.map( ( { value, label }, index ) =>
-					<label htmlFor={ ( id + '-' + index ) }>
+				{ options.map( ( option, i ) =>
+					<label key={ option.value } htmlFor={ ( id + '-' + i ) }>
 						<input
-							id={ ( id + '-' + index ) }
+							id={ ( id + '-' + i ) }
 							className="blocks-radio-control__input"
 							type="radio"
 							name={ id }
-							value={ value }
+							value={ option.value }
 							onChange={ onChangeValue }
-							selected={ value == selected }
+							selected={ option.value === selected }
 						/>
-						{ label }
+						{ option.label }
 					</label>
 				) }
 			</div>
diff --git a/blocks/inspector-controls/select-control/index.js b/blocks/inspector-controls/select-control/index.js
index 0b32b621e9ac4..61a1543a79290 100644
--- a/blocks/inspector-controls/select-control/index.js
+++ b/blocks/inspector-controls/select-control/index.js
@@ -10,15 +10,24 @@ import { isEmpty } from 'lodash';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function SelectControl( { label, selected, instanceId, onChange, options = [], ...props } ) {
+function SelectControl( { label, selected, instanceId, onBlur, options = [], ...props } ) {
 	const id = 'inspector-select-control-' + instanceId;
-	const onChangeValue = ( event ) => onChange( event.target.value );
-	
+	const onBlurValue = ( event ) => onBlur( event.target.value );
+
 	return ! isEmpty( options ) && (
 		<BaseControl label={ label } id={ id }>
-			<select className="blocks-select-control__input" id={ id } onChange={ onChangeValue } { ...props }>
-				{ options.map( ( { value, label } ) =>
-					<option key={ value } value={ value } selected={ value == selected }>
+			<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>
 				) }
diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
index e16af65735285..006ae27e38b6a 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/blocks/inspector-controls/toggle-control/index.js
@@ -10,7 +10,7 @@ import Toggle from 'components/form-toggle';
 import BaseControl from './../base-control';
 import './style.scss';
 
-function ToggleControl( { label, checked, instanceId, onChange, ...props } ) {
+function ToggleControl( { label, checked, instanceId, onChange } ) {
 	const id = 'inspector-toggle-control-' + instanceId;
 
 	return (

From 13a22a071b36accc719d6b2ccea1fb685a581100 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Fri, 16 Jun 2017 13:16:56 +0100
Subject: [PATCH 15/17] Addressed feedback.

---
 .../inspector-controls/base-control/index.js  |  4 +--
 .../checkbox-control/index.js                 |  3 +-
 .../inspector-controls/radio-control/index.js | 30 +++++++++----------
 .../radio-control/style.scss                  | 10 +++----
 .../toggle-control/index.js                   |  2 +-
 5 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/blocks/inspector-controls/base-control/index.js b/blocks/inspector-controls/base-control/index.js
index f67a45e4577e1..0b4397bed2963 100644
--- a/blocks/inspector-controls/base-control/index.js
+++ b/blocks/inspector-controls/base-control/index.js
@@ -8,9 +8,9 @@ import classnames from 'classnames';
  */
 import './style.scss';
 
-function BaseControl( { id, label, classes, children, ...props } ) {
+function BaseControl( { id, label, className, children, ...props } ) {
 	return (
-		<div className={ classnames( 'blocks-base-control', classes ) } { ...props }>
+		<div className={ classnames( 'blocks-base-control', className ) } { ...props }>
 			{ label && <label className="blocks-base-control__label" htmlFor={ id }>{ label }</label> }
 			{ children }
 		</div>
diff --git a/blocks/inspector-controls/checkbox-control/index.js b/blocks/inspector-controls/checkbox-control/index.js
index 9da1262d98d3b..857bd109512df 100644
--- a/blocks/inspector-controls/checkbox-control/index.js
+++ b/blocks/inspector-controls/checkbox-control/index.js
@@ -23,7 +23,8 @@ function CheckboxControl( { label, heading, checked, instanceId, onChange, ...pr
 					value="1"
 					onChange={ onChangeValue }
 					checked={ checked }
-					{ ...props } />
+					{ ...props }
+				/>
 				{ label }
 			</label>
 		</BaseControl>
diff --git a/blocks/inspector-controls/radio-control/index.js b/blocks/inspector-controls/radio-control/index.js
index 56c0719e22880..54633908fbe8d 100644
--- a/blocks/inspector-controls/radio-control/index.js
+++ b/blocks/inspector-controls/radio-control/index.js
@@ -15,23 +15,23 @@ function RadioControl( { label, selected, instanceId, onChange, options = [] } )
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return ! isEmpty( options ) && (
-		<BaseControl label={ label } id={ id }>
-			<div className="blocks-radio-control">
-				{ options.map( ( option, i ) =>
-					<label key={ option.value } htmlFor={ ( id + '-' + i ) }>
-						<input
-							id={ ( id + '-' + i ) }
-							className="blocks-radio-control__input"
-							type="radio"
-							name={ id }
-							value={ option.value }
-							onChange={ onChangeValue }
-							selected={ option.value === selected }
-						/>
+		<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>
+				</div>
+			) }
 		</BaseControl>
 	);
 }
diff --git a/blocks/inspector-controls/radio-control/style.scss b/blocks/inspector-controls/radio-control/style.scss
index ea91fd5b1d2da..9f11fd1c76f01 100644
--- a/blocks/inspector-controls/radio-control/style.scss
+++ b/blocks/inspector-controls/radio-control/style.scss
@@ -1,13 +1,13 @@
 .blocks-radio-control {
 	display: flex;
 	flex-direction: column;
-	
-	> label:not(:last-child) {
-		margin-bottom: 5px;
-	}
+}
+
+.blocks-radio-control__option:not(:last-child) {
+	margin-bottom: 4px;
 }
 
 .blocks-radio-control__input[type=radio] {
-	margin-top: -3px;
+	margin-top: 0;
 	margin-right: 6px;
 }
\ No newline at end of file
diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
index 006ae27e38b6a..13a0d03383e80 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/blocks/inspector-controls/toggle-control/index.js
@@ -14,7 +14,7 @@ function ToggleControl( { label, checked, instanceId, onChange } ) {
 	const id = 'inspector-toggle-control-' + instanceId;
 
 	return (
-		<BaseControl label={ label } id={ id } classes={ [ 'blocks-toggle-control' ] }>
+		<BaseControl label={ label } id={ id } className={ [ 'blocks-toggle-control' ] }>
 			<Toggle id={ id } checked={ checked } onChange={ onChange } />
 		</BaseControl>
 	);

From 51764cfac118c5e842ec84b4994abbea4ed4210b Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Fri, 16 Jun 2017 14:29:45 +0100
Subject: [PATCH 16/17] Remove ...props.

---
 blocks/inspector-controls/base-control/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/blocks/inspector-controls/base-control/index.js b/blocks/inspector-controls/base-control/index.js
index 0b4397bed2963..6d671320fb915 100644
--- a/blocks/inspector-controls/base-control/index.js
+++ b/blocks/inspector-controls/base-control/index.js
@@ -8,9 +8,9 @@ import classnames from 'classnames';
  */
 import './style.scss';
 
-function BaseControl( { id, label, className, children, ...props } ) {
+function BaseControl( { id, label, className, children } ) {
 	return (
-		<div className={ classnames( 'blocks-base-control', className ) } { ...props }>
+		<div className={ classnames( 'blocks-base-control', className ) }>
 			{ label && <label className="blocks-base-control__label" htmlFor={ id }>{ label }</label> }
 			{ children }
 		</div>

From f849e9d094faf2df719a1f65b32c24059c985ccb Mon Sep 17 00:00:00 2001
From: Paul Wilde <paulwilde@gmail.com>
Date: Fri, 16 Jun 2017 14:51:01 +0100
Subject: [PATCH 17/17] Use string for className.

---
 blocks/inspector-controls/radio-control/index.js  | 2 +-
 blocks/inspector-controls/toggle-control/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/blocks/inspector-controls/radio-control/index.js b/blocks/inspector-controls/radio-control/index.js
index 54633908fbe8d..e7fc11022d173 100644
--- a/blocks/inspector-controls/radio-control/index.js
+++ b/blocks/inspector-controls/radio-control/index.js
@@ -15,7 +15,7 @@ function RadioControl( { label, selected, instanceId, onChange, options = [] } )
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return ! isEmpty( options ) && (
-		<BaseControl label={ label } id={ id } className={ [ 'blocks-radio-control' ] }>
+		<BaseControl label={ label } id={ id } className="blocks-radio-control">
 			{ options.map( ( option, index ) =>
 				<div className="blocks-radio-control__option">
 					<input
diff --git a/blocks/inspector-controls/toggle-control/index.js b/blocks/inspector-controls/toggle-control/index.js
index 13a0d03383e80..7d83704699443 100644
--- a/blocks/inspector-controls/toggle-control/index.js
+++ b/blocks/inspector-controls/toggle-control/index.js
@@ -14,7 +14,7 @@ function ToggleControl( { label, checked, instanceId, onChange } ) {
 	const id = 'inspector-toggle-control-' + instanceId;
 
 	return (
-		<BaseControl label={ label } id={ id } className={ [ 'blocks-toggle-control' ] }>
+		<BaseControl label={ label } id={ id } className="blocks-toggle-control">
 			<Toggle id={ id } checked={ checked } onChange={ onChange } />
 		</BaseControl>
 	);