From e3f7a7fd8343a9051f99219a15566bab04e12daa Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Fri, 17 Jan 2020 16:48:42 -0500
Subject: [PATCH 1/2] Block Editor: Update BEM syntax to CSS modifer guidelines

---
 .../src/components/link-control/index.js      |  2 +-
 .../responsive-block-control/index.js         |  4 ++--
 .../test/__snapshots__/index.js.snap          |  2 +-
 .../responsive-block-control/test/index.js    | 20 +++++++++----------
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 018d8386c153e..0dc0f55a82591 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -354,7 +354,7 @@ function LinkControl( {
 						<Button
 							isSecondary
 							onClick={ () => setIsEditingLink( true ) }
-							className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit"
+							className="block-editor-link-control__search-item-action"
 						>
 							{ __( 'Edit' ) }
 						</Button>
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 07b6a6e5fa874..821f27b309d70 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -95,14 +95,14 @@ function ResponsiveBlockControl( props ) {
 				/>
 
 				{ ! isResponsive && (
-					<div className="block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default">
+					<div className="block-editor-responsive-block-control__group">
 						{ defaultControl }
 					</div>
 				) }
 
 				{ isResponsive && (
 					<div
-						className="block-editor-responsive-block-control__group block-editor-responsive-block-control__group--responsive"
+						className="block-editor-responsive-block-control__group is-responsive"
 						hidden={ ! isResponsive }
 					>
 						{ renderResponsiveControls
diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
index 27b9533f39730..50527efe61021 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
diff --git a/packages/block-editor/src/components/responsive-block-control/test/index.js b/packages/block-editor/src/components/responsive-block-control/test/index.js
index 56045c7341d42..cc01fcd0533ce 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -101,11 +101,11 @@ describe( 'Basic rendering', () => {
 			.checked;
 
 		const defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--default'
+			'.block-editor-responsive-block-control__group:not(.is-responsive)'
 		);
 
 		const responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--responsive'
+			'.block-editor-responsive-block-control__group.is-responsive'
 		);
 
 		expect( container.innerHTML ).not.toBe( '' );
@@ -220,10 +220,10 @@ describe( 'Default and Responsive modes', () => {
 		} );
 
 		const defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--default'
+			'.block-editor-responsive-block-control__group:not(.is-responsive)'
 		);
 		const responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--responsive'
+			'.block-editor-responsive-block-control__group.is-responsive'
 		);
 
 		expect( defaultControlGroup ).toBeNull();
@@ -310,10 +310,10 @@ describe( 'Default and Responsive modes', () => {
 		} );
 
 		let defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--default'
+			'.block-editor-responsive-block-control__group:not(.is-responsive)'
 		);
 		let responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--responsive'
+			'.block-editor-responsive-block-control__group.is-responsive'
 		);
 
 		// Select elements based on what the user can see
@@ -338,10 +338,10 @@ describe( 'Default and Responsive modes', () => {
 		} );
 
 		defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--default'
+			'.block-editor-responsive-block-control__group:not(.is-responsive)'
 		);
 		responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--responsive'
+			'.block-editor-responsive-block-control__group.is-responsive'
 		);
 
 		expect( defaultControlGroup ).toBeNull();
@@ -353,10 +353,10 @@ describe( 'Default and Responsive modes', () => {
 		} );
 
 		defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--default'
+			'.block-editor-responsive-block-control__group:not(.is-responsive)'
 		);
 		responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group--responsive'
+			'.block-editor-responsive-block-control__group.is-responsive'
 		);
 
 		expect( defaultControlGroup ).not.toBeNull();

From b4a46ad2909f9ca0296666f55891b1c534a6b65a Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Fri, 17 Jan 2020 16:52:47 -0500
Subject: [PATCH 2/2] Block Editor: Unify responsive block control group
 wrapper

---
 .../responsive-block-control/index.js         | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 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 821f27b309d70..8a3d3eef08145 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -1,10 +1,13 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-
 import { Fragment } from '@wordpress/element';
-
 import { ToggleControl } from '@wordpress/components';
 
 /**
@@ -93,23 +96,20 @@ function ResponsiveBlockControl( props ) {
 					onChange={ onIsResponsiveChange }
 					help={ toggleHelpText }
 				/>
-
-				{ ! isResponsive && (
-					<div className="block-editor-responsive-block-control__group">
-						{ defaultControl }
-					</div>
-				) }
-
-				{ isResponsive && (
-					<div
-						className="block-editor-responsive-block-control__group is-responsive"
-						hidden={ ! isResponsive }
-					>
-						{ renderResponsiveControls
+				<div
+					className={ classnames(
+						'block-editor-responsive-block-control__group',
+						{
+							'is-responsive': isResponsive,
+						}
+					) }
+				>
+					{ ! isResponsive && defaultControl }
+					{ isResponsive &&
+						( renderResponsiveControls
 							? renderResponsiveControls( viewports )
-							: defaultResponsiveControls() }
-					</div>
-				) }
+							: defaultResponsiveControls() ) }
+				</div>
 			</div>
 		</fieldset>
 	);