diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 018d8386c153e7..0dc0f55a825918 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( {
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 07b6a6e5fa874f..8a3d3eef08145e 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 && (
-
- { defaultControl }
-
- ) }
-
- { isResponsive && (
-
- { renderResponsiveControls
+
+ { ! isResponsive && defaultControl }
+ { isResponsive &&
+ ( renderResponsiveControls
? renderResponsiveControls( viewports )
- : defaultResponsiveControls() }
-
- ) }
+ : defaultResponsiveControls() ) }
+
);
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 27b9533f39730c..50527efe610212 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`] = `""`;
+exports[`Basic rendering should render with required props 1`] = `""`;
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 56045c7341d42d..cc01fcd0533ceb 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();