From 3401d458329b9eb7f96c7b21faafbba0d26d0ea7 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Sun, 7 Jul 2024 02:59:07 +0530
Subject: [PATCH 01/17] Adds background icon

---
 packages/icons/src/index.js              |  1 +
 packages/icons/src/library/background.js | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 packages/icons/src/library/background.js

diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index c5d5976dd2d5f..c334c2b7fac49 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -16,6 +16,7 @@ export { default as arrowUp } from './library/arrow-up';
 export { default as atSymbol } from './library/at-symbol';
 export { default as aspectRatio } from './library/aspect-ratio';
 export { default as audio } from './library/audio';
+export { default as background } from './library/background';
 export { default as backup } from './library/backup';
 export { default as blockDefault } from './library/block-default';
 export { default as blockMeta } from './library/block-meta';
diff --git a/packages/icons/src/library/background.js b/packages/icons/src/library/background.js
new file mode 100644
index 0000000000000..3fcfed0618980
--- /dev/null
+++ b/packages/icons/src/library/background.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const background = (
+	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M11.53 4.47a.75.75 0 1 0-1.06 1.06l8 8a.75.75 0 1 0 1.06-1.06l-8-8Zm5 1a.75.75 0 1 0-1.06 1.06l2 2a.75.75 0 1 0 1.06-1.06l-2-2Zm-11.06 10a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06Zm.06-5a.75.75 0 0 0-1.06 1.06l8 8a.75.75 0 1 0 1.06-1.06l-8-8Zm-.06-3a.75.75 0 0 1 1.06 0l10 10a.75.75 0 1 1-1.06 1.06l-10-10a.75.75 0 0 1 0-1.06Zm3.06-2a.75.75 0 0 0-1.06 1.06l10 10a.75.75 0 1 0 1.06-1.06l-10-10Z"
+		/>
+	</SVG>
+);
+
+export default background;

From 70fc60f42bd02e939d9931099fe1ca7b300d476b Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Sun, 7 Jul 2024 02:59:46 +0530
Subject: [PATCH 02/17] Removes Background Panel from layout screen

---
 .../src/components/global-styles/screen-layout.js | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index 1e68309fe0186..e7794985b7984 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -8,31 +8,20 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import DimensionsPanel from './dimensions-panel';
-import BackgroundPanel from './background-panel';
 import ScreenHeader from './header';
 import { unlock } from '../../lock-unlock';
 
-const {
-	useHasBackgroundPanel,
-	useHasDimensionsPanel,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
+const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	/*
-	 * Use the raw settings to determine if the background panel should be displayed,
-	 * as the background panel is not dependent on the block element settings.
-	 */
-	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
-			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);
 }

From a5559020587a375ed629ee01e885e60c92c76237 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Sun, 7 Jul 2024 03:50:02 +0530
Subject: [PATCH 03/17] Improves organisation of site background image and
 color options in global styles

---
 .../global-styles/background-panel.js         | 334 +++++++++++++++---
 .../src/components/global-styles/style.scss   |  29 +-
 .../src/components/global-styles/root-menu.js |  11 +
 .../global-styles/screen-background.js        |   7 +-
 .../src/components/global-styles/ui.js        |   4 +
 5 files changed, 339 insertions(+), 46 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 18ecc26b002d0..0883977d99179 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
+	__experimentalUseNavigator as useNavigator,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
@@ -14,7 +15,10 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalVStack as VStack,
+	Button,
+	ColorIndicator,
 	DropZone,
+	Flex,
 	FlexItem,
 	FocalPointPicker,
 	MenuItem,
@@ -22,8 +26,10 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	__experimentalZStack as ZStack,
 	Dropdown,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -42,15 +48,19 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { useToolsPanelDropdownMenuProps } from './utils';
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
+import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
+import ColorGradientControl from '../colors-gradients/control';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
 import { getResolvedThemeFilePath } from './theme-file-uri-utils';
+import { unlock } from '../../lock-unlock';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,
+	background: true,
 };
 const BACKGROUND_POPOVER_PROPS = {
 	placement: 'left-start',
@@ -644,6 +654,140 @@ function BackgroundToolsPanel( {
 	);
 }
 
+const { Tabs } = unlock( componentsPrivateApis );
+
+function ColorPanelTab( {
+	isGradient,
+	inheritedValue,
+	userValue,
+	setValue,
+	colorGradientControlSettings,
+} ) {
+	return (
+		<ColorGradientControl
+			{ ...colorGradientControlSettings }
+			showTitle={ false }
+			enableAlpha
+			__experimentalIsRenderedInSidebar
+			colorValue={ isGradient ? undefined : inheritedValue }
+			gradientValue={ isGradient ? inheritedValue : undefined }
+			onColorChange={ isGradient ? undefined : setValue }
+			onGradientChange={ isGradient ? setValue : undefined }
+			clearable={ inheritedValue === userValue }
+			headingLevel={ 3 }
+		/>
+	);
+}
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			{ indicators.map( ( indicator, index ) => (
+				<Flex key={ index } expanded={ false }>
+					<ColorIndicator colorValue={ indicator } />
+				</Flex>
+			) ) }
+		</ZStack>
+		<FlexItem
+			className="block-editor-panel-color-gradient-settings__color-name"
+			title={ label }
+		>
+			{ label }
+		</FlexItem>
+	</HStack>
+);
+
+function ColorPanelDropdown( {
+	label,
+	hasValue,
+	resetValue,
+	isShownByDefault,
+	indicators,
+	tabs,
+	colorGradientControlSettings,
+	panelId,
+} ) {
+	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
+	return (
+		<ToolsPanelItem
+			className="block-editor-global-styles-background-panel__image-tools-panel-item"
+			hasValue={ hasValue }
+			label={ label }
+			onDeselect={ resetValue }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<Dropdown
+				popoverProps={ BACKGROUND_POPOVER_PROPS }
+				renderToggle={ ( { onToggle, isOpen } ) => {
+					const toggleProps = {
+						onClick: onToggle,
+						className: clsx(
+							'block-editor-panel-color-gradient-settings__dropdown',
+							{ 'is-open': isOpen }
+						),
+						'aria-expanded': isOpen,
+						'aria-label': sprintf(
+							/* translators: %s is the type of color property, e.g., "background" */
+							__( 'Color %s styles' ),
+							label
+						),
+					};
+
+					return (
+						<Button { ...toggleProps }>
+							<LabeledColorIndicators
+								indicators={ indicators }
+								label={ label }
+							/>
+						</Button>
+					);
+				} }
+				renderContent={ () => (
+					<DropdownContentWrapper paddingSize="none">
+						<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+							{ tabs.length > 1 && (
+								<Tabs defaultTabId={ currentTab?.key }>
+									<Tabs.TabList>
+										{ tabs.map( ( tab ) => (
+											<Tabs.Tab
+												key={ tab.key }
+												tabId={ tab.key }
+											>
+												{ tab.label }
+											</Tabs.Tab>
+										) ) }
+									</Tabs.TabList>
+
+									{ tabs.map( ( tab ) => {
+										const { key: tabKey, ...restTabProps } =
+											tab;
+										return (
+											<Tabs.TabPanel
+												key={ tabKey }
+												tabId={ tabKey }
+												focusable={ false }
+											>
+												<ColorPanelTab
+													key={ tabKey }
+													{ ...restTabProps }
+													colorGradientControlSettings={
+														colorGradientControlSettings
+													}
+												/>
+											</Tabs.TabPanel>
+										);
+									} ) }
+								</Tabs>
+							) }
+						</div>
+					</DropdownContentWrapper>
+				) }
+			/>
+		</ToolsPanelItem>
+	);
+}
+
 export default function BackgroundPanel( {
 	as: Wrapper = BackgroundToolsPanel,
 	value,
@@ -653,13 +797,83 @@ export default function BackgroundPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
-	headerLabel = __( 'Background image' ),
+	headerLabel = __( 'Elements' ),
 	themeFileURIs,
 } ) {
+	const navigator = useNavigator();
+	const { path } = navigator.location;
+
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const areCustomSolidsEnabled = settings?.color?.custom;
+	const areCustomGradientsEnabled = settings?.color?.customGradient;
+	const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
+	const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeColorValue = ( colorValue ) => {
+		const allColors = colors.flatMap(
+			( { colors: originColors } ) => originColors
+		);
+		const colorObject = allColors.find(
+			( { color } ) => color === colorValue
+		);
+		return colorObject
+			? 'var:preset|color|' + colorObject.slug
+			: colorValue;
+	};
+	const encodeGradientValue = ( gradientValue ) => {
+		const allGradients = gradients.flatMap(
+			( { gradients: originGradients } ) => originGradients
+		);
+		const gradientObject = allGradients.find(
+			( { gradient } ) => gradient === gradientValue
+		);
+		return gradientObject
+			? 'var:preset|gradient|' + gradientObject.slug
+			: gradientValue;
+	};
+
+	// BackgroundColor
+	const showBackgroundPanel = useHasBackgroundPanel( settings );
+	const backgroundColor = decodeValue( inheritedValue?.color?.background );
+	const userBackgroundColor = decodeValue( value?.color?.background );
+	const gradient = decodeValue( inheritedValue?.color?.gradient );
+	const userGradient = decodeValue( value?.color?.gradient );
+	const hasBackground = () => !! userBackgroundColor || !! userGradient;
+	const setBackgroundColor = ( newColor ) => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			encodeColorValue( newColor )
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	};
+	const setGradient = ( newGradient ) => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'gradient' ],
+			encodeGradientValue( newGradient )
+		);
+		newValue.color.background = undefined;
+		onChange( newValue );
+	};
+	const resetBackgroundColor = () => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			undefined
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	};
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
 			background: {},
