Global Styles: Improve organisation of site background color and image

packages/block-editor/src/components/global-styles/style.scss

@@ -73,18 +73,67 @@
 
 
 .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;
+
+		&: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;
+			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-block-ui;
+			border-bottom-right-radius: $radius-block-ui;
+			border-top: 0;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		&:only-child {
+			border-top: 1px solid $gray-300;
+			border-radius: $radius-block-ui;
+		}
+
+		> div,
+		> 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 {
 		flex-grow: 1;
-		border: 0;
 		.components-dropdown {
 			display: block;
 		}
@@ -129,10 +178,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);
-		}
 	}
 }
 
@@ -156,20 +201,23 @@
 
 	// 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 {
 	.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-round;
+	border-radius: $radius-small;
 	width: 20px;
 	height: 20px;
 	display: block;
@@ -183,7 +231,7 @@
 	left: -1px;
 	bottom: -1px;
 	right: -1px;
-	border-radius: $radius-round;
+	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;

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>
 		</>
 	);

packages/edit-site/src/components/global-styles/screen-background.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import BackgroundPanel from './background-panel';
+import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+
+const { useHasBackgroundPanel, useGlobalSetting } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenBackground() {
+	const [ settings ] = useGlobalSetting( '' );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Background' ) }
+				description={ __(
+					'Edit the site background image and color.'
+				) }
+			/>
+			{ hasBackgroundPanel && <BackgroundPanel /> }
+		</>
+	);
+}
+
+export default ScreenBackground;

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 /> }
 		</>
 	);
 }

packages/edit-site/src/components/global-styles/ui.js

@@ -44,6 +44,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';
 
@@ -371,6 +372,9 @@ function GlobalStylesUI() {
 			<GlobalStylesNavigationScreen path="/revisions">
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
+			<GlobalStylesNavigationScreen path="/background">
+				<ScreenBackground />
+			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen

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';

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;