From 1567db0ea6cbade59ee549d9dd677969560e3c0f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 11:23:09 +0100
Subject: [PATCH 01/43] Adds basic dimension controls to Group Block

---
 .../src/group/dimension-control.js            | 106 ++++++++++++++++++
 packages/block-library/src/group/index.js     |  42 +++++++
 2 files changed, 148 insertions(+)
 create mode 100644 packages/block-library/src/group/dimension-control.js

diff --git a/packages/block-library/src/group/dimension-control.js b/packages/block-library/src/group/dimension-control.js
new file mode 100644
index 00000000000000..6b2a9a9d0c355a
--- /dev/null
+++ b/packages/block-library/src/group/dimension-control.js
@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import { startCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ButtonGroup,
+	BaseControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function DimensionControl( { type, attributes, setAttributes, clientId } ) {
+	const humanType = startCase( type );
+
+	const sizesTable = [
+		{
+			name: __( 'None' ),
+			size: 0,
+			slug: 'none',
+		},
+		{
+			name: __( 'Small' ),
+			size: 14,
+			slug: 'small',
+		},
+		{
+			name: __( 'Medium' ),
+			size: 24,
+			slug: 'medium',
+		},
+		{
+			name: __( 'Large' ),
+			size: 34,
+			slug: 'large',
+		}, {
+			name: __( 'Huge' ),
+			size: 60,
+			slug: 'huge',
+		},
+	];
+
+	const onChangeSpacing = ( event ) => {
+		const theSize = sizesTable.find( ( size ) => event.target.value === size.slug );
+
+		if ( ! theSize ) {
+			return;
+		}
+
+		const size = theSize.size;
+
+		// if ( value === '' || value === 'none' ) {
+		// 	// resetValue();
+		// 	return;
+		// }
+
+		setAttributes( {
+			[ `${ type }Top` ]: size,
+			[ `${ type }Right` ]: size,
+			[ `${ type }Left` ]: size,
+			[ `${ type }Bottom` ]: size,
+		} );
+	};
+
+	// Todo - update with unique Block instance ID?
+	const controlId = `block-spacing-${ type }-${ clientId }`;
+
+	return (
+		<BaseControl
+			id={ controlId }
+			help={ `Select the ${ type } for this Block` }
+			className="block-dimension-control"
+		>
+			<BaseControl.VisualLabel>
+				{ humanType }
+			</BaseControl.VisualLabel>
+			<ButtonGroup
+				id={ controlId }
+				className="block-dimension-control__buttons"
+			>
+				{ sizesTable.map( function( size ) {
+					const visualName = size.name.substring( 0, 1 );
+					const hiddenName = size.name.substring( 1 );
+					const isSelected = attributes[ `${ type }Top` ] === size.size;
+					return (
+						<Button
+							className="block-dimension-control__button"
+							key={ size.slug }
+							isDefault={ ! isSelected }
+							isPrimary={ isSelected }
+							value={ size.slug }
+							onClick={ onChangeSpacing }
+						>
+							{ visualName }<span className="screen-reader-text">{ hiddenName }</span>
+						</Button>
+					);
+				} ) }
+			</ButtonGroup>
+		</BaseControl>
+	);
+}
+
+export default DimensionControl;
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index 225e6e2ed03496..9afb0b48022cda 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -88,6 +88,48 @@ export const settings = {
 		anchor: true,
 		html: false,
 	},
+	attributes: {
+		paddingUnit: {
+			type: 'string',
+			default: 'px',
+		},
+		marginUnit: {
+			type: 'string',
+			default: 'px',
+		},
+		paddingTop: {
+			type: 'number',
+			default: 0,
+		},
+		paddingRight: {
+			type: 'number',
+			default: 0,
+		},
+		paddingBottom: {
+			type: 'number',
+			default: 0,
+		},
+		paddingLeft: {
+			type: 'number',
+			default: 0,
+		},
+		marginTop: {
+			type: 'number',
+			default: 0,
+		},
+		marginRight: {
+			type: 'number',
+			default: 0,
+		},
+		marginBottom: {
+			type: 'number',
+			default: 0,
+		},
+		marginLeft: {
+			type: 'number',
+			default: 0,
+		},
+	},
 	transforms: {
 		from: [
 			{

From b072dd6f22679e2ac7867c186195c3fb4ccf52fd Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 12:07:51 +0100
Subject: [PATCH 02/43] Moves Dim Control to block editor package. Makes size
 class based rather than hard coded value

---
 packages/block-editor/README.md               |  4 ++
 .../components/dimension-control/index.js}    | 42 ++++++++-------
 .../components/dimension-control/style.scss   | 20 +++++++
 .../block-library/src/group/attributes.js     | 54 +++++++++++++++++++
 packages/block-library/src/group/index.js     | 44 +--------------
 packages/block-library/src/group/theme.scss   | 40 ++++++++++++++
 6 files changed, 143 insertions(+), 61 deletions(-)
 rename packages/{block-library/src/group/dimension-control.js => block-editor/src/components/dimension-control/index.js} (67%)
 create mode 100644 packages/block-editor/src/components/dimension-control/style.scss
 create mode 100644 packages/block-library/src/group/attributes.js

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 1cbc41293ca13b..fe3bc5be85a1d6 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -231,6 +231,10 @@ _Returns_
 
 Undocumented declaration.
 
+<a name="DimensionControl" href="#DimensionControl">#</a> **DimensionControl**
+
+Undocumented declaration.
+
 <a name="FontSizePicker" href="#FontSizePicker">#</a> **FontSizePicker**
 
 Undocumented declaration.
diff --git a/packages/block-library/src/group/dimension-control.js b/packages/block-editor/src/components/dimension-control/index.js
similarity index 67%
rename from packages/block-library/src/group/dimension-control.js
rename to packages/block-editor/src/components/dimension-control/index.js
index 6b2a9a9d0c355a..3ff4d4971b562f 100644
--- a/packages/block-library/src/group/dimension-control.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -43,26 +43,30 @@ function DimensionControl( { type, attributes, setAttributes, clientId } ) {
 		},
 	];
 
-	const onChangeSpacing = ( event ) => {
+	const onChangeSpacingSize = ( event ) => {
 		const theSize = sizesTable.find( ( size ) => event.target.value === size.slug );
 
 		if ( ! theSize ) {
 			return;
 		}
 
-		const size = theSize.size;
-
-		// if ( value === '' || value === 'none' ) {
-		// 	// resetValue();
-		// 	return;
-		// }
-
-		setAttributes( {
-			[ `${ type }Top` ]: size,
-			[ `${ type }Right` ]: size,
-			[ `${ type }Left` ]: size,
-			[ `${ type }Bottom` ]: size,
-		} );
+		if ( attributes[ `${ type }Size` ] === theSize.slug ) {
+			setAttributes( {
+				[ `${ type }Size` ]: '',
+				[ `${ type }Top` ]: 0,
+				[ `${ type }Right` ]: 0,
+				[ `${ type }Left` ]: 0,
+				[ `${ type }Bottom` ]: 0,
+			} );
+		} else {
+			setAttributes( {
+				[ `${ type }Size` ]: theSize.slug,
+				[ `${ type }Top` ]: theSize.size,
+				[ `${ type }Right` ]: theSize.size,
+				[ `${ type }Left` ]: theSize.size,
+				[ `${ type }Bottom` ]: theSize.size,
+			} );
+		}
 	};
 
 	// Todo - update with unique Block instance ID?
@@ -72,27 +76,27 @@ function DimensionControl( { type, attributes, setAttributes, clientId } ) {
 		<BaseControl
 			id={ controlId }
 			help={ `Select the ${ type } for this Block` }
-			className="block-dimension-control"
+			className="block-editor-dimension-control"
 		>
 			<BaseControl.VisualLabel>
 				{ humanType }
 			</BaseControl.VisualLabel>
 			<ButtonGroup
 				id={ controlId }
-				className="block-dimension-control__buttons"
+				className="block-editor-dimension-control__buttons"
 			>
 				{ sizesTable.map( function( size ) {
 					const visualName = size.name.substring( 0, 1 );
 					const hiddenName = size.name.substring( 1 );
-					const isSelected = attributes[ `${ type }Top` ] === size.size;
+					const isSelected = attributes[ `${ type }Size` ] === size.slug;
 					return (
 						<Button
-							className="block-dimension-control__button"
+							className="block-editor-dimension-control__button"
 							key={ size.slug }
 							isDefault={ ! isSelected }
 							isPrimary={ isSelected }
 							value={ size.slug }
-							onClick={ onChangeSpacing }
+							onClick={ onChangeSpacingSize }
 						>
 							{ visualName }<span className="screen-reader-text">{ hiddenName }</span>
 						</Button>
diff --git a/packages/block-editor/src/components/dimension-control/style.scss b/packages/block-editor/src/components/dimension-control/style.scss
new file mode 100644
index 00000000000000..31b43ad435f04e
--- /dev/null
+++ b/packages/block-editor/src/components/dimension-control/style.scss
@@ -0,0 +1,20 @@
+.block-editor-dimension-control {
+	margin-bottom: 1em;
+
+	.components-base-control__label {
+		margin-bottom: 1em;
+	}
+
+	.components-base-control__help {
+		margin-top: -5px;
+	}
+}
+
+.block-editor-dimension-control__buttons {
+	display: flex;
+}
+
+.block-editor-dimension-control__button {
+	flex: 1;
+	justify-content: center;
+}
diff --git a/packages/block-library/src/group/attributes.js b/packages/block-library/src/group/attributes.js
new file mode 100644
index 00000000000000..a66aed482c4ad6
--- /dev/null
+++ b/packages/block-library/src/group/attributes.js
@@ -0,0 +1,54 @@
+/**
+ * Set the attributes for the Dimension Control
+ * @type {Object}
+ */
+const DimensionsAttributes = {
+	paddingUnit: {
+		type: 'string',
+		default: 'px',
+	},
+	paddingSize: {
+		type: 'string',
+	},
+	paddingTop: {
+		type: 'number',
+		default: 0,
+	},
+	paddingRight: {
+		type: 'number',
+		default: 0,
+	},
+	paddingBottom: {
+		type: 'number',
+		default: 0,
+	},
+	paddingLeft: {
+		type: 'number',
+		default: 0,
+	},
+	marginUnit: {
+		type: 'string',
+		default: 'px',
+	},
+	marginSize: {
+		type: 'string',
+	},
+	marginTop: {
+		type: 'number',
+		default: 0,
+	},
+	marginRight: {
+		type: 'number',
+		default: 0,
+	},
+	marginBottom: {
+		type: 'number',
+		default: 0,
+	},
+	marginLeft: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default DimensionsAttributes;
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index 9afb0b48022cda..32b7a26339641d 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -12,6 +12,7 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import attributes from './attributes';
 
 const { name } = metadata;
 
@@ -20,6 +21,7 @@ export { metadata, name };
 export const settings = {
 	title: __( 'Group' ),
 	icon,
+	attributes,
 	description: __( 'A block that groups other blocks.' ),
 	keywords: [
 		__( 'container' ),
@@ -88,48 +90,6 @@ export const settings = {
 		anchor: true,
 		html: false,
 	},
-	attributes: {
-		paddingUnit: {
-			type: 'string',
-			default: 'px',
-		},
-		marginUnit: {
-			type: 'string',
-			default: 'px',
-		},
-		paddingTop: {
-			type: 'number',
-			default: 0,
-		},
-		paddingRight: {
-			type: 'number',
-			default: 0,
-		},
-		paddingBottom: {
-			type: 'number',
-			default: 0,
-		},
-		paddingLeft: {
-			type: 'number',
-			default: 0,
-		},
-		marginTop: {
-			type: 'number',
-			default: 0,
-		},
-		marginRight: {
-			type: 'number',
-			default: 0,
-		},
-		marginBottom: {
-			type: 'number',
-			default: 0,
-		},
-		marginLeft: {
-			type: 'number',
-			default: 0,
-		},
-	},
 	transforms: {
 		from: [
 			{
diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss
index 61e711c3aaa2f8..d6c5e358f3dc16 100644
--- a/packages/block-library/src/group/theme.scss
+++ b/packages/block-library/src/group/theme.scss
@@ -6,4 +6,44 @@
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+
+	&.padding-none {
+		padding: 0;
+	}
+
+	&.padding-small {
+		padding: $block-padding;
+	}
+
+	&.padding-medium {
+		padding: $block-padding*2;
+	}
+
+	&.padding-large {
+		padding: $block-padding*3;
+	}
+
+	&.padding-huge {
+		padding: $block-padding*4;
+	}
+
+	&.margin-none {
+		margin: 0;
+	}
+
+	&.margin-small {
+		margin: $block-padding;
+	}
+
+	&.margin-medium {
+		margin: $block-padding*2;
+	}
+
+	&.margin-large {
+		margin: $block-padding*3;
+	}
+
+	&.margin-huge {
+		margin: $block-padding*4;
+	}
 }

From e75ac86878bce9b330ce965c079f5d4d2caeff71 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 12:17:49 +0100
Subject: [PATCH 03/43] Moves sizes config to seperate file. Introduces tooltip
 on size buttons

---
 .../src/components/dimension-control/index.js | 59 ++++++-------------
 .../src/components/dimension-control/sizes.js | 40 +++++++++++++
 2 files changed, 59 insertions(+), 40 deletions(-)
 create mode 100644 packages/block-editor/src/components/dimension-control/sizes.js

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 3ff4d4971b562f..557f6b37c429b8 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -10,38 +10,16 @@ import {
 	Button,
 	ButtonGroup,
 	BaseControl,
+	Tooltip,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
-function DimensionControl( { type, attributes, setAttributes, clientId } ) {
-	const humanType = startCase( type );
+/**
+ * Internal dependencies
+ */
+import sizesTable from './sizes';
 
-	const sizesTable = [
-		{
-			name: __( 'None' ),
-			size: 0,
-			slug: 'none',
-		},
-		{
-			name: __( 'Small' ),
-			size: 14,
-			slug: 'small',
-		},
-		{
-			name: __( 'Medium' ),
-			size: 24,
-			slug: 'medium',
-		},
-		{
-			name: __( 'Large' ),
-			size: 34,
-			slug: 'large',
-		}, {
-			name: __( 'Huge' ),
-			size: 60,
-			slug: 'huge',
-		},
-	];
+function DimensionControl( { type, attributes, setAttributes, clientId } ) {
+	const humanTypeName = startCase( type );
 
 	const onChangeSpacingSize = ( event ) => {
 		const theSize = sizesTable.find( ( size ) => event.target.value === size.slug );
@@ -79,7 +57,7 @@ function DimensionControl( { type, attributes, setAttributes, clientId } ) {
 			className="block-editor-dimension-control"
 		>
 			<BaseControl.VisualLabel>
-				{ humanType }
+				{ humanTypeName }
 			</BaseControl.VisualLabel>
 			<ButtonGroup
 				id={ controlId }
@@ -90,16 +68,17 @@ function DimensionControl( { type, attributes, setAttributes, clientId } ) {
 					const hiddenName = size.name.substring( 1 );
 					const isSelected = attributes[ `${ type }Size` ] === size.slug;
 					return (
-						<Button
-							className="block-editor-dimension-control__button"
-							key={ size.slug }
-							isDefault={ ! isSelected }
-							isPrimary={ isSelected }
-							value={ size.slug }
-							onClick={ onChangeSpacingSize }
-						>
-							{ visualName }<span className="screen-reader-text">{ hiddenName }</span>
-						</Button>
+						<Tooltip key={ size.slug } text={ size.name }>
+							<Button
+								className="block-editor-dimension-control__button"
+								isDefault={ ! isSelected }
+								isPrimary={ isSelected }
+								value={ size.slug }
+								onClick={ onChangeSpacingSize }
+							>
+								{ visualName }<span className="screen-reader-text">{ hiddenName }</span>
+							</Button>
+						</Tooltip>
 					);
 				} ) }
 			</ButtonGroup>
diff --git a/packages/block-editor/src/components/dimension-control/sizes.js b/packages/block-editor/src/components/dimension-control/sizes.js
new file mode 100644
index 00000000000000..433976b987d517
--- /dev/null
+++ b/packages/block-editor/src/components/dimension-control/sizes.js
@@ -0,0 +1,40 @@
+/**
+ * Sizes
+ *
+ * defines the sizes used in dimension controls
+ * all hardcoded `size` values are based on the value of
+ * the Sass variable `$block-padding` from
+ * `packages/block-editor/src/components/dimension-control/sizes.js`.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default [
+	{
+		name: __( 'None' ),
+		size: 0,
+		slug: 'none',
+	},
+	{
+		name: __( 'Small' ),
+		size: 14,
+		slug: 'small',
+	},
+	{
+		name: __( 'Medium' ),
+		size: 24,
+		slug: 'medium',
+	},
+	{
+		name: __( 'Large' ),
+		size: 34,
+		slug: 'large',
+	}, {
+		name: __( 'Huge' ),
+		size: 60,
+		slug: 'huge',
+	},
+];

From 851272df066ed456c3594e1e1916e0754129e085 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 12:20:52 +0100
Subject: [PATCH 04/43] Adds aria pressed support to size buttons

---
 packages/block-editor/src/components/dimension-control/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 557f6b37c429b8..3110295a8cfb22 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -75,6 +75,7 @@ function DimensionControl( { type, attributes, setAttributes, clientId } ) {
 								isPrimary={ isSelected }
 								value={ size.slug }
 								onClick={ onChangeSpacingSize }
+								aria-pressed={ isSelected }
 							>
 								{ visualName }<span className="screen-reader-text">{ hiddenName }</span>
 							</Button>

From e8ea617b0c2c850df7c36aa09ad54db83297b609 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 12:31:48 +0100
Subject: [PATCH 05/43] Improve i18n of strings.

Addresses https://github.com/WordPress/gutenberg/pull/16730#discussion_r306758167

Renames `type` to `property` to better indicate that it is a formal CSS property value and therefore should not be translated lest it break the underlying code.

Added title attribute to enable true text-based strings to be translatable.
---
 .../src/components/dimension-control/index.js | 40 ++++++++-----------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 3110295a8cfb22..ae3b6a43ed32b4 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { startCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -12,15 +7,14 @@ import {
 	BaseControl,
 	Tooltip,
 } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import sizesTable from './sizes';
 
-function DimensionControl( { type, attributes, setAttributes, clientId } ) {
-	const humanTypeName = startCase( type );
-
+function DimensionControl( { title, property, attributes, setAttributes, clientId } ) {
 	const onChangeSpacingSize = ( event ) => {
 		const theSize = sizesTable.find( ( size ) => event.target.value === size.slug );
 
@@ -28,36 +22,36 @@ function DimensionControl( { type, attributes, setAttributes, clientId } ) {
 			return;
 		}
 
-		if ( attributes[ `${ type }Size` ] === theSize.slug ) {
+		if ( attributes[ `${ property }Size` ] === theSize.slug ) {
 			setAttributes( {
-				[ `${ type }Size` ]: '',
-				[ `${ type }Top` ]: 0,
-				[ `${ type }Right` ]: 0,
-				[ `${ type }Left` ]: 0,
-				[ `${ type }Bottom` ]: 0,
+				[ `${ property }Size` ]: '',
+				[ `${ property }Top` ]: 0,
+				[ `${ property }Right` ]: 0,
+				[ `${ property }Left` ]: 0,
+				[ `${ property }Bottom` ]: 0,
 			} );
 		} else {
 			setAttributes( {
-				[ `${ type }Size` ]: theSize.slug,
-				[ `${ type }Top` ]: theSize.size,
-				[ `${ type }Right` ]: theSize.size,
-				[ `${ type }Left` ]: theSize.size,
-				[ `${ type }Bottom` ]: theSize.size,
+				[ `${ property }Size` ]: theSize.slug,
+				[ `${ property }Top` ]: theSize.size,
+				[ `${ property }Right` ]: theSize.size,
+				[ `${ property }Left` ]: theSize.size,
+				[ `${ property }Bottom` ]: theSize.size,
 			} );
 		}
 	};
 
 	// Todo - update with unique Block instance ID?
-	const controlId = `block-spacing-${ type }-${ clientId }`;
+	const controlId = `block-spacing-${ property }-${ clientId }`;
 
 	return (
 		<BaseControl
 			id={ controlId }
-			help={ `Select the ${ type } for this Block` }
+			help={ sprintf( __( 'Select the %s for this Block' ), property ) }
 			className="block-editor-dimension-control"
 		>
 			<BaseControl.VisualLabel>
-				{ humanTypeName }
+				{ title }
 			</BaseControl.VisualLabel>
 			<ButtonGroup
 				id={ controlId }
@@ -66,7 +60,7 @@ function DimensionControl( { type, attributes, setAttributes, clientId } ) {
 				{ sizesTable.map( function( size ) {
 					const visualName = size.name.substring( 0, 1 );
 					const hiddenName = size.name.substring( 1 );
-					const isSelected = attributes[ `${ type }Size` ] === size.slug;
+					const isSelected = attributes[ `${ property }Size` ] === size.slug;
 					return (
 						<Tooltip key={ size.slug } text={ size.name }>
 							<Button

From cca7e68de8385cacc011e31c8f81bcc37aa7edf7 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 12:46:29 +0100
Subject: [PATCH 06/43] Renames Huge to Xlarge and adds ability to provide abbr
 for a11y reasons

---
 .../src/components/dimension-control/index.js | 22 ++++++++++++++++++-
 .../src/components/dimension-control/sizes.js |  5 +++--
 .../components/dimension-control/style.scss   |  4 ++++
 packages/block-library/src/group/theme.scss   |  4 ++--
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index ae3b6a43ed32b4..34a0b3dfc99c0d 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -8,6 +8,9 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import {
+	Fragment,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -61,6 +64,23 @@ function DimensionControl( { title, property, attributes, setAttributes, clientI
 					const visualName = size.name.substring( 0, 1 );
 					const hiddenName = size.name.substring( 1 );
 					const isSelected = attributes[ `${ property }Size` ] === size.slug;
+
+					let innerButton = (
+						<Fragment>
+							{ visualName }
+							<span className="screen-reader-text">{ hiddenName }</span>
+						</Fragment>
+					);
+
+					// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
+					if ( size.abbr ) {
+						innerButton = (
+							<abbr title={ size.abbr }>
+								{ innerButton }
+							</abbr>
+						);
+					}
+
 					return (
 						<Tooltip key={ size.slug } text={ size.name }>
 							<Button
@@ -71,7 +91,7 @@ function DimensionControl( { title, property, attributes, setAttributes, clientI
 								onClick={ onChangeSpacingSize }
 								aria-pressed={ isSelected }
 							>
-								{ visualName }<span className="screen-reader-text">{ hiddenName }</span>
+								{ innerButton }
 							</Button>
 						</Tooltip>
 					);
diff --git a/packages/block-editor/src/components/dimension-control/sizes.js b/packages/block-editor/src/components/dimension-control/sizes.js
index 433976b987d517..61b3e5f77488c1 100644
--- a/packages/block-editor/src/components/dimension-control/sizes.js
+++ b/packages/block-editor/src/components/dimension-control/sizes.js
@@ -33,8 +33,9 @@ export default [
 		size: 34,
 		slug: 'large',
 	}, {
-		name: __( 'Huge' ),
+		name: __( 'XLarge' ),
+		abbr: __( 'Extra Large' ), // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
 		size: 60,
-		slug: 'huge',
+		slug: 'xlarge',
 	},
 ];
diff --git a/packages/block-editor/src/components/dimension-control/style.scss b/packages/block-editor/src/components/dimension-control/style.scss
index 31b43ad435f04e..d188f06089621f 100644
--- a/packages/block-editor/src/components/dimension-control/style.scss
+++ b/packages/block-editor/src/components/dimension-control/style.scss
@@ -17,4 +17,8 @@
 .block-editor-dimension-control__button {
 	flex: 1;
 	justify-content: center;
+
+	abbr {
+		pointer-events: none;
+	}
 }
diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss
index d6c5e358f3dc16..f595aef062344a 100644
--- a/packages/block-library/src/group/theme.scss
+++ b/packages/block-library/src/group/theme.scss
@@ -23,7 +23,7 @@
 		padding: $block-padding*3;
 	}
 
-	&.padding-huge {
+	&.padding-xlarge {
 		padding: $block-padding*4;
 	}
 
@@ -43,7 +43,7 @@
 		margin: $block-padding*3;
 	}
 
-	&.margin-huge {
+	&.margin-xlarge {
 		margin: $block-padding*4;
 	}
 }

From dbd6cdb51b4639a27b4447ed0ea220b3a310c93f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 14:06:39 +0100
Subject: [PATCH 07/43] Adds reset button to UI

---
 .../src/components/dimension-control/index.js | 38 +++++++++++++------
 .../components/dimension-control/style.scss   |  9 ++++-
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 34a0b3dfc99c0d..23471bf4e279d0 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -6,6 +6,7 @@ import {
 	ButtonGroup,
 	BaseControl,
 	Tooltip,
+	IconButton,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -18,6 +19,8 @@ import {
 import sizesTable from './sizes';
 
 function DimensionControl( { title, property, attributes, setAttributes, clientId } ) {
+	const controlId = `block-spacing-${ property }-${ clientId }`;
+
 	const onChangeSpacingSize = ( event ) => {
 		const theSize = sizesTable.find( ( size ) => event.target.value === size.slug );
 
@@ -26,13 +29,7 @@ function DimensionControl( { title, property, attributes, setAttributes, clientI
 		}
 
 		if ( attributes[ `${ property }Size` ] === theSize.slug ) {
-			setAttributes( {
-				[ `${ property }Size` ]: '',
-				[ `${ property }Top` ]: 0,
-				[ `${ property }Right` ]: 0,
-				[ `${ property }Left` ]: 0,
-				[ `${ property }Bottom` ]: 0,
-			} );
+			resetSpacing();
 		} else {
 			setAttributes( {
 				[ `${ property }Size` ]: theSize.slug,
@@ -44,8 +41,15 @@ function DimensionControl( { title, property, attributes, setAttributes, clientI
 		}
 	};
 
-	// Todo - update with unique Block instance ID?
-	const controlId = `block-spacing-${ property }-${ clientId }`;
+	const resetSpacing = () => {
+		setAttributes( {
+			[ `${ property }Size` ]: '',
+			[ `${ property }Top` ]: 0,
+			[ `${ property }Right` ]: 0,
+			[ `${ property }Left` ]: 0,
+			[ `${ property }Bottom` ]: 0,
+		} );
+	};
 
 	return (
 		<BaseControl
@@ -53,9 +57,19 @@ function DimensionControl( { title, property, attributes, setAttributes, clientI
 			help={ sprintf( __( 'Select the %s for this Block' ), property ) }
 			className="block-editor-dimension-control"
 		>
-			<BaseControl.VisualLabel>
-				{ title }
-			</BaseControl.VisualLabel>
+			<div className="block-editor-dimension-control__header">
+				<BaseControl.VisualLabel>
+					{ title }
+				</BaseControl.VisualLabel>
+
+				<IconButton
+					icon="controls-repeat"
+					label={ sprintf( __( 'Reset %s' ), property ) }
+					isDefault
+					isSmall
+					onClick={ resetSpacing }
+				/>
+			</div>
 			<ButtonGroup
 				id={ controlId }
 				className="block-editor-dimension-control__buttons"
diff --git a/packages/block-editor/src/components/dimension-control/style.scss b/packages/block-editor/src/components/dimension-control/style.scss
index d188f06089621f..63de586c11583f 100644
--- a/packages/block-editor/src/components/dimension-control/style.scss
+++ b/packages/block-editor/src/components/dimension-control/style.scss
@@ -2,7 +2,7 @@
 	margin-bottom: 1em;
 
 	.components-base-control__label {
-		margin-bottom: 1em;
+		margin-bottom: 0;
 	}
 
 	.components-base-control__help {
@@ -22,3 +22,10 @@
 		pointer-events: none;
 	}
 }
+
+.block-editor-dimension-control__header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0.75em;
+}

From 0574e47a8a2d218f65f80e49c1850271d7afd9c6 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 15:41:51 +0100
Subject: [PATCH 08/43] Align UI closer to mockup provided by @kjell

See https://github.com/WordPress/gutenberg/issues/13363#issuecomment-463291100
---
 .../components/dimension-control/buttons.js   | 71 +++++++++++++++++++
 .../src/components/dimension-control/index.js | 68 +++++-------------
 .../components/dimension-control/style.scss   | 19 ++++-
 3 files changed, 106 insertions(+), 52 deletions(-)
 create mode 100644 packages/block-editor/src/components/dimension-control/buttons.js

diff --git a/packages/block-editor/src/components/dimension-control/buttons.js b/packages/block-editor/src/components/dimension-control/buttons.js
new file mode 100644
index 00000000000000..4a812d1c74226e
--- /dev/null
+++ b/packages/block-editor/src/components/dimension-control/buttons.js
@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ButtonGroup,
+
+	Tooltip,
+
+} from '@wordpress/components';
+
+import {
+	Fragment,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import sizesTable from './sizes';
+
+function DimensionButtons( { controlId, attributes, property, onChangeSpacingSize } ) {
+	return (
+		<Fragment>
+
+			<ButtonGroup
+				id={ controlId }
+				className="block-editor-dimension-control__buttons"
+			>
+				{ sizesTable.map( function( size ) {
+					const visualName = size.name.substring( 0, 1 );
+					const hiddenName = size.name.substring( 1 );
+					const isSelected = attributes[ `${ property }Size` ] === size.slug;
+
+					let innerButton = (
+						<Fragment>
+							{ visualName }
+							<span className="screen-reader-text">{ hiddenName }</span>
+						</Fragment>
+					);
+
+					// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
+					if ( size.abbr ) {
+						innerButton = (
+							<abbr title={ size.abbr }>
+								{ innerButton }
+							</abbr>
+						);
+					}
+
+					return (
+						<Tooltip key={ size.slug } text={ size.name }>
+							<Button
+								className="block-editor-dimension-control__button"
+								isDefault={ ! isSelected }
+								isPrimary={ isSelected }
+								value={ size.slug }
+								onClick={ onChangeSpacingSize }
+								aria-pressed={ isSelected }
+							>
+								{ innerButton }
+							</Button>
+						</Tooltip>
+					);
+				} ) }
+			</ButtonGroup>
+
+		</Fragment>
+	);
+}
+
+export default DimensionButtons;
diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 23471bf4e279d0..38d350b5a69434 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -2,24 +2,20 @@
  * WordPress dependencies
  */
 import {
-	Button,
-	ButtonGroup,
 	BaseControl,
-	Tooltip,
 	IconButton,
+	Icon,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	Fragment,
-} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import sizesTable from './sizes';
+import DimensionButtons from './buttons';
 
-function DimensionControl( { title, property, attributes, setAttributes, clientId } ) {
-	const controlId = `block-spacing-${ property }-${ clientId }`;
+function DimensionControl( props ) {
+	const { title, property, attributes, setAttributes, clientId } = props;
 
 	const onChangeSpacingSize = ( event ) => {
 		const theSize = sizesTable.find( ( size ) => event.target.value === size.slug );
@@ -53,64 +49,34 @@ function DimensionControl( { title, property, attributes, setAttributes, clientI
 
 	return (
 		<BaseControl
-			id={ controlId }
+			id={ `block-spacing-${ property }-desktop-${ clientId }` }
 			help={ sprintf( __( 'Select the %s for this Block' ), property ) }
 			className="block-editor-dimension-control"
 		>
 			<div className="block-editor-dimension-control__header">
-				<BaseControl.VisualLabel>
-					{ title }
+				<BaseControl.VisualLabel className="block-editor-dimension-control__header-label">
+					<Icon
+						icon="desktop"
+						label="Desktop"
+					/>
+					{ sprintf( __( '%s on all devices' ), title ) }
 				</BaseControl.VisualLabel>
 
 				<IconButton
 					icon="controls-repeat"
-					label={ sprintf( __( 'Reset %s' ), property ) }
+					label={ sprintf( __( 'Reset %s' ), title ) }
 					isDefault
 					isSmall
 					onClick={ resetSpacing }
 				/>
 			</div>
-			<ButtonGroup
-				id={ controlId }
-				className="block-editor-dimension-control__buttons"
-			>
-				{ sizesTable.map( function( size ) {
-					const visualName = size.name.substring( 0, 1 );
-					const hiddenName = size.name.substring( 1 );
-					const isSelected = attributes[ `${ property }Size` ] === size.slug;
-
-					let innerButton = (
-						<Fragment>
-							{ visualName }
-							<span className="screen-reader-text">{ hiddenName }</span>
-						</Fragment>
-					);
 
-					// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
-					if ( size.abbr ) {
-						innerButton = (
-							<abbr title={ size.abbr }>
-								{ innerButton }
-							</abbr>
-						);
-					}
+			<DimensionButtons
+				{ ...props }
+				device="desktop"
+				onChangeSpacingSize={ onChangeSpacingSize }
+			/>
 
-					return (
-						<Tooltip key={ size.slug } text={ size.name }>
-							<Button
-								className="block-editor-dimension-control__button"
-								isDefault={ ! isSelected }
-								isPrimary={ isSelected }
-								value={ size.slug }
-								onClick={ onChangeSpacingSize }
-								aria-pressed={ isSelected }
-							>
-								{ innerButton }
-							</Button>
-						</Tooltip>
-					);
-				} ) }
-			</ButtonGroup>
 		</BaseControl>
 	);
 }
diff --git a/packages/block-editor/src/components/dimension-control/style.scss b/packages/block-editor/src/components/dimension-control/style.scss
index 63de586c11583f..e6cad6aad34731 100644
--- a/packages/block-editor/src/components/dimension-control/style.scss
+++ b/packages/block-editor/src/components/dimension-control/style.scss
@@ -1,5 +1,12 @@
 .block-editor-dimension-control {
-	margin-bottom: 1em;
+	margin-bottom: $block-padding;
+	border-bottom: 1px solid $light-gray-600;
+	padding-bottom: $block-padding/2;
+
+	&:last-child {
+		padding-bottom: 0;
+		border-bottom: 0;
+	}
 
 	.components-base-control__label {
 		margin-bottom: 0;
@@ -28,4 +35,14 @@
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 0.75em;
+
+	.block-editor-dimension-control__header-label {
+		display: flex;
+		align-items: center;
+
+		.dashicon {
+			margin-right: 0.5em;
+		}
+	}
 }
+

From 672c51bfa49d71c3ffb42bc5305cba3f1ef64cf7 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 24 Jul 2019 21:15:37 +0100
Subject: [PATCH 09/43] Add Responsive Controls and Attributes

---
 .../components/dimension-control/buttons.js   |   4 +-
 .../src/components/dimension-control/index.js |  37 ++--
 .../components/dimension-control/style.scss   |  16 +-
 .../block-library/src/group/attributes.js     |  44 ++---
 packages/block-library/src/group/theme.scss   | 187 +++++++++++++++---
 5 files changed, 207 insertions(+), 81 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/buttons.js b/packages/block-editor/src/components/dimension-control/buttons.js
index 4a812d1c74226e..f74817d609bcd6 100644
--- a/packages/block-editor/src/components/dimension-control/buttons.js
+++ b/packages/block-editor/src/components/dimension-control/buttons.js
@@ -18,7 +18,7 @@ import {
  */
 import sizesTable from './sizes';
 
-function DimensionButtons( { controlId, attributes, property, onChangeSpacingSize } ) {
+function DimensionButtons( { controlId, currentSize, onChangeSpacingSize } ) {
 	return (
 		<Fragment>
 
@@ -29,7 +29,7 @@ function DimensionButtons( { controlId, attributes, property, onChangeSpacingSiz
 				{ sizesTable.map( function( size ) {
 					const visualName = size.name.substring( 0, 1 );
 					const hiddenName = size.name.substring( 1 );
-					const isSelected = attributes[ `${ property }Size` ] === size.slug;
+					const isSelected = currentSize === size.slug;
 
 					let innerButton = (
 						<Fragment>
diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 38d350b5a69434..64ae38de63e0d9 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -15,37 +15,27 @@ import sizesTable from './sizes';
 import DimensionButtons from './buttons';
 
 function DimensionControl( props ) {
-	const { title, property, attributes, setAttributes, clientId } = props;
+	const { title, property, device, deviceIcon, clientId, currentSize, onSpacingChange, onReset } = props;
+
+	const dimensionSize = `${ property }Size`;
+
+	const findSizeBySlug = ( sizes, slug ) => sizes.find( ( size ) => slug === size.slug );
 
 	const onChangeSpacingSize = ( event ) => {
-		const theSize = sizesTable.find( ( size ) => event.target.value === size.slug );
+		const theSize = findSizeBySlug( sizesTable, event.target.value );
 
 		if ( ! theSize ) {
 			return;
 		}
 
-		if ( attributes[ `${ property }Size` ] === theSize.slug ) {
+		if ( currentSize === theSize.slug ) {
 			resetSpacing();
 		} else {
-			setAttributes( {
-				[ `${ property }Size` ]: theSize.slug,
-				[ `${ property }Top` ]: theSize.size,
-				[ `${ property }Right` ]: theSize.size,
-				[ `${ property }Left` ]: theSize.size,
-				[ `${ property }Bottom` ]: theSize.size,
-			} );
+			onSpacingChange( dimensionSize, theSize.slug );
 		}
 	};
 
-	const resetSpacing = () => {
-		setAttributes( {
-			[ `${ property }Size` ]: '',
-			[ `${ property }Top` ]: 0,
-			[ `${ property }Right` ]: 0,
-			[ `${ property }Left` ]: 0,
-			[ `${ property }Bottom` ]: 0,
-		} );
-	};
+	const resetSpacing = () => onReset( dimensionSize );
 
 	return (
 		<BaseControl
@@ -56,10 +46,10 @@ function DimensionControl( props ) {
 			<div className="block-editor-dimension-control__header">
 				<BaseControl.VisualLabel className="block-editor-dimension-control__header-label">
 					<Icon
-						icon="desktop"
-						label="Desktop"
+						icon={ deviceIcon || device }
+						label={ device }
 					/>
-					{ sprintf( __( '%s on all devices' ), title ) }
+					{ sprintf( __( '%s (%s devices)' ), title, device ) }
 				</BaseControl.VisualLabel>
 
 				<IconButton
@@ -73,7 +63,8 @@ function DimensionControl( props ) {
 
 			<DimensionButtons
 				{ ...props }
-				device="desktop"
+				device={ device }
+				currentSize={ currentSize }
 				onChangeSpacingSize={ onChangeSpacingSize }
 			/>
 
diff --git a/packages/block-editor/src/components/dimension-control/style.scss b/packages/block-editor/src/components/dimension-control/style.scss
index e6cad6aad34731..e3a78e2e0b90b8 100644
--- a/packages/block-editor/src/components/dimension-control/style.scss
+++ b/packages/block-editor/src/components/dimension-control/style.scss
@@ -1,12 +1,22 @@
-.block-editor-dimension-control {
-	margin-bottom: $block-padding;
+.block-editor-responsive-controls {
+	margin-bottom: $block-padding*2;
 	border-bottom: 1px solid $light-gray-600;
-	padding-bottom: $block-padding/2;
+	padding-bottom: $block-padding;
 
 	&:last-child {
 		padding-bottom: 0;
 		border-bottom: 0;
 	}
+}
+
+.block-editor-responsive-controls__label {
+	font-weight: 600;
+	margin-bottom: 0.6em;
+	margin-left: -1px;
+}
+
+.block-editor-dimension-control {
+
 
 	.components-base-control__label {
 		margin-bottom: 0;
diff --git a/packages/block-library/src/group/attributes.js b/packages/block-library/src/group/attributes.js
index a66aed482c4ad6..3addd2978744c2 100644
--- a/packages/block-library/src/group/attributes.js
+++ b/packages/block-library/src/group/attributes.js
@@ -3,6 +3,14 @@
  * @type {Object}
  */
 const DimensionsAttributes = {
+	responsivePadding: {
+		type: 'boolean',
+		default: false,
+	},
+	responsiveMargin: {
+		type: 'boolean',
+		default: false,
+	},
 	paddingUnit: {
 		type: 'string',
 		default: 'px',
@@ -10,21 +18,11 @@ const DimensionsAttributes = {
 	paddingSize: {
 		type: 'string',
 	},
-	paddingTop: {
-		type: 'number',
-		default: 0,
-	},
-	paddingRight: {
-		type: 'number',
-		default: 0,
-	},
-	paddingBottom: {
-		type: 'number',
-		default: 0,
+	paddingSizeMobile: {
+		type: 'string',
 	},
-	paddingLeft: {
-		type: 'number',
-		default: 0,
+	paddingSizeTablet: {
+		type: 'string',
 	},
 	marginUnit: {
 		type: 'string',
@@ -33,21 +31,11 @@ const DimensionsAttributes = {
 	marginSize: {
 		type: 'string',
 	},
-	marginTop: {
-		type: 'number',
-		default: 0,
-	},
-	marginRight: {
-		type: 'number',
-		default: 0,
-	},
-	marginBottom: {
-		type: 'number',
-		default: 0,
+	marginSizeTablet: {
+		type: 'string',
 	},
-	marginLeft: {
-		type: 'number',
-		default: 0,
+	marginSizeMobile: {
+		type: 'string',
 	},
 };
 
diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss
index f595aef062344a..23c007600e410f 100644
--- a/packages/block-library/src/group/theme.scss
+++ b/packages/block-library/src/group/theme.scss
@@ -7,43 +7,180 @@
 		margin-bottom: 0;
 	}
 
-	&.padding-none {
-		padding: 0;
-	}
+	&:not(.has-responsive-padding) {
 
-	&.padding-small {
-		padding: $block-padding;
-	}
+		&.padding-none {
+			padding: 0;
+		}
 
-	&.padding-medium {
-		padding: $block-padding*2;
-	}
+		&.padding-small {
+			padding: $block-padding;
+		}
 
-	&.padding-large {
-		padding: $block-padding*3;
-	}
+		&.padding-medium {
+			padding: $block-padding*2;
+		}
 
-	&.padding-xlarge {
-		padding: $block-padding*4;
-	}
+		&.padding-large {
+			padding: $block-padding*3;
+		}
 
-	&.margin-none {
-		margin: 0;
+		&.padding-xlarge {
+			padding: $block-padding*4;
+		}
 	}
 
-	&.margin-small {
-		margin: $block-padding;
+	&:not(.has-responsive-margin) {
+		&.margin-none {
+			margin: 0;
+		}
+
+		&.margin-small {
+			margin: $block-padding;
+		}
+
+		&.margin-medium {
+			margin: $block-padding*2;
+		}
+
+		&.margin-large {
+			margin: $block-padding*3;
+		}
+
+		&.margin-xlarge {
+			margin: $block-padding*4;
+		}
 	}
+}
 
-	&.margin-medium {
-		margin: $block-padding*2;
+@include break-mobile() {
+	.wp-block-group {
+		&.padding-mobile-none {
+			padding: 0;
+		}
+
+		&.padding-mobile-small {
+			padding: $block-padding;
+		}
+
+		&.padding-mobile-medium {
+			padding: $block-padding*2;
+		}
+
+		&.padding-mobile-large {
+			padding: $block-padding*3;
+		}
+
+		&.padding-mobile-xlarge {
+			padding: $block-padding*4;
+		}
+
+		&.margin-mobile-none {
+			margin: 0;
+		}
+
+		&.margin-mobile-small {
+			margin: $block-padding;
+		}
+
+		&.margin-mobile-medium {
+			margin: $block-padding*2;
+		}
+
+		&.margin-mobile-large {
+			margin: $block-padding*3;
+		}
+
+		&.margin-mobile-xlarge {
+			margin: $block-padding*4;
+		}
 	}
+}
 
-	&.margin-large {
-		margin: $block-padding*3;
+@include break-medium() {
+	.wp-block-group {
+		&.padding-tablet-none {
+			padding: 0;
+		}
+
+		&.padding-tablet-small {
+			padding: $block-padding;
+		}
+
+		&.padding-tablet-medium {
+			padding: $block-padding*2;
+		}
+
+		&.padding-tablet-large {
+			padding: $block-padding*3;
+		}
+
+		&.padding-tablet-xlarge {
+			padding: $block-padding*4;
+		}
+
+		&.margin-tablet-none {
+			margin: 0;
+		}
+
+		&.margin-tablet-small {
+			margin: $block-padding;
+		}
+
+		&.margin-tablet-medium {
+			margin: $block-padding*2;
+		}
+
+		&.margin-tablet-large {
+			margin: $block-padding*3;
+		}
+
+		&.margin-tablet-xlarge {
+			margin: $block-padding*4;
+		}
 	}
+}
+
+@include break-large() {
+	.wp-block-group {
+		&.padding-none {
+			padding: 0;
+		}
+
+		&.padding-small {
+			padding: $block-padding;
+		}
+
+		&.padding-medium {
+			padding: $block-padding*2;
+		}
+
+		&.padding-large {
+			padding: $block-padding*3;
+		}
+
+		&.padding-xlarge {
+			padding: $block-padding*4;
+		}
+
+		&.margin-none {
+			margin: 0;
+		}
+
+		&.margin-small {
+			margin: $block-padding;
+		}
+
+		&.margin-medium {
+			margin: $block-padding*2;
+		}
+
+		&.margin-large {
+			margin: $block-padding*3;
+		}
 
-	&.margin-xlarge {
-		margin: $block-padding*4;
+		&.margin-xlarge {
+			margin: $block-padding*4;
+		}
 	}
 }

From d59d196700981fb5811a225d00992d437b82ba0b Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 25 Jul 2019 11:15:50 +0100
Subject: [PATCH 10/43] Move Group Inspector to dedicated component

---
 packages/block-library/src/group/inspector.js | 232 ++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 packages/block-library/src/group/inspector.js

diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
new file mode 100644
index 00000000000000..160b76a9fbaeec
--- /dev/null
+++ b/packages/block-library/src/group/inspector.js
@@ -0,0 +1,232 @@
+/**
+ * External dependencies
+ */
+import { partialRight, startCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	PanelColorSettings,
+	DimensionControl,
+} from '@wordpress/block-editor';
+
+import { __ } from '@wordpress/i18n';
+
+import {
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
+
+import {
+	Fragment,
+} from '@wordpress/element';
+
+export default function Inspector( props ) {
+	const {
+		clientId,
+		setBackgroundColor,
+		backgroundColor,
+		attributes,
+		setAttributes,
+	} = props;
+
+	/**
+	 * Resets a single spacing attribute for a given dimension
+	 * (and optionally a given device)
+	 * @param  {string} dimension the dimension property (eg: `padding`)
+	 * @param  {string} device    the device which this dimension applies to (eg: `mobile`, `tablet`)
+	 * @return {void}
+	 */
+	const resetSpacingDimension = ( dimension, device = '' ) => {
+		setAttributes( {
+			[ `${ dimension }${ device }` ]: '',
+		} );
+	};
+
+	/**
+	 * Resets all the responsive attributes for a given dimension
+	 * @param  {string} dimension the dimension property (eg: `padding`)
+	 * @return {void}
+	 */
+	const resetResponsiveSpacingForDimension = ( dimension ) => {
+		dimension = dimension.toLowerCase();
+
+		setAttributes( {
+			[ `${ dimension }SizeMobile` ]: '',
+			[ `${ dimension }SizeTablet` ]: '',
+		} );
+	};
+
+	/**
+	 * Updates the spacing attribute for a given dimension
+	 * (and optionally a given device)
+	 * @param  {string} dimension the dimension property (eg: `padding`)
+	 * @param  {string} size      a slug representing a dimension size (eg: `medium`)
+	 * @param  {string} device    the device which this dimension applies to (eg: `mobile`, `tablet`)
+	 * @return {void}
+	 */
+	const updateSpacing = ( dimension, size, device = '' ) => {
+		setAttributes( {
+			[ `${ dimension }${ device }` ]: size,
+		} );
+	};
+
+	/**
+	 * Toggles the responsive spacing UI for a given dimension
+	 * and clears any responsive attribute
+	 * @param  {string} dimension the dimension property (eg: `padding`)
+	 * @return {void}
+	 */
+	const onToggleResponsiveSpacing = ( dimension ) => {
+		dimension = startCase( dimension );
+
+		const attr = `responsive${ dimension }`;
+		const responsiveDimensionState = ! attributes[ attr ];
+
+		if ( ! responsiveDimensionState ) {
+			resetResponsiveSpacingForDimension( dimension );
+		}
+		setAttributes( {
+			[ attr ]: responsiveDimensionState,
+		} );
+	};
+
+	return (
+		<InspectorControls>
+			<PanelColorSettings
+				title={ __( 'Color Settings' ) }
+				colorSettings={ [
+					{
+						value: backgroundColor.color,
+						onChange: setBackgroundColor,
+						label: __( 'Background Color' ),
+					},
+				] }
+			/>
+
+			<PanelBody title={ __( 'Spacing' ) }>
+
+				<fieldset className="block-editor-responsive-controls">
+					<legend className="block-editor-responsive-controls__label">{ __( 'Padding' ) } </legend>
+					<ToggleControl
+						label={ __( 'Manually adjust Padding based on screensize?' ) }
+						checked={ attributes.responsivePadding }
+						onChange={ () => onToggleResponsiveSpacing( 'padding' ) }
+					/>
+
+					{ ! attributes.responsivePadding && (
+						<DimensionControl
+							title={ __( 'Padding' ) }
+							property="padding"
+							clientId={ clientId }
+							onReset={ resetSpacingDimension }
+							onSpacingChange={ updateSpacing }
+							currentSize={ attributes.paddingSize }
+							device="all"
+							deviceIcon="desktop"
+						/>
+					) }
+
+					{ attributes.responsivePadding && (
+						<Fragment>
+							<DimensionControl
+								title={ __( 'Padding' ) }
+								property="padding"
+								clientId={ clientId }
+								onReset={ resetSpacingDimension }
+								onSpacingChange={ updateSpacing }
+								currentSize={ attributes.paddingSize }
+								device="desktop"
+							/>
+
+							<DimensionControl
+								title={ __( 'Padding' ) }
+								property="padding"
+								clientId={ clientId }
+								onReset={ partialRight( resetSpacingDimension, 'Tablet' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'Tablet' ) }
+								currentSize={ attributes.paddingSizeTablet }
+								device="tablet"
+								deviceIcon="tablet"
+							/>
+
+							<DimensionControl
+								title={ __( 'Padding' ) }
+								property="padding"
+								clientId={ clientId }
+								onReset={ partialRight( resetSpacingDimension, 'Mobile' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'Mobile' ) }
+								currentSize={ attributes.paddingSizeMobile }
+								device="mobile"
+								deviceIcon="smartphone"
+							/>
+
+						</Fragment>
+					) }
+				</fieldset>
+
+				<fieldset className="block-editor-responsive-controls">
+					<legend className="block-editor-responsive-controls__label">{ __( 'Margin' ) }</legend>
+					<ToggleControl
+						label={ __( 'Manually adjust Margin based on screensize?' ) }
+						checked={ attributes.responsiveMargin }
+						onChange={ () => onToggleResponsiveSpacing( 'margin' ) }
+					/>
+
+					{ ! attributes.responsiveMargin && (
+						<DimensionControl
+							title={ __( 'Margin' ) }
+							property="margin"
+							clientId={ clientId }
+							onReset={ resetSpacingDimension }
+							onSpacingChange={ updateSpacing }
+							currentSize={ attributes.marginSize }
+							device="all"
+							deviceIcon="desktop"
+						/>
+					) }
+
+					{ attributes.responsiveMargin && (
+						<Fragment>
+							<DimensionControl
+								title={ __( 'Margin' ) }
+								property="margin"
+								clientId={ clientId }
+								onReset={ resetSpacingDimension }
+								onSpacingChange={ updateSpacing }
+								currentSize={ attributes.marginSize }
+								device="desktop"
+							/>
+
+							<DimensionControl
+								title={ __( 'Margin' ) }
+								property="margin"
+								clientId={ clientId }
+								onReset={ partialRight( resetSpacingDimension, 'Tablet' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'Tablet' ) }
+								currentSize={ attributes.marginSizeTablet }
+								device="tablet"
+								deviceIcon="tablet"
+							/>
+
+							<DimensionControl
+								title={ __( 'Margin' ) }
+								property="margin"
+								clientId={ clientId }
+								onReset={ partialRight( resetSpacingDimension, 'Mobile' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'Mobile' ) }
+								currentSize={ attributes.marginSizeMobile }
+								device="mobile"
+								deviceIcon="smartphone"
+							/>
+
+						</Fragment>
+					) }
+				</fieldset>
+
+			</PanelBody>
+		</InspectorControls>
+	);
+}

From e63ed1046cd015f0014cfe1c89b7e5a448ff1e94 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 25 Jul 2019 11:43:59 +0100
Subject: [PATCH 11/43] Remove dependence on clientID to make component more
 portable and generic.

---
 packages/block-library/src/group/inspector.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index 160b76a9fbaeec..55070481d036e9 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -120,7 +120,7 @@ export default function Inspector( props ) {
 						<DimensionControl
 							title={ __( 'Padding' ) }
 							property="padding"
-							clientId={ clientId }
+							id={ clientId }
 							onReset={ resetSpacingDimension }
 							onSpacingChange={ updateSpacing }
 							currentSize={ attributes.paddingSize }
@@ -134,7 +134,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Padding' ) }
 								property="padding"
-								clientId={ clientId }
+								id={ clientId }
 								onReset={ resetSpacingDimension }
 								onSpacingChange={ updateSpacing }
 								currentSize={ attributes.paddingSize }
@@ -144,7 +144,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Padding' ) }
 								property="padding"
-								clientId={ clientId }
+								id={ clientId }
 								onReset={ partialRight( resetSpacingDimension, 'Tablet' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'Tablet' ) }
 								currentSize={ attributes.paddingSizeTablet }
@@ -155,7 +155,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Padding' ) }
 								property="padding"
-								clientId={ clientId }
+								id={ clientId }
 								onReset={ partialRight( resetSpacingDimension, 'Mobile' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'Mobile' ) }
 								currentSize={ attributes.paddingSizeMobile }
@@ -179,7 +179,7 @@ export default function Inspector( props ) {
 						<DimensionControl
 							title={ __( 'Margin' ) }
 							property="margin"
-							clientId={ clientId }
+							id={ clientId }
 							onReset={ resetSpacingDimension }
 							onSpacingChange={ updateSpacing }
 							currentSize={ attributes.marginSize }
@@ -193,7 +193,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Margin' ) }
 								property="margin"
-								clientId={ clientId }
+								id={ clientId }
 								onReset={ resetSpacingDimension }
 								onSpacingChange={ updateSpacing }
 								currentSize={ attributes.marginSize }
@@ -203,7 +203,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Margin' ) }
 								property="margin"
-								clientId={ clientId }
+								id={ clientId }
 								onReset={ partialRight( resetSpacingDimension, 'Tablet' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'Tablet' ) }
 								currentSize={ attributes.marginSizeTablet }
@@ -214,7 +214,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Margin' ) }
 								property="margin"
-								clientId={ clientId }
+								id={ clientId }
 								onReset={ partialRight( resetSpacingDimension, 'Mobile' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'Mobile' ) }
 								currentSize={ attributes.marginSizeMobile }

From 4babcb6bf3ccd942c0c188a04b361d50eacf2cfd Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 25 Jul 2019 11:44:26 +0100
Subject: [PATCH 12/43] Adds doc blocks

---
 .../src/components/dimension-control/index.js | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 64ae38de63e0d9..b562b34140b8de 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -15,12 +15,26 @@ import sizesTable from './sizes';
 import DimensionButtons from './buttons';
 
 function DimensionControl( props ) {
-	const { title, property, device, deviceIcon, clientId, currentSize, onSpacingChange, onReset } = props;
+	const { title, property, device, deviceIcon, id, currentSize, onSpacingChange, onReset } = props;
 
 	const dimensionSize = `${ property }Size`;
 
+	/**
+	 * Finds the correct size object from the provided sizes
+	 * table by size slug (eg: `medium`)
+	 * @param  {Array} sizes containing objects for each size definition
+	 * @param  {string} slug a string representation of the size (eg: `medium`)
+	 * @return {Object}       the matching size definition
+	 */
 	const findSizeBySlug = ( sizes, slug ) => sizes.find( ( size ) => slug === size.slug );
 
+	/**
+	 * Determines the size from the size slug (eg: `medium`)
+	 * and decides whether to call the change or reset callback
+	 * handlers
+	 * @param  {Object} event the click event for size buttons
+	 * @return {void}
+	 */
 	const onChangeSpacingSize = ( event ) => {
 		const theSize = findSizeBySlug( sizesTable, event.target.value );
 
@@ -35,11 +49,16 @@ function DimensionControl( props ) {
 		}
 	};
 
+	/**
+	 * Applies the callback to handle resetting
+	 * a dimension spacing values
+	 * @return {void}
+	 */
 	const resetSpacing = () => onReset( dimensionSize );
 
 	return (
 		<BaseControl
-			id={ `block-spacing-${ property }-desktop-${ clientId }` }
+			id={ `block-spacing-${ property }-desktop-${ id }` }
 			help={ sprintf( __( 'Select the %s for this Block' ), property ) }
 			className="block-editor-dimension-control"
 		>

From f26ad45a37ae7d2c596cfce0fa8c952ad2bec54a Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 25 Jul 2019 12:11:45 +0100
Subject: [PATCH 13/43] Moves findSizeBySlug util function into sizes file

---
 .../src/components/dimension-control/index.js       | 13 ++-----------
 .../src/components/dimension-control/sizes.js       |  9 +++++++++
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index b562b34140b8de..e5251d743df14f 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -11,23 +11,14 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import sizesTable from './sizes';
+import sizesTable, { findSizeBySlug } from './sizes';
 import DimensionButtons from './buttons';
 
 function DimensionControl( props ) {
-	const { title, property, device, deviceIcon, id, currentSize, onSpacingChange, onReset } = props;
+	const { title, property, device = 'all', deviceIcon = 'desktop', id, currentSize, onSpacingChange, onReset } = props;
 
 	const dimensionSize = `${ property }Size`;
 
-	/**
-	 * Finds the correct size object from the provided sizes
-	 * table by size slug (eg: `medium`)
-	 * @param  {Array} sizes containing objects for each size definition
-	 * @param  {string} slug a string representation of the size (eg: `medium`)
-	 * @return {Object}       the matching size definition
-	 */
-	const findSizeBySlug = ( sizes, slug ) => sizes.find( ( size ) => slug === size.slug );
-
 	/**
 	 * Determines the size from the size slug (eg: `medium`)
 	 * and decides whether to call the change or reset callback
diff --git a/packages/block-editor/src/components/dimension-control/sizes.js b/packages/block-editor/src/components/dimension-control/sizes.js
index 61b3e5f77488c1..4e194e298db9df 100644
--- a/packages/block-editor/src/components/dimension-control/sizes.js
+++ b/packages/block-editor/src/components/dimension-control/sizes.js
@@ -12,6 +12,15 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Finds the correct size object from the provided sizes
+ * table by size slug (eg: `medium`)
+ * @param  {Array} sizes containing objects for each size definition
+ * @param  {string} slug a string representation of the size (eg: `medium`)
+ * @return {Object}       the matching size definition
+ */
+export const findSizeBySlug = ( sizes, slug ) => sizes.find( ( size ) => slug === size.slug );
+
 export default [
 	{
 		name: __( 'None' ),

From 11b476c200f051c97d15cd6735aee31839991419 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 25 Jul 2019 13:02:00 +0100
Subject: [PATCH 14/43] Adds basics tests

---
 .../components/dimension-control/buttons.js   |  20 ++-
 .../src/components/dimension-control/index.js |   1 +
 .../test/__snapshots__/buttons.test.js.snap   | 110 ++++++++++++++
 .../test/__snapshots__/index.test.js.snap     | 133 +++++++++++++++++
 .../dimension-control/test/buttons.test.js    | 137 ++++++++++++++++++
 .../dimension-control/test/index.test.js      |  78 ++++++++++
 6 files changed, 475 insertions(+), 4 deletions(-)
 create mode 100644 packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
 create mode 100644 packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
 create mode 100644 packages/block-editor/src/components/dimension-control/test/buttons.test.js
 create mode 100644 packages/block-editor/src/components/dimension-control/test/index.test.js

diff --git a/packages/block-editor/src/components/dimension-control/buttons.js b/packages/block-editor/src/components/dimension-control/buttons.js
index f74817d609bcd6..1664bd47d252be 100644
--- a/packages/block-editor/src/components/dimension-control/buttons.js
+++ b/packages/block-editor/src/components/dimension-control/buttons.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isArray } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -16,17 +21,24 @@ import {
 /**
  * Internal dependencies
  */
-import sizesTable from './sizes';
 
-function DimensionButtons( { controlId, currentSize, onChangeSpacingSize } ) {
+function DimensionButtons( { id, sizes, currentSize, onChangeSpacingSize } ) {
+	if ( ! id || ! id.length ) {
+		return null;
+	}
+
+	if ( ! sizes || ! isArray( sizes ) || ! sizes.length ) {
+		return null;
+	}
+
 	return (
 		<Fragment>
 
 			<ButtonGroup
-				id={ controlId }
+				id={ `block-editor-dimension-control-buttons-${ id }` }
 				className="block-editor-dimension-control__buttons"
 			>
-				{ sizesTable.map( function( size ) {
+				{ sizes.map( function( size ) {
 					const visualName = size.name.substring( 0, 1 );
 					const hiddenName = size.name.substring( 1 );
 					const isSelected = currentSize === size.slug;
diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index e5251d743df14f..cdc1e7ba1d5ed3 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -76,6 +76,7 @@ function DimensionControl( props ) {
 				device={ device }
 				currentSize={ currentSize }
 				onChangeSpacingSize={ onChangeSpacingSize }
+				sizes={ sizesTable }
 			/>
 
 		</BaseControl>
diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
new file mode 100644
index 00000000000000..c0d6de2a53e442
--- /dev/null
+++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DimensionButtons renders correctly with defaults 1`] = `
+<Fragment>
+  <ButtonGroup
+    className="block-editor-dimension-control__buttons"
+    id="block-editor-dimension-control-buttons-1"
+  >
+    <Tooltip
+      key="none"
+      text="None"
+    >
+      <ForwardRef(Button)
+        aria-pressed={false}
+        className="block-editor-dimension-control__button"
+        isDefault={true}
+        isPrimary={false}
+        value="none"
+      >
+        N
+        <span
+          className="screen-reader-text"
+        >
+          one
+        </span>
+      </ForwardRef(Button)>
+    </Tooltip>
+    <Tooltip
+      key="small"
+      text="Small"
+    >
+      <ForwardRef(Button)
+        aria-pressed={false}
+        className="block-editor-dimension-control__button"
+        isDefault={true}
+        isPrimary={false}
+        value="small"
+      >
+        S
+        <span
+          className="screen-reader-text"
+        >
+          mall
+        </span>
+      </ForwardRef(Button)>
+    </Tooltip>
+    <Tooltip
+      key="medium"
+      text="Medium"
+    >
+      <ForwardRef(Button)
+        aria-pressed={false}
+        className="block-editor-dimension-control__button"
+        isDefault={true}
+        isPrimary={false}
+        value="medium"
+      >
+        M
+        <span
+          className="screen-reader-text"
+        >
+          edium
+        </span>
+      </ForwardRef(Button)>
+    </Tooltip>
+    <Tooltip
+      key="large"
+      text="Large"
+    >
+      <ForwardRef(Button)
+        aria-pressed={false}
+        className="block-editor-dimension-control__button"
+        isDefault={true}
+        isPrimary={false}
+        value="large"
+      >
+        L
+        <span
+          className="screen-reader-text"
+        >
+          arge
+        </span>
+      </ForwardRef(Button)>
+    </Tooltip>
+    <Tooltip
+      key="xlarge"
+      text="XLarge"
+    >
+      <ForwardRef(Button)
+        aria-pressed={false}
+        className="block-editor-dimension-control__button"
+        isDefault={true}
+        isPrimary={false}
+        value="xlarge"
+      >
+        <abbr
+          title="Extra Large"
+        >
+          X
+          <span
+            className="screen-reader-text"
+          >
+            Large
+          </span>
+        </abbr>
+      </ForwardRef(Button)>
+    </Tooltip>
+  </ButtonGroup>
+</Fragment>
+`;
diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
new file mode 100644
index 00000000000000..28c9948d78fecf
--- /dev/null
+++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DimensionControl rendering correctly for different properties renders correctly for "margin" property 1`] = `
+<BaseControl
+  className="block-editor-dimension-control"
+  help="Select the margin for this Block"
+  id="block-spacing-margin-desktop-2"
+>
+  <div
+    className="block-editor-dimension-control__header"
+  >
+    <Component
+      className="block-editor-dimension-control__header-label"
+    >
+      <Icon
+        icon="desktop"
+        label="all"
+      />
+      Margin (all devices)
+    </Component>
+    <ForwardRef(IconButton)
+      icon="controls-repeat"
+      isDefault={true}
+      isSmall={true}
+      label="Reset Margin"
+      onClick={[Function]}
+    />
+  </div>
+  <DimensionButtons
+    device="all"
+    id="2"
+    onChangeSpacingSize={[Function]}
+    property="margin"
+    sizes={
+      Array [
+        Object {
+          "name": "None",
+          "size": 0,
+          "slug": "none",
+        },
+        Object {
+          "name": "Small",
+          "size": 14,
+          "slug": "small",
+        },
+        Object {
+          "name": "Medium",
+          "size": 24,
+          "slug": "medium",
+        },
+        Object {
+          "name": "Large",
+          "size": 34,
+          "slug": "large",
+        },
+        Object {
+          "abbr": "Extra Large",
+          "name": "XLarge",
+          "size": 60,
+          "slug": "xlarge",
+        },
+      ]
+    }
+    title="Margin"
+  />
+</BaseControl>
+`;
+
+exports[`DimensionControl rendering correctly for different properties renders correctly for "padding" property 1`] = `
+<BaseControl
+  className="block-editor-dimension-control"
+  help="Select the padding for this Block"
+  id="block-spacing-padding-desktop-1"
+>
+  <div
+    className="block-editor-dimension-control__header"
+  >
+    <Component
+      className="block-editor-dimension-control__header-label"
+    >
+      <Icon
+        icon="desktop"
+        label="all"
+      />
+      Padding (all devices)
+    </Component>
+    <ForwardRef(IconButton)
+      icon="controls-repeat"
+      isDefault={true}
+      isSmall={true}
+      label="Reset Padding"
+      onClick={[Function]}
+    />
+  </div>
+  <DimensionButtons
+    device="all"
+    id="1"
+    onChangeSpacingSize={[Function]}
+    property="padding"
+    sizes={
+      Array [
+        Object {
+          "name": "None",
+          "size": 0,
+          "slug": "none",
+        },
+        Object {
+          "name": "Small",
+          "size": 14,
+          "slug": "small",
+        },
+        Object {
+          "name": "Medium",
+          "size": 24,
+          "slug": "medium",
+        },
+        Object {
+          "name": "Large",
+          "size": 34,
+          "slug": "large",
+        },
+        Object {
+          "abbr": "Extra Large",
+          "name": "XLarge",
+          "size": 60,
+          "slug": "xlarge",
+        },
+      ]
+    }
+    title="Padding"
+  />
+</BaseControl>
+`;
diff --git a/packages/block-editor/src/components/dimension-control/test/buttons.test.js b/packages/block-editor/src/components/dimension-control/test/buttons.test.js
new file mode 100644
index 00000000000000..c8bbe1a5b3c5bf
--- /dev/null
+++ b/packages/block-editor/src/components/dimension-control/test/buttons.test.js
@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { shallow, mount } from 'enzyme';
+import { uniqueId } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import DimensionButtons from '../buttons';
+
+describe( 'DimensionButtons', () => {
+	const onChangeHandler = jest.fn();
+
+	const sizesTable = [
+		{
+			name: 'None',
+			size: 0,
+			slug: 'none',
+		},
+		{
+			name: 'Small',
+			size: 14,
+			slug: 'small',
+		},
+		{
+			name: 'Medium',
+			size: 24,
+			slug: 'medium',
+		},
+		{
+			name: 'Large',
+			size: 34,
+			slug: 'large',
+		}, {
+			name: 'XLarge',
+			abbr: 'Extra Large',
+			size: 60,
+			slug: 'xlarge',
+		},
+	];
+
+	afterEach( () => {
+		onChangeHandler.mockClear();
+	} );
+
+	it( 'renders correctly with defaults', () => {
+		const wrapper = shallow(
+			<DimensionButtons
+				id={ uniqueId() }
+				sizes={ sizesTable }
+			/>
+		);
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	describe( 'required props', () => {
+		it( 'does not render without a "id" prop', () => {
+			const wrapper = shallow(
+				<DimensionButtons
+					sizes={ sizesTable } // provide the other required prop
+				/>
+			);
+
+			expect( wrapper.isEmptyRender() ).toBe( true );
+		} );
+
+		it( 'does not render without a "sizes" prop', () => {
+			const wrapper = shallow(
+				<DimensionButtons
+					id={ uniqueId() } // provide the other required prop
+				/>
+			);
+
+			expect( wrapper.isEmptyRender() ).toBe( true );
+		} );
+	} );
+
+	describe( 'selected states', () => {
+		it( 'renders a selected button state for the matching "currentSize" prop', () => {
+			const size = 'medium';
+
+			const wrapper = mount(
+				<DimensionButtons
+					id={ uniqueId() }
+					sizes={ sizesTable }
+					currentSize={ size }
+				/>
+			);
+
+			const selectedButton = wrapper.find( 'button' ).filter( '.is-primary' );
+
+			expect( selectedButton ).toHaveLength( 1 );
+			expect( selectedButton.prop( 'value' ) ).toBe( size );
+			expect( selectedButton.prop( 'aria-pressed' ) ).toBe( true );
+		} );
+
+		it( 'does not render a selected button if no matching "currentSize" prop is provided', () => {
+			const wrapper = mount(
+				<DimensionButtons
+					id={ uniqueId() }
+					sizes={ sizesTable }
+					currentSize="invalidsizehere"
+				/>
+			);
+
+			const unpressedButtons = wrapper.find( 'button' ).filterWhere( ( button ) => {
+				return false === button.prop( 'aria-pressed' );
+			} );
+
+			const pressedButtons = wrapper.find( 'button' ).filterWhere( ( button ) => {
+				return true === button.prop( 'aria-pressed' );
+			} );
+
+			expect( wrapper.find( 'button' ).filter( '.is-primary' ) ).toHaveLength( 0 );
+			expect( pressedButtons ).toHaveLength( 0 );
+			expect( unpressedButtons ).toHaveLength( sizesTable.length );
+		} );
+	} );
+
+	describe( 'callbacks', () => {
+		it( 'triggers onChangeSpacingSize callback on button click', () => {
+			const wrapper = mount(
+				<DimensionButtons
+					id={ uniqueId() }
+					sizes={ sizesTable }
+					currentSize="medium"
+					onChangeSpacingSize={ onChangeHandler }
+				/>
+			);
+
+			wrapper.find( 'button[value="small"]' ).simulate( 'click' );
+
+			expect( onChangeHandler ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/dimension-control/test/index.test.js b/packages/block-editor/src/components/dimension-control/test/index.test.js
new file mode 100644
index 00000000000000..245a48fdd88712
--- /dev/null
+++ b/packages/block-editor/src/components/dimension-control/test/index.test.js
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { shallow, mount } from 'enzyme';
+import { uniqueId } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import DimensionControl from '../';
+
+describe( 'DimensionControl', () => {
+	const onChangeHandler = jest.fn();
+	const onResetHandler = jest.fn();
+
+	afterEach( () => {
+		onChangeHandler.mockClear();
+		onResetHandler.mockClear();
+	} );
+
+	describe( 'rendering correctly for different properties', () => {
+		it( 'renders correctly for "padding" property', () => {
+			const wrapper = shallow(
+				<DimensionControl
+					id={ uniqueId() }
+					title={ 'Padding' }
+					property={ 'padding' }
+				/>
+			);
+			expect( wrapper ).toMatchSnapshot();
+		} );
+
+		it( 'renders correctly for "margin" property', () => {
+			const wrapper = shallow(
+				<DimensionControl
+					id={ uniqueId() }
+					title={ 'Margin' }
+					property={ 'margin' }
+				/>
+			);
+			expect( wrapper ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'callbacks', () => {
+		it( 'should call onSpacingChange handler with correct args on size button click', () => {
+			const wrapper = mount(
+				<DimensionControl
+					id={ uniqueId() }
+					title={ 'Padding' }
+					property={ 'padding' }
+					onSpacingChange={ onChangeHandler }
+				/>
+			);
+
+			wrapper.find( 'button[value="small"]' ).simulate( 'click' );
+
+			expect( onChangeHandler ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeHandler ).toHaveBeenCalledWith( 'paddingSize', 'small' );
+		} );
+
+		it( 'should call onReset handler with correct args on reset button click', () => {
+			const wrapper = mount(
+				<DimensionControl
+					id={ uniqueId() }
+					title={ 'Padding' }
+					property={ 'padding' }
+					onReset={ onResetHandler }
+				/>
+			);
+
+			wrapper.find( 'button[aria-label="Reset Padding"]' ).simulate( 'click' );
+
+			expect( onResetHandler ).toHaveBeenCalledTimes( 1 );
+			expect( onResetHandler ).toHaveBeenCalledWith( 'paddingSize' );
+		} );
+	} );
+} );

From 7d9208345e5055076277f5033bc122dc8b224224 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 25 Jul 2019 13:27:01 +0100
Subject: [PATCH 15/43] Adds component docs

---
 .../components/dimension-control/README.md    | 127 ++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 packages/block-editor/src/components/dimension-control/README.md

diff --git a/packages/block-editor/src/components/dimension-control/README.md b/packages/block-editor/src/components/dimension-control/README.md
new file mode 100644
index 00000000000000..f7cbf311d8743c
--- /dev/null
+++ b/packages/block-editor/src/components/dimension-control/README.md
@@ -0,0 +1,127 @@
+DimensionControl
+=============================
+
+`DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions. It is intended for use within the editor `InspectorControls` sidebar.
+
+## Usage
+
+In a block's `edit` implementation, render a `<DimensionControl />` component. 
+
+
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import {
+	DimensionControl,
+} from '@wordpress/block-editor';
+
+registerBlockType( 'my-plugin/my-block', {
+	// ...
+
+	attributes: {
+		// other attributes here
+		// ...
+
+		paddingSize: {
+			type: 'string',
+		},
+	},
+
+	edit( { attributes, setAttributes, clientId } ) {
+		
+		const { paddingSize } = attributes;
+		
+
+		const updateSpacing = ( dimension, size, device = '' ) => {
+			setAttributes( {
+				[ `${ dimension }${ device }` ]: size,
+			} );
+		};
+
+		const resetSpacingDimension = ( dimension, device = '' ) => {
+			setAttributes( {
+				[ `${ dimension }${ device }` ]: '',
+			} );
+		};
+
+		return (
+			<DimensionControl
+				title={ __( 'Padding' ) }
+				property="padding"
+				id={ clientId }
+				onReset={ resetSpacingDimension }
+				onSpacingChange={ updateSpacing }
+				currentSize={ paddingSize }
+			/>
+		);
+	}
+} );
+```
+
+_Note:_ by default if you do not provide an initial `currentSize` prop for the current dimension value, then no value will be selected (ie: there is no default dimension set). 
+
+## Props
+
+### `id`
+* **Type:** `Int|String`
+* **Default:** `undefined`
+* **Required:** Yes
+
+A unique ID used to identify the control.
+
+### `title`
+* **Type:** `String`
+* **Default:** `undefined`
+* **Required:** Yes
+
+The human readable title for the control. 
+
+### `property`
+* **Type:** `String`
+* **Default:** `undefined`
+* **Required:** Yes
+
+The spacing/dimension property which this UI is to control. Common examples are `padding` and `margin`.
+
+### `currentSize`
+* **Type:** `String`
+* **Default:** `''`
+* **Required:** No
+
+The current value of the dimension the UI controls. If provided the UI with automatically highlight the control representing the current value.
+
+### `device`
+* **Type:** `String`
+* **Default:** `all`
+* **Required:** No
+
+The device type to which this spacing applies. By default this is set to `all`. Useful when rendering multiple `DimensionControl` components for each device type supported by your Block.
+
+### `deviceIcon`
+* **Type:** `String`
+* **Default:** `desktop`
+* **Required:** No
+
+A dashicon for the device type (see `device` above).
+
+### `onSpacingChange`
+* **Type:** `Function`
+* **Default:** `undefined`
+* **Required:** Yes
+* **Arguments:**:
+  - `dimensionSize` - the Block attribute to be updated
+  - `size` - a string representing the selected size (eg: `medium`)
+
+A callback which is triggered when a spacing size value changes (is selected/clicked).
+
+
+### `onReset`
+* **Type:** `Function`
+* **Default:** `undefined`
+* **Required:** Yes
+* **Arguments:**:
+  - `dimensionSize` - the Block attribute to be updated
+
+A callback which is triggered when the "reset" UI is activated.
+
+

From 45f7aa1bb0a9d048c2cabd26f096ccb472f9c0e5 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 25 Jul 2019 13:46:57 +0100
Subject: [PATCH 16/43] Update to decouple DimensionControl component from
 knowledge of Block attribute schema

Previously the `DimensionControl` component manually constructed the attribute to be updated via string concatenation. This was brittle and prone to error and also couple the component to use in a Block context.

Updated to utilise partial application to apply the dimension attribute argument in advance for each component. This allows us to simply the API of the component.
---
 .../components/dimension-control/README.md    |  2 --
 .../src/components/dimension-control/index.js |  6 ++--
 .../dimension-control/test/index.test.js      |  3 +-
 packages/block-library/src/group/inspector.js | 36 +++++++++----------
 4 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/README.md b/packages/block-editor/src/components/dimension-control/README.md
index f7cbf311d8743c..113aaa6e8d37f9 100644
--- a/packages/block-editor/src/components/dimension-control/README.md
+++ b/packages/block-editor/src/components/dimension-control/README.md
@@ -109,7 +109,6 @@ A dashicon for the device type (see `device` above).
 * **Default:** `undefined`
 * **Required:** Yes
 * **Arguments:**:
-  - `dimensionSize` - the Block attribute to be updated
   - `size` - a string representing the selected size (eg: `medium`)
 
 A callback which is triggered when a spacing size value changes (is selected/clicked).
@@ -120,7 +119,6 @@ A callback which is triggered when a spacing size value changes (is selected/cli
 * **Default:** `undefined`
 * **Required:** Yes
 * **Arguments:**:
-  - `dimensionSize` - the Block attribute to be updated
 
 A callback which is triggered when the "reset" UI is activated.
 
diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index cdc1e7ba1d5ed3..6d8998e1b3e720 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -17,8 +17,6 @@ import DimensionButtons from './buttons';
 function DimensionControl( props ) {
 	const { title, property, device = 'all', deviceIcon = 'desktop', id, currentSize, onSpacingChange, onReset } = props;
 
-	const dimensionSize = `${ property }Size`;
-
 	/**
 	 * Determines the size from the size slug (eg: `medium`)
 	 * and decides whether to call the change or reset callback
@@ -36,7 +34,7 @@ function DimensionControl( props ) {
 		if ( currentSize === theSize.slug ) {
 			resetSpacing();
 		} else {
-			onSpacingChange( dimensionSize, theSize.slug );
+			onSpacingChange( theSize.slug );
 		}
 	};
 
@@ -45,7 +43,7 @@ function DimensionControl( props ) {
 	 * a dimension spacing values
 	 * @return {void}
 	 */
-	const resetSpacing = () => onReset( dimensionSize );
+	const resetSpacing = () => onReset();
 
 	return (
 		<BaseControl
diff --git a/packages/block-editor/src/components/dimension-control/test/index.test.js b/packages/block-editor/src/components/dimension-control/test/index.test.js
index 245a48fdd88712..c20258191107e7 100644
--- a/packages/block-editor/src/components/dimension-control/test/index.test.js
+++ b/packages/block-editor/src/components/dimension-control/test/index.test.js
@@ -56,7 +56,7 @@ describe( 'DimensionControl', () => {
 			wrapper.find( 'button[value="small"]' ).simulate( 'click' );
 
 			expect( onChangeHandler ).toHaveBeenCalledTimes( 1 );
-			expect( onChangeHandler ).toHaveBeenCalledWith( 'paddingSize', 'small' );
+			expect( onChangeHandler ).toHaveBeenCalledWith( 'small' );
 		} );
 
 		it( 'should call onReset handler with correct args on reset button click', () => {
@@ -72,7 +72,6 @@ describe( 'DimensionControl', () => {
 			wrapper.find( 'button[aria-label="Reset Padding"]' ).simulate( 'click' );
 
 			expect( onResetHandler ).toHaveBeenCalledTimes( 1 );
-			expect( onResetHandler ).toHaveBeenCalledWith( 'paddingSize' );
 		} );
 	} );
 } );
diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index 55070481d036e9..a48db3457fd99e 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -62,12 +62,12 @@ export default function Inspector( props ) {
 	/**
 	 * Updates the spacing attribute for a given dimension
 	 * (and optionally a given device)
-	 * @param  {string} dimension the dimension property (eg: `padding`)
 	 * @param  {string} size      a slug representing a dimension size (eg: `medium`)
+	 * @param  {string} dimension the dimension property (eg: `padding`)
 	 * @param  {string} device    the device which this dimension applies to (eg: `mobile`, `tablet`)
 	 * @return {void}
 	 */
-	const updateSpacing = ( dimension, size, device = '' ) => {
+	const updateSpacing = ( size, dimension, device = '' ) => {
 		setAttributes( {
 			[ `${ dimension }${ device }` ]: size,
 		} );
@@ -121,8 +121,8 @@ export default function Inspector( props ) {
 							title={ __( 'Padding' ) }
 							property="padding"
 							id={ clientId }
-							onReset={ resetSpacingDimension }
-							onSpacingChange={ updateSpacing }
+							onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
+							onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
 							currentSize={ attributes.paddingSize }
 							device="all"
 							deviceIcon="desktop"
@@ -135,8 +135,8 @@ export default function Inspector( props ) {
 								title={ __( 'Padding' ) }
 								property="padding"
 								id={ clientId }
-								onReset={ resetSpacingDimension }
-								onSpacingChange={ updateSpacing }
+								onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
 								currentSize={ attributes.paddingSize }
 								device="desktop"
 							/>
@@ -145,8 +145,8 @@ export default function Inspector( props ) {
 								title={ __( 'Padding' ) }
 								property="padding"
 								id={ clientId }
-								onReset={ partialRight( resetSpacingDimension, 'Tablet' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'Tablet' ) }
+								onReset={ partialRight( resetSpacingDimension, 'paddingSize', 'Tablet' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'paddingSize', 'Tablet' ) }
 								currentSize={ attributes.paddingSizeTablet }
 								device="tablet"
 								deviceIcon="tablet"
@@ -156,8 +156,8 @@ export default function Inspector( props ) {
 								title={ __( 'Padding' ) }
 								property="padding"
 								id={ clientId }
-								onReset={ partialRight( resetSpacingDimension, 'Mobile' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'Mobile' ) }
+								onReset={ partialRight( resetSpacingDimension, 'paddingSize', 'Mobile' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'paddingSize', 'Mobile' ) }
 								currentSize={ attributes.paddingSizeMobile }
 								device="mobile"
 								deviceIcon="smartphone"
@@ -180,8 +180,8 @@ export default function Inspector( props ) {
 							title={ __( 'Margin' ) }
 							property="margin"
 							id={ clientId }
-							onReset={ resetSpacingDimension }
-							onSpacingChange={ updateSpacing }
+							onReset={ partialRight( resetSpacingDimension, 'marginSize' ) }
+							onSpacingChange={ partialRight( updateSpacing, 'marginSize' ) }
 							currentSize={ attributes.marginSize }
 							device="all"
 							deviceIcon="desktop"
@@ -194,8 +194,8 @@ export default function Inspector( props ) {
 								title={ __( 'Margin' ) }
 								property="margin"
 								id={ clientId }
-								onReset={ resetSpacingDimension }
-								onSpacingChange={ updateSpacing }
+								onReset={ partialRight( resetSpacingDimension, 'marginSize' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'marginSize' ) }
 								currentSize={ attributes.marginSize }
 								device="desktop"
 							/>
@@ -204,8 +204,8 @@ export default function Inspector( props ) {
 								title={ __( 'Margin' ) }
 								property="margin"
 								id={ clientId }
-								onReset={ partialRight( resetSpacingDimension, 'Tablet' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'Tablet' ) }
+								onReset={ partialRight( resetSpacingDimension, 'marginSize', 'Tablet' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'marginSize', 'Tablet' ) }
 								currentSize={ attributes.marginSizeTablet }
 								device="tablet"
 								deviceIcon="tablet"
@@ -215,8 +215,8 @@ export default function Inspector( props ) {
 								title={ __( 'Margin' ) }
 								property="margin"
 								id={ clientId }
-								onReset={ partialRight( resetSpacingDimension, 'Mobile' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'Mobile' ) }
+								onReset={ partialRight( resetSpacingDimension, 'marginSize', 'Mobile' ) }
+								onSpacingChange={ partialRight( updateSpacing, 'marginSize', 'Mobile' ) }
 								currentSize={ attributes.marginSizeMobile }
 								device="mobile"
 								deviceIcon="smartphone"

From d1b3aa87397cd01e9dd566522621568a04bb9e6c Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 26 Jul 2019 10:24:27 +0100
Subject: [PATCH 17/43] Utilise withInstanceId HOC to remove need for id prop

Also updates tests to account for this.
---
 .../src/components/dimension-control/README.md    | 13 ++++---------
 .../src/components/dimension-control/buttons.js   | 14 ++++----------
 .../src/components/dimension-control/index.js     | 11 +++++++----
 .../test/__snapshots__/index.test.js.snap         |  6 ++++--
 .../dimension-control/test/buttons.test.js        |  4 ++--
 .../dimension-control/test/index.test.js          | 10 +++++-----
 packages/block-library/src/group/inspector.js     | 15 ++++++---------
 7 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/README.md b/packages/block-editor/src/components/dimension-control/README.md
index 113aaa6e8d37f9..bdedb089ba3959 100644
--- a/packages/block-editor/src/components/dimension-control/README.md
+++ b/packages/block-editor/src/components/dimension-control/README.md
@@ -49,8 +49,8 @@ registerBlockType( 'my-plugin/my-block', {
 				title={ __( 'Padding' ) }
 				property="padding"
 				id={ clientId }
-				onReset={ resetSpacingDimension }
-				onSpacingChange={ updateSpacing }
+				onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
+				onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
 				currentSize={ paddingSize }
 			/>
 		);
@@ -58,17 +58,12 @@ registerBlockType( 'my-plugin/my-block', {
 } );
 ```
 
+_Note:_ it is recommend to partially apply the value of the Block attribute to be updated (eg: `paddingSize`, `marginSize`...etc) to your callback functions. This avoids the need to unecessarily couple the component to the Block attribute schema.
+
 _Note:_ by default if you do not provide an initial `currentSize` prop for the current dimension value, then no value will be selected (ie: there is no default dimension set). 
 
 ## Props
 
-### `id`
-* **Type:** `Int|String`
-* **Default:** `undefined`
-* **Required:** Yes
-
-A unique ID used to identify the control.
-
 ### `title`
 * **Type:** `String`
 * **Default:** `undefined`
diff --git a/packages/block-editor/src/components/dimension-control/buttons.js b/packages/block-editor/src/components/dimension-control/buttons.js
index 1664bd47d252be..188e47b314ea52 100644
--- a/packages/block-editor/src/components/dimension-control/buttons.js
+++ b/packages/block-editor/src/components/dimension-control/buttons.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isArray } from 'lodash';
+import { isArray, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -9,25 +9,19 @@ import { isArray } from 'lodash';
 import {
 	Button,
 	ButtonGroup,
-
 	Tooltip,
-
 } from '@wordpress/components';
 
 import {
 	Fragment,
 } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-
-function DimensionButtons( { id, sizes, currentSize, onChangeSpacingSize } ) {
-	if ( ! id || ! id.length ) {
+export function DimensionButtons( { id, sizes, currentSize, onChangeSpacingSize } ) {
+	if ( ! id ) {
 		return null;
 	}
 
-	if ( ! sizes || ! isArray( sizes ) || ! sizes.length ) {
+	if ( ! sizes || ! isArray( sizes ) || isEmpty( sizes ) ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 6d8998e1b3e720..1b0203fa9d5a74 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -8,14 +8,16 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
+import { withInstanceId } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import sizesTable, { findSizeBySlug } from './sizes';
 import DimensionButtons from './buttons';
 
-function DimensionControl( props ) {
-	const { title, property, device = 'all', deviceIcon = 'desktop', id, currentSize, onSpacingChange, onReset } = props;
+export function DimensionControl( props ) {
+	const { title, property, device = 'all', deviceIcon = 'desktop', instanceId, currentSize, onSpacingChange, onReset } = props;
 
 	/**
 	 * Determines the size from the size slug (eg: `medium`)
@@ -47,7 +49,7 @@ function DimensionControl( props ) {
 
 	return (
 		<BaseControl
-			id={ `block-spacing-${ property }-desktop-${ id }` }
+			id={ `block-spacing-${ property }-${ device }-${ instanceId }` }
 			help={ sprintf( __( 'Select the %s for this Block' ), property ) }
 			className="block-editor-dimension-control"
 		>
@@ -71,6 +73,7 @@ function DimensionControl( props ) {
 
 			<DimensionButtons
 				{ ...props }
+				id={ instanceId }
 				device={ device }
 				currentSize={ currentSize }
 				onChangeSpacingSize={ onChangeSpacingSize }
@@ -81,4 +84,4 @@ function DimensionControl( props ) {
 	);
 }
 
-export default DimensionControl;
+export default withInstanceId( DimensionControl );
diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
index 28c9948d78fecf..6757c4a0604ef5 100644
--- a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`DimensionControl rendering correctly for different properties renders c
 <BaseControl
   className="block-editor-dimension-control"
   help="Select the margin for this Block"
-  id="block-spacing-margin-desktop-2"
+  id="block-spacing-margin-all-2"
 >
   <div
     className="block-editor-dimension-control__header"
@@ -29,6 +29,7 @@ exports[`DimensionControl rendering correctly for different properties renders c
   <DimensionButtons
     device="all"
     id="2"
+    instanceId="2"
     onChangeSpacingSize={[Function]}
     property="margin"
     sizes={
@@ -70,7 +71,7 @@ exports[`DimensionControl rendering correctly for different properties renders c
 <BaseControl
   className="block-editor-dimension-control"
   help="Select the padding for this Block"
-  id="block-spacing-padding-desktop-1"
+  id="block-spacing-padding-all-1"
 >
   <div
     className="block-editor-dimension-control__header"
@@ -95,6 +96,7 @@ exports[`DimensionControl rendering correctly for different properties renders c
   <DimensionButtons
     device="all"
     id="1"
+    instanceId="1"
     onChangeSpacingSize={[Function]}
     property="padding"
     sizes={
diff --git a/packages/block-editor/src/components/dimension-control/test/buttons.test.js b/packages/block-editor/src/components/dimension-control/test/buttons.test.js
index c8bbe1a5b3c5bf..a5586d5bbeb645 100644
--- a/packages/block-editor/src/components/dimension-control/test/buttons.test.js
+++ b/packages/block-editor/src/components/dimension-control/test/buttons.test.js
@@ -58,7 +58,7 @@ describe( 'DimensionButtons', () => {
 		it( 'does not render without a "id" prop', () => {
 			const wrapper = shallow(
 				<DimensionButtons
-					sizes={ sizesTable } // provide the other required prop
+					sizes={ sizesTable } // providethe other required prop
 				/>
 			);
 
@@ -68,7 +68,7 @@ describe( 'DimensionButtons', () => {
 		it( 'does not render without a "sizes" prop', () => {
 			const wrapper = shallow(
 				<DimensionButtons
-					id={ uniqueId() } // provide the other required prop
+					id={ uniqueId() } // providethe other required prop
 				/>
 			);
 
diff --git a/packages/block-editor/src/components/dimension-control/test/index.test.js b/packages/block-editor/src/components/dimension-control/test/index.test.js
index c20258191107e7..3c360e8c76c467 100644
--- a/packages/block-editor/src/components/dimension-control/test/index.test.js
+++ b/packages/block-editor/src/components/dimension-control/test/index.test.js
@@ -7,7 +7,7 @@ import { uniqueId } from 'lodash';
 /**
  * Internal dependencies
  */
-import DimensionControl from '../';
+import { DimensionControl } from '../';
 
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
@@ -22,7 +22,7 @@ describe( 'DimensionControl', () => {
 		it( 'renders correctly for "padding" property', () => {
 			const wrapper = shallow(
 				<DimensionControl
-					id={ uniqueId() }
+					instanceId={ uniqueId() }
 					title={ 'Padding' }
 					property={ 'padding' }
 				/>
@@ -33,7 +33,7 @@ describe( 'DimensionControl', () => {
 		it( 'renders correctly for "margin" property', () => {
 			const wrapper = shallow(
 				<DimensionControl
-					id={ uniqueId() }
+					instanceId={ uniqueId() }
 					title={ 'Margin' }
 					property={ 'margin' }
 				/>
@@ -46,7 +46,7 @@ describe( 'DimensionControl', () => {
 		it( 'should call onSpacingChange handler with correct args on size button click', () => {
 			const wrapper = mount(
 				<DimensionControl
-					id={ uniqueId() }
+					instanceId={ uniqueId() }
 					title={ 'Padding' }
 					property={ 'padding' }
 					onSpacingChange={ onChangeHandler }
@@ -62,7 +62,7 @@ describe( 'DimensionControl', () => {
 		it( 'should call onReset handler with correct args on reset button click', () => {
 			const wrapper = mount(
 				<DimensionControl
-					id={ uniqueId() }
+					instanceId={ uniqueId() }
 					title={ 'Padding' }
 					property={ 'padding' }
 					onReset={ onResetHandler }
diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index a48db3457fd99e..dd0080cec2ffd0 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -25,7 +25,6 @@ import {
 
 export default function Inspector( props ) {
 	const {
-		clientId,
 		setBackgroundColor,
 		backgroundColor,
 		attributes,
@@ -120,7 +119,6 @@ export default function Inspector( props ) {
 						<DimensionControl
 							title={ __( 'Padding' ) }
 							property="padding"
-							id={ clientId }
 							onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
 							onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
 							currentSize={ attributes.paddingSize }
@@ -134,7 +132,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Padding' ) }
 								property="padding"
-								id={ clientId }
+
 								onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
 								currentSize={ attributes.paddingSize }
@@ -144,7 +142,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Padding' ) }
 								property="padding"
-								id={ clientId }
+
 								onReset={ partialRight( resetSpacingDimension, 'paddingSize', 'Tablet' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'paddingSize', 'Tablet' ) }
 								currentSize={ attributes.paddingSizeTablet }
@@ -155,7 +153,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Padding' ) }
 								property="padding"
-								id={ clientId }
+
 								onReset={ partialRight( resetSpacingDimension, 'paddingSize', 'Mobile' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'paddingSize', 'Mobile' ) }
 								currentSize={ attributes.paddingSizeMobile }
@@ -179,7 +177,6 @@ export default function Inspector( props ) {
 						<DimensionControl
 							title={ __( 'Margin' ) }
 							property="margin"
-							id={ clientId }
 							onReset={ partialRight( resetSpacingDimension, 'marginSize' ) }
 							onSpacingChange={ partialRight( updateSpacing, 'marginSize' ) }
 							currentSize={ attributes.marginSize }
@@ -193,7 +190,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Margin' ) }
 								property="margin"
-								id={ clientId }
+
 								onReset={ partialRight( resetSpacingDimension, 'marginSize' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'marginSize' ) }
 								currentSize={ attributes.marginSize }
@@ -203,7 +200,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Margin' ) }
 								property="margin"
-								id={ clientId }
+
 								onReset={ partialRight( resetSpacingDimension, 'marginSize', 'Tablet' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'marginSize', 'Tablet' ) }
 								currentSize={ attributes.marginSizeTablet }
@@ -214,7 +211,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								title={ __( 'Margin' ) }
 								property="margin"
-								id={ clientId }
+
 								onReset={ partialRight( resetSpacingDimension, 'marginSize', 'Mobile' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'marginSize', 'Mobile' ) }
 								currentSize={ attributes.marginSizeMobile }

From 5d5d19845aba50095bf7e1c79002573c87e7ac16 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 26 Jul 2019 10:33:45 +0100
Subject: [PATCH 18/43] Updates size buttons for improved comprehension and
 a11y

Updates `N` to be `No`. Also avoids string manipulation approach to getting visual size button label in favour of explicit abbr prop on sizes.
---
 .../components/dimension-control/buttons.js   | 22 ++-------
 .../src/components/dimension-control/sizes.js |  8 +++-
 .../test/__snapshots__/buttons.test.js.snap   | 45 ++++++++-----------
 .../test/__snapshots__/index.test.js.snap     | 16 +++++--
 .../dimension-control/test/buttons.test.js    |  8 +++-
 5 files changed, 45 insertions(+), 54 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/buttons.js b/packages/block-editor/src/components/dimension-control/buttons.js
index 188e47b314ea52..2c95b906df91e4 100644
--- a/packages/block-editor/src/components/dimension-control/buttons.js
+++ b/packages/block-editor/src/components/dimension-control/buttons.js
@@ -33,26 +33,8 @@ export function DimensionButtons( { id, sizes, currentSize, onChangeSpacingSize
 				className="block-editor-dimension-control__buttons"
 			>
 				{ sizes.map( function( size ) {
-					const visualName = size.name.substring( 0, 1 );
-					const hiddenName = size.name.substring( 1 );
 					const isSelected = currentSize === size.slug;
 
-					let innerButton = (
-						<Fragment>
-							{ visualName }
-							<span className="screen-reader-text">{ hiddenName }</span>
-						</Fragment>
-					);
-
-					// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
-					if ( size.abbr ) {
-						innerButton = (
-							<abbr title={ size.abbr }>
-								{ innerButton }
-							</abbr>
-						);
-					}
-
 					return (
 						<Tooltip key={ size.slug } text={ size.name }>
 							<Button
@@ -63,7 +45,9 @@ export function DimensionButtons( { id, sizes, currentSize, onChangeSpacingSize
 								onClick={ onChangeSpacingSize }
 								aria-pressed={ isSelected }
 							>
-								{ innerButton }
+								<abbr title={ size.name }>
+									{ size.abbr }
+								</abbr>
 							</Button>
 						</Tooltip>
 					);
diff --git a/packages/block-editor/src/components/dimension-control/sizes.js b/packages/block-editor/src/components/dimension-control/sizes.js
index 4e194e298db9df..da89d33a19fa72 100644
--- a/packages/block-editor/src/components/dimension-control/sizes.js
+++ b/packages/block-editor/src/components/dimension-control/sizes.js
@@ -24,26 +24,30 @@ export const findSizeBySlug = ( sizes, slug ) => sizes.find( ( size ) => slug ==
 export default [
 	{
 		name: __( 'None' ),
+		abbr: __( 'No' ),
 		size: 0,
 		slug: 'none',
 	},
 	{
 		name: __( 'Small' ),
+		abbr: __( 'S' ),
 		size: 14,
 		slug: 'small',
 	},
 	{
 		name: __( 'Medium' ),
+		abbr: __( 'M' ),
 		size: 24,
 		slug: 'medium',
 	},
 	{
 		name: __( 'Large' ),
+		abbr: __( 'L' ),
 		size: 34,
 		slug: 'large',
 	}, {
-		name: __( 'XLarge' ),
-		abbr: __( 'Extra Large' ), // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
+		name: __( 'Extra Large' ),
+		abbr: __( 'XL' ),
 		size: 60,
 		slug: 'xlarge',
 	},
diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
index c0d6de2a53e442..55fa97f249de15 100644
--- a/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
+++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
@@ -17,12 +17,11 @@ exports[`DimensionButtons renders correctly with defaults 1`] = `
         isPrimary={false}
         value="none"
       >
-        N
-        <span
-          className="screen-reader-text"
+        <abbr
+          title="None"
         >
-          one
-        </span>
+          No
+        </abbr>
       </ForwardRef(Button)>
     </Tooltip>
     <Tooltip
@@ -36,12 +35,11 @@ exports[`DimensionButtons renders correctly with defaults 1`] = `
         isPrimary={false}
         value="small"
       >
-        S
-        <span
-          className="screen-reader-text"
+        <abbr
+          title="Small"
         >
-          mall
-        </span>
+          S
+        </abbr>
       </ForwardRef(Button)>
     </Tooltip>
     <Tooltip
@@ -55,12 +53,11 @@ exports[`DimensionButtons renders correctly with defaults 1`] = `
         isPrimary={false}
         value="medium"
       >
-        M
-        <span
-          className="screen-reader-text"
+        <abbr
+          title="Medium"
         >
-          edium
-        </span>
+          M
+        </abbr>
       </ForwardRef(Button)>
     </Tooltip>
     <Tooltip
@@ -74,17 +71,16 @@ exports[`DimensionButtons renders correctly with defaults 1`] = `
         isPrimary={false}
         value="large"
       >
-        L
-        <span
-          className="screen-reader-text"
+        <abbr
+          title="Large"
         >
-          arge
-        </span>
+          L
+        </abbr>
       </ForwardRef(Button)>
     </Tooltip>
     <Tooltip
       key="xlarge"
-      text="XLarge"
+      text="Extra Large"
     >
       <ForwardRef(Button)
         aria-pressed={false}
@@ -96,12 +92,7 @@ exports[`DimensionButtons renders correctly with defaults 1`] = `
         <abbr
           title="Extra Large"
         >
-          X
-          <span
-            className="screen-reader-text"
-          >
-            Large
-          </span>
+          XL
         </abbr>
       </ForwardRef(Button)>
     </Tooltip>
diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
index 6757c4a0604ef5..b7c98e09815ba0 100644
--- a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
@@ -35,28 +35,32 @@ exports[`DimensionControl rendering correctly for different properties renders c
     sizes={
       Array [
         Object {
+          "abbr": "No",
           "name": "None",
           "size": 0,
           "slug": "none",
         },
         Object {
+          "abbr": "S",
           "name": "Small",
           "size": 14,
           "slug": "small",
         },
         Object {
+          "abbr": "M",
           "name": "Medium",
           "size": 24,
           "slug": "medium",
         },
         Object {
+          "abbr": "L",
           "name": "Large",
           "size": 34,
           "slug": "large",
         },
         Object {
-          "abbr": "Extra Large",
-          "name": "XLarge",
+          "abbr": "XL",
+          "name": "Extra Large",
           "size": 60,
           "slug": "xlarge",
         },
@@ -102,28 +106,32 @@ exports[`DimensionControl rendering correctly for different properties renders c
     sizes={
       Array [
         Object {
+          "abbr": "No",
           "name": "None",
           "size": 0,
           "slug": "none",
         },
         Object {
+          "abbr": "S",
           "name": "Small",
           "size": 14,
           "slug": "small",
         },
         Object {
+          "abbr": "M",
           "name": "Medium",
           "size": 24,
           "slug": "medium",
         },
         Object {
+          "abbr": "L",
           "name": "Large",
           "size": 34,
           "slug": "large",
         },
         Object {
-          "abbr": "Extra Large",
-          "name": "XLarge",
+          "abbr": "XL",
+          "name": "Extra Large",
           "size": 60,
           "slug": "xlarge",
         },
diff --git a/packages/block-editor/src/components/dimension-control/test/buttons.test.js b/packages/block-editor/src/components/dimension-control/test/buttons.test.js
index a5586d5bbeb645..116b5132ed24df 100644
--- a/packages/block-editor/src/components/dimension-control/test/buttons.test.js
+++ b/packages/block-editor/src/components/dimension-control/test/buttons.test.js
@@ -15,26 +15,30 @@ describe( 'DimensionButtons', () => {
 	const sizesTable = [
 		{
 			name: 'None',
+			abbr: 'No',
 			size: 0,
 			slug: 'none',
 		},
 		{
 			name: 'Small',
+			abbr: 'S',
 			size: 14,
 			slug: 'small',
 		},
 		{
 			name: 'Medium',
+			abbr: 'M',
 			size: 24,
 			slug: 'medium',
 		},
 		{
 			name: 'Large',
+			abbr: 'L',
 			size: 34,
 			slug: 'large',
 		}, {
-			name: 'XLarge',
-			abbr: 'Extra Large',
+			name: 'Extra Large',
+			abbr: 'XL',
 			size: 60,
 			slug: 'xlarge',
 		},

From d30b7600ac21586b50e9cd9d57ba48fa427dc702 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 26 Jul 2019 11:06:59 +0100
Subject: [PATCH 19/43] Updates UI in response to designer feedback

See https://github.com/WordPress/gutenberg/pull/16730#issuecomment-515389101
---
 .../src/components/dimension-control/index.js | 21 ++++++++++-----
 .../test/__snapshots__/index.test.js.snap     | 26 ++++++++++---------
 .../dimension-control/test/index.test.js      |  4 ++-
 packages/block-library/src/group/inspector.js |  4 +--
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index 1b0203fa9d5a74..a10442bb88e9dd 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import { startCase } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import {
 	BaseControl,
-	IconButton,
+	Button,
 	Icon,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -50,7 +55,6 @@ export function DimensionControl( props ) {
 	return (
 		<BaseControl
 			id={ `block-spacing-${ property }-${ device }-${ instanceId }` }
-			help={ sprintf( __( 'Select the %s for this Block' ), property ) }
 			className="block-editor-dimension-control"
 		>
 			<div className="block-editor-dimension-control__header">
@@ -59,16 +63,19 @@ export function DimensionControl( props ) {
 						icon={ deviceIcon || device }
 						label={ device }
 					/>
-					{ sprintf( __( '%s (%s devices)' ), title, device ) }
+					{ startCase( device ) }
 				</BaseControl.VisualLabel>
 
-				<IconButton
-					icon="controls-repeat"
-					label={ sprintf( __( 'Reset %s' ), title ) }
+				<Button
+					disabled={ !!! currentSize }
 					isDefault
 					isSmall
 					onClick={ resetSpacing }
-				/>
+					aria-label={ sprintf( __( 'Reset %s for %s' ), title, device ) }
+				>
+					{ __( 'Reset' ) }
+				</Button>
+
 			</div>
 
 			<DimensionButtons
diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
index b7c98e09815ba0..84c89a5402f862 100644
--- a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
@@ -3,7 +3,6 @@
 exports[`DimensionControl rendering correctly for different properties renders correctly for "margin" property 1`] = `
 <BaseControl
   className="block-editor-dimension-control"
-  help="Select the margin for this Block"
   id="block-spacing-margin-all-2"
 >
   <div
@@ -16,15 +15,17 @@ exports[`DimensionControl rendering correctly for different properties renders c
         icon="desktop"
         label="all"
       />
-      Margin (all devices)
+      All
     </Component>
-    <ForwardRef(IconButton)
-      icon="controls-repeat"
+    <ForwardRef(Button)
+      aria-label="Reset Margin for all"
+      disabled={true}
       isDefault={true}
       isSmall={true}
-      label="Reset Margin"
       onClick={[Function]}
-    />
+    >
+      Reset
+    </ForwardRef(Button)>
   </div>
   <DimensionButtons
     device="all"
@@ -74,7 +75,6 @@ exports[`DimensionControl rendering correctly for different properties renders c
 exports[`DimensionControl rendering correctly for different properties renders correctly for "padding" property 1`] = `
 <BaseControl
   className="block-editor-dimension-control"
-  help="Select the padding for this Block"
   id="block-spacing-padding-all-1"
 >
   <div
@@ -87,15 +87,17 @@ exports[`DimensionControl rendering correctly for different properties renders c
         icon="desktop"
         label="all"
       />
-      Padding (all devices)
+      All
     </Component>
-    <ForwardRef(IconButton)
-      icon="controls-repeat"
+    <ForwardRef(Button)
+      aria-label="Reset Padding for all"
+      disabled={true}
       isDefault={true}
       isSmall={true}
-      label="Reset Padding"
       onClick={[Function]}
-    />
+    >
+      Reset
+    </ForwardRef(Button)>
   </div>
   <DimensionButtons
     device="all"
diff --git a/packages/block-editor/src/components/dimension-control/test/index.test.js b/packages/block-editor/src/components/dimension-control/test/index.test.js
index 3c360e8c76c467..ac9e4a8be8c672 100644
--- a/packages/block-editor/src/components/dimension-control/test/index.test.js
+++ b/packages/block-editor/src/components/dimension-control/test/index.test.js
@@ -66,10 +66,12 @@ describe( 'DimensionControl', () => {
 					title={ 'Padding' }
 					property={ 'padding' }
 					onReset={ onResetHandler }
+					device="desktop"
+					currentSize={ 'medium' }
 				/>
 			);
 
-			wrapper.find( 'button[aria-label="Reset Padding"]' ).simulate( 'click' );
+			wrapper.find( 'button[aria-label="Reset Padding for desktop"]' ).simulate( 'click' );
 
 			expect( onResetHandler ).toHaveBeenCalledTimes( 1 );
 		} );
diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index dd0080cec2ffd0..c7f57e680cd8d8 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -110,7 +110,7 @@ export default function Inspector( props ) {
 				<fieldset className="block-editor-responsive-controls">
 					<legend className="block-editor-responsive-controls__label">{ __( 'Padding' ) } </legend>
 					<ToggleControl
-						label={ __( 'Manually adjust Padding based on screensize?' ) }
+						label={ __( 'Manually adjust padding based on screensize.' ) }
 						checked={ attributes.responsivePadding }
 						onChange={ () => onToggleResponsiveSpacing( 'padding' ) }
 					/>
@@ -168,7 +168,7 @@ export default function Inspector( props ) {
 				<fieldset className="block-editor-responsive-controls">
 					<legend className="block-editor-responsive-controls__label">{ __( 'Margin' ) }</legend>
 					<ToggleControl
-						label={ __( 'Manually adjust Margin based on screensize?' ) }
+						label={ __( 'Manually adjust margin based on screensize.' ) }
 						checked={ attributes.responsiveMargin }
 						onChange={ () => onToggleResponsiveSpacing( 'margin' ) }
 					/>

From f94a15e612d0ccb6112378ac1a333bbfeb33d816 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 29 Jul 2019 10:48:38 +0100
Subject: [PATCH 20/43] Update to utilise dropdown for UI. Improve alignment.
 Move toggle below inputs.

---
 .../src/components/dimension-control/index.js | 92 +++++++++----------
 .../components/dimension-control/style.scss   | 18 +++-
 packages/block-library/src/group/inspector.js | 51 ++++------
 3 files changed, 81 insertions(+), 80 deletions(-)

diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
index a10442bb88e9dd..811d9ba80fbd84 100644
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ b/packages/block-editor/src/components/dimension-control/index.js
@@ -1,44 +1,42 @@
 /**
  * External dependencies
  */
-import { startCase } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import {
-	BaseControl,
-	Button,
 	Icon,
+	SelectControl,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 import { withInstanceId } from '@wordpress/compose';
 
+import {
+	Fragment,
+} from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import sizesTable, { findSizeBySlug } from './sizes';
-import DimensionButtons from './buttons';
 
 export function DimensionControl( props ) {
-	const { title, property, device = 'all', deviceIcon = 'desktop', instanceId, currentSize, onSpacingChange, onReset } = props;
+	const { label, device = 'all', deviceIcon = 'desktop', currentSize, onSpacingChange, onReset } = props;
 
 	/**
 	 * Determines the size from the size slug (eg: `medium`)
 	 * and decides whether to call the change or reset callback
 	 * handlers
-	 * @param  {Object} event the click event for size buttons
+	 * @param  {string} val the DOMEvent event.target
 	 * @return {void}
 	 */
-	const onChangeSpacingSize = ( event ) => {
-		const theSize = findSizeBySlug( sizesTable, event.target.value );
-
-		if ( ! theSize ) {
-			return;
-		}
+	const onChangeSpacingSize = ( val ) => {
+		const theSize = findSizeBySlug( sizesTable, val );
 
-		if ( currentSize === theSize.slug ) {
+		if ( ! theSize || currentSize === theSize.slug ) {
 			resetSpacing();
 		} else {
 			onSpacingChange( theSize.slug );
@@ -52,42 +50,44 @@ export function DimensionControl( props ) {
 	 */
 	const resetSpacing = () => onReset();
 
-	return (
-		<BaseControl
-			id={ `block-spacing-${ property }-${ device }-${ instanceId }` }
-			className="block-editor-dimension-control"
-		>
-			<div className="block-editor-dimension-control__header">
-				<BaseControl.VisualLabel className="block-editor-dimension-control__header-label">
-					<Icon
-						icon={ deviceIcon || device }
-						label={ device }
-					/>
-					{ startCase( device ) }
-				</BaseControl.VisualLabel>
-
-				<Button
-					disabled={ !!! currentSize }
-					isDefault
-					isSmall
-					onClick={ resetSpacing }
-					aria-label={ sprintf( __( 'Reset %s for %s' ), title, device ) }
-				>
-					{ __( 'Reset' ) }
-				</Button>
+	/**
+	 * Converts the sizes lookup tablet
+	 * to a format suitable for use in the
+	 * <SelectControl /> options prop
+	 * @param  {Array} sizes the sizes
+	 * @return {Array}       the array of options
+	 */
+	const formatSizesAsOptions = ( sizes ) => {
+		const options = sizes.map( ( { name, slug } ) => ( {
+			label: name,
+			value: slug,
+		} ) );
 
-			</div>
+		return [ {
+			label: __( 'Please select…' ),
+			value: '',
+		} ].concat( options );
+	};
 
-			<DimensionButtons
-				{ ...props }
-				id={ instanceId }
-				device={ device }
-				currentSize={ currentSize }
-				onChangeSpacingSize={ onChangeSpacingSize }
-				sizes={ sizesTable }
+	const selectLabel = (
+		<Fragment>
+			<Icon
+				icon={ deviceIcon || device }
+				label={ device }
 			/>
+			{ label }
+		</Fragment>
+	);
 
-		</BaseControl>
+	return (
+		<SelectControl
+			className={ classnames( 'block-editor-dimension-control', { 'is-manual': 'all' !== device } ) }
+			label={ selectLabel }
+			hideLabelFromVision={ false }
+			value={ currentSize }
+			onChange={ onChangeSpacingSize }
+			options={ formatSizesAsOptions( sizesTable ) }
+		/>
 	);
 }
 
diff --git a/packages/block-editor/src/components/dimension-control/style.scss b/packages/block-editor/src/components/dimension-control/style.scss
index e3a78e2e0b90b8..eddcad88f0e878 100644
--- a/packages/block-editor/src/components/dimension-control/style.scss
+++ b/packages/block-editor/src/components/dimension-control/style.scss
@@ -12,18 +12,30 @@
 .block-editor-responsive-controls__label {
 	font-weight: 600;
 	margin-bottom: 0.6em;
-	margin-left: -1px;
+	margin-left: -3px; // visual compensation
 }
 
 .block-editor-dimension-control {
+	margin-left: -3px; // visual compensation
 
+	.components-base-control__field {
+		display: flex;
+		align-items: center;
+	}
 
 	.components-base-control__label {
+		display: flex;
+		align-items: center;
+		margin-right: 1em;
 		margin-bottom: 0;
+
+		.dashicon {
+			margin-right: 0.5em;
+		}
 	}
 
-	.components-base-control__help {
-		margin-top: -5px;
+	&.is-manual .components-base-control__label {
+		width: 10em;
 	}
 }
 
diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index c7f57e680cd8d8..8612e43b1b65e8 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -109,16 +109,10 @@ export default function Inspector( props ) {
 
 				<fieldset className="block-editor-responsive-controls">
 					<legend className="block-editor-responsive-controls__label">{ __( 'Padding' ) } </legend>
-					<ToggleControl
-						label={ __( 'Manually adjust padding based on screensize.' ) }
-						checked={ attributes.responsivePadding }
-						onChange={ () => onToggleResponsiveSpacing( 'padding' ) }
-					/>
 
 					{ ! attributes.responsivePadding && (
 						<DimensionControl
-							title={ __( 'Padding' ) }
-							property="padding"
+							label={ __( 'All' ) }
 							onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
 							onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
 							currentSize={ attributes.paddingSize }
@@ -130,9 +124,7 @@ export default function Inspector( props ) {
 					{ attributes.responsivePadding && (
 						<Fragment>
 							<DimensionControl
-								title={ __( 'Padding' ) }
-								property="padding"
-
+								label={ __( 'Desktop' ) }
 								onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
 								currentSize={ attributes.paddingSize }
@@ -140,9 +132,7 @@ export default function Inspector( props ) {
 							/>
 
 							<DimensionControl
-								title={ __( 'Padding' ) }
-								property="padding"
-
+								label={ __( 'Tablet' ) }
 								onReset={ partialRight( resetSpacingDimension, 'paddingSize', 'Tablet' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'paddingSize', 'Tablet' ) }
 								currentSize={ attributes.paddingSizeTablet }
@@ -151,9 +141,7 @@ export default function Inspector( props ) {
 							/>
 
 							<DimensionControl
-								title={ __( 'Padding' ) }
-								property="padding"
-
+								label={ __( 'Mobile' ) }
 								onReset={ partialRight( resetSpacingDimension, 'paddingSize', 'Mobile' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'paddingSize', 'Mobile' ) }
 								currentSize={ attributes.paddingSizeMobile }
@@ -163,19 +151,20 @@ export default function Inspector( props ) {
 
 						</Fragment>
 					) }
+
+					<ToggleControl
+						label={ __( 'Manually adjust padding based on screensize.' ) }
+						checked={ attributes.responsivePadding }
+						onChange={ () => onToggleResponsiveSpacing( 'padding' ) }
+					/>
 				</fieldset>
 
 				<fieldset className="block-editor-responsive-controls">
 					<legend className="block-editor-responsive-controls__label">{ __( 'Margin' ) }</legend>
-					<ToggleControl
-						label={ __( 'Manually adjust margin based on screensize.' ) }
-						checked={ attributes.responsiveMargin }
-						onChange={ () => onToggleResponsiveSpacing( 'margin' ) }
-					/>
 
 					{ ! attributes.responsiveMargin && (
 						<DimensionControl
-							title={ __( 'Margin' ) }
+							label={ __( 'All' ) }
 							property="margin"
 							onReset={ partialRight( resetSpacingDimension, 'marginSize' ) }
 							onSpacingChange={ partialRight( updateSpacing, 'marginSize' ) }
@@ -188,9 +177,7 @@ export default function Inspector( props ) {
 					{ attributes.responsiveMargin && (
 						<Fragment>
 							<DimensionControl
-								title={ __( 'Margin' ) }
-								property="margin"
-
+								label={ __( 'Desktop' ) }
 								onReset={ partialRight( resetSpacingDimension, 'marginSize' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'marginSize' ) }
 								currentSize={ attributes.marginSize }
@@ -198,9 +185,7 @@ export default function Inspector( props ) {
 							/>
 
 							<DimensionControl
-								title={ __( 'Margin' ) }
-								property="margin"
-
+								label={ __( 'Tablet' ) }
 								onReset={ partialRight( resetSpacingDimension, 'marginSize', 'Tablet' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'marginSize', 'Tablet' ) }
 								currentSize={ attributes.marginSizeTablet }
@@ -209,9 +194,7 @@ export default function Inspector( props ) {
 							/>
 
 							<DimensionControl
-								title={ __( 'Margin' ) }
-								property="margin"
-
+								label={ __( 'Mobile' ) }
 								onReset={ partialRight( resetSpacingDimension, 'marginSize', 'Mobile' ) }
 								onSpacingChange={ partialRight( updateSpacing, 'marginSize', 'Mobile' ) }
 								currentSize={ attributes.marginSizeMobile }
@@ -221,6 +204,12 @@ export default function Inspector( props ) {
 
 						</Fragment>
 					) }
+
+					<ToggleControl
+						label={ __( 'Manually adjust margin based on screensize.' ) }
+						checked={ attributes.responsiveMargin }
+						onChange={ () => onToggleResponsiveSpacing( 'margin' ) }
+					/>
 				</fieldset>
 
 			</PanelBody>

From 28ca9b4ac30b430b939eb37eacd06414addc4418 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 1 Nov 2019 11:11:46 +0000
Subject: [PATCH 21/43] Remove duplicate Dimension Control

This was handled in a separate PR and resides in `@wordpress/components`. Can be removed from this PR.
---
 .../components/dimension-control/README.md    | 120 ---------------
 .../components/dimension-control/buttons.js   |  61 --------
 .../src/components/dimension-control/index.js |  94 ------------
 .../src/components/dimension-control/sizes.js |  54 -------
 .../components/dimension-control/style.scss   |  70 ---------
 .../test/__snapshots__/buttons.test.js.snap   | 101 ------------
 .../test/__snapshots__/index.test.js.snap     | 145 ------------------
 .../dimension-control/test/buttons.test.js    | 141 -----------------
 .../dimension-control/test/index.test.js      |  79 ----------
 9 files changed, 865 deletions(-)
 delete mode 100644 packages/block-editor/src/components/dimension-control/README.md
 delete mode 100644 packages/block-editor/src/components/dimension-control/buttons.js
 delete mode 100644 packages/block-editor/src/components/dimension-control/index.js
 delete mode 100644 packages/block-editor/src/components/dimension-control/sizes.js
 delete mode 100644 packages/block-editor/src/components/dimension-control/style.scss
 delete mode 100644 packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
 delete mode 100644 packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
 delete mode 100644 packages/block-editor/src/components/dimension-control/test/buttons.test.js
 delete mode 100644 packages/block-editor/src/components/dimension-control/test/index.test.js

diff --git a/packages/block-editor/src/components/dimension-control/README.md b/packages/block-editor/src/components/dimension-control/README.md
deleted file mode 100644
index bdedb089ba3959..00000000000000
--- a/packages/block-editor/src/components/dimension-control/README.md
+++ /dev/null
@@ -1,120 +0,0 @@
-DimensionControl
-=============================
-
-`DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions. It is intended for use within the editor `InspectorControls` sidebar.
-
-## Usage
-
-In a block's `edit` implementation, render a `<DimensionControl />` component. 
-
-
-```jsx
-import { registerBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import {
-	DimensionControl,
-} from '@wordpress/block-editor';
-
-registerBlockType( 'my-plugin/my-block', {
-	// ...
-
-	attributes: {
-		// other attributes here
-		// ...
-
-		paddingSize: {
-			type: 'string',
-		},
-	},
-
-	edit( { attributes, setAttributes, clientId } ) {
-		
-		const { paddingSize } = attributes;
-		
-
-		const updateSpacing = ( dimension, size, device = '' ) => {
-			setAttributes( {
-				[ `${ dimension }${ device }` ]: size,
-			} );
-		};
-
-		const resetSpacingDimension = ( dimension, device = '' ) => {
-			setAttributes( {
-				[ `${ dimension }${ device }` ]: '',
-			} );
-		};
-
-		return (
-			<DimensionControl
-				title={ __( 'Padding' ) }
-				property="padding"
-				id={ clientId }
-				onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
-				onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
-				currentSize={ paddingSize }
-			/>
-		);
-	}
-} );
-```
-
-_Note:_ it is recommend to partially apply the value of the Block attribute to be updated (eg: `paddingSize`, `marginSize`...etc) to your callback functions. This avoids the need to unecessarily couple the component to the Block attribute schema.
-
-_Note:_ by default if you do not provide an initial `currentSize` prop for the current dimension value, then no value will be selected (ie: there is no default dimension set). 
-
-## Props
-
-### `title`
-* **Type:** `String`
-* **Default:** `undefined`
-* **Required:** Yes
-
-The human readable title for the control. 
-
-### `property`
-* **Type:** `String`
-* **Default:** `undefined`
-* **Required:** Yes
-
-The spacing/dimension property which this UI is to control. Common examples are `padding` and `margin`.
-
-### `currentSize`
-* **Type:** `String`
-* **Default:** `''`
-* **Required:** No
-
-The current value of the dimension the UI controls. If provided the UI with automatically highlight the control representing the current value.
-
-### `device`
-* **Type:** `String`
-* **Default:** `all`
-* **Required:** No
-
-The device type to which this spacing applies. By default this is set to `all`. Useful when rendering multiple `DimensionControl` components for each device type supported by your Block.
-
-### `deviceIcon`
-* **Type:** `String`
-* **Default:** `desktop`
-* **Required:** No
-
-A dashicon for the device type (see `device` above).
-
-### `onSpacingChange`
-* **Type:** `Function`
-* **Default:** `undefined`
-* **Required:** Yes
-* **Arguments:**:
-  - `size` - a string representing the selected size (eg: `medium`)
-
-A callback which is triggered when a spacing size value changes (is selected/clicked).
-
-
-### `onReset`
-* **Type:** `Function`
-* **Default:** `undefined`
-* **Required:** Yes
-* **Arguments:**:
-
-A callback which is triggered when the "reset" UI is activated.
-
-
diff --git a/packages/block-editor/src/components/dimension-control/buttons.js b/packages/block-editor/src/components/dimension-control/buttons.js
deleted file mode 100644
index 2c95b906df91e4..00000000000000
--- a/packages/block-editor/src/components/dimension-control/buttons.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import { isArray, isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	ButtonGroup,
-	Tooltip,
-} from '@wordpress/components';
-
-import {
-	Fragment,
-} from '@wordpress/element';
-
-export function DimensionButtons( { id, sizes, currentSize, onChangeSpacingSize } ) {
-	if ( ! id ) {
-		return null;
-	}
-
-	if ( ! sizes || ! isArray( sizes ) || isEmpty( sizes ) ) {
-		return null;
-	}
-
-	return (
-		<Fragment>
-
-			<ButtonGroup
-				id={ `block-editor-dimension-control-buttons-${ id }` }
-				className="block-editor-dimension-control__buttons"
-			>
-				{ sizes.map( function( size ) {
-					const isSelected = currentSize === size.slug;
-
-					return (
-						<Tooltip key={ size.slug } text={ size.name }>
-							<Button
-								className="block-editor-dimension-control__button"
-								isDefault={ ! isSelected }
-								isPrimary={ isSelected }
-								value={ size.slug }
-								onClick={ onChangeSpacingSize }
-								aria-pressed={ isSelected }
-							>
-								<abbr title={ size.name }>
-									{ size.abbr }
-								</abbr>
-							</Button>
-						</Tooltip>
-					);
-				} ) }
-			</ButtonGroup>
-
-		</Fragment>
-	);
-}
-
-export default DimensionButtons;
diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js
deleted file mode 100644
index 811d9ba80fbd84..00000000000000
--- a/packages/block-editor/src/components/dimension-control/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	Icon,
-	SelectControl,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-import { withInstanceId } from '@wordpress/compose';
-
-import {
-	Fragment,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import sizesTable, { findSizeBySlug } from './sizes';
-
-export function DimensionControl( props ) {
-	const { label, device = 'all', deviceIcon = 'desktop', currentSize, onSpacingChange, onReset } = props;
-
-	/**
-	 * Determines the size from the size slug (eg: `medium`)
-	 * and decides whether to call the change or reset callback
-	 * handlers
-	 * @param  {string} val the DOMEvent event.target
-	 * @return {void}
-	 */
-	const onChangeSpacingSize = ( val ) => {
-		const theSize = findSizeBySlug( sizesTable, val );
-
-		if ( ! theSize || currentSize === theSize.slug ) {
-			resetSpacing();
-		} else {
-			onSpacingChange( theSize.slug );
-		}
-	};
-
-	/**
-	 * Applies the callback to handle resetting
-	 * a dimension spacing values
-	 * @return {void}
-	 */
-	const resetSpacing = () => onReset();
-
-	/**
-	 * Converts the sizes lookup tablet
-	 * to a format suitable for use in the
-	 * <SelectControl /> options prop
-	 * @param  {Array} sizes the sizes
-	 * @return {Array}       the array of options
-	 */
-	const formatSizesAsOptions = ( sizes ) => {
-		const options = sizes.map( ( { name, slug } ) => ( {
-			label: name,
-			value: slug,
-		} ) );
-
-		return [ {
-			label: __( 'Please select…' ),
-			value: '',
-		} ].concat( options );
-	};
-
-	const selectLabel = (
-		<Fragment>
-			<Icon
-				icon={ deviceIcon || device }
-				label={ device }
-			/>
-			{ label }
-		</Fragment>
-	);
-
-	return (
-		<SelectControl
-			className={ classnames( 'block-editor-dimension-control', { 'is-manual': 'all' !== device } ) }
-			label={ selectLabel }
-			hideLabelFromVision={ false }
-			value={ currentSize }
-			onChange={ onChangeSpacingSize }
-			options={ formatSizesAsOptions( sizesTable ) }
-		/>
-	);
-}
-
-export default withInstanceId( DimensionControl );
diff --git a/packages/block-editor/src/components/dimension-control/sizes.js b/packages/block-editor/src/components/dimension-control/sizes.js
deleted file mode 100644
index da89d33a19fa72..00000000000000
--- a/packages/block-editor/src/components/dimension-control/sizes.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Sizes
- *
- * defines the sizes used in dimension controls
- * all hardcoded `size` values are based on the value of
- * the Sass variable `$block-padding` from
- * `packages/block-editor/src/components/dimension-control/sizes.js`.
- */
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Finds the correct size object from the provided sizes
- * table by size slug (eg: `medium`)
- * @param  {Array} sizes containing objects for each size definition
- * @param  {string} slug a string representation of the size (eg: `medium`)
- * @return {Object}       the matching size definition
- */
-export const findSizeBySlug = ( sizes, slug ) => sizes.find( ( size ) => slug === size.slug );
-
-export default [
-	{
-		name: __( 'None' ),
-		abbr: __( 'No' ),
-		size: 0,
-		slug: 'none',
-	},
-	{
-		name: __( 'Small' ),
-		abbr: __( 'S' ),
-		size: 14,
-		slug: 'small',
-	},
-	{
-		name: __( 'Medium' ),
-		abbr: __( 'M' ),
-		size: 24,
-		slug: 'medium',
-	},
-	{
-		name: __( 'Large' ),
-		abbr: __( 'L' ),
-		size: 34,
-		slug: 'large',
-	}, {
-		name: __( 'Extra Large' ),
-		abbr: __( 'XL' ),
-		size: 60,
-		slug: 'xlarge',
-	},
-];
diff --git a/packages/block-editor/src/components/dimension-control/style.scss b/packages/block-editor/src/components/dimension-control/style.scss
deleted file mode 100644
index eddcad88f0e878..00000000000000
--- a/packages/block-editor/src/components/dimension-control/style.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.block-editor-responsive-controls {
-	margin-bottom: $block-padding*2;
-	border-bottom: 1px solid $light-gray-600;
-	padding-bottom: $block-padding;
-
-	&:last-child {
-		padding-bottom: 0;
-		border-bottom: 0;
-	}
-}
-
-.block-editor-responsive-controls__label {
-	font-weight: 600;
-	margin-bottom: 0.6em;
-	margin-left: -3px; // visual compensation
-}
-
-.block-editor-dimension-control {
-	margin-left: -3px; // visual compensation
-
-	.components-base-control__field {
-		display: flex;
-		align-items: center;
-	}
-
-	.components-base-control__label {
-		display: flex;
-		align-items: center;
-		margin-right: 1em;
-		margin-bottom: 0;
-
-		.dashicon {
-			margin-right: 0.5em;
-		}
-	}
-
-	&.is-manual .components-base-control__label {
-		width: 10em;
-	}
-}
-
-.block-editor-dimension-control__buttons {
-	display: flex;
-}
-
-.block-editor-dimension-control__button {
-	flex: 1;
-	justify-content: center;
-
-	abbr {
-		pointer-events: none;
-	}
-}
-
-.block-editor-dimension-control__header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 0.75em;
-
-	.block-editor-dimension-control__header-label {
-		display: flex;
-		align-items: center;
-
-		.dashicon {
-			margin-right: 0.5em;
-		}
-	}
-}
-
diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
deleted file mode 100644
index 55fa97f249de15..00000000000000
--- a/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap
+++ /dev/null
@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DimensionButtons renders correctly with defaults 1`] = `
-<Fragment>
-  <ButtonGroup
-    className="block-editor-dimension-control__buttons"
-    id="block-editor-dimension-control-buttons-1"
-  >
-    <Tooltip
-      key="none"
-      text="None"
-    >
-      <ForwardRef(Button)
-        aria-pressed={false}
-        className="block-editor-dimension-control__button"
-        isDefault={true}
-        isPrimary={false}
-        value="none"
-      >
-        <abbr
-          title="None"
-        >
-          No
-        </abbr>
-      </ForwardRef(Button)>
-    </Tooltip>
-    <Tooltip
-      key="small"
-      text="Small"
-    >
-      <ForwardRef(Button)
-        aria-pressed={false}
-        className="block-editor-dimension-control__button"
-        isDefault={true}
-        isPrimary={false}
-        value="small"
-      >
-        <abbr
-          title="Small"
-        >
-          S
-        </abbr>
-      </ForwardRef(Button)>
-    </Tooltip>
-    <Tooltip
-      key="medium"
-      text="Medium"
-    >
-      <ForwardRef(Button)
-        aria-pressed={false}
-        className="block-editor-dimension-control__button"
-        isDefault={true}
-        isPrimary={false}
-        value="medium"
-      >
-        <abbr
-          title="Medium"
-        >
-          M
-        </abbr>
-      </ForwardRef(Button)>
-    </Tooltip>
-    <Tooltip
-      key="large"
-      text="Large"
-    >
-      <ForwardRef(Button)
-        aria-pressed={false}
-        className="block-editor-dimension-control__button"
-        isDefault={true}
-        isPrimary={false}
-        value="large"
-      >
-        <abbr
-          title="Large"
-        >
-          L
-        </abbr>
-      </ForwardRef(Button)>
-    </Tooltip>
-    <Tooltip
-      key="xlarge"
-      text="Extra Large"
-    >
-      <ForwardRef(Button)
-        aria-pressed={false}
-        className="block-editor-dimension-control__button"
-        isDefault={true}
-        isPrimary={false}
-        value="xlarge"
-      >
-        <abbr
-          title="Extra Large"
-        >
-          XL
-        </abbr>
-      </ForwardRef(Button)>
-    </Tooltip>
-  </ButtonGroup>
-</Fragment>
-`;
diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
deleted file mode 100644
index 84c89a5402f862..00000000000000
--- a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,145 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DimensionControl rendering correctly for different properties renders correctly for "margin" property 1`] = `
-<BaseControl
-  className="block-editor-dimension-control"
-  id="block-spacing-margin-all-2"
->
-  <div
-    className="block-editor-dimension-control__header"
-  >
-    <Component
-      className="block-editor-dimension-control__header-label"
-    >
-      <Icon
-        icon="desktop"
-        label="all"
-      />
-      All
-    </Component>
-    <ForwardRef(Button)
-      aria-label="Reset Margin for all"
-      disabled={true}
-      isDefault={true}
-      isSmall={true}
-      onClick={[Function]}
-    >
-      Reset
-    </ForwardRef(Button)>
-  </div>
-  <DimensionButtons
-    device="all"
-    id="2"
-    instanceId="2"
-    onChangeSpacingSize={[Function]}
-    property="margin"
-    sizes={
-      Array [
-        Object {
-          "abbr": "No",
-          "name": "None",
-          "size": 0,
-          "slug": "none",
-        },
-        Object {
-          "abbr": "S",
-          "name": "Small",
-          "size": 14,
-          "slug": "small",
-        },
-        Object {
-          "abbr": "M",
-          "name": "Medium",
-          "size": 24,
-          "slug": "medium",
-        },
-        Object {
-          "abbr": "L",
-          "name": "Large",
-          "size": 34,
-          "slug": "large",
-        },
-        Object {
-          "abbr": "XL",
-          "name": "Extra Large",
-          "size": 60,
-          "slug": "xlarge",
-        },
-      ]
-    }
-    title="Margin"
-  />
-</BaseControl>
-`;
-
-exports[`DimensionControl rendering correctly for different properties renders correctly for "padding" property 1`] = `
-<BaseControl
-  className="block-editor-dimension-control"
-  id="block-spacing-padding-all-1"
->
-  <div
-    className="block-editor-dimension-control__header"
-  >
-    <Component
-      className="block-editor-dimension-control__header-label"
-    >
-      <Icon
-        icon="desktop"
-        label="all"
-      />
-      All
-    </Component>
-    <ForwardRef(Button)
-      aria-label="Reset Padding for all"
-      disabled={true}
-      isDefault={true}
-      isSmall={true}
-      onClick={[Function]}
-    >
-      Reset
-    </ForwardRef(Button)>
-  </div>
-  <DimensionButtons
-    device="all"
-    id="1"
-    instanceId="1"
-    onChangeSpacingSize={[Function]}
-    property="padding"
-    sizes={
-      Array [
-        Object {
-          "abbr": "No",
-          "name": "None",
-          "size": 0,
-          "slug": "none",
-        },
-        Object {
-          "abbr": "S",
-          "name": "Small",
-          "size": 14,
-          "slug": "small",
-        },
-        Object {
-          "abbr": "M",
-          "name": "Medium",
-          "size": 24,
-          "slug": "medium",
-        },
-        Object {
-          "abbr": "L",
-          "name": "Large",
-          "size": 34,
-          "slug": "large",
-        },
-        Object {
-          "abbr": "XL",
-          "name": "Extra Large",
-          "size": 60,
-          "slug": "xlarge",
-        },
-      ]
-    }
-    title="Padding"
-  />
-</BaseControl>
-`;
diff --git a/packages/block-editor/src/components/dimension-control/test/buttons.test.js b/packages/block-editor/src/components/dimension-control/test/buttons.test.js
deleted file mode 100644
index 116b5132ed24df..00000000000000
--- a/packages/block-editor/src/components/dimension-control/test/buttons.test.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow, mount } from 'enzyme';
-import { uniqueId } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import DimensionButtons from '../buttons';
-
-describe( 'DimensionButtons', () => {
-	const onChangeHandler = jest.fn();
-
-	const sizesTable = [
-		{
-			name: 'None',
-			abbr: 'No',
-			size: 0,
-			slug: 'none',
-		},
-		{
-			name: 'Small',
-			abbr: 'S',
-			size: 14,
-			slug: 'small',
-		},
-		{
-			name: 'Medium',
-			abbr: 'M',
-			size: 24,
-			slug: 'medium',
-		},
-		{
-			name: 'Large',
-			abbr: 'L',
-			size: 34,
-			slug: 'large',
-		}, {
-			name: 'Extra Large',
-			abbr: 'XL',
-			size: 60,
-			slug: 'xlarge',
-		},
-	];
-
-	afterEach( () => {
-		onChangeHandler.mockClear();
-	} );
-
-	it( 'renders correctly with defaults', () => {
-		const wrapper = shallow(
-			<DimensionButtons
-				id={ uniqueId() }
-				sizes={ sizesTable }
-			/>
-		);
-		expect( wrapper ).toMatchSnapshot();
-	} );
-
-	describe( 'required props', () => {
-		it( 'does not render without a "id" prop', () => {
-			const wrapper = shallow(
-				<DimensionButtons
-					sizes={ sizesTable } // providethe other required prop
-				/>
-			);
-
-			expect( wrapper.isEmptyRender() ).toBe( true );
-		} );
-
-		it( 'does not render without a "sizes" prop', () => {
-			const wrapper = shallow(
-				<DimensionButtons
-					id={ uniqueId() } // providethe other required prop
-				/>
-			);
-
-			expect( wrapper.isEmptyRender() ).toBe( true );
-		} );
-	} );
-
-	describe( 'selected states', () => {
-		it( 'renders a selected button state for the matching "currentSize" prop', () => {
-			const size = 'medium';
-
-			const wrapper = mount(
-				<DimensionButtons
-					id={ uniqueId() }
-					sizes={ sizesTable }
-					currentSize={ size }
-				/>
-			);
-
-			const selectedButton = wrapper.find( 'button' ).filter( '.is-primary' );
-
-			expect( selectedButton ).toHaveLength( 1 );
-			expect( selectedButton.prop( 'value' ) ).toBe( size );
-			expect( selectedButton.prop( 'aria-pressed' ) ).toBe( true );
-		} );
-
-		it( 'does not render a selected button if no matching "currentSize" prop is provided', () => {
-			const wrapper = mount(
-				<DimensionButtons
-					id={ uniqueId() }
-					sizes={ sizesTable }
-					currentSize="invalidsizehere"
-				/>
-			);
-
-			const unpressedButtons = wrapper.find( 'button' ).filterWhere( ( button ) => {
-				return false === button.prop( 'aria-pressed' );
-			} );
-
-			const pressedButtons = wrapper.find( 'button' ).filterWhere( ( button ) => {
-				return true === button.prop( 'aria-pressed' );
-			} );
-
-			expect( wrapper.find( 'button' ).filter( '.is-primary' ) ).toHaveLength( 0 );
-			expect( pressedButtons ).toHaveLength( 0 );
-			expect( unpressedButtons ).toHaveLength( sizesTable.length );
-		} );
-	} );
-
-	describe( 'callbacks', () => {
-		it( 'triggers onChangeSpacingSize callback on button click', () => {
-			const wrapper = mount(
-				<DimensionButtons
-					id={ uniqueId() }
-					sizes={ sizesTable }
-					currentSize="medium"
-					onChangeSpacingSize={ onChangeHandler }
-				/>
-			);
-
-			wrapper.find( 'button[value="small"]' ).simulate( 'click' );
-
-			expect( onChangeHandler ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-} );
diff --git a/packages/block-editor/src/components/dimension-control/test/index.test.js b/packages/block-editor/src/components/dimension-control/test/index.test.js
deleted file mode 100644
index ac9e4a8be8c672..00000000000000
--- a/packages/block-editor/src/components/dimension-control/test/index.test.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow, mount } from 'enzyme';
-import { uniqueId } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import { DimensionControl } from '../';
-
-describe( 'DimensionControl', () => {
-	const onChangeHandler = jest.fn();
-	const onResetHandler = jest.fn();
-
-	afterEach( () => {
-		onChangeHandler.mockClear();
-		onResetHandler.mockClear();
-	} );
-
-	describe( 'rendering correctly for different properties', () => {
-		it( 'renders correctly for "padding" property', () => {
-			const wrapper = shallow(
-				<DimensionControl
-					instanceId={ uniqueId() }
-					title={ 'Padding' }
-					property={ 'padding' }
-				/>
-			);
-			expect( wrapper ).toMatchSnapshot();
-		} );
-
-		it( 'renders correctly for "margin" property', () => {
-			const wrapper = shallow(
-				<DimensionControl
-					instanceId={ uniqueId() }
-					title={ 'Margin' }
-					property={ 'margin' }
-				/>
-			);
-			expect( wrapper ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'callbacks', () => {
-		it( 'should call onSpacingChange handler with correct args on size button click', () => {
-			const wrapper = mount(
-				<DimensionControl
-					instanceId={ uniqueId() }
-					title={ 'Padding' }
-					property={ 'padding' }
-					onSpacingChange={ onChangeHandler }
-				/>
-			);
-
-			wrapper.find( 'button[value="small"]' ).simulate( 'click' );
-
-			expect( onChangeHandler ).toHaveBeenCalledTimes( 1 );
-			expect( onChangeHandler ).toHaveBeenCalledWith( 'small' );
-		} );
-
-		it( 'should call onReset handler with correct args on reset button click', () => {
-			const wrapper = mount(
-				<DimensionControl
-					instanceId={ uniqueId() }
-					title={ 'Padding' }
-					property={ 'padding' }
-					onReset={ onResetHandler }
-					device="desktop"
-					currentSize={ 'medium' }
-				/>
-			);
-
-			wrapper.find( 'button[aria-label="Reset Padding for desktop"]' ).simulate( 'click' );
-
-			expect( onResetHandler ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-} );

From 8d41a49fd55b39f8cc73abc92eabbffb87b6e61c Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 1 Nov 2019 11:54:08 +0000
Subject: [PATCH 22/43] Refactor dimension controls to use new experimental
 components

---
 .../block-library/src/group/attributes.js     |   9 +-
 packages/block-library/src/group/inspector.js | 206 ++++--------------
 2 files changed, 49 insertions(+), 166 deletions(-)

diff --git a/packages/block-library/src/group/attributes.js b/packages/block-library/src/group/attributes.js
index 3addd2978744c2..dab0699c0571d5 100644
--- a/packages/block-library/src/group/attributes.js
+++ b/packages/block-library/src/group/attributes.js
@@ -1,5 +1,6 @@
 /**
  * Set the attributes for the Dimension Control
+ *
  * @type {Object}
  */
 const DimensionsAttributes = {
@@ -18,10 +19,10 @@ const DimensionsAttributes = {
 	paddingSize: {
 		type: 'string',
 	},
-	paddingSizeMobile: {
+	paddingSizeSmall: {
 		type: 'string',
 	},
-	paddingSizeTablet: {
+	paddingSizeMedium: {
 		type: 'string',
 	},
 	marginUnit: {
@@ -31,10 +32,10 @@ const DimensionsAttributes = {
 	marginSize: {
 		type: 'string',
 	},
-	marginSizeTablet: {
+	marginSizeMedium: {
 		type: 'string',
 	},
-	marginSizeMobile: {
+	marginSizeSmall: {
 		type: 'string',
 	},
 };
diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index 8612e43b1b65e8..7705162c1490f9 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { partialRight, startCase } from 'lodash';
+import { partialRight, upperFirst } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -9,20 +9,16 @@ import { partialRight, startCase } from 'lodash';
 import {
 	InspectorControls,
 	PanelColorSettings,
-	DimensionControl,
+	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
 } from '@wordpress/block-editor';
 
 import { __ } from '@wordpress/i18n';
 
 import {
 	PanelBody,
-	ToggleControl,
+	__experimentalDimensionControl as DimensionControl,
 } from '@wordpress/components';
 
-import {
-	Fragment,
-} from '@wordpress/element';
-
 export default function Inspector( props ) {
 	const {
 		setBackgroundColor,
@@ -31,65 +27,32 @@ export default function Inspector( props ) {
 		setAttributes,
 	} = props;
 
-	/**
-	 * Resets a single spacing attribute for a given dimension
-	 * (and optionally a given device)
-	 * @param  {string} dimension the dimension property (eg: `padding`)
-	 * @param  {string} device    the device which this dimension applies to (eg: `mobile`, `tablet`)
-	 * @return {void}
-	 */
-	const resetSpacingDimension = ( dimension, device = '' ) => {
-		setAttributes( {
-			[ `${ dimension }${ device }` ]: '',
-		} );
-	};
-
-	/**
-	 * Resets all the responsive attributes for a given dimension
-	 * @param  {string} dimension the dimension property (eg: `padding`)
-	 * @return {void}
-	 */
-	const resetResponsiveSpacingForDimension = ( dimension ) => {
-		dimension = dimension.toLowerCase();
-
-		setAttributes( {
-			[ `${ dimension }SizeMobile` ]: '',
-			[ `${ dimension }SizeTablet` ]: '',
-		} );
-	};
-
 	/**
 	 * Updates the spacing attribute for a given dimension
-	 * (and optionally a given device)
+	 * (and optionally a given viewport)
+  *
 	 * @param  {string} size      a slug representing a dimension size (eg: `medium`)
-	 * @param  {string} dimension the dimension property (eg: `padding`)
-	 * @param  {string} device    the device which this dimension applies to (eg: `mobile`, `tablet`)
+	 * @param  {string} dimensionAttr the dimension attribute for a property (eg: `paddingSize`)
+	 * @param  {string} viewport    the viewport which this dimension applies to (eg: `mobile`, `tablet`)
 	 * @return {void}
 	 */
-	const updateSpacing = ( size, dimension, device = '' ) => {
-		setAttributes( {
-			[ `${ dimension }${ device }` ]: size,
-		} );
-	};
-
-	/**
-	 * Toggles the responsive spacing UI for a given dimension
-	 * and clears any responsive attribute
-	 * @param  {string} dimension the dimension property (eg: `padding`)
-	 * @return {void}
-	 */
-	const onToggleResponsiveSpacing = ( dimension ) => {
-		dimension = startCase( dimension );
-
-		const attr = `responsive${ dimension }`;
-		const responsiveDimensionState = ! attributes[ attr ];
-
-		if ( ! responsiveDimensionState ) {
-			resetResponsiveSpacingForDimension( dimension );
+	const updateSpacing = ( value, dimensionAttr, viewport = '' ) => {
+		// If there is a viewport then reset the default attribute
+		// and update the responsive setting. Otherwise, set the
+		// default value and reset ALL the responsive settings
+		if ( viewport.length ) {
+			setAttributes( {
+				[ dimensionAttr ]: '',
+				[ `${ dimensionAttr }${ viewport }` ]: value,
+			} );
+		} else {
+			setAttributes( {
+				[ dimensionAttr ]: value,
+				[ `${ dimensionAttr }Small` ]: '',
+				[ `${ dimensionAttr }Medium` ]: '',
+				[ `${ dimensionAttr }Large` ]: '',
+			} );
 		}
-		setAttributes( {
-			[ attr ]: responsiveDimensionState,
-		} );
 	};
 
 	return (
@@ -107,111 +70,30 @@ export default function Inspector( props ) {
 
 			<PanelBody title={ __( 'Spacing' ) }>
 
-				<fieldset className="block-editor-responsive-controls">
-					<legend className="block-editor-responsive-controls__label">{ __( 'Padding' ) } </legend>
-
-					{ ! attributes.responsivePadding && (
-						<DimensionControl
-							label={ __( 'All' ) }
-							onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
-							onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
-							currentSize={ attributes.paddingSize }
-							device="all"
-							deviceIcon="desktop"
-						/>
-					) }
-
-					{ attributes.responsivePadding && (
-						<Fragment>
+				<ResponsiveBlockControl
+					title={ __( 'Padding' ) }
+					property={ 'padding' }
+					isResponsive={ attributes.responsivePadding }
+					onIsResponsiveChange={ () => {
+						setAttributes( {
+							responsivePadding: ! attributes.responsivePadding,
+						} );
+					} }
+					renderDefaultControl={ ( labelComponent, viewport ) => {
+						const dimensionAttr = 'paddingSize';
+						const viewportSize = viewport.id !== 'all' ? upperFirst( viewport.id ) : '';
+						const value = attributes[ `paddingSize${ viewportSize }` ];
+
+						return (
 							<DimensionControl
-								label={ __( 'Desktop' ) }
-								onReset={ partialRight( resetSpacingDimension, 'paddingSize' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'paddingSize' ) }
-								currentSize={ attributes.paddingSize }
-								device="desktop"
+								label={ labelComponent }
+								value={ value }
+								onChange={ partialRight( updateSpacing, dimensionAttr, viewportSize ) }
 							/>
+						);
+					} }
 
-							<DimensionControl
-								label={ __( 'Tablet' ) }
-								onReset={ partialRight( resetSpacingDimension, 'paddingSize', 'Tablet' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'paddingSize', 'Tablet' ) }
-								currentSize={ attributes.paddingSizeTablet }
-								device="tablet"
-								deviceIcon="tablet"
-							/>
-
-							<DimensionControl
-								label={ __( 'Mobile' ) }
-								onReset={ partialRight( resetSpacingDimension, 'paddingSize', 'Mobile' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'paddingSize', 'Mobile' ) }
-								currentSize={ attributes.paddingSizeMobile }
-								device="mobile"
-								deviceIcon="smartphone"
-							/>
-
-						</Fragment>
-					) }
-
-					<ToggleControl
-						label={ __( 'Manually adjust padding based on screensize.' ) }
-						checked={ attributes.responsivePadding }
-						onChange={ () => onToggleResponsiveSpacing( 'padding' ) }
-					/>
-				</fieldset>
-
-				<fieldset className="block-editor-responsive-controls">
-					<legend className="block-editor-responsive-controls__label">{ __( 'Margin' ) }</legend>
-
-					{ ! attributes.responsiveMargin && (
-						<DimensionControl
-							label={ __( 'All' ) }
-							property="margin"
-							onReset={ partialRight( resetSpacingDimension, 'marginSize' ) }
-							onSpacingChange={ partialRight( updateSpacing, 'marginSize' ) }
-							currentSize={ attributes.marginSize }
-							device="all"
-							deviceIcon="desktop"
-						/>
-					) }
-
-					{ attributes.responsiveMargin && (
-						<Fragment>
-							<DimensionControl
-								label={ __( 'Desktop' ) }
-								onReset={ partialRight( resetSpacingDimension, 'marginSize' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'marginSize' ) }
-								currentSize={ attributes.marginSize }
-								device="desktop"
-							/>
-
-							<DimensionControl
-								label={ __( 'Tablet' ) }
-								onReset={ partialRight( resetSpacingDimension, 'marginSize', 'Tablet' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'marginSize', 'Tablet' ) }
-								currentSize={ attributes.marginSizeTablet }
-								device="tablet"
-								deviceIcon="tablet"
-							/>
-
-							<DimensionControl
-								label={ __( 'Mobile' ) }
-								onReset={ partialRight( resetSpacingDimension, 'marginSize', 'Mobile' ) }
-								onSpacingChange={ partialRight( updateSpacing, 'marginSize', 'Mobile' ) }
-								currentSize={ attributes.marginSizeMobile }
-								device="mobile"
-								deviceIcon="smartphone"
-							/>
-
-						</Fragment>
-					) }
-
-					<ToggleControl
-						label={ __( 'Manually adjust margin based on screensize.' ) }
-						checked={ attributes.responsiveMargin }
-						onChange={ () => onToggleResponsiveSpacing( 'margin' ) }
-					/>
-				</fieldset>
-
+				/>
 			</PanelBody>
 		</InspectorControls>
 	);

From 9923154a5f5faf5ed0e464d869d56dfe434ca984 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 1 Nov 2019 11:54:34 +0000
Subject: [PATCH 23/43] Removes Dimension Control docs

This was automated.
---
 packages/block-editor/README.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index fe3bc5be85a1d6..1cbc41293ca13b 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -231,10 +231,6 @@ _Returns_
 
 Undocumented declaration.
 
-<a name="DimensionControl" href="#DimensionControl">#</a> **DimensionControl**
-
-Undocumented declaration.
-
 <a name="FontSizePicker" href="#FontSizePicker">#</a> **FontSizePicker**
 
 Undocumented declaration.

From cc3277b244c6cbac84eca6c0e7bec6ef15138c3e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 1 Nov 2019 16:15:37 +0000
Subject: [PATCH 24/43] Updates to handle resetting values when toggling
 responsive mode.

---
 .../block-library/src/group/attributes.js     |  6 ++++
 packages/block-library/src/group/inspector.js | 30 +++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/group/attributes.js b/packages/block-library/src/group/attributes.js
index dab0699c0571d5..09f1385c272bf7 100644
--- a/packages/block-library/src/group/attributes.js
+++ b/packages/block-library/src/group/attributes.js
@@ -18,12 +18,15 @@ const DimensionsAttributes = {
 	},
 	paddingSize: {
 		type: 'string',
+		default: '',
 	},
 	paddingSizeSmall: {
 		type: 'string',
+		default: '',
 	},
 	paddingSizeMedium: {
 		type: 'string',
+		default: '',
 	},
 	marginUnit: {
 		type: 'string',
@@ -31,12 +34,15 @@ const DimensionsAttributes = {
 	},
 	marginSize: {
 		type: 'string',
+		default: '',
 	},
 	marginSizeMedium: {
 		type: 'string',
+		default: '',
 	},
 	marginSizeSmall: {
 		type: 'string',
+		default: '',
 	},
 };
 
diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index 7705162c1490f9..28cfdfecca78c8 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -36,17 +36,21 @@ export default function Inspector( props ) {
 	 * @param  {string} viewport    the viewport which this dimension applies to (eg: `mobile`, `tablet`)
 	 * @return {void}
 	 */
-	const updateSpacing = ( value, dimensionAttr, viewport = '' ) => {
+	const updateSpacing = ( value, dimension, viewport = '' ) => {
+		const dimensionAttr = `${ dimension }Size`;
+
 		// If there is a viewport then reset the default attribute
 		// and update the responsive setting. Otherwise, set the
 		// default value and reset ALL the responsive settings
 		if ( viewport.length ) {
 			setAttributes( {
+				[ `responsive${ upperFirst( dimension ) }` ]: true,
 				[ dimensionAttr ]: '',
 				[ `${ dimensionAttr }${ viewport }` ]: value,
 			} );
 		} else {
 			setAttributes( {
+				[ `responsive${ upperFirst( dimension ) }` ]: false,
 				[ dimensionAttr ]: value,
 				[ `${ dimensionAttr }Small` ]: '',
 				[ `${ dimensionAttr }Medium` ]: '',
@@ -75,12 +79,26 @@ export default function Inspector( props ) {
 					property={ 'padding' }
 					isResponsive={ attributes.responsivePadding }
 					onIsResponsiveChange={ () => {
-						setAttributes( {
-							responsivePadding: ! attributes.responsivePadding,
-						} );
+						// Toggling the responsive mode
+						// should cause the old settings
+						// to be reset to avoid them
+						// being persisted
+						if ( attributes.responsivePadding ) {
+							setAttributes( {
+								responsivePadding: false,
+								paddingSizeSmall: '',
+								paddingSizeMedium: '',
+								paddingSizeLarge: '',
+							} );
+						} else {
+							setAttributes( {
+								responsivePadding: true,
+								paddingSize: '',
+							} );
+						}
 					} }
 					renderDefaultControl={ ( labelComponent, viewport ) => {
-						const dimensionAttr = 'paddingSize';
+						const dimension = 'padding';
 						const viewportSize = viewport.id !== 'all' ? upperFirst( viewport.id ) : '';
 						const value = attributes[ `paddingSize${ viewportSize }` ];
 
@@ -88,7 +106,7 @@ export default function Inspector( props ) {
 							<DimensionControl
 								label={ labelComponent }
 								value={ value }
-								onChange={ partialRight( updateSpacing, dimensionAttr, viewportSize ) }
+								onChange={ partialRight( updateSpacing, dimension, viewportSize ) }
 							/>
 						);
 					} }

From ad7325bd50610b66b34a56b1181bdbe166b6c855 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 1 Nov 2019 16:42:44 +0000
Subject: [PATCH 25/43] Adds icons to padding controls

---
 packages/block-library/src/group/inspector.js        | 9 +++++++++
 packages/components/src/dimension-control/style.scss | 1 +
 2 files changed, 10 insertions(+)

diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index 28cfdfecca78c8..f94f84e977202c 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -27,6 +27,12 @@ export default function Inspector( props ) {
 		setAttributes,
 	} = props;
 
+	const viewportIconsMap = {
+		small: 'smartphone',
+		medium: 'tablet',
+		large: 'desktop',
+	};
+
 	/**
 	 * Updates the spacing attribute for a given dimension
 	 * (and optionally a given viewport)
@@ -75,6 +81,7 @@ export default function Inspector( props ) {
 			<PanelBody title={ __( 'Spacing' ) }>
 
 				<ResponsiveBlockControl
+					className="wp-block-group__dimension-control wp-block-group__dimension-control--padding"
 					title={ __( 'Padding' ) }
 					property={ 'padding' }
 					isResponsive={ attributes.responsivePadding }
@@ -101,10 +108,12 @@ export default function Inspector( props ) {
 						const dimension = 'padding';
 						const viewportSize = viewport.id !== 'all' ? upperFirst( viewport.id ) : '';
 						const value = attributes[ `paddingSize${ viewportSize }` ];
+						const icon = viewportIconsMap[ viewport.id ];
 
 						return (
 							<DimensionControl
 								label={ labelComponent }
+								icon={ icon }
 								value={ value }
 								onChange={ partialRight( updateSpacing, dimension, viewportSize ) }
 							/>
diff --git a/packages/components/src/dimension-control/style.scss b/packages/components/src/dimension-control/style.scss
index 7f1481747dfe1a..621163640c1623 100644
--- a/packages/components/src/dimension-control/style.scss
+++ b/packages/components/src/dimension-control/style.scss
@@ -13,6 +13,7 @@
 
 		.dashicon {
 			margin-right: 0.5em;
+			flex-shrink: 0;
 		}
 	}
 

From 325c45acbd162b42e5cc4a7a629448a1438e261d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 1 Nov 2019 16:53:32 +0000
Subject: [PATCH 26/43] =?UTF-8?q?Remove=20=E2=80=9Cscreens=E2=80=9D=20from?=
 =?UTF-8?q?=20viewport=20labels=20as=20already=20in=20aria=20description?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/responsive-block-control/index.js        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
index 8a3d3eef08145e..7f5001b586dcfc 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -33,15 +33,15 @@ function ResponsiveBlockControl( props ) {
 		viewports = [
 			{
 				id: 'small',
-				label: __( 'Small screens' ),
+				label: __( 'Small' ),
 			},
 			{
 				id: 'medium',
-				label: __( 'Medium screens' ),
+				label: __( 'Medium' ),
 			},
 			{
 				id: 'large',
-				label: __( 'Large screens' ),
+				label: __( 'Large' ),
 			},
 		],
 	} = props;

From 08d1dee4a1e60786ef72de16a640a9c87caef764 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 1 Nov 2019 16:53:59 +0000
Subject: [PATCH 27/43] Fix to ensure labels and fields align right hand edges
 correctly

---
 packages/components/src/dimension-control/style.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/components/src/dimension-control/style.scss b/packages/components/src/dimension-control/style.scss
index 621163640c1623..04f79c4482d917 100644
--- a/packages/components/src/dimension-control/style.scss
+++ b/packages/components/src/dimension-control/style.scss
@@ -10,14 +10,11 @@
 		align-items: center;
 		margin-right: 1em;
 		margin-bottom: 0;
+		width: 10em; // ensure labels and fields align right
 
 		.dashicon {
 			margin-right: 0.5em;
 			flex-shrink: 0;
 		}
 	}
-
-	&.is-manual .components-base-control__label {
-		width: 10em;
-	}
 }

From 3f9579afe50ad60b0c6ed6c9985922f694d2f3d5 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 6 Jan 2020 11:22:24 +0000
Subject: [PATCH 28/43] Removes responsive setup

---
 .../block-library/src/group/attributes.js     | 28 +------
 packages/block-library/src/group/inspector.js | 80 +++----------------
 2 files changed, 12 insertions(+), 96 deletions(-)

diff --git a/packages/block-library/src/group/attributes.js b/packages/block-library/src/group/attributes.js
index 09f1385c272bf7..642677942311b5 100644
--- a/packages/block-library/src/group/attributes.js
+++ b/packages/block-library/src/group/attributes.js
@@ -3,15 +3,7 @@
  *
  * @type {Object}
  */
-const DimensionsAttributes = {
-	responsivePadding: {
-		type: 'boolean',
-		default: false,
-	},
-	responsiveMargin: {
-		type: 'boolean',
-		default: false,
-	},
+const attributes = {
 	paddingUnit: {
 		type: 'string',
 		default: 'px',
@@ -20,14 +12,6 @@ const DimensionsAttributes = {
 		type: 'string',
 		default: '',
 	},
-	paddingSizeSmall: {
-		type: 'string',
-		default: '',
-	},
-	paddingSizeMedium: {
-		type: 'string',
-		default: '',
-	},
 	marginUnit: {
 		type: 'string',
 		default: 'px',
@@ -36,14 +20,6 @@ const DimensionsAttributes = {
 		type: 'string',
 		default: '',
 	},
-	marginSizeMedium: {
-		type: 'string',
-		default: '',
-	},
-	marginSizeSmall: {
-		type: 'string',
-		default: '',
-	},
 };
 
-export default DimensionsAttributes;
+export default attributes;
diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index f94f84e977202c..db49fc35f97c31 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { partialRight, upperFirst } from 'lodash';
+import { partialRight } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -9,7 +9,6 @@ import { partialRight, upperFirst } from 'lodash';
 import {
 	InspectorControls,
 	PanelColorSettings,
-	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
 } from '@wordpress/block-editor';
 
 import { __ } from '@wordpress/i18n';
@@ -27,42 +26,18 @@ export default function Inspector( props ) {
 		setAttributes,
 	} = props;
 
-	const viewportIconsMap = {
-		small: 'smartphone',
-		medium: 'tablet',
-		large: 'desktop',
-	};
-
 	/**
 	 * Updates the spacing attribute for a given dimension
 	 * (and optionally a given viewport)
   *
 	 * @param  {string} size      a slug representing a dimension size (eg: `medium`)
 	 * @param  {string} dimensionAttr the dimension attribute for a property (eg: `paddingSize`)
-	 * @param  {string} viewport    the viewport which this dimension applies to (eg: `mobile`, `tablet`)
 	 * @return {void}
 	 */
-	const updateSpacing = ( value, dimension, viewport = '' ) => {
-		const dimensionAttr = `${ dimension }Size`;
-
-		// If there is a viewport then reset the default attribute
-		// and update the responsive setting. Otherwise, set the
-		// default value and reset ALL the responsive settings
-		if ( viewport.length ) {
-			setAttributes( {
-				[ `responsive${ upperFirst( dimension ) }` ]: true,
-				[ dimensionAttr ]: '',
-				[ `${ dimensionAttr }${ viewport }` ]: value,
-			} );
-		} else {
-			setAttributes( {
-				[ `responsive${ upperFirst( dimension ) }` ]: false,
-				[ dimensionAttr ]: value,
-				[ `${ dimensionAttr }Small` ]: '',
-				[ `${ dimensionAttr }Medium` ]: '',
-				[ `${ dimensionAttr }Large` ]: '',
-			} );
-		}
+	const updateSpacing = ( size, dimensionAttr ) => {
+		setAttributes( {
+			[ dimensionAttr ]: size,
+		} );
 	};
 
 	return (
@@ -80,47 +55,12 @@ export default function Inspector( props ) {
 
 			<PanelBody title={ __( 'Spacing' ) }>
 
-				<ResponsiveBlockControl
-					className="wp-block-group__dimension-control wp-block-group__dimension-control--padding"
-					title={ __( 'Padding' ) }
-					property={ 'padding' }
-					isResponsive={ attributes.responsivePadding }
-					onIsResponsiveChange={ () => {
-						// Toggling the responsive mode
-						// should cause the old settings
-						// to be reset to avoid them
-						// being persisted
-						if ( attributes.responsivePadding ) {
-							setAttributes( {
-								responsivePadding: false,
-								paddingSizeSmall: '',
-								paddingSizeMedium: '',
-								paddingSizeLarge: '',
-							} );
-						} else {
-							setAttributes( {
-								responsivePadding: true,
-								paddingSize: '',
-							} );
-						}
-					} }
-					renderDefaultControl={ ( labelComponent, viewport ) => {
-						const dimension = 'padding';
-						const viewportSize = viewport.id !== 'all' ? upperFirst( viewport.id ) : '';
-						const value = attributes[ `paddingSize${ viewportSize }` ];
-						const icon = viewportIconsMap[ viewport.id ];
-
-						return (
-							<DimensionControl
-								label={ labelComponent }
-								icon={ icon }
-								value={ value }
-								onChange={ partialRight( updateSpacing, dimension, viewportSize ) }
-							/>
-						);
-					} }
-
+				<DimensionControl
+					label={ 'Padding' }
+					value={ attributes.paddingSize }
+					onChange={ partialRight( updateSpacing, 'paddingSize' ) }
 				/>
+
 			</PanelBody>
 		</InspectorControls>
 	);

From 4095617ac2569f1b5b6ee394f9dd9784e0b84733 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 6 Jan 2020 11:48:56 +0000
Subject: [PATCH 29/43] Remove all responsive CSS styles

---
 packages/block-library/src/group/theme.scss | 187 +++-----------------
 1 file changed, 25 insertions(+), 162 deletions(-)

diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss
index 23c007600e410f..f595aef062344a 100644
--- a/packages/block-library/src/group/theme.scss
+++ b/packages/block-library/src/group/theme.scss
@@ -7,180 +7,43 @@
 		margin-bottom: 0;
 	}
 
-	&:not(.has-responsive-padding) {
-
-		&.padding-none {
-			padding: 0;
-		}
-
-		&.padding-small {
-			padding: $block-padding;
-		}
-
-		&.padding-medium {
-			padding: $block-padding*2;
-		}
-
-		&.padding-large {
-			padding: $block-padding*3;
-		}
-
-		&.padding-xlarge {
-			padding: $block-padding*4;
-		}
+	&.padding-none {
+		padding: 0;
 	}
 
-	&:not(.has-responsive-margin) {
-		&.margin-none {
-			margin: 0;
-		}
-
-		&.margin-small {
-			margin: $block-padding;
-		}
-
-		&.margin-medium {
-			margin: $block-padding*2;
-		}
-
-		&.margin-large {
-			margin: $block-padding*3;
-		}
-
-		&.margin-xlarge {
-			margin: $block-padding*4;
-		}
+	&.padding-small {
+		padding: $block-padding;
 	}
-}
 
-@include break-mobile() {
-	.wp-block-group {
-		&.padding-mobile-none {
-			padding: 0;
-		}
-
-		&.padding-mobile-small {
-			padding: $block-padding;
-		}
-
-		&.padding-mobile-medium {
-			padding: $block-padding*2;
-		}
-
-		&.padding-mobile-large {
-			padding: $block-padding*3;
-		}
-
-		&.padding-mobile-xlarge {
-			padding: $block-padding*4;
-		}
-
-		&.margin-mobile-none {
-			margin: 0;
-		}
-
-		&.margin-mobile-small {
-			margin: $block-padding;
-		}
-
-		&.margin-mobile-medium {
-			margin: $block-padding*2;
-		}
-
-		&.margin-mobile-large {
-			margin: $block-padding*3;
-		}
-
-		&.margin-mobile-xlarge {
-			margin: $block-padding*4;
-		}
+	&.padding-medium {
+		padding: $block-padding*2;
 	}
-}
 
-@include break-medium() {
-	.wp-block-group {
-		&.padding-tablet-none {
-			padding: 0;
-		}
-
-		&.padding-tablet-small {
-			padding: $block-padding;
-		}
-
-		&.padding-tablet-medium {
-			padding: $block-padding*2;
-		}
-
-		&.padding-tablet-large {
-			padding: $block-padding*3;
-		}
-
-		&.padding-tablet-xlarge {
-			padding: $block-padding*4;
-		}
-
-		&.margin-tablet-none {
-			margin: 0;
-		}
-
-		&.margin-tablet-small {
-			margin: $block-padding;
-		}
-
-		&.margin-tablet-medium {
-			margin: $block-padding*2;
-		}
-
-		&.margin-tablet-large {
-			margin: $block-padding*3;
-		}
-
-		&.margin-tablet-xlarge {
-			margin: $block-padding*4;
-		}
+	&.padding-large {
+		padding: $block-padding*3;
 	}
-}
 
-@include break-large() {
-	.wp-block-group {
-		&.padding-none {
-			padding: 0;
-		}
-
-		&.padding-small {
-			padding: $block-padding;
-		}
-
-		&.padding-medium {
-			padding: $block-padding*2;
-		}
-
-		&.padding-large {
-			padding: $block-padding*3;
-		}
-
-		&.padding-xlarge {
-			padding: $block-padding*4;
-		}
+	&.padding-xlarge {
+		padding: $block-padding*4;
+	}
 
-		&.margin-none {
-			margin: 0;
-		}
+	&.margin-none {
+		margin: 0;
+	}
 
-		&.margin-small {
-			margin: $block-padding;
-		}
+	&.margin-small {
+		margin: $block-padding;
+	}
 
-		&.margin-medium {
-			margin: $block-padding*2;
-		}
+	&.margin-medium {
+		margin: $block-padding*2;
+	}
 
-		&.margin-large {
-			margin: $block-padding*3;
-		}
+	&.margin-large {
+		margin: $block-padding*3;
+	}
 
-		&.margin-xlarge {
-			margin: $block-padding*4;
-		}
+	&.margin-xlarge {
+		margin: $block-padding*4;
 	}
 }

From e200219106d0c7dd5f39fe9d05a26a55202d1c65 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 6 Jan 2020 12:23:04 +0000
Subject: [PATCH 30/43] Add margin and i18n

---
 packages/block-library/src/group/inspector.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index db49fc35f97c31..3e30d569a30dfc 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -56,11 +56,17 @@ export default function Inspector( props ) {
 			<PanelBody title={ __( 'Spacing' ) }>
 
 				<DimensionControl
-					label={ 'Padding' }
+					label={ __( 'Padding' ) }
 					value={ attributes.paddingSize }
 					onChange={ partialRight( updateSpacing, 'paddingSize' ) }
 				/>
 
+				<DimensionControl
+					label={ __( 'Margin' ) }
+					value={ attributes.marginSize }
+					onChange={ partialRight( updateSpacing, 'marginSize' ) }
+				/>
+
 			</PanelBody>
 		</InspectorControls>
 	);

From 44575eca461d62decc965c51120e5f1925202ddd Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 6 Jan 2020 14:16:47 +0000
Subject: [PATCH 31/43] Adds help text to Dimension Control block

---
 packages/components/src/dimension-control/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/dimension-control/style.scss b/packages/components/src/dimension-control/style.scss
index 04f79c4482d917..4d3b2ea6bd89dc 100644
--- a/packages/components/src/dimension-control/style.scss
+++ b/packages/components/src/dimension-control/style.scss
@@ -17,4 +17,8 @@
 			flex-shrink: 0;
 		}
 	}
+
+	.components-base-control__help {
+		margin-top: -4px;
+	}
 }

From 223ee9a13dd7ddefac59ccdaf4acf610592b07fc Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 6 Jan 2020 14:17:14 +0000
Subject: [PATCH 32/43] Adds help notice to Margin controls.

---
 packages/block-library/src/group/inspector.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index 3e30d569a30dfc..cf10faa153dfe3 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -65,6 +65,7 @@ export default function Inspector( props ) {
 					label={ __( 'Margin' ) }
 					value={ attributes.marginSize }
 					onChange={ partialRight( updateSpacing, 'marginSize' ) }
+					help={ __( 'Controls horizontal margin only. Please use the Spacer block for vertical spacing.' ) }
 				/>
 
 			</PanelBody>

From fd3741f45056c16ad825bbac7287a1d36498e90e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 6 Jan 2020 14:17:34 +0000
Subject: [PATCH 33/43] Update snapshots.

---
 .../dimension-control/test/__snapshots__/index.test.js.snap   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
index 45b7a137fb9c86..161bd6941fabe5 100644
--- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -3,6 +3,7 @@
 exports[`DimensionControl rendering renders with custom sizes 1`] = `
 <SelectControl
   className="block-editor-dimension-control"
+  help=""
   hideLabelFromVision={false}
   label={
     <React.Fragment>
@@ -36,6 +37,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 exports[`DimensionControl rendering renders with defaults 1`] = `
 <SelectControl
   className="block-editor-dimension-control"
+  help=""
   hideLabelFromVision={false}
   label={
     <React.Fragment>
@@ -77,6 +79,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 exports[`DimensionControl rendering renders with icon and custom icon label 1`] = `
 <SelectControl
   className="block-editor-dimension-control"
+  help=""
   hideLabelFromVision={false}
   label={
     <React.Fragment>
@@ -130,6 +133,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 exports[`DimensionControl rendering renders with icon and default icon label 1`] = `
 <SelectControl
   className="block-editor-dimension-control"
+  help=""
   hideLabelFromVision={false}
   label={
     <React.Fragment>

From 3c9645833b857e3597853daecdb1b670e53eebc8 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 6 Jan 2020 17:17:26 +0000
Subject: [PATCH 34/43] Updates to coolocate all attributes in block.json

---
 .../block-library/src/group/attributes.js     | 25 -------------------
 packages/block-library/src/group/index.js     |  3 +--
 2 files changed, 1 insertion(+), 27 deletions(-)
 delete mode 100644 packages/block-library/src/group/attributes.js

diff --git a/packages/block-library/src/group/attributes.js b/packages/block-library/src/group/attributes.js
deleted file mode 100644
index 642677942311b5..00000000000000
--- a/packages/block-library/src/group/attributes.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Set the attributes for the Dimension Control
- *
- * @type {Object}
- */
-const attributes = {
-	paddingUnit: {
-		type: 'string',
-		default: 'px',
-	},
-	paddingSize: {
-		type: 'string',
-		default: '',
-	},
-	marginUnit: {
-		type: 'string',
-		default: 'px',
-	},
-	marginSize: {
-		type: 'string',
-		default: '',
-	},
-};
-
-export default attributes;
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index 32b7a26339641d..bcfd476a066acb 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -12,7 +12,6 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
-import attributes from './attributes';
 
 const { name } = metadata;
 
@@ -21,7 +20,7 @@ export { metadata, name };
 export const settings = {
 	title: __( 'Group' ),
 	icon,
-	attributes,
+
 	description: __( 'A block that groups other blocks.' ),
 	keywords: [
 		__( 'container' ),

From 9ad9c742e3519110feebdf06b2f6ba014adb8b18 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 6 Jan 2020 17:23:07 +0000
Subject: [PATCH 35/43] Update full content integration tests

---
 packages/e2e-tests/fixtures/blocks/core__group.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/e2e-tests/fixtures/blocks/core__group.json b/packages/e2e-tests/fixtures/blocks/core__group.json
index 71d94f926dcccf..f2f1df46cc1a15 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group.json
@@ -5,7 +5,11 @@
         "isValid": true,
         "attributes": {
             "backgroundColor": "secondary",
-            "align": "full"
+            "align": "full",
+            "marginSize": "",
+            "marginUnit": "px",
+            "paddingSize": "",
+            "paddingUnit": "px"
         },
         "innerBlocks": [
             {

From e849702a24e2a2a2ffae2d9c445f24a337ba825e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Feb 2020 14:33:37 +0000
Subject: [PATCH 36/43] Remove unwanted help text

Implements feedback from https://github.com/WordPress/gutenberg/pull/16730#issuecomment-571835512
---
 packages/block-library/src/group/inspector.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
index cf10faa153dfe3..3e30d569a30dfc 100644
--- a/packages/block-library/src/group/inspector.js
+++ b/packages/block-library/src/group/inspector.js
@@ -65,7 +65,6 @@ export default function Inspector( props ) {
 					label={ __( 'Margin' ) }
 					value={ attributes.marginSize }
 					onChange={ partialRight( updateSpacing, 'marginSize' ) }
-					help={ __( 'Controls horizontal margin only. Please use the Spacer block for vertical spacing.' ) }
 				/>
 
 			</PanelBody>

From af8833725b48b736c992f4ca15c7c81ae0186e81 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Feb 2020 15:05:19 +0000
Subject: [PATCH 37/43] Restore enhancements lost during rebase

---
 packages/block-library/src/group/block.json | 16 +++++
 packages/block-library/src/group/edit.js    | 65 ++++++++++++++++++++-
 2 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index 8883720bbc2aab..521a8353948789 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -13,6 +13,22 @@
 		},
 		"customTextColor": {
 			"type": "string"
+		},
+		"paddingUnit": {
+			"type": "string",
+			"default": "px"
+		},
+		"paddingSize": {
+			"type": "string",
+			"default": ""
+		},
+		"marginUnit": {
+			"type": "string",
+			"default": "px"
+		},
+		"marginSize": {
+			"type": "string",
+			"default": ""
 		}
 	}
 }
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 80f496967f599f..e2ef5032a09975 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -1,12 +1,29 @@
+/**
+ * External dependencies
+ */
+import { partialRight } from 'lodash';
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { InnerBlocks, __experimentalUseColors } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	__experimentalUseColors,
+	InspectorControls,
+} from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
 
-function GroupEdit( { hasInnerBlocks, className } ) {
+import {
+	PanelBody,
+	__experimentalDimensionControl as DimensionControl,
+} from '@wordpress/components';
+
+import { __ } from '@wordpress/i18n';
+
+function GroupEdit( { hasInnerBlocks, className, attributes, setAttributes } ) {
 	const ref = useRef();
 	const {
 		TextColor,
@@ -23,12 +40,54 @@ function GroupEdit( { hasInnerBlocks, className } ) {
 		}
 	);
 
+	/**
+	 * Updates the spacing attribute for a given dimension
+	 * (and optionally a given viewport)
+	 *
+	 * @param  {string} size      a slug representing a dimension size (eg: `medium`)
+	 * @param  {string} dimensionAttr the dimension attribute for a property (eg: `paddingSize`)
+	 * @return {void}
+	 */
+	const updateSpacing = ( size, dimensionAttr ) => {
+		setAttributes( {
+			[ dimensionAttr ]: size,
+		} );
+	};
+
+	const hasPadding = !! attributes.paddingSize;
+	const hasMargin = !! attributes.marginSize;
+
+	const classes = classnames( className, {
+		'has-padding': hasPadding,
+		'has-margin': hasMargin,
+		[ `padding-${ attributes.paddingSize }` ]: hasPadding,
+		[ `margin-${ attributes.marginSize }` ]: hasMargin,
+	} );
+
 	return (
 		<>
 			{ InspectorControlsColorPanel }
+			<InspectorControls>
+				<PanelBody title={ __( 'Spacing' ) }>
+					<DimensionControl
+						label={ __( 'Padding' ) }
+						value={ attributes.paddingSize }
+						onChange={ partialRight(
+							updateSpacing,
+							'paddingSize'
+						) }
+					/>
+
+					<DimensionControl
+						label={ __( 'Margin' ) }
+						value={ attributes.marginSize }
+						onChange={ partialRight( updateSpacing, 'marginSize' ) }
+					/>
+				</PanelBody>
+			</InspectorControls>
 			<BackgroundColor>
 				<TextColor>
-					<div className={ className } ref={ ref }>
+					<div className={ classes } ref={ ref }>
 						<div className="wp-block-group__inner-container">
 							<InnerBlocks
 								renderAppender={

From 3f516ae10414eb49897b1676e2a3b14062aeccac Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Feb 2020 15:08:06 +0000
Subject: [PATCH 38/43] Revert unwanted change to Responsive Controls

---
 .../src/components/responsive-block-control/index.js        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
index 7f5001b586dcfc..8a3d3eef08145e 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -33,15 +33,15 @@ function ResponsiveBlockControl( props ) {
 		viewports = [
 			{
 				id: 'small',
-				label: __( 'Small' ),
+				label: __( 'Small screens' ),
 			},
 			{
 				id: 'medium',
-				label: __( 'Medium' ),
+				label: __( 'Medium screens' ),
 			},
 			{
 				id: 'large',
-				label: __( 'Large' ),
+				label: __( 'Large screens' ),
 			},
 		],
 	} = props;

From 76783792413f188bed6a48bf6f0264a68095f00b Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Feb 2020 15:09:53 +0000
Subject: [PATCH 39/43] Remove random new line

---
 packages/block-library/src/group/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index bcfd476a066acb..225e6e2ed03496 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -20,7 +20,6 @@ export { metadata, name };
 export const settings = {
 	title: __( 'Group' ),
 	icon,
-
 	description: __( 'A block that groups other blocks.' ),
 	keywords: [
 		__( 'container' ),

From a9bed02eaeb63488e6177f98fa59502905d81450 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Feb 2020 15:10:58 +0000
Subject: [PATCH 40/43] Remove deprecated file reintroduced via rebase

---
 packages/block-library/src/group/inspector.js | 73 -------------------
 1 file changed, 73 deletions(-)
 delete mode 100644 packages/block-library/src/group/inspector.js

diff --git a/packages/block-library/src/group/inspector.js b/packages/block-library/src/group/inspector.js
deleted file mode 100644
index 3e30d569a30dfc..00000000000000
--- a/packages/block-library/src/group/inspector.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import { partialRight } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	InspectorControls,
-	PanelColorSettings,
-} from '@wordpress/block-editor';
-
-import { __ } from '@wordpress/i18n';
-
-import {
-	PanelBody,
-	__experimentalDimensionControl as DimensionControl,
-} from '@wordpress/components';
-
-export default function Inspector( props ) {
-	const {
-		setBackgroundColor,
-		backgroundColor,
-		attributes,
-		setAttributes,
-	} = props;
-
-	/**
-	 * Updates the spacing attribute for a given dimension
-	 * (and optionally a given viewport)
-  *
-	 * @param  {string} size      a slug representing a dimension size (eg: `medium`)
-	 * @param  {string} dimensionAttr the dimension attribute for a property (eg: `paddingSize`)
-	 * @return {void}
-	 */
-	const updateSpacing = ( size, dimensionAttr ) => {
-		setAttributes( {
-			[ dimensionAttr ]: size,
-		} );
-	};
-
-	return (
-		<InspectorControls>
-			<PanelColorSettings
-				title={ __( 'Color Settings' ) }
-				colorSettings={ [
-					{
-						value: backgroundColor.color,
-						onChange: setBackgroundColor,
-						label: __( 'Background Color' ),
-					},
-				] }
-			/>
-
-			<PanelBody title={ __( 'Spacing' ) }>
-
-				<DimensionControl
-					label={ __( 'Padding' ) }
-					value={ attributes.paddingSize }
-					onChange={ partialRight( updateSpacing, 'paddingSize' ) }
-				/>
-
-				<DimensionControl
-					label={ __( 'Margin' ) }
-					value={ attributes.marginSize }
-					onChange={ partialRight( updateSpacing, 'marginSize' ) }
-				/>
-
-			</PanelBody>
-		</InspectorControls>
-	);
-}

From 0a6eec90bbb05c502eb7657fcd73fe0290e14c31 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Feb 2020 15:20:21 +0000
Subject: [PATCH 41/43] Adds help text to controls

Addresses https://github.com/WordPress/gutenberg/pull/16730#issuecomment-572089124
---
 packages/block-library/src/group/edit.js             | 6 ++++++
 packages/components/src/dimension-control/index.js   | 2 ++
 packages/components/src/dimension-control/style.scss | 5 +++++
 3 files changed, 13 insertions(+)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index e2ef5032a09975..6b706f64625851 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -76,12 +76,18 @@ function GroupEdit( { hasInnerBlocks, className, attributes, setAttributes } ) {
 							updateSpacing,
 							'paddingSize'
 						) }
+						help={ __(
+							'Adjust spacing around content within the block.'
+						) }
 					/>
 
 					<DimensionControl
 						label={ __( 'Margin' ) }
 						value={ attributes.marginSize }
 						onChange={ partialRight( updateSpacing, 'marginSize' ) }
+						help={ __(
+							'Adjust spacing on the sides of the block.'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>
diff --git a/packages/components/src/dimension-control/index.js b/packages/components/src/dimension-control/index.js
index 0ed09d86014f52..8a52cabacdf2a2 100644
--- a/packages/components/src/dimension-control/index.js
+++ b/packages/components/src/dimension-control/index.js
@@ -28,6 +28,7 @@ export function DimensionControl( props ) {
 		icon,
 		onChange,
 		className = '',
+		help = '',
 	} = props;
 
 	const onChangeSpacingSize = ( val ) => {
@@ -72,6 +73,7 @@ export function DimensionControl( props ) {
 			value={ value }
 			onChange={ onChangeSpacingSize }
 			options={ formatSizesAsOptions( sizes ) }
+			help={ help }
 		/>
 	);
 }
diff --git a/packages/components/src/dimension-control/style.scss b/packages/components/src/dimension-control/style.scss
index 4d3b2ea6bd89dc..302941fb4dc4a0 100644
--- a/packages/components/src/dimension-control/style.scss
+++ b/packages/components/src/dimension-control/style.scss
@@ -19,6 +19,11 @@
 	}
 
 	.components-base-control__help {
+		display: flex;
+		align-items: center;
 		margin-top: -4px;
+		margin-left: auto;
+		margin-bottom: 0;
+		padding-left: 7em;
 	}
 }

From cec67bf5def889e41e9ee8dde6648d7b7cf72997 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Feb 2020 15:36:59 +0000
Subject: [PATCH 42/43] Add padding and margin to saved Block for use on
 frontend

---
 packages/block-library/src/group/save.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
index 6d248efbfc2579..83ecc2996f8fa8 100644
--- a/packages/block-library/src/group/save.js
+++ b/packages/block-library/src/group/save.js
@@ -16,6 +16,9 @@ export default function save( { attributes } ) {
 		customTextColor,
 	} = attributes;
 
+	const hasPadding = !! attributes.paddingSize;
+	const hasMargin = !! attributes.marginSize;
+
 	const backgroundClass = getColorClassName(
 		'background-color',
 		backgroundColor
@@ -24,6 +27,10 @@ export default function save( { attributes } ) {
 	const className = classnames( backgroundClass, textClass, {
 		'has-text-color': textColor || customTextColor,
 		'has-background': backgroundColor || customBackgroundColor,
+		'has-padding': hasPadding,
+		'has-margin': hasMargin,
+		[ `padding-${ attributes.paddingSize }` ]: hasPadding,
+		[ `margin-${ attributes.marginSize }` ]: hasMargin,
 	} );
 
 	const styles = {

From f6ec10cb6c8ea23c6e27d7794e7ce5a424c42a84 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 24 Feb 2020 15:37:35 +0000
Subject: [PATCH 43/43] Add subtle animation to margin/padding within Editor
 only

---
 packages/block-library/src/group/theme.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss
index f595aef062344a..f1388bb3af1a55 100644
--- a/packages/block-library/src/group/theme.scss
+++ b/packages/block-library/src/group/theme.scss
@@ -6,6 +6,17 @@
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+}
+
+.wp-block-group {
+
+	.editor-styles-wrapper & {
+		// Adds animation to improve abilty for users to perceive
+		// the change occuring within the Editor
+		@include reduce-motion("transition");
+		transition: 0.2s ease-out;
+		transition-property: margin, padding;
+	}
 
 	&.padding-none {
 		padding: 0;