Initial commit - not finished.

Starting to set up global styles and refactor existing background components

Porting over existing hook code to shared, global styles component.
Next step is to gut the existing hook and set up props using setAttribute etc

packages/block-editor/src/components/global-styles/hooks.js

@@ -27,6 +27,7 @@ const VALID_SETTINGS = [
 	'background.backgroundImage',
 	'background.backgroundRepeat',
 	'background.backgroundSize',
+	'background.backgroundPosition',
 	'border.color',
 	'border.radius',
 	'border.style',

packages/block-editor/src/components/global-styles/index.js

@@ -31,5 +31,9 @@ export {
 	useHasImageSettingsPanel,
 } from './image-settings-panel';
 export { default as AdvancedPanel } from './advanced-panel';
+export {
+	default as BackgroundPanel,
+	useHasBackgroundPanel,
+} from './background-panel';
 export { areGlobalStyleConfigsEqual } from './utils';
 export { default as getGlobalStylesChanges } from './get-global-styles-changes';

packages/block-editor/src/hooks/background.js

@@ -565,24 +565,24 @@ function BackgroundSizePanelItem( {
 	);
 }
 
-export function BackgroundImagePanel( props ) {
+export function BackgroundImagePanel( { clientId, name, setAttributes, settings } ) {
 	const [ backgroundImage, backgroundSize ] = useSettings(
 		'background.backgroundImage',
 		'background.backgroundSize'
 	);
 
 	if (
 		! backgroundImage ||
-		! hasBackgroundSupport( props.name, 'backgroundImage' )
+		! hasBackgroundSupport( name, 'backgroundImage' )
 	) {
 		return null;
 	}
 
 	const showBackgroundSize = !! (
-		backgroundSize && hasBackgroundSupport( props.name, 'backgroundSize' )
+		backgroundSize && hasBackgroundSupport( name, 'backgroundSize' )
 	);
 
-	const defaultControls = getBlockSupport( props.name, [
+	const defaultControls = getBlockSupport( name, [
 		BACKGROUND_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
@@ -591,12 +591,14 @@ export function BackgroundImagePanel( props ) {
 		<InspectorControls group="background">
 			<BackgroundImagePanelItem
 				isShownByDefault={ defaultControls?.backgroundImage }
-				{ ...props }
+				clientId={ clientId }
+				setAttributes={ setAttributes }
 			/>
 			{ showBackgroundSize && (
 				<BackgroundSizePanelItem
 					isShownByDefault={ defaultControls?.backgroundSize }
-					{ ...props }
+					clientId={ clientId }
+					setAttributes={ setAttributes }
 				/>
 			) }
 		</InspectorControls>

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	BackgroundPanel: StylesBackgroundPanel,
+} = unlock( blockEditorPrivateApis );
+
+const DEFAULT_CONTROLS = {
+	contentSize: true,
+	wideSize: true,
+	padding: true,
+	margin: true,
+	blockGap: true,
+	minHeight: true,
+	childLayout: false,
+};
+
+export default function BackgroundPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
+
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+
+	return (
+		<StylesBackgroundPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+			includeLayoutControls
+			defaultControls={ DEFAULT_CONTROLS }
+		/>
+	);
+}

packages/edit-site/src/components/global-styles/root-menu.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { typography, color, layout, image } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -18,6 +18,7 @@ const {
 	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
+	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function RootMenu() {
@@ -27,6 +28,7 @@ function RootMenu() {
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 
 	return (
 		<>
@@ -58,6 +60,15 @@ function RootMenu() {
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ image }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
 			</ItemGroup>
 		</>
 	);

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

@@ -0,0 +1,29 @@
+/**
+ * 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, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
+
+function ScreenBackground() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	return (
+		<>
+			<ScreenHeader title={ __( 'Background' ) } />
+			{ hasBackgroundPanel && <BackgroundPanel /> }
+		</>
+	);
+}
+
+export default ScreenBackground;

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

@@ -40,6 +40,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';
 
@@ -344,6 +345,10 @@ function GlobalStylesUI() {
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ '/background' }>
+				<ScreenBackground />
+			</GlobalStylesNavigationScreen>
+
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }