From d83f4cc703a75b5e47ad51c6e72d9d8ebb17c5f6 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Fri, 17 Jan 2020 16:48:42 -0500
Subject: [PATCH] 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 27e21649a29c2..8ae5668b3d921 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -202,7 +202,7 @@ function LinkControl( {
 							<span className="block-editor-link-control__search-item-info">{ filterURLForDisplay( safeDecodeURI( value.url ) ) || '' }</span>
 						</span>
 
-						<Button isSecondary onClick={ setMode( MODE_EDIT ) } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
+						<Button isSecondary onClick={ setMode( MODE_EDIT ) } className="block-editor-link-control__search-item-action">
 							{ __( 'Edit' ) }
 						</Button>
 					</div>
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 c4f47d1169128..35ffaf4226261 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -78,13 +78,13 @@ 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" hidden={ ! isResponsive }>
+					<div className="block-editor-responsive-block-control__group is-responsive" hidden={ ! isResponsive }>
 						{ ( renderResponsiveControls ? renderResponsiveControls( viewports ) : defaultResponsiveControls() ) }
 					</div>
 				) }
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 877bddb0dfb91..f9bcf64cd3f5e 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
@@ -91,9 +91,9 @@ describe( 'Basic rendering', () => {
 
 		const toggleState = container.querySelector( 'input[type="checkbox"]' ).checked;
 
-		const defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--default' );
+		const defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group:not(.is-responsive)' );
 
-		const responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--responsive' );
+		const responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group.is-responsive' );
 
 		expect( container.innerHTML ).not.toBe( '' );
 
@@ -198,8 +198,8 @@ describe( 'Default and Responsive modes', () => {
 			);
 		} );
 
-		const defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--default' );
-		const responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--responsive' );
+		const defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group:not(.is-responsive)' );
+		const responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group.is-responsive' );
 
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
@@ -275,8 +275,8 @@ describe( 'Default and Responsive modes', () => {
 			);
 		} );
 
-		let defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--default' );
-		let responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--responsive' );
+		let defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group:not(.is-responsive)' );
+		let responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group.is-responsive' );
 
 		// Select elements based on what the user can see
 		const toggleLabel = Array.from( container.querySelectorAll( 'label' ) ).find( ( label ) => label.innerHTML.includes( 'Use the same padding on all screensizes' ) );
@@ -291,8 +291,8 @@ describe( 'Default and Responsive modes', () => {
 			Simulate.change( toggleInput, { target: { checked: false } } );
 		} );
 
-		defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--default' );
-		responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--responsive' );
+		defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group:not(.is-responsive)' );
+		responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group.is-responsive' );
 
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
@@ -302,8 +302,8 @@ describe( 'Default and Responsive modes', () => {
 			Simulate.change( toggleInput, { target: { checked: true } } );
 		} );
 
-		defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--default' );
-		responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--responsive' );
+		defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group:not(.is-responsive)' );
+		responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group.is-responsive' );
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();