From abe96b379d8702eb2bddcec59ae32526cbb9d180 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@ibexcreative.com>
Date: Sat, 10 Feb 2018 22:03:36 +0000
Subject: [PATCH 1/4] Update all instances of FormToggle to use ToggleControl
 component which includes the field label and handles the instance ID
 automatically.

---
 components/panel/style.scss                   |  9 +++++++++
 components/toggle-control/index.js            |  3 ++-
 editor/components/post-comments/index.js      | 20 ++++++++-----------
 .../components/post-pending-status/index.js   | 11 ++++------
 editor/components/post-pingbacks/index.js     | 15 +++++---------
 editor/components/post-sticky/index.js        | 13 ++++--------
 6 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/components/panel/style.scss b/components/panel/style.scss
index f808d12755445c..45713a9dfbf20d 100644
--- a/components/panel/style.scss
+++ b/components/panel/style.scss
@@ -129,6 +129,15 @@
 	&:empty {
 		margin-top: 0;
 	}
+	
+	.blocks-base-control {
+		width: 100%;
+	}
+	
+	.blocks-base-control:last-child,
+	.blocks-toggle-control > .blocks-base-control__label {
+		margin-bottom: 0;
+	}
 }
 
 .components-panel .circle-picker {
diff --git a/components/toggle-control/index.js b/components/toggle-control/index.js
index 1ce56d659f3a31..7f7c1f9be0c83f 100644
--- a/components/toggle-control/index.js
+++ b/components/toggle-control/index.js
@@ -25,7 +25,7 @@ class ToggleControl extends Component {
 	}
 
 	render() {
-		const { label, checked, help, instanceId } = this.props;
+		const { label, checked, help, instanceId, showHint } = this.props;
 		const id = `inspector-toggle-control-${ instanceId }`;
 
 		let describedBy;
@@ -45,6 +45,7 @@ class ToggleControl extends Component {
 					checked={ checked }
 					onChange={ this.onChange }
 					aria-describedby={ describedBy }
+					showHint={ showHint }
 				/>
 			</BaseControl>
 		);
diff --git a/editor/components/post-comments/index.js b/editor/components/post-comments/index.js
index d981298ac8971e..c948bccb4d0d1e 100644
--- a/editor/components/post-comments/index.js
+++ b/editor/components/post-comments/index.js
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { FormToggle, withInstanceId } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal Dependencies
@@ -15,21 +15,17 @@ import { FormToggle, withInstanceId } from '@wordpress/components';
 import { getEditedPostAttribute } from '../../store/selectors';
 import { editPost } from '../../store/actions';
 
-function PostComments( { commentStatus = 'open', instanceId, ...props } ) {
+function PostComments( { commentStatus = 'open', ...props } ) {
 	const onToggleComments = () => props.editPost( { comment_status: commentStatus === 'open' ? 'closed' : 'open' } );
 
-	const commentsToggleId = 'allow-comments-toggle-' + instanceId;
-
-	return [
-		<label key="label" htmlFor={ commentsToggleId }>{ __( 'Allow Comments' ) }</label>,
-		<FormToggle
-			key="toggle"
+	return (
+		<ToggleControl
+			label={ __( 'Allow Comments' ) }
 			checked={ commentStatus === 'open' }
 			onChange={ onToggleComments }
 			showHint={ false }
-			id={ commentsToggleId }
-		/>,
-	];
+		/>
+	);
 }
 
 export default connect(
@@ -41,5 +37,5 @@ export default connect(
 	{
 		editPost,
 	}
-)( withInstanceId( PostComments ) );
+)( PostComments );
 
diff --git a/editor/components/post-pending-status/index.js b/editor/components/post-pending-status/index.js
index 88e0f52cde5a78..815400cb813d1d 100644
--- a/editor/components/post-pending-status/index.js
+++ b/editor/components/post-pending-status/index.js
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { FormToggle, withInstanceId } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 import { compose } from '@wordpress/element';
 
 /**
@@ -17,8 +17,7 @@ import PostPendingStatusCheck from './check';
 import { getEditedPostAttribute } from '../../store/selectors';
 import { editPost } from '../../store/actions';
 
-export function PostPendingStatus( { instanceId, status, onUpdateStatus } ) {
-	const pendingId = 'pending-toggle-' + instanceId;
+export function PostPendingStatus( { status, onUpdateStatus } ) {
 	const togglePendingStatus = () => {
 		const updatedStatus = status === 'pending' ? 'draft' : 'pending';
 		onUpdateStatus( updatedStatus );
@@ -26,9 +25,8 @@ export function PostPendingStatus( { instanceId, status, onUpdateStatus } ) {
 
 	return (
 		<PostPendingStatusCheck>
-			<label htmlFor={ pendingId }>{ __( 'Pending Review' ) }</label>
-			<FormToggle
-				id={ pendingId }
+			<ToggleControl
+				label={ __( 'Pending Review' ) }
 				checked={ status === 'pending' }
 				onChange={ togglePendingStatus }
 				showHint={ false }
@@ -50,5 +48,4 @@ const applyConnect = connect(
 
 export default compose(
 	applyConnect,
-	withInstanceId
 )( PostPendingStatus );
diff --git a/editor/components/post-pingbacks/index.js b/editor/components/post-pingbacks/index.js
index e598f27a6fc468..20f31a7ca23361 100644
--- a/editor/components/post-pingbacks/index.js
+++ b/editor/components/post-pingbacks/index.js
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { FormToggle, withInstanceId } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal Dependencies
@@ -15,19 +15,15 @@ import { FormToggle, withInstanceId } from '@wordpress/components';
 import { getEditedPostAttribute } from '../../store/selectors';
 import { editPost } from '../../store/actions';
 
-function PostPingbacks( { pingStatus = 'open', instanceId, ...props } ) {
+function PostPingbacks( { pingStatus = 'open', ...props } ) {
 	const onTogglePingback = () => props.editPost( { ping_status: pingStatus === 'open' ? 'closed' : 'open' } );
 
-	const pingbacksToggleId = 'allow-pingbacks-toggle-' + instanceId;
-
 	return [
-		<label key="label" htmlFor={ pingbacksToggleId }>{ __( 'Allow Pingbacks & Trackbacks' ) }</label>,
-		<FormToggle
-			key="toggle"
+		<ToggleControl
+			label={ __( 'Allow Pingbacks & Trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
 			showHint={ false }
-			id={ pingbacksToggleId }
 		/>,
 	];
 }
@@ -41,5 +37,4 @@ export default connect(
 	{
 		editPost,
 	}
-)( withInstanceId( PostPingbacks ) );
-
+)( PostPingbacks );
diff --git a/editor/components/post-sticky/index.js b/editor/components/post-sticky/index.js
index 8ad519b7065d2e..38a0313d09a452 100644
--- a/editor/components/post-sticky/index.js
+++ b/editor/components/post-sticky/index.js
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { FormToggle, withInstanceId } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 import { compose } from '@wordpress/element';
 
 /**
@@ -17,18 +17,14 @@ import { getEditedPostAttribute } from '../../store/selectors';
 import { editPost } from '../../store/actions';
 import PostStickyCheck from './check';
 
-export function PostSticky( { onUpdateSticky, postSticky = false, instanceId } ) {
-	const stickyToggleId = 'post-sticky-toggle-' + instanceId;
-
+export function PostSticky( { onUpdateSticky, postSticky = false } ) {
 	return (
 		<PostStickyCheck>
-			<label htmlFor={ stickyToggleId }>{ __( 'Stick to the Front Page' ) }</label>
-			<FormToggle
-				key="toggle"
+			<ToggleControl
+				label={ __( 'Stick to the Front Page' ) }
 				checked={ postSticky }
 				onChange={ () => onUpdateSticky( ! postSticky ) }
 				showHint={ false }
-				id={ stickyToggleId }
 			/>
 		</PostStickyCheck>
 	);
@@ -51,5 +47,4 @@ const applyConnect = connect(
 
 export default compose( [
 	applyConnect,
-	withInstanceId,
 ] )( PostSticky );

From 40e2aca277f45df31821d3871a8362f556a5824f Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@ibexcreative.com>
Date: Sat, 10 Feb 2018 22:37:06 +0000
Subject: [PATCH 2/4] Add showHint prop to documentation.

---
 components/toggle-control/README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/toggle-control/README.md b/components/toggle-control/README.md
index 555be4f530c702..1430f3920d333a 100644
--- a/components/toggle-control/README.md
+++ b/components/toggle-control/README.md
@@ -48,3 +48,9 @@ A function that receives the checked state (boolean) as input.
 - Type: `function`
 - Required: Yes
 
+### showHint
+
+If set to false the On/Off hint text will not appear alongside the toggle control. Default is true.
+
+- Type: `Boolean`
+- Required: No

From 5016de79dcf6d98480a3ed56da11558ebc7026e8 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@ibexcreative.com>
Date: Sun, 11 Feb 2018 12:57:02 +0000
Subject: [PATCH 3/4] Fix build error.

---
 editor/components/post-comments/index.js       | 1 +
 editor/components/post-pending-status/index.js | 1 +
 editor/components/post-pingbacks/index.js      | 1 +
 editor/components/post-sticky/index.js         | 1 +
 4 files changed, 4 insertions(+)

diff --git a/editor/components/post-comments/index.js b/editor/components/post-comments/index.js
index c948bccb4d0d1e..4c413865436e3e 100644
--- a/editor/components/post-comments/index.js
+++ b/editor/components/post-comments/index.js
@@ -20,6 +20,7 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 
 	return (
 		<ToggleControl
+			key="toggle"
 			label={ __( 'Allow Comments' ) }
 			checked={ commentStatus === 'open' }
 			onChange={ onToggleComments }
diff --git a/editor/components/post-pending-status/index.js b/editor/components/post-pending-status/index.js
index 815400cb813d1d..8b6c677939f3a2 100644
--- a/editor/components/post-pending-status/index.js
+++ b/editor/components/post-pending-status/index.js
@@ -26,6 +26,7 @@ export function PostPendingStatus( { status, onUpdateStatus } ) {
 	return (
 		<PostPendingStatusCheck>
 			<ToggleControl
+				key="toggle"
 				label={ __( 'Pending Review' ) }
 				checked={ status === 'pending' }
 				onChange={ togglePendingStatus }
diff --git a/editor/components/post-pingbacks/index.js b/editor/components/post-pingbacks/index.js
index 20f31a7ca23361..858f89eec44cf0 100644
--- a/editor/components/post-pingbacks/index.js
+++ b/editor/components/post-pingbacks/index.js
@@ -20,6 +20,7 @@ function PostPingbacks( { pingStatus = 'open', ...props } ) {
 
 	return [
 		<ToggleControl
+			key="toggle"
 			label={ __( 'Allow Pingbacks & Trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
diff --git a/editor/components/post-sticky/index.js b/editor/components/post-sticky/index.js
index 38a0313d09a452..182e875254e6a9 100644
--- a/editor/components/post-sticky/index.js
+++ b/editor/components/post-sticky/index.js
@@ -21,6 +21,7 @@ export function PostSticky( { onUpdateSticky, postSticky = false } ) {
 	return (
 		<PostStickyCheck>
 			<ToggleControl
+				key="toggle"
 				label={ __( 'Stick to the Front Page' ) }
 				checked={ postSticky }
 				onChange={ () => onUpdateSticky( ! postSticky ) }

From 174dd27a56129dc57a52337427cfe65d881cc09d Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@ibexcreative.com>
Date: Mon, 19 Feb 2018 19:24:54 +0000
Subject: [PATCH 4/4] Remove key attribute.

---
 editor/components/post-comments/index.js       | 1 -
 editor/components/post-pending-status/index.js | 1 -
 editor/components/post-pingbacks/index.js      | 7 +++----
 editor/components/post-sticky/index.js         | 1 -
 4 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/editor/components/post-comments/index.js b/editor/components/post-comments/index.js
index 4c413865436e3e..c948bccb4d0d1e 100644
--- a/editor/components/post-comments/index.js
+++ b/editor/components/post-comments/index.js
@@ -20,7 +20,6 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 
 	return (
 		<ToggleControl
-			key="toggle"
 			label={ __( 'Allow Comments' ) }
 			checked={ commentStatus === 'open' }
 			onChange={ onToggleComments }
diff --git a/editor/components/post-pending-status/index.js b/editor/components/post-pending-status/index.js
index 8b6c677939f3a2..815400cb813d1d 100644
--- a/editor/components/post-pending-status/index.js
+++ b/editor/components/post-pending-status/index.js
@@ -26,7 +26,6 @@ export function PostPendingStatus( { status, onUpdateStatus } ) {
 	return (
 		<PostPendingStatusCheck>
 			<ToggleControl
-				key="toggle"
 				label={ __( 'Pending Review' ) }
 				checked={ status === 'pending' }
 				onChange={ togglePendingStatus }
diff --git a/editor/components/post-pingbacks/index.js b/editor/components/post-pingbacks/index.js
index 858f89eec44cf0..2d4a8a0631460d 100644
--- a/editor/components/post-pingbacks/index.js
+++ b/editor/components/post-pingbacks/index.js
@@ -18,15 +18,14 @@ import { editPost } from '../../store/actions';
 function PostPingbacks( { pingStatus = 'open', ...props } ) {
 	const onTogglePingback = () => props.editPost( { ping_status: pingStatus === 'open' ? 'closed' : 'open' } );
 
-	return [
+	return (
 		<ToggleControl
-			key="toggle"
 			label={ __( 'Allow Pingbacks & Trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
 			showHint={ false }
-		/>,
-	];
+		/>
+	);
 }
 
 export default connect(
diff --git a/editor/components/post-sticky/index.js b/editor/components/post-sticky/index.js
index 182e875254e6a9..38a0313d09a452 100644
--- a/editor/components/post-sticky/index.js
+++ b/editor/components/post-sticky/index.js
@@ -21,7 +21,6 @@ export function PostSticky( { onUpdateSticky, postSticky = false } ) {
 	return (
 		<PostStickyCheck>
 			<ToggleControl
-				key="toggle"
 				label={ __( 'Stick to the Front Page' ) }
 				checked={ postSticky }
 				onChange={ () => onUpdateSticky( ! postSticky ) }