From ea61b1b35b1bf1014871af374a6f3716508c6f43 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Thu, 19 Jan 2023 12:05:51 +0900
Subject: [PATCH] Global Styles: add padding when no tabs in the background
 panel (#44044)

* Global Styles: add padding when no tabs in the background panel

* refactoring
---
 .../global-styles/screen-background-color.js        | 13 ++++++++++++-
 .../src/components/global-styles/style.scss         |  3 ++-
 2 files changed, 14 insertions(+), 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
index 7f06c49e2edcba..d7227cc6e29ba3 100644
--- 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
index 77b991632999c5..c86b79a1d13cc2 100644
--- 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;
 }