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

---
 .../responsive-block-control/index.js         | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 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 35ffaf42262615..3bb7f73c3d0046 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';
@@ -76,19 +79,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 ? renderResponsiveControls( viewports ) : defaultResponsiveControls() ) }
-					</div>
-				) }
-
+				<div
+					className={
+						classnames( 'block-editor-responsive-block-control__group', {
+							'is-responsive': isResponsive,
+						} )
+					}
+				>
+					{ ! isResponsive && defaultControl }
+					{ isResponsive && (
+						renderResponsiveControls ?
+							renderResponsiveControls( viewports ) :
+							defaultResponsiveControls()
+					) }
+				</div>
 			</div>
 		</fieldset>
 	);