From 2059edb63a0d55ee32d889c18dcd6cd30765f84c Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 28 Mar 2024 11:04:55 +1100
Subject: [PATCH 1/8] Trying to change the header labels for background -
 Background > Background image - Using the title/url of the current image in
 the media uploader component

---
 .../src/components/block-inspector/index.js       |  2 +-
 .../components/global-styles/background-panel.js  | 15 ++++++++++++---
 .../inspector-controls-tabs/styles-tab.js         |  2 +-
 .../components/global-styles/background-panel.js  |  2 ++
 .../src/components/global-styles/root-menu.js     |  4 ++--
 .../components/global-styles/screen-background.js |  2 +-
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 136cdef91286e2..5c52ca62e01d69 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -300,7 +300,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					<InspectorControls.Slot group="styles" />
 					<InspectorControls.Slot
 						group="background"
-						label={ __( 'Background' ) }
+						label={ __( 'Background image' ) }
 					/>
 					<PositionControls />
 					<div>
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 c1354bbc4a4e14..b198425c7c9c68 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -135,7 +135,13 @@ export const backgroundPositionToCoords = ( value ) => {
 };
 
 function InspectorImagePreview( { label, filename, url: imgUrl } ) {
-	const imgLabel = label || getFilename( imgUrl );
+	let imgLabel = label || getFilename( imgUrl );
+	// getFilename returns 'undefined' as a string.
+	imgLabel =
+		!! imgLabel && imgLabel !== 'undefined'
+			? imgLabel
+			: __( 'Select or upload image' );
+
 	return (
 		<ItemGroup as="span">
 			<HStack justify="flex-start" as="span">
@@ -295,7 +301,7 @@ function BackgroundImageToolsPanelItem( {
 					onSelect={ onSelectMedia }
 					name={
 						<InspectorImagePreview
-							label={ __( 'Background image' ) }
+							label={ title }
 							filename={ title || __( 'Untitled' ) }
 							url={ url }
 						/>
@@ -518,6 +524,7 @@ function BackgroundToolsPanel( {
 	value,
 	panelId,
 	children,
+	headerLabel,
 } ) {
 	const resetAll = () => {
 		const updatedValue = resetAllFilter( value );
@@ -528,7 +535,7 @@ function BackgroundToolsPanel( {
 		<VStack
 			as={ ToolsPanel }
 			spacing={ 6 }
-			label={ __( 'Background' ) }
+			label={ headerLabel }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
@@ -552,6 +559,7 @@ export default function BackgroundPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
+	headerLabel = __( 'Background image' ),
 } ) {
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
@@ -568,6 +576,7 @@ export default function BackgroundPanel( {
 			value={ value }
 			onChange={ onChange }
 			panelId={ panelId }
+			headerLabel={ headerLabel }
 		>
 			<BackgroundImageToolsPanelItem
 				onChange={ onChange }
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
index 8386b545c72500..e45805a51391a4 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -30,7 +30,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background' ) }
+				label={ __( 'Background image' ) }
 			/>
 			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot
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 cae8bdba61871f..ec15aca790e03e 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -34,6 +35,7 @@ export default function BackgroundPanel() {
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
+			headerLabel={ __( 'Image' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 		/>
 	);
diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 97598635f7b859..c747efee635d88 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -64,9 +64,9 @@ function RootMenu() {
 					<NavigationButtonAsItem
 						icon={ image }
 						path="/background"
-						aria-label={ __( 'Background styles' ) }
+						aria-label={ __( 'Background image styles' ) }
 					>
-						{ __( 'Background' ) }
+						{ __( 'Background image' ) }
 					</NavigationButtonAsItem>
 				) }
 			</ItemGroup>
diff --git a/packages/edit-site/src/components/global-styles/screen-background.js b/packages/edit-site/src/components/global-styles/screen-background.js
index 5e8a7832a42b46..e6d338ffcbef1e 100644
--- a/packages/edit-site/src/components/global-styles/screen-background.js
+++ b/packages/edit-site/src/components/global-styles/screen-background.js
@@ -20,7 +20,7 @@ function ScreenBackground() {
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Background' ) } />
+			<ScreenHeader title={ __( 'Background image' ) } />
 			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);

From dfec5411d683929c23047bbc63ef549c7a56cf01 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 28 Mar 2024 11:42:31 +1100
Subject: [PATCH 2/8] Simplify copy

---
 .../src/components/global-styles/background-panel.js          | 4 +---
 1 file changed, 1 insertion(+), 3 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 b198425c7c9c68..853c881f41f08e 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -138,9 +138,7 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 	let imgLabel = label || getFilename( imgUrl );
 	// getFilename returns 'undefined' as a string.
 	imgLabel =
-		!! imgLabel && imgLabel !== 'undefined'
-			? imgLabel
-			: __( 'Select or upload image' );
+		!! imgLabel && imgLabel !== 'undefined' ? imgLabel : __( 'Add image' );
 
 	return (
 		<ItemGroup as="span">

From 5696edf6947c79f92ae71037ed3abd122080c771 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 28 Mar 2024 13:22:27 +1100
Subject: [PATCH 3/8] We don't need this wild check now that
 https://github.com/WordPress/gutenberg/pull/60265 is merged

---
 .../src/components/global-styles/background-panel.js         | 5 +----
 1 file changed, 1 insertion(+), 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 853c881f41f08e..76f56c8205b3bf 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -135,10 +135,7 @@ export const backgroundPositionToCoords = ( value ) => {
 };
 
 function InspectorImagePreview( { label, filename, url: imgUrl } ) {
-	let imgLabel = label || getFilename( imgUrl );
-	// getFilename returns 'undefined' as a string.
-	imgLabel =
-		!! imgLabel && imgLabel !== 'undefined' ? imgLabel : __( 'Add image' );
+	const imgLabel = label || getFilename( imgUrl ) || __( 'Add image' );
 
 	return (
 		<ItemGroup as="span">

From a492281ac87f066c519fd06e81be36fee56624f5 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 2 Apr 2024 12:37:17 +1100
Subject: [PATCH 4/8] Remove placeholder image icon and center text

---
 .../global-styles/background-panel.js         | 26 +++++++++----------
 .../src/components/global-styles/style.scss   |  8 +-----
 2 files changed, 14 insertions(+), 20 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 76f56c8205b3bf..ff30138cd6160d 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -139,25 +139,25 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 
 	return (
 		<ItemGroup as="span">
-			<HStack justify="flex-start" as="span">
-				<span
-					className={ classnames(
-						'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
-						{
-							'has-image': imgUrl,
-						}
-					) }
-					aria-hidden
-				>
-					{ imgUrl && (
+			<HStack justify={ imgUrl ? 'flex-start' : 'center' } as="span">
+				{ imgUrl && (
+					<span
+						className={ classnames(
+							'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>
+					</span>
+				) }
 				<FlexItem as="span">
 					<Truncate
 						numberOfLines={ 1 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index ab4407cd9b911b..95a2864fa450f3 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -111,17 +111,11 @@
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-	background: #fff linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); // Show a diagonal line (crossed out) for empty background image.
-	border-radius: $radius-round !important; // Override the default border-radius inherited from FlexItem.
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	display: block;
 	width: 20px;
 	height: 20px;
 	flex: none;
-
-	&.has-image {
-		background: #fff; // No diagonal line for non-empty background image. A background color is in use to account for partially transparent images.
-	}
+	background: #fff;
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {

From 2b8443c732dfc74558af33b0ba3cea9b764dcbf5 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 12 Apr 2024 10:31:35 +1000
Subject: [PATCH 5/8] Fix spacing Harmonize tools panels

---
 .../src/components/global-styles/background-panel.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 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 ff30138cd6160d..284404fcd4e317 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -529,7 +529,7 @@ function BackgroundToolsPanel( {
 	return (
 		<VStack
 			as={ ToolsPanel }
-			spacing={ 6 }
+			spacing={ 4 }
 			label={ headerLabel }
 			resetAll={ resetAll }
 			panelId={ panelId }
@@ -542,7 +542,7 @@ function BackgroundToolsPanel( {
 
 const DEFAULT_CONTROLS = {
 	backgroundImage: true,
-	backgroundSize: true,
+	backgroundSize: false,
 };
 
 export default function BackgroundPanel( {

From 133f9c0d1cf24f293159df0ab25b677de1ef5bd3 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 12 Apr 2024 14:39:08 +1000
Subject: [PATCH 6/8] the background size panel displays by default in the site
 editor for top-level styles, but only when there's an image available. Using
 constant for "image"

---
 .../src/components/global-styles/background-panel.js  | 11 +++++------
 .../src/components/global-styles/background-panel.js  |  8 ++++++++
 2 files changed, 13 insertions(+), 6 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 284404fcd4e317..954e87cc4ecd3f 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -40,6 +40,10 @@ import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
+const DEFAULT_CONTROLS = {
+	backgroundImage: true,
+	backgroundSize: false,
+};
 
 /**
  * Checks site settings to see if the background panel may be used.
@@ -248,7 +252,7 @@ function BackgroundImageToolsPanelItem( {
 
 	const onFilesDrop = ( filesList ) => {
 		mediaUpload( {
-			allowedTypes: [ 'image' ],
+			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
 			filesList,
 			onFileChange( [ image ] ) {
 				if ( isBlobURL( image?.url ) ) {
@@ -540,11 +544,6 @@ function BackgroundToolsPanel( {
 	);
 }
 
-const DEFAULT_CONTROLS = {
-	backgroundImage: true,
-	backgroundSize: false,
-};
-
 export default function BackgroundPanel( {
 	as: Wrapper = BackgroundToolsPanel,
 	value,
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 ec15aca790e03e..2addf109873aae 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -29,6 +29,13 @@ export default function BackgroundPanel() {
 	} );
 	const [ settings ] = useGlobalSetting( '' );
 
+	const defaultControls = {
+		backgroundImage: true,
+		backgroundSize:
+			!! style?.background?.backgroundImage &&
+			!! inheritedStyle?.background?.backgroundImage,
+	};
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
@@ -37,6 +44,7 @@ export default function BackgroundPanel() {
 			settings={ settings }
 			headerLabel={ __( 'Image' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			defaultControls={ defaultControls }
 		/>
 	);
 }

From 911089f1ece9af95832c860a7dfbdb1bf211d998 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 15 Apr 2024 09:59:18 +1000
Subject: [PATCH 7/8] Update copy for unset image

---
 .../src/components/global-styles/background-panel.js           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 954e87cc4ecd3f..ef1f9673d601f9 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -139,7 +139,8 @@ export const backgroundPositionToCoords = ( value ) => {
 };
 
 function InspectorImagePreview( { label, filename, url: imgUrl } ) {
-	const imgLabel = label || getFilename( imgUrl ) || __( 'Add image' );
+	const imgLabel =
+		label || getFilename( imgUrl ) || __( 'Add background image' );
 
 	return (
 		<ItemGroup as="span">

From 0524b1717d38e9a6a2b51f1e74f858e5785ea2ca Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 16 Apr 2024 09:03:04 +1000
Subject: [PATCH 8/8] Update border of button to match site logo upload button

---
 packages/block-editor/src/components/global-styles/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 95a2864fa450f3..1630ac2abde574 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -81,7 +81,7 @@
 
 	button.components-button {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
+		box-shadow: inset 0 0 0 $border-width $gray-400;
 		width: 100%;
 		display: block;
 		height: $grid-unit-50;