Global Styles: add padding when no tabs in the background panel (#44044)

* Global Styles: add padding when no tabs in the background panel * refactoring
WordPress · Jan 19, 2023 · ea61b1b · ea61b1b · github-actions · Jan 19, 2023
1 parent 014f85d
commit ea61b1b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -98,7 +103,13 @@ function ScreenBackgroundColor( { name, variationPath = '' } ) {
 				) }
 			/>
 			<ColorGradientControl
-				className="edit-site-screen-background-color__control"
+				className={ classnames(
+					'edit-site-screen-background-color__control',
+					{
+						'has-no-tabs':
+							! hasBackgroundColor || ! hasGradientColor,
+					}
+				) }
 				colors={ colorsPerOrigin }
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -84,7 +84,8 @@ $block-preview-height: 150px;
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control {
+.edit-site-screen-button-color__control,
+.edit-site-screen-background-color__control.has-no-tabs {
 	padding: $grid-unit-20;
 }