+			color: undefined,
 		};
 	}, [] );
 
@@ -697,44 +911,84 @@ export default function BackgroundPanel( {
 					}
 				) }
 			>
-				{ shouldShowBackgroundImageControls ? (
-					<BackgroundControlsPanel
-						label={ title }
-						filename={ title }
-						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
-						onToggle={ setIsDropDownOpen }
-						hasImageValue={ hasImageValue }
-					>
-						<VStack spacing={ 3 } className="single-column">
-							<BackgroundImageControls
-								onChange={ onChange }
-								style={ value }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-								displayInPanel
-								onRemoveImage={ () => {
-									setIsDropDownOpen( false );
-									resetBackground();
-								} }
-							/>
-							<BackgroundSizeControls
-								onChange={ onChange }
-								panelId={ panelId }
-								style={ value }
-								defaultValues={ defaultValues }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-							/>
-						</VStack>
-					</BackgroundControlsPanel>
-				) : (
-					<BackgroundImageControls
-						onChange={ onChange }
-						style={ value }
-						inheritedValue={ inheritedValue }
-						themeFileURIs={ themeFileURIs }
-					/>
-				) }
+				<>
+					{ shouldShowBackgroundImageControls ? (
+						<BackgroundControlsPanel
+							label={ title }
+							filename={ title }
+							url={ getResolvedThemeFilePath(
+								url,
+								themeFileURIs
+							) }
+							onToggle={ setIsDropDownOpen }
+							hasImageValue={ hasImageValue }
+						>
+							<VStack spacing={ 3 } className="single-column">
+								<BackgroundImageControls
+									onChange={ onChange }
+									style={ value }
+									inheritedValue={ inheritedValue }
+									themeFileURIs={ themeFileURIs }
+									displayInPanel
+									onRemoveImage={ () => {
+										setIsDropDownOpen( false );
+										resetBackground();
+									} }
+								/>
+								<BackgroundSizeControls
+									onChange={ onChange }
+									panelId={ panelId }
+									style={ value }
+									defaultValues={ defaultValues }
+									inheritedValue={ inheritedValue }
+									themeFileURIs={ themeFileURIs }
+								/>
+							</VStack>
+						</BackgroundControlsPanel>
+					) : (
+						<BackgroundImageControls
+							onChange={ onChange }
+							style={ value }
+							inheritedValue={ inheritedValue }
+							themeFileURIs={ themeFileURIs }
+						/>
+					) }
+					{ showBackgroundPanel && path === '/background' && (
+						<ColorPanelDropdown
+							key="background"
+							label={ __( 'Color' ) }
+							hasValue={ hasBackground }
+							resetValue={ resetBackgroundColor }
+							isShownByDefault={ defaultControls.background }
+							indicators={ [ gradient ?? backgroundColor ] }
+							tabs={ [
+								hasSolidColors && {
+									key: 'background',
+									label: __( 'Background' ),
+									inheritedValue: backgroundColor,
+									setValue: setBackgroundColor,
+									userValue: userBackgroundColor,
+								},
+								hasGradientColors && {
+									key: 'gradient',
+									label: __( 'Gradient' ),
+									inheritedValue: gradient,
+									setValue: setGradient,
+									userValue: userGradient,
+									isGradient: true,
+								},
+							].filter( Boolean ) }
+							colorGradientControlSettings={ {
+								colors,
+								disableCustomColors: ! areCustomSolidsEnabled,
+								gradients,
+								disableCustomGradients:
+									! areCustomGradientsEnabled,
+							} }
+							panelId={ panelId }
+						/>
+					) }
+				</>
 			</div>
 
 			{ /* Dummy ToolsPanel items, so we can control what's in the dropdown popover */ }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index f55e2da643704..0df85c021dac2 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -73,18 +73,39 @@
 
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-	border: 1px solid $gray-300;
-	border-radius: 2px;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
 
