Global styles:

- remove Background image top-level navigation item - relocate background panel to sit next to Layout controls
WordPress · May 23, 2024 · 15da58e · 15da58e
1 parent dfae29a
commit 15da58e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 20 deletions.
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -59,7 +59,7 @@ export default function BackgroundPanel() {
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
-			headerLabel={ __( 'Image' ) }
+			headerLabel={ __( 'Background' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			defaultControls={ defaultControls }
 			themeFileURIs={ _links?.[ 'wp:theme-file' ] }

diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -6,7 +6,6 @@ import {
 	typography,
 	color,
 	layout,
-	image,
 	shadow as shadowIcon,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
@@ -24,7 +23,6 @@ const {
 	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
-	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function RootMenu() {
@@ -35,7 +33,6 @@ function RootMenu() {
 	const hasShadowPanel = true; // useHasShadowPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 
 	return (
 		<>
@@ -76,15 +73,6 @@ function RootMenu() {
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
-				{ hasBackgroundPanel && (
-					<NavigationButtonAsItem
-						icon={ image }
-						path="/background"
-						aria-label={ __( 'Background image styles' ) }
-					>
-						{ __( 'Background image' ) }
-					</NavigationButtonAsItem>
-				) }
 			</ItemGroup>
 		</>
 	);

diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -8,20 +8,27 @@ 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 { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
-	unlock( blockEditorPrivateApis );
+const {
+	useHasBackgroundPanel,
+	useHasDimensionsPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
 
 function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
+			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);
 }

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -41,7 +41,6 @@ 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';
 
@@ -358,10 +357,6 @@ function GlobalStylesUI() {
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ '/background' }>
-				<ScreenBackground />
-			</GlobalStylesNavigationScreen>
-
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }