From ca6be90e13fe93827585bfcd0eabd92e01e20db7 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 28 Mar 2024 15:36:49 +1100
Subject: [PATCH 01/11] Testing other component layout and dummy toolspanel
 items Refactor the media toggle button and refactor controls Temp. don't send
 default controls in hook

---
 .../global-styles/background-panel.js         | 279 ++++++++++++------
 .../src/components/global-styles/style.scss   |  51 +++-
 packages/block-editor/src/hooks/background.js |   4 +
 3 files changed, 237 insertions(+), 97 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 d4b2468bf2a255..989c8920172f1c 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -22,14 +22,17 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
-import { useCallback, Platform, useRef } from '@wordpress/element';
+import { useCallback, Platform, useRef, useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { isBlobURL } from '@wordpress/blob';
+import { reusableBlock, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -43,7 +46,12 @@ import { getResolvedThemeFilePath } from './theme-file-uri-utils';
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,
-	backgroundSize: false,
+	backgroundSize: true,
+};
+const BACKGROUND_POPOVER_PROPS = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
 };
 
 /**
@@ -141,44 +149,52 @@ export const backgroundPositionToCoords = ( value ) => {
 	return { x, y };
 };
 
-function InspectorImagePreview( { label, filename, url: imgUrl } ) {
-	const imgLabel =
-		label || getFilename( imgUrl ) || __( 'Add background image' );
-
+function InspectorImagePreviewItem( {
+	as = 'span',
+	imgUrl,
+	toggleProps = {},
+	filename,
+	label,
+	className,
+} ) {
 	return (
-		<ItemGroup as="span">
-			<HStack justify={ imgUrl ? 'flex-start' : 'center' } as="span">
-				{ imgUrl && (
-					<span
-						className={ clsx(
-							'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
-							{
-								'has-image': imgUrl,
-							}
-						) }
-						aria-hidden
-					>
+		<ItemGroup as={ as } className={ className } { ...toggleProps }>
+			<HStack
+				justify="flex-start"
+				as="span"
+				className="block-editor-global-styles-background-panel__inspector-preview-inner"
+			>
+				<span
+					className={ clsx(
+						'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
+						{
+							'has-image': imgUrl,
+						}
+					) }
+					aria-hidden
+				>
+					{ imgUrl && (
 						<span
 							className="block-editor-global-styles-background-panel__inspector-image-indicator"
 							style={ {
 								backgroundImage: `url(${ imgUrl })`,
 							} }
 						/>
-					</span>
-				) }
+					) }
+				</span>
 				<FlexItem as="span">
 					<Truncate
 						numberOfLines={ 1 }
 						className="block-editor-global-styles-background-panel__inspector-media-replace-title"
 					>
-						{ imgLabel }
+						{ label }
 					</Truncate>
 					<VisuallyHidden as="span">
 						{ imgUrl
 							? sprintf(
 									/* translators: %s: file name */
 									__( 'Background image: %s' ),
-									filename || imgLabel
+									filename || label
 							  )
 							: __( 'No background image selected' ) }
 					</VisuallyHidden>
@@ -188,13 +204,77 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 	);
 }
 
+const noop = () => {};
+
+function InspectorImagePreviewToggle( {
+	label,
+	filename,
+	url: imgUrl,
+	children,
+	allowPopover = false,
+	onToggle: onToggleCallback = noop,
+	hasImageValue,
+} ) {
+	if ( ! hasImageValue ) {
+		return;
+	}
+
+	const imgLabel =
+		label || getFilename( imgUrl ) || __( 'Add background image' );
+
+	if ( ! allowPopover ) {
+		return (
+			<InspectorImagePreviewItem
+				className="block-editor-global-styles-background-panel__image-preview"
+				imgUrl={ imgUrl }
+				filename={ filename }
+				label={ imgLabel }
+			/>
+		);
+	}
+	return (
+		<Dropdown
+			popoverProps={ BACKGROUND_POPOVER_PROPS }
+			className="block-editor-global-styles-background-panel__inspector-media-replace"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const toggleProps = {
+					onClick: onToggle,
+					className:
+						'block-editor-global-styles-background-panel__dropdown-toggle',
+					'aria-expanded': isOpen,
+					'aria-label': __(
+						'Background size, position and repeat options.'
+					),
+				};
+				onToggleCallback( isOpen );
+				return (
+					<InspectorImagePreviewItem
+						imgUrl={ imgUrl }
+						filename={ filename }
+						label={ imgLabel }
+						toggleProps={ toggleProps }
+						as="button"
+					/>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper
+					className="block-editor-global-styles-background-panel__dropdown-content-wrapper"
+					paddingSize="medium"
+				>
+					{ children }
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
 function BackgroundImageToolsPanelItem( {
 	panelId,
 	isShownByDefault,
 	onChange,
 	style,
 	inheritedValue,
-	themeFileURIs,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -204,9 +284,10 @@ function BackgroundImageToolsPanelItem( {
 	const { id, title, url } = style?.background?.backgroundImage || {
 		...inheritedValue?.background?.backgroundImage,
 	};
-
+	const hasImageValue =
+		hasBackgroundImageValue( style ) ||
+		hasBackgroundImageValue( inheritedValue );
 	const replaceContainerRef = useRef();
-
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
@@ -307,7 +388,8 @@ function BackgroundImageToolsPanelItem( {
 			setImmutably( style, [ 'background', 'backgroundImage' ], 'none' )
 		);
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
-
+	const imgLabel =
+		title || getFilename( url ) || __( 'Add background image' );
 	return (
 		<ToolsPanelItem
 			className="single-column"
@@ -317,11 +399,9 @@ function BackgroundImageToolsPanelItem( {
 			isShownByDefault={ isShownByDefault }
 			resetAllFilter={ resetAllFilter }
 			panelId={ panelId }
+			style={ hasImageValue ? {} : { width: '100%' } }
 		>
-			<div
-				className="block-editor-global-styles-background-panel__inspector-media-replace-container"
-				ref={ replaceContainerRef }
-			>
+			<div ref={ replaceContainerRef }>
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }
@@ -329,14 +409,15 @@ function BackgroundImageToolsPanelItem( {
 					accept="image/*"
 					onSelect={ onSelectMedia }
 					name={
-						<InspectorImagePreview
-							label={ title }
-							filename={ title }
-							url={ getResolvedThemeFilePath(
-								url,
-								themeFileURIs
-							) }
-						/>
+						hasImageValue ? (
+							<Icon icon={ reusableBlock } />
+						) : (
+							<InspectorImagePreviewItem
+								imgUrl={ url }
+								filename={ title }
+								label={ imgLabel }
+							/>
+						)
 					}
 					variant="secondary"
 				>
@@ -371,8 +452,6 @@ function BackgroundImageToolsPanelItem( {
 }
 
 function BackgroundSizeToolsPanelItem( {
-	panelId,
-	isShownByDefault,
 	onChange,
 	style,
 	inheritedValue,
@@ -417,22 +496,6 @@ function BackgroundSizeToolsPanelItem( {
 		( currentValueForToggle === 'cover' && repeatValue === undefined )
 	);
 
-	const hasValue = hasBackgroundSizeValue( style );
-
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			style: {
-				...previousValue.style,
-				background: {
-					...previousValue.style?.background,
-					backgroundRepeat: undefined,
-					backgroundSize: undefined,
-				},
-			},
-		};
-	}, [] );
-
 	const updateBackgroundSize = ( next ) => {
 		// When switching to 'contain' toggle the repeat off.
 		let nextRepeat = repeatValue;
@@ -502,30 +565,11 @@ function BackgroundSizeToolsPanelItem( {
 			)
 		);
 
-	const resetBackgroundSize = () =>
-		onChange(
-			setImmutably( style, [ 'background' ], {
-				...style?.background,
-				backgroundPosition: undefined,
-				backgroundRepeat: undefined,
-				backgroundSize: undefined,
-			} )
-		);
-
 	return (
-		<VStack
-			as={ ToolsPanelItem }
-			spacing={ 2 }
-			className="single-column"
-			hasValue={ () => hasValue }
-			label={ __( 'Size' ) }
-			onDeselect={ resetBackgroundSize }
-			isShownByDefault={ isShownByDefault }
-			resetAllFilter={ resetAllFilter }
-			panelId={ panelId }
-		>
+		<VStack spacing={ 3 } className="single-column">
 			<FocalPointPicker
 				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Position' ) }
 				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
 				value={ backgroundPositionToCoords( positionValue ) }
@@ -638,8 +682,33 @@ export default function BackgroundPanel( {
 			background: {},
 		};
 	}, [] );
-	const shouldShowBackgroundSizeControls =
-		settings?.background?.backgroundSize;
+	const { title, url } = value?.background?.backgroundImage || {
+		...inheritedValue?.background?.backgroundImage,
+	};
+	const hasImageValue =
+		hasBackgroundImageValue( value ) ||
+		hasBackgroundImageValue( inheritedValue );
+
+	const hasSizeValue =
+		hasBackgroundSizeValue( value ) ||
+		hasBackgroundSizeValue( inheritedValue );
+
+	const shouldShowBackgroundImageControls =
+		hasImageValue &&
+		( settings?.background?.backgroundSize ||
+			settings?.background?.backgroundPosition ||
+			settings?.background?.backgroundRepeat );
+	const resetBackgroundSize = () =>
+		onChange(
+			setImmutably( value, [ 'background' ], {
+				...value?.background,
+				backgroundPosition: undefined,
+				backgroundRepeat: undefined,
+				backgroundSize: undefined,
+			} )
+		);
+	//@TODO This causes "Cannot update a component while rendering a different component (`Dropdown`)" error
+	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
 
 	return (
 		<Wrapper
@@ -649,25 +718,49 @@ export default function BackgroundPanel( {
 			panelId={ panelId }
 			headerLabel={ headerLabel }
 		>
-			<BackgroundImageToolsPanelItem
-				onChange={ onChange }
-				panelId={ panelId }
-				isShownByDefault={ defaultControls.backgroundImage }
-				style={ value }
-				inheritedValue={ inheritedValue }
-				themeFileURIs={ themeFileURIs }
-			/>
-			{ shouldShowBackgroundSizeControls && (
-				<BackgroundSizeToolsPanelItem
+			<div
+				className={ clsx(
+					'block-editor-global-styles-background-panel__inspector-media-replace-container',
+					{ 'is-open': isDropDownOpen }
+				) }
+			>
+				<InspectorImagePreviewToggle
+					label={ __( 'Background image' ) }
+					filename={ title }
+					url={ getResolvedThemeFilePath( url, themeFileURIs ) }
+					allowPopover={ shouldShowBackgroundImageControls }
+					onToggle={ ( isOpen ) => setIsDropDownOpen( isOpen ) }
+					hasImageValue={ hasImageValue }
+				>
+					<BackgroundSizeToolsPanelItem
+						onChange={ onChange }
+						panelId={ panelId }
+						isShownByDefault={ defaultControls.backgroundImage }
+						style={ value }
+						defaultValues={ defaultValues }
+						inheritedValue={ inheritedValue }
+						themeFileURIs={ themeFileURIs }
+					/>
+				</InspectorImagePreviewToggle>
+				<BackgroundImageToolsPanelItem
 					onChange={ onChange }
 					panelId={ panelId }
-					isShownByDefault={ defaultControls.backgroundSize }
 					style={ value }
 					inheritedValue={ inheritedValue }
-					defaultValues={ defaultValues }
-					themeFileURIs={ themeFileURIs }
+					settings={ settings }
+					isShownByDefault={ defaultControls.backgroundImage }
 				/>
-			) }
+			</div>
+
+			{ /* Dummy ToolsPanel items, so we can control what's in the dropdown popover */ }
+			<ToolsPanelItem
+				hasValue={ () => hasSizeValue }
+				label={ __( 'Size' ) }
+				onDeselect={ resetBackgroundSize }
+				isShownByDefault={ defaultControls.backgroundImage }
+				panelId={ panelId }
+				className="block-editor-global-styles-background-panel__hidden-tools-panel-item"
+			/>
 		</Wrapper>
 	);
 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 1630ac2abde574..cfd114ab9f649c 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -73,6 +73,40 @@
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
 	position: relative;
+	border: 1px solid $gray-300;
+	border-radius: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: stretch;
+	// Full width. ToolsPanel lays out children in a grid.
+	grid-column: 1 / -1;
+
+	&.is-open {
+		background-color: $gray-100;
+	}
+
+	.block-editor-global-styles-background-panel__inspector-preview-inner {
+		height: 100%;
+	}
+
+	.block-editor-global-styles-background-panel__image-preview,
+	.block-editor-global-styles-background-panel__inspector-media-replace {
+		flex-grow: 1;
+	}
+
+	.block-editor-global-styles-background-panel__image-preview-content,
+	.block-editor-global-styles-background-panel__dropdown-toggle {
+		height: 100%;
+		width: 100%;
+		padding-left: $grid-unit-15;
+	}
+
+	.block-editor-global-styles-background-panel__dropdown-toggle {
+		cursor: pointer;
+		background: transparent;
+		border: none;
+	}
+
 	// Since there is no option to skip rendering the drag'n'drop icon in drop
 	// zone, we hide it for now.
 	.components-drop-zone__content-icon {
@@ -84,7 +118,6 @@
 		box-shadow: inset 0 0 0 $border-width $gray-400;
 		width: 100%;
 		display: block;
-		height: $grid-unit-50;
 
 		&:hover {
 			color: var(--wp-admin-theme-color);
@@ -111,11 +144,8 @@
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-	display: block;
 	width: 20px;
 	height: 20px;
-	flex: none;
-	background: #fff;
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
@@ -141,3 +171,16 @@
 	box-sizing: inherit;
 }
 
+.block-editor-global-styles-background-panel__dropdown-content-wrapper {
+	min-width: 260px;
+	.components-base-control__help,
+	.components-toggle-control {
+		margin-bottom: 0;
+	}
+}
+
+.block-editor-global-styles-background-panel__hidden-tools-panel-item {
+	height: 0px;
+	position: absolute;
+	width: 0px;
+}
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 3e23efcbf5fc96..2178eb9a8ea8b3 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -147,10 +147,12 @@ export function BackgroundImagePanel( {
 		return null;
 	}
 
+	/*
 	const defaultControls = getBlockSupport( name, [
 		BACKGROUND_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
+*/
 
 	const onChange = ( newStyle ) => {
 		setAttributes( {
@@ -172,7 +174,9 @@ export function BackgroundImagePanel( {
 		<StylesBackgroundPanel
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
+			/*
 			defaultControls={ defaultControls }
+			*/
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }

From 055878ac102d4d592dcc5f972280ef4f6d03db7c Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 19 Jun 2024 17:52:35 +1000
Subject: [PATCH 02/11] Rejigging components, catering for
 no-background-image-controls

---
 .../global-styles/background-panel.js         | 115 ++++++++++--------
 .../src/components/global-styles/style.scss   |  20 ++-
 2 files changed, 80 insertions(+), 55 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 989c8920172f1c..c0ad526a5d7f3e 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -28,7 +28,13 @@ import {
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
-import { useCallback, Platform, useRef, useState } from '@wordpress/element';
+import {
+	useCallback,
+	Platform,
+	useRef,
+	useState,
+	useEffect,
+} from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { isBlobURL } from '@wordpress/blob';
@@ -53,6 +59,7 @@ const BACKGROUND_POPOVER_PROPS = {
 	offset: 36,
 	shift: true,
 };
+const noop = () => {};
 
 /**
  * Checks site settings to see if the background panel may be used.
@@ -156,7 +163,13 @@ function InspectorImagePreviewItem( {
 	filename,
 	label,
 	className,
+	onToggleCallback = noop,
 } ) {
+	useEffect( () => {
+		if ( typeof toggleProps?.isOpen !== 'undefined' ) {
+			onToggleCallback( toggleProps?.isOpen );
+		}
+	}, [ toggleProps?.isOpen ] );
 	return (
 		<ItemGroup as={ as } className={ className } { ...toggleProps }>
 			<HStack
@@ -164,25 +177,25 @@ function InspectorImagePreviewItem( {
 				as="span"
 				className="block-editor-global-styles-background-panel__inspector-preview-inner"
 			>
-				<span
-					className={ clsx(
-						'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
-						{
-							'has-image': imgUrl,
-						}
-					) }
-					aria-hidden
-				>
-					{ imgUrl && (
+				{ imgUrl && (
+					<span
+						className={ clsx(
+							'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
+							{
+								'has-image': imgUrl,
+							}
+						) }
+						aria-hidden
+					>
 						<span
 							className="block-editor-global-styles-background-panel__inspector-image-indicator"
 							style={ {
 								backgroundImage: `url(${ imgUrl })`,
 							} }
 						/>
-					) }
-				</span>
-				<FlexItem as="span">
+					</span>
+				) }
+				<FlexItem as="span" style={ { flexGrow: 1 } }>
 					<Truncate
 						numberOfLines={ 1 }
 						className="block-editor-global-styles-background-panel__inspector-media-replace-title"
@@ -204,14 +217,11 @@ function InspectorImagePreviewItem( {
 	);
 }
 
-const noop = () => {};
-
 function InspectorImagePreviewToggle( {
 	label,
 	filename,
 	url: imgUrl,
 	children,
-	allowPopover = false,
 	onToggle: onToggleCallback = noop,
 	hasImageValue,
 } ) {
@@ -222,16 +232,6 @@ function InspectorImagePreviewToggle( {
 	const imgLabel =
 		label || getFilename( imgUrl ) || __( 'Add background image' );
 
-	if ( ! allowPopover ) {
-		return (
-			<InspectorImagePreviewItem
-				className="block-editor-global-styles-background-panel__image-preview"
-				imgUrl={ imgUrl }
-				filename={ filename }
-				label={ imgLabel }
-			/>
-		);
-	}
 	return (
 		<Dropdown
 			popoverProps={ BACKGROUND_POPOVER_PROPS }
@@ -245,8 +245,8 @@ function InspectorImagePreviewToggle( {
 					'aria-label': __(
 						'Background size, position and repeat options.'
 					),
+					isOpen,
 				};
-				onToggleCallback( isOpen );
 				return (
 					<InspectorImagePreviewItem
 						imgUrl={ imgUrl }
@@ -254,6 +254,7 @@ function InspectorImagePreviewToggle( {
 						label={ imgLabel }
 						toggleProps={ toggleProps }
 						as="button"
+						onToggleCallback={ onToggleCallback }
 					/>
 				);
 			} }
@@ -275,6 +276,7 @@ function BackgroundImageToolsPanelItem( {
 	onChange,
 	style,
 	inheritedValue,
+	shouldShowBackgroundImageControls,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -390,16 +392,23 @@ function BackgroundImageToolsPanelItem( {
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
 	const imgLabel =
 		title || getFilename( url ) || __( 'Add background image' );
+
 	return (
 		<ToolsPanelItem
-			className="single-column"
+			className={ clsx(
+				'single-column',
+				'block-editor-global-styles-background-panel__image-tools-panel-item',
+				{
+					'is-wide':
+						hasImageValue && ! shouldShowBackgroundImageControls,
+				}
+			) }
 			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
 			onDeselect={ resetBackgroundImage }
 			isShownByDefault={ isShownByDefault }
 			resetAllFilter={ resetAllFilter }
 			panelId={ panelId }
-			style={ hasImageValue ? {} : { width: '100%' } }
 		>
 			<div ref={ replaceContainerRef }>
 				<MediaReplaceFlow
@@ -409,10 +418,11 @@ function BackgroundImageToolsPanelItem( {
 					accept="image/*"
 					onSelect={ onSelectMedia }
 					name={
-						hasImageValue ? (
+						hasImageValue && shouldShowBackgroundImageControls ? (
 							<Icon icon={ reusableBlock } />
 						) : (
 							<InspectorImagePreviewItem
+								className="block-editor-global-styles-background-panel__image-preview"
 								imgUrl={ url }
 								filename={ title }
 								label={ imgLabel }
@@ -707,7 +717,6 @@ export default function BackgroundPanel( {
 				backgroundSize: undefined,
 			} )
 		);
-	//@TODO This causes "Cannot update a component while rendering a different component (`Dropdown`)" error
 	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
 
 	return (
@@ -721,27 +730,28 @@ export default function BackgroundPanel( {
 			<div
 				className={ clsx(
 					'block-editor-global-styles-background-panel__inspector-media-replace-container',
-					{ 'is-open': isDropDownOpen }
+					{ 'is-open': isDropDownOpen, 'has-image': hasImageValue }
 				) }
 			>
-				<InspectorImagePreviewToggle
-					label={ __( 'Background image' ) }
-					filename={ title }
-					url={ getResolvedThemeFilePath( url, themeFileURIs ) }
-					allowPopover={ shouldShowBackgroundImageControls }
-					onToggle={ ( isOpen ) => setIsDropDownOpen( isOpen ) }
-					hasImageValue={ hasImageValue }
-				>
-					<BackgroundSizeToolsPanelItem
-						onChange={ onChange }
-						panelId={ panelId }
-						isShownByDefault={ defaultControls.backgroundImage }
-						style={ value }
-						defaultValues={ defaultValues }
-						inheritedValue={ inheritedValue }
-						themeFileURIs={ themeFileURIs }
-					/>
-				</InspectorImagePreviewToggle>
+				{ shouldShowBackgroundImageControls && (
+					<InspectorImagePreviewToggle
+						label={ title }
+						filename={ title }
+						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
+						onToggle={ setIsDropDownOpen }
+						hasImageValue={ hasImageValue }
+					>
+						<BackgroundSizeToolsPanelItem
+							onChange={ onChange }
+							panelId={ panelId }
+							isShownByDefault={ defaultControls.backgroundImage }
+							style={ value }
+							defaultValues={ defaultValues }
+							inheritedValue={ inheritedValue }
+							themeFileURIs={ themeFileURIs }
+						/>
+					</InspectorImagePreviewToggle>
+				) }
 				<BackgroundImageToolsPanelItem
 					onChange={ onChange }
 					panelId={ panelId }
@@ -749,6 +759,9 @@ export default function BackgroundPanel( {
 					inheritedValue={ inheritedValue }
 					settings={ settings }
 					isShownByDefault={ defaultControls.backgroundImage }
+					shouldShowBackgroundImageControls={
+						shouldShowBackgroundImageControls
+					}
 				/>
 			</div>
 
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index cfd114ab9f649c..689ac4c90c6f1c 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -75,12 +75,15 @@
 	position: relative;
 	border: 1px solid $gray-300;
 	border-radius: 2px;
-	display: flex;
 	justify-content: center;
 	align-items: stretch;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
 
+	&.has-image {
+		display: flex;
+	}
+
 	&.is-open {
 		background-color: $gray-100;
 	}
@@ -89,6 +92,15 @@
 		height: 100%;
 	}
 
+	.block-editor-global-styles-background-panel__image-tools-panel-item {
+		&.is-wide {
+			width: 100%;
+			.block-editor-global-styles-background-panel__inspector-preview-inner {
+				justify-content: center;
+			}
+		}
+	}
+
 	.block-editor-global-styles-background-panel__image-preview,
 	.block-editor-global-styles-background-panel__inspector-media-replace {
 		flex-grow: 1;
@@ -115,7 +127,7 @@
 
 	button.components-button {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-400;
+		//box-shadow: inset 0 0 0 $border-width $gray-400;
 		width: 100%;
 		display: block;
 
@@ -180,7 +192,7 @@
 }
 
 .block-editor-global-styles-background-panel__hidden-tools-panel-item {
-	height: 0px;
+	height: 0;
+	width: 0;
 	position: absolute;
-	width: 0px;
 }

From c1f46481de6ecb800f567a9de70ab7042a22ac67 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 20 Jun 2024 15:10:28 +1000
Subject: [PATCH 03/11] With tabs

A bit of margin
---
 .../global-styles/background-panel.js         | 174 +++++++++---------
 .../src/components/global-styles/style.scss   |  11 ++
 2 files changed, 102 insertions(+), 83 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 c0ad526a5d7f3e..20dd1f4cb4ff1b 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -10,8 +10,6 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalVStack as VStack,
 	DropZone,
@@ -24,6 +22,8 @@ import {
 	__experimentalTruncate as Truncate,
 	Dropdown,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	privateApis as componentsPrivateApis,
+	SelectControl,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -48,6 +48,7 @@ import { setImmutably } from '../../utils/object';
 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 = {
@@ -104,22 +105,6 @@ export function hasBackgroundImageValue( style ) {
 	);
 }
 
-/**
- * Get the help text for the background size control.
- *
- * @param {string} value backgroundSize value.
- * @return {string}      Translated help text.
- */
-function backgroundSizeHelpText( value ) {
-	if ( value === 'cover' || value === undefined ) {
-		return __( 'Image covers the space evenly.' );
-	}
-	if ( value === 'contain' ) {
-		return __( 'Image is contained without distortion.' );
-	}
-	return __( 'Image has a fixed width.' );
-}
-
 /**
  * Converts decimal x and y coords from FocalPointPicker to percentage-based values
  * to use as backgroundPosition value.
@@ -169,7 +154,7 @@ function InspectorImagePreviewItem( {
 		if ( typeof toggleProps?.isOpen !== 'undefined' ) {
 			onToggleCallback( toggleProps?.isOpen );
 		}
-	}, [ toggleProps?.isOpen ] );
+	}, [ toggleProps?.isOpen, onToggleCallback ] );
 	return (
 		<ItemGroup as={ as } className={ className } { ...toggleProps }>
 			<HStack
@@ -261,7 +246,7 @@ function InspectorImagePreviewToggle( {
 			renderContent={ () => (
 				<DropdownContentWrapper
 					className="block-editor-global-styles-background-panel__dropdown-content-wrapper"
-					paddingSize="medium"
+					paddingSize="none"
 				>
 					{ children }
 				</DropdownContentWrapper>
@@ -575,74 +560,97 @@ function BackgroundSizeToolsPanelItem( {
 			)
 		);
 
+	const { Tabs } = unlock( componentsPrivateApis );
+
 	return (
-		<VStack spacing={ 3 } className="single-column">
-			<FocalPointPicker
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				label={ __( 'Position' ) }
-				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
-				value={ backgroundPositionToCoords( positionValue ) }
-				onChange={ updateBackgroundPosition }
-			/>
-			<ToggleGroupControl
-				size="__unstable-large"
-				label={ __( 'Size' ) }
-				value={ currentValueForToggle }
-				onChange={ updateBackgroundSize }
-				isBlock
-				help={ backgroundSizeHelpText(
-					sizeValue || defaultValues?.backgroundSize
-				) }
+		<Tabs>
+			<Tabs.TabList>
+				<Tabs.Tab tabId="size">{ __( 'Style' ) }</Tabs.Tab>
+				<Tabs.Tab tabId="position">{ __( 'Position' ) }</Tabs.Tab>
+			</Tabs.TabList>
+			<Tabs.TabPanel
+				tabId="size"
+				focusable={ false }
+				className="block-editor-global-styles-background-panel__tab-panel"
 			>
-				<ToggleGroupControlOption
-					key="cover"
-					value="cover"
-					label={ _x(
-						'Cover',
-						'Size option for background image control'
-					) }
-				/>
-				<ToggleGroupControlOption
-					key="contain"
-					value="contain"
-					label={ _x(
-						'Contain',
-						'Size option for background image control'
+				<VStack spacing={ 3 } className="single-column">
+					<HStack
+						className="block-editor-global-styles-background-panel__size-controls"
+						spacing={ 4 }
+						justify="space-between"
+						alignment="top"
+					>
+						<SelectControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Size' ) }
+							options={ [
+								{
+									label: _x(
+										'Cover',
+										'Size option for background image control'
+									),
+									value: 'cover',
+								},
+								{
+									label: _x(
+										'Contain',
+										'Size option for background image control'
+									),
+									value: 'contain',
+								},
+								{
+									label: _x(
+										'Tile',
+										'Size option for background image control'
+									),
+									value: 'auto',
+								},
+							] }
+							value={ currentValueForToggle }
+							onChange={ updateBackgroundSize }
+						/>
+
+						{ currentValueForToggle === 'auto' && (
+							<UnitControl
+								label={ __( 'Width' ) }
+								aria-label={ __( 'Background image width' ) }
+								onChange={ updateBackgroundSize }
+								value={ sizeValue }
+								size="__unstable-large"
+								__unstableInputWidth="100px"
+								min={ 0 }
+								placeholder={ __( 'Auto' ) }
+							/>
+						) }
+					</HStack>
+					{ currentValueForToggle !== 'cover' && (
+						<ToggleControl
+							label={ __( 'Repeat' ) }
+							checked={ repeatCheckedValue }
+							onChange={ toggleIsRepeated }
+						/>
 					) }
-				/>
-				<ToggleGroupControlOption
-					key="tile"
-					value="auto"
-					label={ _x(
-						'Tile',
-						'Size option for background image control'
+				</VStack>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel
+				tabId="position"
+				focusable={ false }
+				className="block-editor-global-styles-background-panel__tab-panel"
+			>
+				<FocalPointPicker
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Position' ) }
+					url={ getResolvedThemeFilePath(
+						imageValue,
+						themeFileURIs
 					) }
+					value={ backgroundPositionToCoords( positionValue ) }
+					onChange={ updateBackgroundPosition }
 				/>
-			</ToggleGroupControl>
-			<HStack justify="flex-start" spacing={ 2 } as="span">
-				{ currentValueForToggle !== undefined &&
-				currentValueForToggle !== 'cover' &&
-				currentValueForToggle !== 'contain' ? (
-					<UnitControl
-						aria-label={ __( 'Background image width' ) }
-						onChange={ updateBackgroundSize }
-						value={ sizeValue }
-						size="__unstable-large"
-						__unstableInputWidth="100px"
-						min={ 0 }
-						placeholder={ __( 'Auto' ) }
-					/>
-				) : null }
-				{ currentValueForToggle !== 'cover' && (
-					<ToggleControl
-						label={ __( 'Repeat' ) }
-						checked={ repeatCheckedValue }
-						onChange={ toggleIsRepeated }
-					/>
-				) }
-			</HStack>
-		</VStack>
+			</Tabs.TabPanel>
+		</Tabs>
 	);
 }
 
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 689ac4c90c6f1c..f4d3a4583442b8 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -90,6 +90,7 @@
 
 	.block-editor-global-styles-background-panel__inspector-preview-inner {
 		height: 100%;
+
 	}
 
 	.block-editor-global-styles-background-panel__image-tools-panel-item {
@@ -158,6 +159,7 @@
 .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
 	width: 20px;
 	height: 20px;
+	margin-right: $grid-unit-10;
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
@@ -196,3 +198,12 @@
 	width: 0;
 	position: absolute;
 }
+
+.block-editor-global-styles-background-panel__tab-panel {
+	padding: $grid-unit-20;
+	width: 260px;
+}
+
+.block-editor-global-styles-background-panel__size-controls .components-base-control {
+	width: 100%;
+}

From 6640acbed3dda292e6de90e742c28d0435bb94b3 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 25 Jun 2024 12:20:48 +1000
Subject: [PATCH 04/11] Revert tabs and move the image upload to the floating
 panel

---
 .../global-styles/background-panel.js         | 387 ++++++++----------
 .../src/components/global-styles/style.scss   |  94 ++---
 2 files changed, 221 insertions(+), 260 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 20dd1f4cb4ff1b..b84df1ec0c6b22 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -10,6 +10,8 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalVStack as VStack,
 	DropZone,
@@ -22,8 +24,6 @@ import {
 	__experimentalTruncate as Truncate,
 	Dropdown,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	privateApis as componentsPrivateApis,
-	SelectControl,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -38,7 +38,6 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { isBlobURL } from '@wordpress/blob';
-import { reusableBlock, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -48,7 +47,6 @@ import { setImmutably } from '../../utils/object';
 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 = {
@@ -105,6 +103,22 @@ export function hasBackgroundImageValue( style ) {
 	);
 }
 
+/**
+ * Get the help text for the background size control.
+ *
+ * @param {string} value backgroundSize value.
+ * @return {string}      Translated help text.
+ */
+function backgroundSizeHelpText( value ) {
+	if ( value === 'cover' || value === undefined ) {
+		return __( 'Image covers the space evenly.' );
+	}
+	if ( value === 'contain' ) {
+		return __( 'Image is contained without distortion.' );
+	}
+	return __( 'Image has a fixed width.' );
+}
+
 /**
  * Converts decimal x and y coords from FocalPointPicker to percentage-based values
  * to use as backgroundPosition value.
@@ -164,12 +178,7 @@ function InspectorImagePreviewItem( {
 			>
 				{ imgUrl && (
 					<span
-						className={ clsx(
-							'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
-							{
-								'has-image': imgUrl,
-							}
-						) }
+						className="block-editor-global-styles-background-panel__inspector-image-indicator-wrapper"
 						aria-hidden
 					>
 						<span
@@ -180,7 +189,7 @@ function InspectorImagePreviewItem( {
 						/>
 					</span>
 				) }
-				<FlexItem as="span" style={ { flexGrow: 1 } }>
+				<FlexItem as="span" style={ imgUrl ? {} : { flexGrow: 1 } }>
 					<Truncate
 						numberOfLines={ 1 }
 						className="block-editor-global-styles-background-panel__inspector-media-replace-title"
@@ -202,7 +211,7 @@ function InspectorImagePreviewItem( {
 	);
 }
 
-function InspectorImagePreviewToggle( {
+function BackgroundControlsPanel( {
 	label,
 	filename,
 	url: imgUrl,
@@ -220,7 +229,6 @@ function InspectorImagePreviewToggle( {
 	return (
 		<Dropdown
 			popoverProps={ BACKGROUND_POPOVER_PROPS }
-			className="block-editor-global-styles-background-panel__inspector-media-replace"
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const toggleProps = {
 					onClick: onToggle,
@@ -246,7 +254,7 @@ function InspectorImagePreviewToggle( {
 			renderContent={ () => (
 				<DropdownContentWrapper
 					className="block-editor-global-styles-background-panel__dropdown-content-wrapper"
-					paddingSize="none"
+					paddingSize="medium"
 				>
 					{ children }
 				</DropdownContentWrapper>
@@ -255,14 +263,7 @@ function InspectorImagePreviewToggle( {
 	);
 }
 
-function BackgroundImageToolsPanelItem( {
-	panelId,
-	isShownByDefault,
-	onChange,
-	style,
-	inheritedValue,
-	shouldShowBackgroundImageControls,
-} ) {
+function BackgroundImageControls( { onChange, style, inheritedValue } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
@@ -271,9 +272,6 @@ function BackgroundImageToolsPanelItem( {
 	const { id, title, url } = style?.background?.backgroundImage || {
 		...inheritedValue?.background?.backgroundImage,
 	};
-	const hasImageValue =
-		hasBackgroundImageValue( style ) ||
-		hasBackgroundImageValue( inheritedValue );
 	const replaceContainerRef = useRef();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
@@ -347,16 +345,6 @@ function BackgroundImageToolsPanelItem( {
 		} );
 	};
 
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			style: {
-				...previousValue.style,
-				background: undefined,
-			},
-		};
-	}, [] );
-
 	const hasValue = hasBackgroundImageValue( style );
 
 	const closeAndFocus = () => {
@@ -379,74 +367,56 @@ function BackgroundImageToolsPanelItem( {
 		title || getFilename( url ) || __( 'Add background image' );
 
 	return (
-		<ToolsPanelItem
-			className={ clsx(
-				'single-column',
-				'block-editor-global-styles-background-panel__image-tools-panel-item',
-				{
-					'is-wide':
-						hasImageValue && ! shouldShowBackgroundImageControls,
-				}
-			) }
-			hasValue={ () => hasValue }
-			label={ __( 'Background image' ) }
-			onDeselect={ resetBackgroundImage }
-			isShownByDefault={ isShownByDefault }
-			resetAllFilter={ resetAllFilter }
-			panelId={ panelId }
+		<div
+			ref={ replaceContainerRef }
+			className="block-editor-global-styles-background-panel__image-tools-panel-item"
 		>
-			<div ref={ replaceContainerRef }>
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ url }
-					allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
-					accept="image/*"
-					onSelect={ onSelectMedia }
-					name={
-						hasImageValue && shouldShowBackgroundImageControls ? (
-							<Icon icon={ reusableBlock } />
-						) : (
-							<InspectorImagePreviewItem
-								className="block-editor-global-styles-background-panel__image-preview"
-								imgUrl={ url }
-								filename={ title }
-								label={ imgLabel }
-							/>
-						)
-					}
-					variant="secondary"
-				>
-					{ canRemove && (
-						<MenuItem
-							onClick={ () => {
-								closeAndFocus();
-								onRemove();
-							} }
-						>
-							{ __( 'Remove' ) }
-						</MenuItem>
-					) }
-					{ hasValue && (
-						<MenuItem
-							onClick={ () => {
-								closeAndFocus();
-								resetBackgroundImage();
-							} }
-						>
-							{ __( 'Reset ' ) }
-						</MenuItem>
-					) }
-				</MediaReplaceFlow>
-				<DropZone
-					onFilesDrop={ onFilesDrop }
-					label={ __( 'Drop to upload' ) }
-				/>
-			</div>
-		</ToolsPanelItem>
+			<MediaReplaceFlow
+				mediaId={ id }
+				mediaURL={ url }
+				allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
+				accept="image/*"
+				onSelect={ onSelectMedia }
+				name={
+					<InspectorImagePreviewItem
+						className="block-editor-global-styles-background-panel__image-preview"
+						imgUrl={ url }
+						filename={ title }
+						label={ imgLabel }
+					/>
+				}
+				variant="secondary"
+			>
+				{ canRemove && (
+					<MenuItem
+						onClick={ () => {
+							closeAndFocus();
+							onRemove();
+						} }
+					>
+						{ __( 'Remove' ) }
+					</MenuItem>
+				) }
+				{ hasValue && (
+					<MenuItem
+						onClick={ () => {
+							closeAndFocus();
+							resetBackgroundImage();
+						} }
+					>
+						{ __( 'Reset ' ) }
+					</MenuItem>
+				) }
+			</MediaReplaceFlow>
+			<DropZone
+				onFilesDrop={ onFilesDrop }
+				label={ __( 'Drop to upload' ) }
+			/>
+		</div>
 	);
 }
 
-function BackgroundSizeToolsPanelItem( {
+function BackgroundSizeControls( {
 	onChange,
 	style,
 	inheritedValue,
@@ -560,97 +530,74 @@ function BackgroundSizeToolsPanelItem( {
 			)
 		);
 
-	const { Tabs } = unlock( componentsPrivateApis );
-
 	return (
-		<Tabs>
-			<Tabs.TabList>
-				<Tabs.Tab tabId="size">{ __( 'Style' ) }</Tabs.Tab>
-				<Tabs.Tab tabId="position">{ __( 'Position' ) }</Tabs.Tab>
-			</Tabs.TabList>
-			<Tabs.TabPanel
-				tabId="size"
-				focusable={ false }
-				className="block-editor-global-styles-background-panel__tab-panel"
+		<VStack spacing={ 3 } className="single-column">
+			<FocalPointPicker
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label={ __( 'Position' ) }
+				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
+				value={ backgroundPositionToCoords( positionValue ) }
+				onChange={ updateBackgroundPosition }
+			/>
+			<ToggleGroupControl
+				size="__unstable-large"
+				label={ __( 'Size' ) }
+				value={ currentValueForToggle }
+				onChange={ updateBackgroundSize }
+				isBlock
+				help={ backgroundSizeHelpText(
+					sizeValue || defaultValues?.backgroundSize
+				) }
 			>
-				<VStack spacing={ 3 } className="single-column">
-					<HStack
-						className="block-editor-global-styles-background-panel__size-controls"
-						spacing={ 4 }
-						justify="space-between"
-						alignment="top"
-					>
-						<SelectControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							label={ __( 'Size' ) }
-							options={ [
-								{
-									label: _x(
-										'Cover',
-										'Size option for background image control'
-									),
-									value: 'cover',
-								},
-								{
-									label: _x(
-										'Contain',
-										'Size option for background image control'
-									),
-									value: 'contain',
-								},
-								{
-									label: _x(
-										'Tile',
-										'Size option for background image control'
-									),
-									value: 'auto',
-								},
-							] }
-							value={ currentValueForToggle }
-							onChange={ updateBackgroundSize }
-						/>
-
-						{ currentValueForToggle === 'auto' && (
-							<UnitControl
-								label={ __( 'Width' ) }
-								aria-label={ __( 'Background image width' ) }
-								onChange={ updateBackgroundSize }
-								value={ sizeValue }
-								size="__unstable-large"
-								__unstableInputWidth="100px"
-								min={ 0 }
-								placeholder={ __( 'Auto' ) }
-							/>
-						) }
-					</HStack>
-					{ currentValueForToggle !== 'cover' && (
-						<ToggleControl
-							label={ __( 'Repeat' ) }
-							checked={ repeatCheckedValue }
-							onChange={ toggleIsRepeated }
-						/>
+				<ToggleGroupControlOption
+					key="cover"
+					value="cover"
+					label={ _x(
+						'Cover',
+						'Size option for background image control'
 					) }
-				</VStack>
-			</Tabs.TabPanel>
-			<Tabs.TabPanel
-				tabId="position"
-				focusable={ false }
-				className="block-editor-global-styles-background-panel__tab-panel"
-			>
-				<FocalPointPicker
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					label={ __( 'Position' ) }
-					url={ getResolvedThemeFilePath(
-						imageValue,
-						themeFileURIs
+				/>
+				<ToggleGroupControlOption
+					key="contain"
+					value="contain"
+					label={ _x(
+						'Contain',
+						'Size option for background image control'
+					) }
+				/>
+				<ToggleGroupControlOption
+					key="tile"
+					value="auto"
+					label={ _x(
+						'Tile',
+						'Size option for background image control'
 					) }
-					value={ backgroundPositionToCoords( positionValue ) }
-					onChange={ updateBackgroundPosition }
 				/>
-			</Tabs.TabPanel>
-		</Tabs>
+			</ToggleGroupControl>
+			<HStack justify="flex-start" spacing={ 2 } as="span">
+				{ currentValueForToggle !== undefined &&
+				currentValueForToggle !== 'cover' &&
+				currentValueForToggle !== 'contain' ? (
+					<UnitControl
+						aria-label={ __( 'Background image width' ) }
+						onChange={ updateBackgroundSize }
+						value={ sizeValue }
+						size="__unstable-large"
+						__unstableInputWidth="100px"
+						min={ 0 }
+						placeholder={ __( 'Auto' ) }
+					/>
+				) : null }
+				{ currentValueForToggle !== 'cover' && (
+					<ToggleControl
+						label={ __( 'Repeat' ) }
+						checked={ repeatCheckedValue }
+						onChange={ toggleIsRepeated }
+					/>
+				) }
+			</HStack>
+		</VStack>
 	);
 }
 
@@ -725,6 +672,14 @@ export default function BackgroundPanel( {
 				backgroundSize: undefined,
 			} )
 		);
+	const resetBackgroundImage = () =>
+		onChange(
+			setImmutably(
+				value,
+				[ 'background', 'backgroundImage' ],
+				undefined
+			)
+		);
 	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
 
 	return (
@@ -738,42 +693,56 @@ export default function BackgroundPanel( {
 			<div
 				className={ clsx(
 					'block-editor-global-styles-background-panel__inspector-media-replace-container',
-					{ 'is-open': isDropDownOpen, 'has-image': hasImageValue }
+					{
+						'is-open': isDropDownOpen,
+					}
 				) }
 			>
-				{ shouldShowBackgroundImageControls && (
-					<InspectorImagePreviewToggle
+				{ shouldShowBackgroundImageControls ? (
+					<BackgroundControlsPanel
 						label={ title }
 						filename={ title }
 						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
 						onToggle={ setIsDropDownOpen }
 						hasImageValue={ hasImageValue }
 					>
-						<BackgroundSizeToolsPanelItem
-							onChange={ onChange }
-							panelId={ panelId }
-							isShownByDefault={ defaultControls.backgroundImage }
-							style={ value }
-							defaultValues={ defaultValues }
-							inheritedValue={ inheritedValue }
-							themeFileURIs={ themeFileURIs }
-						/>
-					</InspectorImagePreviewToggle>
+						<VStack spacing={ 3 } className="single-column">
+							<BackgroundImageControls
+								onChange={ onChange }
+								style={ value }
+								inheritedValue={ inheritedValue }
+							/>
+							<BackgroundSizeControls
+								onChange={ onChange }
+								panelId={ panelId }
+								isShownByDefault={
+									defaultControls.backgroundImage
+								}
+								style={ value }
+								defaultValues={ defaultValues }
+								inheritedValue={ inheritedValue }
+								themeFileURIs={ themeFileURIs }
+							/>
+						</VStack>
+					</BackgroundControlsPanel>
+				) : (
+					<BackgroundImageControls
+						onChange={ onChange }
+						style={ value }
+						inheritedValue={ inheritedValue }
+					/>
 				) }
-				<BackgroundImageToolsPanelItem
-					onChange={ onChange }
-					panelId={ panelId }
-					style={ value }
-					inheritedValue={ inheritedValue }
-					settings={ settings }
-					isShownByDefault={ defaultControls.backgroundImage }
-					shouldShowBackgroundImageControls={
-						shouldShowBackgroundImageControls
-					}
-				/>
 			</div>
 
 			{ /* Dummy ToolsPanel items, so we can control what's in the dropdown popover */ }
+			<ToolsPanelItem
+				hasValue={ () => hasImageValue }
+				label={ __( 'Image' ) }
+				onDeselect={ resetBackgroundImage }
+				isShownByDefault={ defaultControls.backgroundImage }
+				panelId={ panelId }
+				className="block-editor-global-styles-background-panel__hidden-tools-panel-item"
+			/>
 			<ToolsPanelItem
 				hasValue={ () => hasSizeValue }
 				label={ __( 'Size' ) }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index f4d3a4583442b8..25aac204018143 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -71,64 +71,56 @@
 	direction: ltr;
 }
 
+
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-	position: relative;
+	//position: relative;
 	border: 1px solid $gray-300;
 	border-radius: 2px;
-	justify-content: center;
-	align-items: stretch;
+	//justify-content: center;
+	//align-items: stretch;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
 
-	&.has-image {
-		display: flex;
-	}
-
 	&.is-open {
 		background-color: $gray-100;
 	}
 
-	.block-editor-global-styles-background-panel__inspector-preview-inner {
-		height: 100%;
-
-	}
-
 	.block-editor-global-styles-background-panel__image-tools-panel-item {
-		&.is-wide {
-			width: 100%;
-			.block-editor-global-styles-background-panel__inspector-preview-inner {
-				justify-content: center;
-			}
-		}
-	}
-
-	.block-editor-global-styles-background-panel__image-preview,
-	.block-editor-global-styles-background-panel__inspector-media-replace {
 		flex-grow: 1;
+		border: 0;
+		.components-dropdown {
+			display: block;
+		}
 	}
 
-	.block-editor-global-styles-background-panel__image-preview-content,
-	.block-editor-global-styles-background-panel__dropdown-toggle {
+	.block-editor-global-styles-background-panel__inspector-preview-inner {
 		height: 100%;
-		width: 100%;
-		padding-left: $grid-unit-15;
 	}
 
-	.block-editor-global-styles-background-panel__dropdown-toggle {
-		cursor: pointer;
-		background: transparent;
-		border: none;
+	.components-dropdown {
+		display: block;
+		height: 36px;
 	}
+}
 
+.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
 	// zone, we hide it for now.
 	.components-drop-zone__content-icon {
 		display: none;
 	}
 
+	.components-dropdown {
+		display: block;
+		height: 36px;
+	}
+
 	button.components-button {
 		color: $gray-900;
-		//box-shadow: inset 0 0 0 $border-width $gray-400;
 		width: 100%;
 		display: block;
 
@@ -140,20 +132,29 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
+}
 
-	.block-editor-global-styles-background-panel__inspector-media-replace-title {
-		word-break: break-all;
-		// The Button component is white-space: nowrap, and that won't work with line-clamp.
-		white-space: normal;
+.block-editor-global-styles-background-panel__image-preview-content,
+.block-editor-global-styles-background-panel__dropdown-toggle {
+	height: 100%;
+	width: 100%;
+	padding-left: $grid-unit-15;
+}
 
-		// 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__dropdown-toggle {
+	cursor: pointer;
+	background: transparent;
+	border: none;
+}
 
-	.components-dropdown {
-		display: block;
-	}
+.block-editor-global-styles-background-panel__inspector-media-replace-title {
+	word-break: break-all;
+	// The Button component is white-space: nowrap, and that won't work with line-clamp.
+	white-space: normal;
+
+	// 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-image-indicator-wrapper {
@@ -198,12 +199,3 @@
 	width: 0;
 	position: absolute;
 }
-
-.block-editor-global-styles-background-panel__tab-panel {
-	padding: $grid-unit-20;
-	width: 260px;
-}
-
-.block-editor-global-styles-background-panel__size-controls .components-base-control {
-	width: 100%;
-}

From ca9f7b8cdda3fe77d2a5f7c430f8684313a6f709 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 25 Jun 2024 12:55:17 +1000
Subject: [PATCH 05/11] Temp hack to push popover into the background

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

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 25aac204018143..b9a6245dcd432a 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -199,3 +199,9 @@
 	width: 0;
 	position: absolute;
 }
+
+// Hack to push into background when the media modal is open.
+// @TODO how to target the background panel specifically?
+.modal-open .components-dropdown__content {
+	z-index: 100000;
+}

From 37dd1e2e06aa0a5bdfc0b486bff7deaed0218171 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 25 Jun 2024 13:11:48 +1000
Subject: [PATCH 06/11] Fix hack to push popover into the background

---
 packages/base-styles/_z-index.scss                         | 4 +++-
 .../src/components/global-styles/background-panel.js       | 1 +
 .../block-editor/src/components/global-styles/style.scss   | 7 +++----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index c8c35acfce4867..a110c0052b56eb 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -65,8 +65,10 @@ $z-layers: (
 	// Needs to be below media library that has a z-index of 160000.
 	"{core/video track editor popover}": 160000 - 10,
 
-	// Needs to be below media library that has a z-index of 160000.
+	// Needs to be below media library (.media-model) that has a z-index of 160000.
 	".block-editor-format-toolbar__image-popover": 160000 - 10,
+	// Below the media library backdrop (.media-modal-backdrop), which has a z-index of 159900.
+	".block-editor-global-styles-background-panel__popover": 159900 - 10,
 
 	// Small screen inner blocks overlay must be displayed above drop zone,
 	// settings menu, and movers.
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 b84df1ec0c6b22..c2f3e123c8b6f7 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -57,6 +57,7 @@ const BACKGROUND_POPOVER_PROPS = {
 	placement: 'left-start',
 	offset: 36,
 	shift: true,
+	className: 'block-editor-global-styles-background-panel__popover',
 };
 const noop = () => {};
 
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index b9a6245dcd432a..653ddcae8b1ee1 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -200,8 +200,7 @@
 	position: absolute;
 }
 
-// Hack to push into background when the media modal is open.
-// @TODO how to target the background panel specifically?
-.modal-open .components-dropdown__content {
-	z-index: 100000;
+// Push control panel into the background when the media modal is open.
+.modal-open .block-editor-global-styles-background-panel__popover {
+	z-index: z-index(".block-editor-global-styles-background-panel__popover");
 }

From 808fb80e48c3de0eee313370ac509678d39f95c0 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 27 Jun 2024 11:29:35 +1000
Subject: [PATCH 07/11] Tweak size of media flow dropdown Icon margin tweak

---
 .../global-styles/background-panel.js         | 19 ++++++++++++++++++-
 .../src/components/global-styles/style.scss   | 17 +++++++++++++----
 2 files changed, 31 insertions(+), 5 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 c2f3e123c8b6f7..af921830a5b198 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -264,7 +264,13 @@ function BackgroundControlsPanel( {
 	);
 }
 
-function BackgroundImageControls( { onChange, style, inheritedValue } ) {
+function BackgroundImageControls( {
+	onChange,
+	style,
+	inheritedValue,
+	onRemoveImage = noop,
+	displayInPanel,
+} ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
@@ -378,6 +384,12 @@ function BackgroundImageControls( { onChange, style, inheritedValue } ) {
 				allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
 				accept="image/*"
 				onSelect={ onSelectMedia }
+				popoverProps={ {
+					className: clsx( {
+						'block-editor-global-styles-background-panel__media-replace-popover':
+							displayInPanel,
+					} ),
+				} }
 				name={
 					<InspectorImagePreviewItem
 						className="block-editor-global-styles-background-panel__image-preview"
@@ -403,6 +415,7 @@ function BackgroundImageControls( { onChange, style, inheritedValue } ) {
 						onClick={ () => {
 							closeAndFocus();
 							resetBackgroundImage();
+							onRemoveImage();
 						} }
 					>
 						{ __( 'Reset ' ) }
@@ -712,6 +725,10 @@ export default function BackgroundPanel( {
 								onChange={ onChange }
 								style={ value }
 								inheritedValue={ inheritedValue }
+								displayInPanel
+								onRemoveImage={ () =>
+									setIsDropDownOpen( false )
+								}
 							/>
 							<BackgroundSizeControls
 								onChange={ onChange }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 653ddcae8b1ee1..f1f11e33b5afa6 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -73,11 +73,8 @@
 
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-	//position: relative;
 	border: 1px solid $gray-300;
 	border-radius: 2px;
-	//justify-content: center;
-	//align-items: stretch;
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
 
@@ -160,7 +157,6 @@
 .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
 	width: 20px;
 	height: 20px;
-	margin-right: $grid-unit-10;
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
@@ -204,3 +200,16 @@
 .modal-open .block-editor-global-styles-background-panel__popover {
 	z-index: z-index(".block-editor-global-styles-background-panel__popover");
 }
+
+.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.
+		width: 226px;
+	}
+	.components-button {
+		padding: 0 $grid-unit-10;
+	}
+	.components-button .components-menu-items__item-icon.has-icon-right {
+		margin-left: $grid-unit-30 - $grid-unit-10;
+	}
+}

From bf0aab09f242d98c873669035a7c309d0b1bc663 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 28 Jun 2024 10:22:17 +1000
Subject: [PATCH 08/11] Remove default controls override as there's only
 'background image' now. Reset image functions reset all background image
 properties.

isShownByDefault prop not used. Deleting

Prevent focal point picker creating horizontal scroll

Expand popover on mobile
Don't resize with window height change
---
 .../global-styles/background-panel.js         | 49 +++++--------------
 .../src/components/global-styles/style.scss   |  1 +
 packages/block-editor/src/hooks/background.js |  3 --
 .../global-styles/background-panel.js         |  8 ---
 4 files changed, 12 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 af921830a5b198..dcf60092875f82 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -51,13 +51,13 @@ import { getResolvedThemeFilePath } from './theme-file-uri-utils';
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,
-	backgroundSize: true,
 };
 const BACKGROUND_POPOVER_PROPS = {
 	placement: 'left-start',
 	offset: 36,
 	shift: true,
 	className: 'block-editor-global-styles-background-panel__popover',
+	expandOnMobile: true,
 };
 const noop = () => {};
 
@@ -414,7 +414,6 @@ function BackgroundImageControls( {
 					<MenuItem
 						onClick={ () => {
 							closeAndFocus();
-							resetBackgroundImage();
 							onRemoveImage();
 						} }
 					>
@@ -661,6 +660,10 @@ export default function BackgroundPanel( {
 			background: {},
 		};
 	}, [] );
+
+	const resetBackground = () =>
+		onChange( setImmutably( value, [ 'background' ], {} ) );
+
 	const { title, url } = value?.background?.backgroundImage || {
 		...inheritedValue?.background?.backgroundImage,
 	};
@@ -668,32 +671,12 @@ export default function BackgroundPanel( {
 		hasBackgroundImageValue( value ) ||
 		hasBackgroundImageValue( inheritedValue );
 
-	const hasSizeValue =
-		hasBackgroundSizeValue( value ) ||
-		hasBackgroundSizeValue( inheritedValue );
-
 	const shouldShowBackgroundImageControls =
 		hasImageValue &&
 		( settings?.background?.backgroundSize ||
 			settings?.background?.backgroundPosition ||
 			settings?.background?.backgroundRepeat );
-	const resetBackgroundSize = () =>
-		onChange(
-			setImmutably( value, [ 'background' ], {
-				...value?.background,
-				backgroundPosition: undefined,
-				backgroundRepeat: undefined,
-				backgroundSize: undefined,
-			} )
-		);
-	const resetBackgroundImage = () =>
-		onChange(
-			setImmutably(
-				value,
-				[ 'background', 'backgroundImage' ],
-				undefined
-			)
-		);
+
 	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
 
 	return (
@@ -726,16 +709,14 @@ export default function BackgroundPanel( {
 								style={ value }
 								inheritedValue={ inheritedValue }
 								displayInPanel
-								onRemoveImage={ () =>
-									setIsDropDownOpen( false )
-								}
+								onRemoveImage={ () => {
+									setIsDropDownOpen( false );
+									resetBackground();
+								} }
 							/>
 							<BackgroundSizeControls
 								onChange={ onChange }
 								panelId={ panelId }
-								isShownByDefault={
-									defaultControls.backgroundImage
-								}
 								style={ value }
 								defaultValues={ defaultValues }
 								inheritedValue={ inheritedValue }
@@ -756,15 +737,7 @@ export default function BackgroundPanel( {
 			<ToolsPanelItem
 				hasValue={ () => hasImageValue }
 				label={ __( 'Image' ) }
-				onDeselect={ resetBackgroundImage }
-				isShownByDefault={ defaultControls.backgroundImage }
-				panelId={ panelId }
-				className="block-editor-global-styles-background-panel__hidden-tools-panel-item"
-			/>
-			<ToolsPanelItem
-				hasValue={ () => hasSizeValue }
-				label={ __( 'Size' ) }
-				onDeselect={ resetBackgroundSize }
+				onDeselect={ resetBackground }
 				isShownByDefault={ defaultControls.backgroundImage }
 				panelId={ panelId }
 				className="block-editor-global-styles-background-panel__hidden-tools-panel-item"
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index f1f11e33b5afa6..7addb6098e3da7 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -184,6 +184,7 @@
 
 .block-editor-global-styles-background-panel__dropdown-content-wrapper {
 	min-width: 260px;
+	overflow-x: hidden;
 	.components-base-control__help,
 	.components-toggle-control {
 		margin-bottom: 0;
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 2178eb9a8ea8b3..30eaa9e3769d72 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -174,9 +174,6 @@ export function BackgroundImagePanel( {
 		<StylesBackgroundPanel
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
-			/*
-			defaultControls={ defaultControls }
-			*/
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
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 8a372587bc66e5..24ab914bed8c52 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -45,13 +45,6 @@ export default function BackgroundPanel() {
 	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
-	const defaultControls = {
-		backgroundImage: true,
-		backgroundSize:
-			hasBackgroundImageValue( style ) ||
-			hasBackgroundImageValue( inheritedStyle ),
-	};
-
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
@@ -59,7 +52,6 @@ export default function BackgroundPanel() {
 			onChange={ setStyle }
 			settings={ settings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
-			defaultControls={ defaultControls }
 			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);

From 6836456f057941dcf215aca0b198e01d22ea97a3 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 2 Jul 2024 13:58:43 +1000
Subject: [PATCH 09/11] Rolling back expanding popover in mobile. Squishing all
 the controls, including giving the focal point picker a max-height

---
 .../global-styles/background-panel.js         | 41 ++++++++-----------
 .../src/components/global-styles/style.scss   |  3 ++
 2 files changed, 21 insertions(+), 23 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 dcf60092875f82..189fe967f8bf9b 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -57,7 +57,6 @@ const BACKGROUND_POPOVER_PROPS = {
 	offset: 36,
 	shift: true,
 	className: 'block-editor-global-styles-background-panel__popover',
-	expandOnMobile: true,
 };
 const noop = () => {};
 
@@ -546,7 +545,6 @@ function BackgroundSizeControls( {
 	return (
 		<VStack spacing={ 3 } className="single-column">
 			<FocalPointPicker
-				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Position' ) }
 				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
@@ -554,7 +552,6 @@ function BackgroundSizeControls( {
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleGroupControl
-				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
@@ -589,26 +586,24 @@ function BackgroundSizeControls( {
 				/>
 			</ToggleGroupControl>
 			<HStack justify="flex-start" spacing={ 2 } as="span">
-				{ currentValueForToggle !== undefined &&
-				currentValueForToggle !== 'cover' &&
-				currentValueForToggle !== 'contain' ? (
-					<UnitControl
-						aria-label={ __( 'Background image width' ) }
-						onChange={ updateBackgroundSize }
-						value={ sizeValue }
-						size="__unstable-large"
-						__unstableInputWidth="100px"
-						min={ 0 }
-						placeholder={ __( 'Auto' ) }
-					/>
-				) : null }
-				{ currentValueForToggle !== 'cover' && (
-					<ToggleControl
-						label={ __( 'Repeat' ) }
-						checked={ repeatCheckedValue }
-						onChange={ toggleIsRepeated }
-					/>
-				) }
+				<UnitControl
+					aria-label={ __( 'Background image width' ) }
+					onChange={ updateBackgroundSize }
+					value={ sizeValue }
+					__unstableInputWidth="100px"
+					min={ 0 }
+					placeholder={ __( 'Auto' ) }
+					disabled={
+						currentValueForToggle !== 'auto' ||
+						currentValueForToggle === undefined
+					}
+				/>
+				<ToggleControl
+					label={ __( 'Repeat' ) }
+					checked={ repeatCheckedValue }
+					onChange={ toggleIsRepeated }
+					disabled={ currentValueForToggle === 'cover' }
+				/>
 			</HStack>
 		</VStack>
 	);
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 7addb6098e3da7..e6f23939aabe49 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -189,6 +189,9 @@
 	.components-toggle-control {
 		margin-bottom: 0;
 	}
+	.components-focal-point-picker__media--image {
+		max-height: 100px;
+	}
 }
 
 .block-editor-global-styles-background-panel__hidden-tools-panel-item {

From d0a56dfcfc194a300e8ef50b14e1f4e4fbc9d7e1 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 2 Jul 2024 17:08:09 +1000
Subject: [PATCH 10/11] Remove commented-out code

---
 packages/block-editor/src/hooks/background.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index 30eaa9e3769d72..c22e5cf20ff165 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -147,13 +147,6 @@ export function BackgroundImagePanel( {
 		return null;
 	}
 
-	/*
-	const defaultControls = getBlockSupport( name, [
-		BACKGROUND_SUPPORT_KEY,
-		'__experimentalDefaultControls',
-	] );
-*/
-
 	const onChange = ( newStyle ) => {
 		setAttributes( {
 			style: cleanEmptyObject( newStyle ),

From 34d20ce2ddb44385f2633b4d1df4934c9b5ab194 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 3 Jul 2024 10:21:06 +1000
Subject: [PATCH 11/11] Revert input sizes Ensure long file names are not cut
 off by min-width Use clamp value for focal picker image height

---
 .../src/components/global-styles/background-panel.js  |  3 +++
 .../src/components/global-styles/style.scss           | 11 +++++++----
 2 files changed, 10 insertions(+), 4 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 189fe967f8bf9b..6baef04f39b6b3 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -545,6 +545,7 @@ function BackgroundSizeControls( {
 	return (
 		<VStack spacing={ 3 } className="single-column">
 			<FocalPointPicker
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Position' ) }
 				url={ getResolvedThemeFilePath( imageValue, themeFileURIs ) }
@@ -552,6 +553,7 @@ function BackgroundSizeControls( {
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleGroupControl
+				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
@@ -590,6 +592,7 @@ function BackgroundSizeControls( {
 					aria-label={ __( 'Background image width' ) }
 					onChange={ updateBackgroundSize }
 					value={ sizeValue }
+					size="__unstable-large"
 					__unstableInputWidth="100px"
 					min={ 0 }
 					placeholder={ __( 'Auto' ) }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index e6f23939aabe49..f55e2da6437041 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -154,9 +154,12 @@
 	text-align-last: center;
 }
 
-.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-	width: 20px;
-	height: 20px;
+.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 {
@@ -190,7 +193,7 @@
 		margin-bottom: 0;
 	}
 	.components-focal-point-picker__media--image {
-		max-height: 100px;
+		max-height: clamp(120px, 9vh, 280px);
 	}
 }