+	& > div {
+		// Border styles.
+		border-left: 1px solid $gray-300;
+		border-right: 1px solid $gray-300;
+		border-bottom: 1px solid $gray-300;
+
+		&:nth-child(1 of &) {
+			border-top-left-radius: $radius-block-ui;
+			border-top-right-radius: $radius-block-ui;
+			border-top: 1px solid $gray-300;
+		}
+
+		// Identify the last visible instance as placeholder items will not have this class.
+		&:nth-last-child(1 of &) {
+			border-bottom-left-radius: $radius-block-ui;
+			border-bottom-right-radius: $radius-block-ui;
+		}
+
+		> div,
+		> div > button {
+			border-radius: inherit;
+		}
+	}
+
 	&.is-open {
 		background-color: $gray-100;
 	}
 
 	.block-editor-global-styles-background-panel__image-tools-panel-item {
 		flex-grow: 1;
-		border: 0;
 		.components-dropdown {
 			display: block;
 		}
@@ -101,8 +122,6 @@
 }
 
 .block-editor-global-styles-background-panel__image-tools-panel-item {
-	border: 1px solid $gray-300;
-	border-radius: 2px;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
 	// Since there is no option to skip rendering the drag'n'drop icon in drop
diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 6db4621299f1e..bd013a6258a46 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -4,6 +4,7 @@
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import {
 	typography,
+	background,
 	color,
 	layout,
 	shadow as shadowIcon,
@@ -33,6 +34,7 @@ function RootMenu() {
 	const hasShadowPanel = true; // useHasShadowPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
+	const hasBackgroundPanel = true; // useHasBackgroundPanel( settings );
 
 	return (
 		<>
@@ -73,6 +75,15 @@ function RootMenu() {
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ background }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
 			</ItemGroup>
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-background.js b/packages/edit-site/src/components/global-styles/screen-background.js
index e6d338ffcbef1..35ae764e123e2 100644
--- a/packages/edit-site/src/components/global-styles/screen-background.js
+++ b/packages/edit-site/src/components/global-styles/screen-background.js
@@ -20,7 +20,12 @@ function ScreenBackground() {
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Background image' ) } />
+			<ScreenHeader
+				title={ __( 'Background' ) }
+				description={ __(
+					'Edit the site background image and color.'
+				) }
+			/>
 			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 08cd20e9aac6a..c14d1daca5119 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -41,6 +41,7 @@ import ScreenStyleVariations from './screen-style-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
+import ScreenBackground from './screen-background';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -356,6 +357,9 @@ function GlobalStylesUI() {
 			<GlobalStylesNavigationScreen path="/revisions">
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
+			<GlobalStylesNavigationScreen path="/background">
+				<ScreenBackground />
+			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen

From 5caa6721672281d168570c10c3ab4fc6b838fc29 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Wed, 31 Jul 2024 18:35:51 +0530
Subject: [PATCH 04/17] Fix styling issue after merge conflict

---
 packages/block-editor/src/components/global-styles/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 4403146d33292..9e18a78fe086f 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -86,6 +86,7 @@
 			border-top-left-radius: $radius-block-ui;
 			border-top-right-radius: $radius-block-ui;
 			border-top: 1px solid $gray-300;
+			border-bottom: 0;
 		}
 
 		// Identify the last visible instance as placeholder items will not have this class.

From d6252d63424edabb28e6c528ca587619f498f89a Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Wed, 31 Jul 2024 18:47:12 +0530
Subject: [PATCH 05/17] Resets border radius top and bottom for the first and
 last control

---
 packages/block-editor/src/components/global-styles/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 9e18a78fe086f..80329a53aa5e2 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -87,12 +87,16 @@
 			border-top-right-radius: $radius-block-ui;
 			border-top: 1px solid $gray-300;
 			border-bottom: 0;
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
 		}
 
 		// Identify the last visible instance as placeholder items will not have this class.
 		&:nth-last-child(1 of &) {
 			border-bottom-left-radius: $radius-block-ui;
 			border-bottom-right-radius: $radius-block-ui;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
 		}
 
 		> div,

From 4a99ca155340392abaab36094e214c6d88f33535 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Thu, 1 Aug 2024 16:53:47 +0530
Subject: [PATCH 06/17] Refactor global styles to fix border focus issue for
 background panel

---
 .../src/components/global-styles/style.scss   | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 80329a53aa5e2..b7f65c3c1572a 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -86,7 +86,6 @@
 			border-top-left-radius: $radius-block-ui;
 			border-top-right-radius: $radius-block-ui;
 			border-top: 1px solid $gray-300;
-			border-bottom: 0;
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
 		}
@@ -95,18 +94,37 @@
 		&:nth-last-child(1 of &) {
 			border-bottom-left-radius: $radius-block-ui;
 			border-bottom-right-radius: $radius-block-ui;
+			border-top: 0;
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
 		}
 
 		> div,
-		> div > button {
+		> div > div,
+		> div > button,
+		> div > div > button {
 			border-radius: inherit;
 		}
 	}
 
 	&.is-open {
-		background-color: $gray-100;
+		.block-editor-global-styles-background-panel__dropdown-toggle {
+			background-color: $gray-100;
+		}
+	}
+
+	.block-editor-global-styles-background-panel__dropdown-toggle {
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
+			outline: 3px solid transparent;
+			border-radius: inherit;
+		}
+	}
+
+	.block-editor-panel-color-gradient-settings__dropdown {
+		&.is-open {
+			background-color: $gray-100;
+		}
 	}
 
 	.block-editor-global-styles-background-panel__image-tools-panel-item {
@@ -155,10 +173,6 @@
 		&:hover {
 			color: var(--wp-admin-theme-color);
 		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
 	}
 }
 

From c4a17062492f7650276acf87e0adc0624bc9e1c4 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Thu, 1 Aug 2024 18:19:19 +0530
Subject: [PATCH 07/17] Adds upload icon for background image and change it's
 shape to rounded-rectangle

---
 .../components/global-styles/background-panel.js  | 15 ++++++++++-----
 .../src/components/global-styles/style.scss       |  9 ++++++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index c8accd2fc7d0c..ffc23383b81bc 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -186,7 +186,7 @@ function InspectorImagePreviewItem( {
 				as="span"
 				className="block-editor-global-styles-background-panel__inspector-preview-inner"
 			>
-				{ imgUrl && (
+				{ imgUrl ? (
 					<span
 						className="block-editor-global-styles-background-panel__inspector-image-indicator-wrapper"
 						aria-hidden
@@ -198,6 +198,13 @@ function InspectorImagePreviewItem( {
 							} }
 						/>
 					</span>
+				) : (
+					<span
+						className="block-editor-global-styles-background-panel__inspector-image-indicator-wrapper"
+						aria-hidden
+					>
+						<span className="component-color-indicator" />
+					</span>
 				) }
 				<FlexItem as="span" style={ imgUrl ? {} : { flexGrow: 1 } }>
 					<Truncate
@@ -233,8 +240,7 @@ function BackgroundControlsPanel( {
 		return;
 	}
 
-	const imgLabel =
-		label || getFilename( imgUrl ) || __( 'Add background image' );
+	const imgLabel = label || getFilename( imgUrl ) || __( 'Image' );
 
 	return (
 		<Dropdown
@@ -380,8 +386,7 @@ function BackgroundImageControls( {
 			setImmutably( style, [ 'background', 'backgroundImage' ], 'none' )
 		);
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
-	const imgLabel =
-		title || getFilename( url ) || __( 'Add background image' );
+	const imgLabel = title || getFilename( url ) || __( 'Image' );
 
 	return (
 		<div
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index b7f65c3c1572a..98a913b686079 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -196,7 +196,6 @@
 
 	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
 	text-align: start;
-	text-align-last: center;
 }
 
 .block-editor-global-styles-background-panel__inspector-preview-inner {
@@ -204,12 +203,16 @@
 		width: 20px;
 		height: 20px;
 		min-width: auto;
+
+		.component-color-indicator {
+			border-radius: $radius-medium;
+		}
 	}
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
 	background-size: cover;
-	border-radius: $radius-round;
+	border-radius: $radius-medium;
 	width: 20px;
 	height: 20px;
 	display: block;
@@ -223,7 +226,7 @@
 	left: -1px;
 	bottom: -1px;
 	right: -1px;
-	border-radius: $radius-round;
+	border-radius: $radius-medium;
 	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
 	border: 1px solid transparent;

From 635c62e9e9b4bac407ea5ceb853444870c02e0a4 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Fri, 2 Aug 2024 18:35:12 +0530
Subject: [PATCH 08/17] Change the border-radius to 2px and fix the missing
 border-top when there is only one child in media-replace-container

---
 .../src/components/global-styles/style.scss       | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 98a913b686079..4d2e749b2b236 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -82,7 +82,7 @@
 		border-right: 1px solid $gray-300;
 		border-bottom: 1px solid $gray-300;
 
-		&:nth-child(1 of &) {
+		&:not(:only-child):nth-child(1 of &) {
 			border-top-left-radius: $radius-block-ui;
 			border-top-right-radius: $radius-block-ui;
 			border-top: 1px solid $gray-300;
@@ -91,7 +91,7 @@
 		}
 
 		// Identify the last visible instance as placeholder items will not have this class.
-		&:nth-last-child(1 of &) {
+		&:not(:only-child):nth-last-child(1 of &) {
 			border-bottom-left-radius: $radius-block-ui;
 			border-bottom-right-radius: $radius-block-ui;
 			border-top: 0;
@@ -99,6 +99,11 @@
 			border-top-right-radius: 0;
 		}
 
+		&:only-child {
+			border-top: 1px solid $gray-300;
+			border-radius: $radius-block-ui;
+		}
+
 		> div,
 		> div > div,
 		> div > button,
@@ -205,14 +210,14 @@
 		min-width: auto;
 
 		.component-color-indicator {
-			border-radius: $radius-medium;
+			border-radius: $radius-small;
 		}
 	}
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
 	background-size: cover;
-	border-radius: $radius-medium;
+	border-radius: $radius-small;
 	width: 20px;
 	height: 20px;
 	display: block;
@@ -226,7 +231,7 @@
 	left: -1px;
 	bottom: -1px;
 	right: -1px;
-	border-radius: $radius-medium;
+	border-radius: $radius-small;
 	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
 	border: 1px solid transparent;

From 7f4951d474b52a0774532ee43a0d396f92352013 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Sat, 3 Aug 2024 12:33:13 -0300
Subject: [PATCH 09/17] Move background panel to the top

---
 .../src/components/global-styles/root-menu.js  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index bd013a6258a46..1660f13128736 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -39,6 +39,15 @@ function RootMenu() {
 	return (
 		<>
 			<ItemGroup>
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ background }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasTypographyPanel && (
 					<NavigationButtonAsItem
 						icon={ typography }
@@ -75,15 +84,6 @@ function RootMenu() {
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
-				{ hasBackgroundPanel && (
-					<NavigationButtonAsItem
-						icon={ background }
-						path="/background"
-						aria-label={ __( 'Background styles' ) }
-					>
-						{ __( 'Background' ) }
-					</NavigationButtonAsItem>
-				) }
 			</ItemGroup>
 		</>
 	);

From f3fc2686323c09d0eea4e70771f237d9a39cd5b3 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Mon, 5 Aug 2024 13:45:35 +0530
Subject: [PATCH 10/17] Makes use of ColorIndicator component

---
 .../global-styles/background-panel.js         | 30 ++++++-----------
 .../src/components/global-styles/style.scss   | 32 ++-----------------
 2 files changed, 13 insertions(+), 49 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index ffc23383b81bc..3189f19df27ea 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -186,26 +186,16 @@ function InspectorImagePreviewItem( {
 				as="span"
 				className="block-editor-global-styles-background-panel__inspector-preview-inner"
 			>
-				{ imgUrl ? (
-					<span
-						className="block-editor-global-styles-background-panel__inspector-image-indicator-wrapper"
-						aria-hidden
-					>
-						<span
-							className="block-editor-global-styles-background-panel__inspector-image-indicator"
-							style={ {
-								backgroundImage: `url(${ imgUrl })`,
-							} }
-						/>
-					</span>
-				) : (
-					<span
-						className="block-editor-global-styles-background-panel__inspector-image-indicator-wrapper"
-						aria-hidden
-					>
-						<span className="component-color-indicator" />
-					</span>
-				) }
+				<ColorIndicator
+					aria-hidden
+					style={ {
+						'--image-url': imgUrl ? `url(${ imgUrl })` : undefined,
+					} }
+					className={ clsx(
+						'block-editor-global-styles-background-panel__inspector-image-indicator',
+						{ 'has-image': !! imgUrl }
+					) }
+				/>
 				<FlexItem as="span" style={ imgUrl ? {} : { flexGrow: 1 } }>
 					<Truncate
 						numberOfLines={ 1 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 4d2e749b2b236..420cbebff5cdb 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -203,39 +203,13 @@
 	text-align: start;
 }
 
-.block-editor-global-styles-background-panel__inspector-preview-inner {
-	.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-		width: 20px;
-		height: 20px;
-		min-width: auto;
-
-		.component-color-indicator {
-			border-radius: $radius-small;
-		}
-	}
-}
-
 .block-editor-global-styles-background-panel__inspector-image-indicator {
 	background-size: cover;
 	border-radius: $radius-small;
-	width: 20px;
-	height: 20px;
-	display: block;
-	position: relative;
-}
 
-.block-editor-global-styles-background-panel__inspector-image-indicator::after {
-	content: "";
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	bottom: -1px;
-	right: -1px;
-	border-radius: $radius-small;
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
-	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
-	border: 1px solid transparent;
-	box-sizing: inherit;
+	&.has-image {
+		background-image: var(--image-url);
+	}
 }
 
 .block-editor-global-styles-background-panel__dropdown-content-wrapper {

From 9f2d71533ddb19d4d7572cfbed28b1069728a703 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Mon, 5 Aug 2024 13:49:25 +0530
Subject: [PATCH 11/17] Used $radius-small instead of $radius-block-ui

---
 .../src/components/global-styles/style.scss        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 420cbebff5cdb..3c06b98e6db2a 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -39,7 +39,7 @@
 .block-editor-global-styles__shadow-indicator {
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	cursor: pointer;
 	padding: 0;
 
@@ -83,8 +83,8 @@
 		border-bottom: 1px solid $gray-300;
 
 		&:not(:only-child):nth-child(1 of &) {
-			border-top-left-radius: $radius-block-ui;
-			border-top-right-radius: $radius-block-ui;
+			border-top-left-radius: $radius-small;
+			border-top-right-radius: $radius-small;
 			border-top: 1px solid $gray-300;
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
@@ -92,8 +92,8 @@
 
 		// Identify the last visible instance as placeholder items will not have this class.
 		&:not(:only-child):nth-last-child(1 of &) {
-			border-bottom-left-radius: $radius-block-ui;
-			border-bottom-right-radius: $radius-block-ui;
+			border-bottom-left-radius: $radius-small;
+			border-bottom-right-radius: $radius-small;
 			border-top: 0;
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
@@ -101,7 +101,7 @@
 
 		&:only-child {
 			border-top: 1px solid $gray-300;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 		}
 
 		> div,
@@ -219,7 +219,7 @@
 	.components-focal-point-picker-wrapper {
 		background-color: $gray-100;
 		width: 100%;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		border: $border-width solid $gray-300;
 	}
 

From 267a62ba96ba5559c64c3d056506785a59c27063 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Mon, 5 Aug 2024 13:51:13 +0530
Subject: [PATCH 12/17] Refactor SVG attributes to adhere to camel case
 convention

---
 packages/icons/src/library/background.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/icons/src/library/background.js b/packages/icons/src/library/background.js
index 3fcfed0618980..173b609354380 100644
--- a/packages/icons/src/library/background.js
+++ b/packages/icons/src/library/background.js
@@ -6,8 +6,8 @@ import { Path, SVG } from '@wordpress/primitives';
 const background = (
 	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<Path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
+			fillRule="evenodd"
+			clipRule="evenodd"
 			d="M11.53 4.47a.75.75 0 1 0-1.06 1.06l8 8a.75.75 0 1 0 1.06-1.06l-8-8Zm5 1a.75.75 0 1 0-1.06 1.06l2 2a.75.75 0 1 0 1.06-1.06l-2-2Zm-11.06 10a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06Zm.06-5a.75.75 0 0 0-1.06 1.06l8 8a.75.75 0 1 0 1.06-1.06l-8-8Zm-.06-3a.75.75 0 0 1 1.06 0l10 10a.75.75 0 1 1-1.06 1.06l-10-10a.75.75 0 0 1 0-1.06Zm3.06-2a.75.75 0 0 0-1.06 1.06l10 10a.75.75 0 1 0 1.06-1.06l-10-10Z"
 		/>
 	</SVG>

From dba7140d2dea0ac3e81e4bf6e83cd5f2e2ba00eb Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Wed, 7 Aug 2024 17:01:31 +0530
Subject: [PATCH 13/17] Wraps "Image" and "Color" items with ItemGroup

---
 .../global-styles/background-panel.js         | 222 ++++++++----------
 .../src/components/global-styles/style.scss   |  59 ++---
 2 files changed, 124 insertions(+), 157 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 3189f19df27ea..98a3400fce30c 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -24,6 +24,7 @@ import {
 	MenuItem,
 	VisuallyHidden,
 	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 	__experimentalZStack as ZStack,
@@ -34,13 +35,7 @@ import {
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
-import {
-	useCallback,
-	Platform,
-	useRef,
-	useState,
-	useEffect,
-} from '@wordpress/element';
+import { useCallback, Platform, useRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { isBlobURL } from '@wordpress/blob';
@@ -172,15 +167,9 @@ function InspectorImagePreviewItem( {
 	filename,
 	label,
 	className,
-	onToggleCallback = noop,
 } ) {
-	useEffect( () => {
-		if ( typeof toggleProps?.isOpen !== 'undefined' ) {
-			onToggleCallback( toggleProps?.isOpen );
-		}
-	}, [ toggleProps?.isOpen, onToggleCallback ] );
 	return (
-		<ItemGroup as={ as } className={ className } { ...toggleProps }>
+		<Item as={ as } className={ className } { ...toggleProps }>
 			<HStack
 				justify="flex-start"
 				as="span"
@@ -214,7 +203,7 @@ function InspectorImagePreviewItem( {
 					</VisuallyHidden>
 				</FlexItem>
 			</HStack>
-		</ItemGroup>
+		</Item>
 	);
 }
 
@@ -223,7 +212,6 @@ function BackgroundControlsPanel( {
 	filename,
 	url: imgUrl,
 	children,
-	onToggle: onToggleCallback = noop,
 	hasImageValue,
 } ) {
 	if ( ! hasImageValue ) {
@@ -238,8 +226,12 @@ function BackgroundControlsPanel( {
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const toggleProps = {
 					onClick: onToggle,
-					className:
+					className: clsx(
 						'block-editor-global-styles-background-panel__dropdown-toggle',
+						{
+							'is-open': isOpen,
+						}
+					),
 					'aria-expanded': isOpen,
 					'aria-label': __(
 						'Background size, position and repeat options.'
@@ -253,7 +245,6 @@ function BackgroundControlsPanel( {
 						label={ imgLabel }
 						toggleProps={ toggleProps }
 						as="button"
-						onToggleCallback={ onToggleCallback }
 					/>
 				);
 			} }
@@ -698,21 +689,23 @@ function ColorPanelTab( {
 }
 
 const LabeledColorIndicators = ( { indicators, label } ) => (
-	<HStack justify="flex-start">
-		<ZStack isLayered={ false } offset={ -8 }>
-			{ indicators.map( ( indicator, index ) => (
-				<Flex key={ index } expanded={ false }>
-					<ColorIndicator colorValue={ indicator } />
-				</Flex>
-			) ) }
-		</ZStack>
-		<FlexItem
-			className="block-editor-panel-color-gradient-settings__color-name"
-			title={ label }
-		>
-			{ label }
-		</FlexItem>
-	</HStack>
+	<Item>
+		<HStack justify="flex-start">
+			<ZStack isLayered={ false } offset={ -8 }>
+				{ indicators.map( ( indicator, index ) => (
+					<Flex key={ index } expanded={ false }>
+						<ColorIndicator colorValue={ indicator } />
+					</Flex>
+				) ) }
+			</ZStack>
+			<FlexItem
+				className="block-editor-panel-color-gradient-settings__color-name"
+				title={ label }
+			>
+				{ label }
+			</FlexItem>
+		</HStack>
+	</Item>
 );
 
 function ColorPanelDropdown( {
@@ -911,8 +904,6 @@ export default function BackgroundPanel( {
 			settings?.background?.backgroundPosition ||
 			settings?.background?.backgroundRepeat );
 
-	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
@@ -921,93 +912,82 @@ export default function BackgroundPanel( {
 			panelId={ panelId }
 			headerLabel={ headerLabel }
 		>
-			<div
-				className={ clsx(
-					'block-editor-global-styles-background-panel__inspector-media-replace-container',
-					{
-						'is-open': isDropDownOpen,
-					}
-				) }
+			<ItemGroup
+				className="block-editor-global-styles-background-panel__inspector-media-replace-container"
+				isSeparated
+				isBordered
 			>
-				<>
-					{ shouldShowBackgroundImageControls ? (
-						<BackgroundControlsPanel
-							label={ title }
-							filename={ title }
-							url={ getResolvedThemeFilePath(
-								url,
-								themeFileURIs
-							) }
-							onToggle={ setIsDropDownOpen }
-							hasImageValue={ hasImageValue }
-						>
-							<VStack spacing={ 3 } className="single-column">
-								<BackgroundImageControls
-									onChange={ onChange }
-									style={ value }
-									inheritedValue={ inheritedValue }
-									themeFileURIs={ themeFileURIs }
-									displayInPanel
-									onRemoveImage={ () => {
-										setIsDropDownOpen( false );
-										resetBackground();
-									} }
-								/>
-								<BackgroundSizeControls
-									onChange={ onChange }
-									panelId={ panelId }
-									style={ value }
-									defaultValues={ defaultValues }
-									inheritedValue={ inheritedValue }
-									themeFileURIs={ themeFileURIs }
-								/>
-							</VStack>
-						</BackgroundControlsPanel>
-					) : (
-						<BackgroundImageControls
-							onChange={ onChange }
-							style={ value }
-							inheritedValue={ inheritedValue }
-							themeFileURIs={ themeFileURIs }
-						/>
-					) }
-					{ showBackgroundPanel && path === '/background' && (
-						<ColorPanelDropdown
-							key="background"
-							label={ __( 'Color' ) }
-							hasValue={ hasBackground }
-							resetValue={ resetBackgroundColor }
-							isShownByDefault={ defaultControls.background }
-							indicators={ [ gradient ?? backgroundColor ] }
-							tabs={ [
-								hasSolidColors && {
-									key: 'background',
-									label: __( 'Background' ),
-									inheritedValue: backgroundColor,
-									setValue: setBackgroundColor,
-									userValue: userBackgroundColor,
-								},
-								hasGradientColors && {
-									key: 'gradient',
-									label: __( 'Gradient' ),
-									inheritedValue: gradient,
-									setValue: setGradient,
-									userValue: userGradient,
-									isGradient: true,
-								},
-							].filter( Boolean ) }
-							colorGradientControlSettings={ {
-								colors,
-								disableCustomColors: ! areCustomSolidsEnabled,
-								gradients,
-								disableCustomGradients:
-									! areCustomGradientsEnabled,
-							} }
-							panelId={ panelId }
-						/>
-					) }
-				</>
-			</div>
+				{ shouldShowBackgroundImageControls ? (
+					<BackgroundControlsPanel
+						label={ title }
+						filename={ title }
+						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
+						hasImageValue={ hasImageValue }
+					>
+						<VStack spacing={ 3 } className="single-column">
+							<BackgroundImageControls
+								onChange={ onChange }
+								style={ value }
+								inheritedValue={ inheritedValue }
+								themeFileURIs={ themeFileURIs }
+								displayInPanel
+								onRemoveImage={ () => {
+									resetBackground();
+								} }
+							/>
+							<BackgroundSizeControls
+								onChange={ onChange }
+								panelId={ panelId }
+								style={ value }
+								defaultValues={ defaultValues }
+								inheritedValue={ inheritedValue }
+								themeFileURIs={ themeFileURIs }
+							/>
+						</VStack>
+					</BackgroundControlsPanel>
+				) : (
+					<BackgroundImageControls
+						onChange={ onChange }
+						style={ value }
+						inheritedValue={ inheritedValue }
+						themeFileURIs={ themeFileURIs }
+					/>
+				) }
+				{ showBackgroundPanel && path === '/background' && (
+					<ColorPanelDropdown
+						key="background"
+						label={ __( 'Color' ) }
+						hasValue={ hasBackground }
+						resetValue={ resetBackgroundColor }
+						isShownByDefault={ defaultControls.background }
+						indicators={ [ gradient ?? backgroundColor ] }
+						tabs={ [
+							hasSolidColors && {
+								key: 'background',
+								label: __( 'Background' ),
+								inheritedValue: backgroundColor,
+								setValue: setBackgroundColor,
+								userValue: userBackgroundColor,
+							},
+							hasGradientColors && {
+								key: 'gradient',
+								label: __( 'Gradient' ),
+								inheritedValue: gradient,
+								setValue: setGradient,
+								userValue: userGradient,
+								isGradient: true,
+							},
+						].filter( Boolean ) }
+						colorGradientControlSettings={ {
+							colors,
+							disableCustomColors: ! areCustomSolidsEnabled,
+							gradients,
+							disableCustomGradients: ! areCustomGradientsEnabled,
+						} }
+						panelId={ panelId }
+					/>
+				) }
+			</ItemGroup>
 
 			{ /* Dummy ToolsPanel items, so we can control what's in the dropdown popover */ }
 			<ToolsPanelItem
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 3c06b98e6db2a..9bf5ede4c113c 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -71,37 +71,26 @@
 	direction: ltr;
 }
 
-
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-	// Full width. ToolsPanel lays out children in a grid.
-	grid-column: 1 / -1;
 
 	& > div {
-		// Border styles.
-		border-left: 1px solid $gray-300;
-		border-right: 1px solid $gray-300;
-		border-bottom: 1px solid $gray-300;
+		width: 100%;
 
 		&:not(:only-child):nth-child(1 of &) {
-			border-top-left-radius: $radius-small;
-			border-top-right-radius: $radius-small;
-			border-top: 1px solid $gray-300;
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
 		}
 
 		// Identify the last visible instance as placeholder items will not have this class.
 		&:not(:only-child):nth-last-child(1 of &) {
-			border-bottom-left-radius: $radius-small;
-			border-bottom-right-radius: $radius-small;
-			border-top: 0;
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
 		}
 
 		&:only-child {
-			border-top: 1px solid $gray-300;
-			border-radius: $radius-small;
+			> div {
+				border-bottom: 0;
+			}
 		}
 
 		> div,
@@ -112,18 +101,19 @@
 		}
 	}
 
-	&.is-open {
-		.block-editor-global-styles-background-panel__dropdown-toggle {
-			background-color: $gray-100;
+	.components-item {
+		padding: 0;
+
+		&.block-editor-global-styles-background-panel__dropdown-toggle {
+			&.is-open {
+				background-color: $gray-100;
+			}
+			padding: 6px 12px;
 		}
 	}
 
-	.block-editor-global-styles-background-panel__dropdown-toggle {
-		&:focus {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
-			outline: 3px solid transparent;
-			border-radius: inherit;
-		}
+	.block-editor-global-styles-background-panel__image-tools-panel-item {
+		border: 0;
 	}
 
 	.block-editor-panel-color-gradient-settings__dropdown {
@@ -132,24 +122,21 @@
 		}
 	}
 
-	.block-editor-global-styles-background-panel__image-tools-panel-item {
-		flex-grow: 1;
-		.components-dropdown {
-			display: block;
+	.block-editor-global-styles-background-panel__dropdown-toggle {
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
+			outline: 3px solid transparent;
+			border-radius: inherit;
 		}
 	}
+}
 
-	.block-editor-global-styles-background-panel__inspector-preview-inner {
-		height: 100%;
-	}
+.block-editor-global-styles-background-panel__image-tools-panel-item {
 
-	.components-dropdown {
-		display: block;
-		height: 36px;
+	.block-editor-global-styles-background-panel__image-preview {
+		padding: 0;
 	}
-}
 
-.block-editor-global-styles-background-panel__image-tools-panel-item {
 	border: 1px solid $gray-300;
 	border-radius: 2px;
 

From f4e3a7d9d9cc2e4ef82c7888896bfa5d46c04a8d Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Sun, 18 Aug 2024 02:24:31 +0530
Subject: [PATCH 14/17] feat: Use ItemGroup to wrap the Color and Image item

---
 .../global-styles/background-panel.js         | 337 +++++++++++++++---
 .../src/components/global-styles/style.scss   | 105 +++---
 2 files changed, 348 insertions(+), 94 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 6391f72a08487..f701f5728d4e0 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
+	__experimentalUseNavigator as useNavigator,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
@@ -15,17 +16,23 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalVStack as VStack,
 	DropZone,
+	Flex,
 	FlexItem,
 	FocalPointPicker,
 	MenuItem,
 	VisuallyHidden,
 	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
 	__experimentalTruncate as Truncate,
 	Dropdown,
 	Placeholder,
 	Spinner,
+	Button,
+	ColorIndicator,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -35,7 +42,6 @@ import {
 	Platform,
 	useRef,
 	useState,
-	useEffect,
 	useMemo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -45,10 +51,17 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { useToolsPanelDropdownMenuProps, getResolvedValue } from './utils';
+import {
+	getValueFromVariable,
+	useToolsPanelDropdownMenuProps,
+	getResolvedValue,
+} from './utils';
+import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
+import ColorGradientControl from '../colors-gradients/control';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 import {
 	globalStylesDataKey,
@@ -58,6 +71,7 @@ import {
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,
+	background: true,
 };
 const BACKGROUND_POPOVER_PROPS = {
 	placement: 'left-start',
@@ -169,13 +183,7 @@ function InspectorImagePreviewItem( {
 	filename,
 	label,
 	className,
-	onToggleCallback = noop,
 } ) {
-	useEffect( () => {
-		if ( typeof toggleProps?.isOpen !== 'undefined' ) {
-			onToggleCallback( toggleProps?.isOpen );
-		}
-	}, [ toggleProps?.isOpen, onToggleCallback ] );
 	return (
 		<ItemGroup as={ as } className={ className } { ...toggleProps }>
 			<HStack
@@ -183,19 +191,16 @@ function InspectorImagePreviewItem( {
 				as="span"
 				className="block-editor-global-styles-background-panel__inspector-preview-inner"
 			>
-				{ imgUrl && (
-					<span
-						className="block-editor-global-styles-background-panel__inspector-image-indicator-wrapper"
-						aria-hidden
-					>
-						<span
-							className="block-editor-global-styles-background-panel__inspector-image-indicator"
-							style={ {
-								backgroundImage: `url(${ imgUrl })`,
-							} }
-						/>
-					</span>
-				) }
+				<ColorIndicator
+					aria-hidden
+					style={ {
+						'--image-url': imgUrl ? `url(${ imgUrl })` : undefined,
+					} }
+					className={ clsx(
+						'block-editor-global-styles-background-panel__inspector-image-indicator',
+						{ 'has-image': !! imgUrl }
+					) }
+				/>
 				<FlexItem as="span" style={ imgUrl ? {} : { flexGrow: 1 } }>
 					<Truncate
 						numberOfLines={ 1 }
@@ -223,7 +228,6 @@ function BackgroundControlsPanel( {
 	filename,
 	url: imgUrl,
 	children,
-	onToggle: onToggleCallback = noop,
 	hasImageValue,
 } ) {
 	if ( ! hasImageValue ) {
@@ -239,8 +243,12 @@ function BackgroundControlsPanel( {
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const toggleProps = {
 					onClick: onToggle,
-					className:
+					className: clsx(
 						'block-editor-global-styles-background-panel__dropdown-toggle',
+						{
+							'is-open': isOpen,
+						}
+					),
 					'aria-expanded': isOpen,
 					'aria-label': __(
 						'Background size, position and repeat options.'
@@ -254,7 +262,6 @@ function BackgroundControlsPanel( {
 						label={ imgLabel }
 						toggleProps={ toggleProps }
 						as="button"
-						onToggleCallback={ onToggleCallback }
 					/>
 				);
 			} }
@@ -405,7 +412,7 @@ function BackgroundImageControls( {
 		title || getFilename( url ) || __( 'Add background image' );
 
 	return (
-		<div
+		<Item
 			ref={ replaceContainerRef }
 			className="block-editor-global-styles-background-panel__image-tools-panel-item"
 		>
@@ -459,7 +466,7 @@ function BackgroundImageControls( {
 				onFilesDrop={ onFilesDrop }
 				label={ __( 'Drop to upload' ) }
 			/>
-		</div>
+		</Item>
 	);
 }
 
@@ -705,6 +712,142 @@ function BackgroundToolsPanel( {
 	);
 }
 
+const { Tabs } = unlock( componentsPrivateApis );
+
+function ColorPanelTab( {
+	isGradient,
+	inheritedValue,
+	userValue,
+	setValue,
+	colorGradientControlSettings,
+} ) {
+	return (
+		<ColorGradientControl
+			{ ...colorGradientControlSettings }
+			showTitle={ false }
+			enableAlpha
+			__experimentalIsRenderedInSidebar
+			colorValue={ isGradient ? undefined : inheritedValue }
+			gradientValue={ isGradient ? inheritedValue : undefined }
+			onColorChange={ isGradient ? undefined : setValue }
+			onGradientChange={ isGradient ? setValue : undefined }
+			clearable={ inheritedValue === userValue }
+			headingLevel={ 3 }
+		/>
+	);
+}
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+	<Item>
+		<HStack justify="flex-start">
+			<ZStack isLayered={ false } offset={ -8 }>
+				{ indicators.map( ( indicator, index ) => (
+					<Flex key={ index } expanded={ false }>
+						<ColorIndicator colorValue={ indicator } />
+					</Flex>
+				) ) }
+			</ZStack>
+			<FlexItem
+				className="block-editor-panel-color-gradient-settings__color-name"
+				title={ label }
+			>
+				{ label }
+			</FlexItem>
+		</HStack>
+	</Item>
+);
+
+function ColorPanelDropdown( {
+	label,
+	indicators,
+	tabs,
+	colorGradientControlSettings,
+} ) {
+	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
+	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
+	return (
+		<Item className="block-editor-global-styles-background-panel__color-tools-panel-item">
+			<Dropdown
+				popoverProps={ BACKGROUND_POPOVER_PROPS }
+				className="block-editor-tools-panel-color-gradient-settings__dropdown"
+				renderToggle={ ( { onToggle, isOpen } ) => {
+					const toggleProps = {
+						onClick: onToggle,
+						className: clsx(
+							'block-editor-panel-color-gradient-settings__dropdown',
+							{ 'is-open': isOpen }
+						),
+						'aria-expanded': isOpen,
+						'aria-label': sprintf(
+							/* translators: %s is the type of color property, e.g., "background" */
+							__( 'Color %s styles' ),
+							label
+						),
+					};
+
+					return (
+						<Button { ...toggleProps }>
+							<LabeledColorIndicators
+								indicators={ indicators }
+								label={ label }
+							/>
+						</Button>
+					);
+				} }
+				renderContent={ () => (
+					<DropdownContentWrapper paddingSize="none">
+						<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+							{ tabs.length === 1 && (
+								<ColorPanelTab
+									key={ firstTabKey }
+									{ ...firstTab }
+									colorGradientControlSettings={
+										colorGradientControlSettings
+									}
+								/>
+							) }
+							{ tabs.length > 1 && (
+								<Tabs defaultTabId={ currentTab?.key }>
+									<Tabs.TabList>
+										{ tabs.map( ( tab ) => (
+											<Tabs.Tab
+												key={ tab.key }
+												tabId={ tab.key }
+											>
+												{ tab.label }
+											</Tabs.Tab>
+										) ) }
+									</Tabs.TabList>
+
+									{ tabs.map( ( tab ) => {
+										const { key: tabKey, ...restTabProps } =
+											tab;
+										return (
+											<Tabs.TabPanel
+												key={ tabKey }
+												tabId={ tabKey }
+												focusable={ false }
+											>
+												<ColorPanelTab
+													key={ tabKey }
+													{ ...restTabProps }
+													colorGradientControlSettings={
+														colorGradientControlSettings
+													}
+												/>
+											</Tabs.TabPanel>
+										);
+									} ) }
+								</Tabs>
+							) }
+						</div>
+					</DropdownContentWrapper>
+				) }
+			/>
+		</Item>
+	);
+}
+
 export default function BackgroundPanel( {
 	as: Wrapper = BackgroundToolsPanel,
 	value,
@@ -714,8 +857,11 @@ export default function BackgroundPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
-	headerLabel = __( 'Background image' ),
+	headerLabel = __( 'Tools' ),
 } ) {
+	const navigator = useNavigator();
+	const { path } = navigator.location;
+
 	/*
 	 * Resolve any inherited "ref" pointers.
 	 * Should the block editor need resolved, inherited values
@@ -730,6 +876,75 @@ export default function BackgroundPanel( {
 			_links: _settings[ globalStylesLinksDataKey ],
 		};
 	}, [] );
+
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const areCustomSolidsEnabled = settings?.color?.custom;
+	const areCustomGradientsEnabled = settings?.color?.customGradient;
+	const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
+	const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+	const encodeColorValue = ( colorValue ) => {
+		const allColors = colors.flatMap(
+			( { colors: originColors } ) => originColors
+		);
+		const colorObject = allColors.find(
+			( { color } ) => color === colorValue
+		);
+		return colorObject
+			? 'var:preset|color|' + colorObject.slug
+			: colorValue;
+	};
+	const encodeGradientValue = ( gradientValue ) => {
+		const allGradients = gradients.flatMap(
+			( { gradients: originGradients } ) => originGradients
+		);
+		const gradientObject = allGradients.find(
+			( { gradient } ) => gradient === gradientValue
+		);
+		return gradientObject
+			? 'var:preset|gradient|' + gradientObject.slug
+			: gradientValue;
+	};
+
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const shouldShowBackgroundColorControls = useHasBackgroundPanel( settings );
+	const backgroundColor = decodeValue( inheritedValue?.color?.background );
+	const userBackgroundColor = decodeValue( value?.color?.background );
+	const gradient = decodeValue( inheritedValue?.color?.gradient );
+	const userGradient = decodeValue( value?.color?.gradient );
+	const hasBackground = () => !! userBackgroundColor || !! userGradient;
+
+	const setBackgroundColor = ( newColor ) => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			encodeColorValue( newColor )
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	};
+
+	const setGradient = ( newGradient ) => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'gradient' ],
+			encodeGradientValue( newGradient )
+		);
+		newValue.color.background = undefined;
+		onChange( newValue );
+	};
+
+	const resetBackgroundColor = () => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			undefined
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	};
+
 	const resolvedInheritedValue = useMemo( () => {
 		const resolvedValues = {
 			background: {},
@@ -757,6 +972,7 @@ export default function BackgroundPanel( {
 		return {
 			...previousValue,
 			background: {},
+			color: undefined,
 		};
 	}, [] );
 
@@ -781,8 +997,6 @@ export default function BackgroundPanel( {
 			settings?.background?.backgroundPosition ||
 			settings?.background?.backgroundRepeat );
 
-	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
@@ -791,13 +1005,10 @@ export default function BackgroundPanel( {
 			panelId={ panelId }
 			headerLabel={ headerLabel }
 		>
-			<div
-				className={ clsx(
-					'block-editor-global-styles-background-panel__inspector-media-replace-container',
-					{
-						'is-open': isDropDownOpen,
-					}
-				) }
+			<ItemGroup
+				className="block-editor-global-styles-background-panel__inspector-media-replace-container"
+				isSeparated
+				isBordered
 			>
 				<ToolsPanelItem
 					hasValue={ () => !! value?.background }
@@ -811,7 +1022,6 @@ export default function BackgroundPanel( {
 							label={ title }
 							filename={ title }
 							url={ url }
-							onToggle={ setIsDropDownOpen }
 							hasImageValue={ hasImageValue }
 						>
 							<VStack spacing={ 3 } className="single-column">
@@ -821,12 +1031,8 @@ export default function BackgroundPanel( {
 									inheritedValue={ resolvedInheritedValue }
 									displayInPanel
 									onResetImage={ () => {
-										setIsDropDownOpen( false );
 										resetBackground();
 									} }
-									onRemoveImage={ () =>
-										setIsDropDownOpen( false )
-									}
 									defaultValues={ defaultValues }
 								/>
 								<BackgroundSizeControls
@@ -845,14 +1051,57 @@ export default function BackgroundPanel( {
 							inheritedValue={ resolvedInheritedValue }
 							defaultValues={ defaultValues }
 							onResetImage={ () => {
-								setIsDropDownOpen( false );
 								resetBackground();
 							} }
-							onRemoveImage={ () => setIsDropDownOpen( false ) }
 						/>
 					) }
 				</ToolsPanelItem>
-			</div>
+				{ shouldShowBackgroundColorControls &&
+					path === '/background' && (
+						<ToolsPanelItem
+							hasValue={ hasBackground }
+							label={ __( 'Color' ) }
+							onDeselect={ resetBackgroundColor }
+							isShownByDefault={ defaultControls.background }
+							panelId={ panelId }
+						>
+							<ColorPanelDropdown
+								key="background"
+								label={ __( 'Color' ) }
+								hasValue={ hasBackground }
+								resetValue={ resetBackgroundColor }
+								isShownByDefault={ defaultControls.background }
+								indicators={ [ gradient ?? backgroundColor ] }
+								tabs={ [
+									hasSolidColors && {
+										key: 'background',
+										label: __( 'Background' ),
+										inheritedValue: backgroundColor,
+										setValue: setBackgroundColor,
+										userValue: userBackgroundColor,
+									},
+									hasGradientColors && {
+										key: 'gradient',
+										label: __( 'Gradient' ),
+										inheritedValue: gradient,
+										setValue: setGradient,
+										userValue: userGradient,
+										isGradient: true,
+									},
+								].filter( Boolean ) }
+								colorGradientControlSettings={ {
+									colors,
+									disableCustomColors:
+										! areCustomSolidsEnabled,
+									gradients,
+									disableCustomGradients:
+										! areCustomGradientsEnabled,
+								} }
+								panelId={ panelId }
+							/>
+						</ToolsPanelItem>
+					) }
+			</ItemGroup>
 		</Wrapper>
 	);
 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 3008ed3c93ce7..d05c83a7a84a1 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -71,72 +71,41 @@
 	direction: ltr;
 }
 
-.block-editor-global-styles-background-panel__inspector-media-replace-container {
-
-	& > div {
-		width: 100%;
-
-		&:not(:only-child):nth-child(1 of &) {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-
-		// Identify the last visible instance as placeholder items will not have this class.
-		&:not(:only-child):nth-last-child(1 of &) {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
 
-		&:only-child {
-			> div {
-				border-bottom: 0;
-			}
-		}
+.block-editor-global-styles-background-panel__inspector-media-replace-container {
+	border: 1px solid $gray-300;
+	border-radius: 2px;
+	// Full width. ToolsPanel lays out children in a grid.
+	grid-column: 1 / -1;
 
-		> div,
-		> div > div,
-		> div > button,
-		> div > div > button {
-			border-radius: inherit;
-		}
+	&.is-open {
+		background-color: $gray-100;
 	}
 
-	.components-item {
+	.block-editor-global-styles-background-panel__image-tools-panel-item {
 		padding: 0;
-
-		&.block-editor-global-styles-background-panel__dropdown-toggle {
-			&.is-open {
-				background-color: $gray-100;
-			}
-			padding: 6px 12px;
+		flex-grow: 1;
+		border: 0;
+		.components-dropdown {
+			display: block;
 		}
 	}
 
-	.block-editor-global-styles-background-panel__image-tools-panel-item {
-		border: 0;
+	.block-editor-global-styles-background-panel__color-tools-panel-item {
+		padding: 0;
 	}
 
-	.block-editor-panel-color-gradient-settings__dropdown {
-		&.is-open {
-			background-color: $gray-100;
-		}
+	.block-editor-global-styles-background-panel__inspector-preview-inner {
+		height: 100%;
 	}
 
-	.block-editor-global-styles-background-panel__dropdown-toggle {
-		&:focus {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
-			outline: 3px solid transparent;
-			border-radius: inherit;
-		}
+	.components-dropdown {
+		display: block;
+		height: 36px;
 	}
 }
 
 .block-editor-global-styles-background-panel__image-tools-panel-item {
-
-	.block-editor-global-styles-background-panel__image-preview {
-		padding: 0;
-	}
-
 	border: 1px solid $gray-300;
 	border-radius: 2px;
 
@@ -165,6 +134,10 @@
 		&:hover {
 			color: var(--wp-admin-theme-color);
 		}
+
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
 	}
 
 	.block-editor-global-styles-background-panel__loading {
@@ -179,6 +152,14 @@
 	}
 }
 
+.block-editor-global-styles-background-panel__color-tools-panel-item {
+
+	button.components-button {
+
+		padding: 0;
+	}
+}
+
 .block-editor-global-styles-background-panel__image-preview-content,
 .block-editor-global-styles-background-panel__dropdown-toggle {
 	height: 100%;
@@ -190,6 +171,16 @@
 	cursor: pointer;
 	background: transparent;
 	border: none;
+
+
+	&.is-open {
+		background-color: $gray-100;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		outline: none;
+	}
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-title {
@@ -201,6 +192,14 @@
 	text-align: start;
 }
 
+.block-editor-global-styles-background-panel__inspector-preview-inner {
+	.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
+		width: 20px;
+		height: 20px;
+		min-width: auto;
+	}
+}
+
 .block-editor-global-styles-background-panel__inspector-image-indicator {
 	background-size: cover;
 	border-radius: $radius-small;
@@ -236,6 +235,12 @@
 	z-index: z-index(".block-editor-global-styles-background-panel__popover");
 }
 
+.block-editor-global-styles-background-panel__popover {
+	.block-editor-global-styles-background-panel__image-tools-panel-item {
+		padding: 0;
+	}
+}
+
 .block-editor-global-styles-background-panel__media-replace-popover {
 	.components-popover__content {
 		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.

From 98833df16a7217c6733b629727819c6e5e80cbab Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Thu, 29 Aug 2024 18:46:59 +0530
Subject: [PATCH 15/17] Removed blank lines

---
 .../block-editor/src/components/global-styles/style.scss     | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index de5f69d523769..c6fe6a6a208f4 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -152,9 +152,7 @@
 }
 
 .block-editor-global-styles-background-panel__color-tools-panel-item {
-
-	button.components-button {
-
+	button {
 		padding: 0;
 	}
 }
@@ -171,7 +169,6 @@
 	background: transparent;
 	border: none;
 
-
 	&.is-open {
 		background-color: $gray-100;
 	}

From 7b8110a652532bf3df08c11ca73861fc34db0e09 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Sun, 1 Sep 2024 01:57:36 +0530
Subject: [PATCH 16/17] chore: Update showColorControl prop in BackgroundPanel
 component

---
 .../global-styles/background-panel.js         | 93 +++++++++----------
 .../global-styles/background-panel.js         |  1 +
 2 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 6a91f2a0a92c2..af91abe6f356b 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	__experimentalUseNavigator as useNavigator,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
@@ -778,7 +777,11 @@ function ColorPanelDropdown( {
 					};
 
 					return (
-						<Button { ...toggleProps }>
+						// no-restricted-syntax
+						<Button
+							{ ...toggleProps }
+							__next40pxDefaultSize={ false }
+						>
 							<LabeledColorIndicators
 								indicators={ indicators }
 								label={ label }
@@ -850,10 +853,8 @@ export default function BackgroundPanel( {
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
 	headerLabel = __( 'Tools' ),
+	showColorControl = false,
 } ) {
-	const navigator = useNavigator();
-	const { path } = navigator.location;
-
 	/*
 	 * Resolve any inherited "ref" pointers.
 	 * Should the block editor need resolved, inherited values
@@ -1048,51 +1049,49 @@ export default function BackgroundPanel( {
 						/>
 					) }
 				</ToolsPanelItem>
-				{ shouldShowBackgroundColorControls &&
-					path === '/background' && (
-						<ToolsPanelItem
-							hasValue={ hasBackground }
+				{ shouldShowBackgroundColorControls && showColorControl && (
+					<ToolsPanelItem
+						hasValue={ hasBackground }
+						label={ __( 'Color' ) }
+						onDeselect={ resetBackgroundColor }
+						isShownByDefault={ defaultControls.background }
+						panelId={ panelId }
+					>
+						<ColorPanelDropdown
+							key="background"
 							label={ __( 'Color' ) }
-							onDeselect={ resetBackgroundColor }
+							hasValue={ hasBackground }
+							resetValue={ resetBackgroundColor }
 							isShownByDefault={ defaultControls.background }
+							indicators={ [ gradient ?? backgroundColor ] }
+							tabs={ [
+								hasSolidColors && {
+									key: 'background',
+									label: __( 'Background' ),
+									inheritedValue: backgroundColor,
+									setValue: setBackgroundColor,
+									userValue: userBackgroundColor,
+								},
+								hasGradientColors && {
+									key: 'gradient',
+									label: __( 'Gradient' ),
+									inheritedValue: gradient,
+									setValue: setGradient,
+									userValue: userGradient,
+									isGradient: true,
+								},
+							].filter( Boolean ) }
+							colorGradientControlSettings={ {
+								colors,
+								disableCustomColors: ! areCustomSolidsEnabled,
+								gradients,
+								disableCustomGradients:
+									! areCustomGradientsEnabled,
+							} }
 							panelId={ panelId }
-						>
-							<ColorPanelDropdown
-								key="background"
-								label={ __( 'Color' ) }
-								hasValue={ hasBackground }
-								resetValue={ resetBackgroundColor }
-								isShownByDefault={ defaultControls.background }
-								indicators={ [ gradient ?? backgroundColor ] }
-								tabs={ [
-									hasSolidColors && {
-										key: 'background',
-										label: __( 'Background' ),
-										inheritedValue: backgroundColor,
-										setValue: setBackgroundColor,
-										userValue: userBackgroundColor,
-									},
-									hasGradientColors && {
-										key: 'gradient',
-										label: __( 'Gradient' ),
-										inheritedValue: gradient,
-										setValue: setGradient,
-										userValue: userGradient,
-										isGradient: true,
-									},
-								].filter( Boolean ) }
-								colorGradientControlSettings={ {
-									colors,
-									disableCustomColors:
-										! areCustomSolidsEnabled,
-									gradients,
-									disableCustomGradients:
-										! areCustomGradientsEnabled,
-								} }
-								panelId={ panelId }
-							/>
-						</ToolsPanelItem>
-					) }
+						/>
+					</ToolsPanelItem>
+				) }
 			</ItemGroup>
 		</Wrapper>
 	);
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
index e185079d8cee0..553e2e67c0598 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -50,6 +50,7 @@ export default function BackgroundPanel() {
 			onChange={ setStyle }
 			settings={ settings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			showColorControl
 		/>
 	);
 }

From 9cd986ca8e7331cfb8302a85d1070a5bacf2992c Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Sun, 1 Sep 2024 01:58:24 +0530
Subject: [PATCH 17/17] chore: Update use of hasBackgroundPanel in RootMenu
 component

---
 packages/edit-site/src/components/global-styles/root-menu.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 1660f13128736..cbf052cf792f8 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -24,6 +24,7 @@ const {
 	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
+	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function RootMenu() {
@@ -34,7 +35,7 @@ function RootMenu() {
 	const hasShadowPanel = true; // useHasShadowPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
-	const hasBackgroundPanel = true; // useHasBackgroundPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 
 	return (
 		<>