Global Styles: Improve organisation of site background color and image

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,13 +83,18 @@
 	}
 
 	.block-editor-global-styles-background-panel__image-tools-panel-item {
+		padding: 0;
 		flex-grow: 1;
 		border: 0;
 		.components-dropdown {
 			display: block;
 		}
 	}
 
+	.block-editor-global-styles-background-panel__color-tools-panel-item {
+		padding: 0;
+	}
+
 	.block-editor-global-styles-background-panel__inspector-preview-inner {
 		height: 100%;
 	}
@@ -131,7 +136,7 @@
 		}
 
 		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 
@@ -147,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%;
@@ -158,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 {
@@ -167,7 +190,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 {
@@ -180,25 +202,11 @@
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
 	background-size: cover;
-	border-radius: $radius-round;
-	width: 20px;
-	height: 20px;
-	display: block;
-	position: relative;
-}
+	border-radius: $radius-small;
 
-.block-editor-global-styles-background-panel__inspector-image-indicator::after {
-	content: "";
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	bottom: -1px;
-	right: -1px;
-	border-radius: $radius-round;
-	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 {
@@ -208,7 +216,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;
 	}
 
@@ -227,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.

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,10 +34,20 @@ function RootMenu() {
 	const hasShadowPanel = true; // useHasShadowPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
+	const hasBackgroundPanel = true; // useHasBackgroundPanel( settings );
 
 	return (
 		<>
 			<ItemGroup>
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ background }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasTypographyPanel && (
 					<NavigationButtonAsItem
 						icon={ typography }

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
+			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>
+);
+
+export default background;