Background image: update controls defaults and layout (#62000)

* Background image: add functionality to remove a theme's default, site-wide background image in the editor by settings the value to `background-image: none` * Background image: harmonize headings, update copy including changing the label "Fixed" to "Tile", using horizontal layout for image size and repeat, fixing bug where width input is cleared and the size defaults to "cover" * Make sure the visually hidden labels are correct - use either the image title or image filename. Where there is no image URL, then show no background image selected Co-authored-by: ramonjd <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: andrewserong <[email protected]>
WordPress · May 28, 2024 · b3cfec4 · b3cfec4
1 parent 2097e84
commit b3cfec4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 27 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
@@ -102,7 +102,7 @@ function backgroundSizeHelpText( value ) {
 	if ( value === 'contain' ) {
 		return __( 'Image is contained without distortion.' );
 	}
-	return __( 'Specify a fixed width.' );
+	return __( 'Image has a fixed width.' );
 }
 
 /**
@@ -174,13 +174,13 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 						{ imgLabel }
 					</Truncate>
 					<VisuallyHidden as="span">
-						{ filename
+						{ imgUrl
 							? sprintf(
 									/* translators: %s: file name */
-									__( 'Selected image: %s' ),
-									filename
+									__( 'Background image: %s' ),
+									filename || imgLabel
 							  )
-							: __( 'No image selected' ) }
+							: __( 'No background image selected' ) }
 					</VisuallyHidden>
 				</FlexItem>
 			</HStack>
@@ -321,7 +321,7 @@ function BackgroundImageToolsPanelItem( {
 					name={
 						<InspectorImagePreview
 							label={ title }
-							filename={ title || __( 'Untitled' ) }
+							filename={ title }
 							url={ getResolvedThemeFilePath(
 								url,
 								themeFileURIs
@@ -443,6 +443,14 @@ function BackgroundSizeToolsPanelItem( {
 			nextRepeat = undefined;
 		}
 
+		/*
+		 * Next will be null when the input is cleared,
+		 * in which case the value should be 'auto'.
+		 */
+		if ( ! next && currentValueForToggle === 'auto' ) {
+			next = 'auto';
+		}
+
 		onChange(
 			setImmutably( style, [ 'background' ], {
 				...style?.background,
@@ -506,7 +514,9 @@ function BackgroundSizeToolsPanelItem( {
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
 				isBlock
-				help={ backgroundSizeHelpText( sizeValue ) }
+				help={ backgroundSizeHelpText(
+					sizeValue || defaultValues?.backgroundSize
+				) }
 			>
 				<ToggleGroupControlOption
 					key={ 'cover' }
@@ -519,27 +529,32 @@ function BackgroundSizeToolsPanelItem( {
 					label={ __( 'Contain' ) }
 				/>
 				<ToggleGroupControlOption
-					key={ 'fixed' }
+					key={ 'tile' }
 					value={ 'auto' }
-					label={ __( 'Fixed' ) }
+					label={ __( 'Tile' ) }
 				/>
 			</ToggleGroupControl>
-			{ currentValueForToggle !== undefined &&
-			currentValueForToggle !== 'cover' &&
-			currentValueForToggle !== 'contain' ? (
-				<UnitControl
-					size={ '__unstable-large' }
-					onChange={ updateBackgroundSize }
-					value={ sizeValue }
-				/>
-			) : null }
-			{ currentValueForToggle !== 'cover' && (
-				<ToggleControl
-					label={ __( 'Repeat' ) }
-					checked={ repeatCheckedValue }
-					onChange={ toggleIsRepeated }
-				/>
-			) }
+			<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 }
+					/>
+				) : null }
+				{ currentValueForToggle !== 'cover' && (
+					<ToggleControl
+						label={ __( 'Repeat' ) }
+						checked={ repeatCheckedValue }
+						onChange={ toggleIsRepeated }
+					/>
+				) }
+			</HStack>
 		</VStack>
 	);
 }

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,7 +2,6 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -59,7 +58,6 @@ export default function BackgroundPanel() {
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
-			headerLabel={ __( 'Background' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			defaultControls={ defaultControls }
 			themeFileURIs={ _links?.[ 'wp:theme-file' ] }