Trying to change the header labels for background

- Background > Background image - Using the title/url of the current image in the media uploader component
WordPress · Apr 12, 2024 · 7a56d04 · 7a56d04
1 parent 73ee882
commit 7a56d04
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -20,7 +20,7 @@ function ScreenBackground() {
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Background' ) } />
+			<ScreenHeader title={ __( 'Background image' ) } />
 			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);