Improve background image control (#54439)

* Update background.js * Update background.scss * Update background.scss * Use variables * Update background.js * Add describedby for empty state * Add filename description (wip) * Update a11y based on feedback * Use "Background" for panel name
WordPress · Sep 22, 2023 · e530e3e · e530e3e
1 parent f452d03
commit e530e3e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 21 deletions.
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
@@ -34,7 +34,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background image' ) }
+				label={ __( 'Background' ) }
 			/>
 			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
@@ -9,13 +9,14 @@ import {
 	DropZone,
 	FlexItem,
 	MenuItem,
+	VisuallyHidden,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { Platform, useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
 
@@ -96,19 +97,38 @@ export function resetBackgroundImage( { attributes = {}, setAttributes } ) {
 	} );
 }
 
-function InspectorImagePreview( { label, url: imgUrl } ) {
+function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 	const imgLabel = label || getFilename( imgUrl );
 	return (
 		<ItemGroup as="span">
 			<HStack justify="flex-start" as="span">
-				<img src={ imgUrl } alt="" />
+				<span
+					className="block-editor-hooks__background__inspector-image-indicator-wrapper"
+					aria-hidden
+				>
+					{ imgUrl && (
+						<span
+							className="block-editor-hooks__background__inspector-image-indicator"
+							style={ {
+								backgroundImage: `url(${ imgUrl })`,
+							} }
+						/>
+					) }
+				</span>
 				<FlexItem as="span">
 					<Truncate
 						numberOfLines={ 1 }
 						className="block-editor-hooks__background__inspector-media-replace-title"
 					>
 						{ imgLabel }
 					</Truncate>
+					<VisuallyHidden as="span">
+						{ sprintf(
+							/* translators: %s: file name */
+							__( 'Selected image: %s' ),
+							filename
+						) }
+					</VisuallyHidden>
 				</FlexItem>
 			</HStack>
 		</ItemGroup>
@@ -232,7 +252,8 @@ function BackgroundImagePanelItem( props ) {
 						onSelect={ onSelectMedia }
 						name={
 							<InspectorImagePreview
-								label={ title }
+								label={ __( 'Background image' ) }
+								filename={ title }
 								url={ url }
 							/>
 						}
@@ -254,11 +275,18 @@ function BackgroundImagePanelItem( props ) {
 								<div className="block-editor-hooks__background__inspector-upload-container">
 									<Button
 										onClick={ open }
-										variant="secondary"
+										aria-label={ __(
+											'Background image style'
+										) }
 									>
-										{ __( 'Add background image' ) }
+										<InspectorImagePreview
+											label={ __( 'Background image' ) }
+										/>
 									</Button>
-									<DropZone onFilesDrop={ onFilesDrop } />
+									<DropZone
+										onFilesDrop={ onFilesDrop }
+										label={ __( 'Drop to upload' ) }
+									/>
 								</div>
 							) }
 						/>

diff --git a/packages/block-editor/src/hooks/background.scss b/packages/block-editor/src/hooks/background.scss
@@ -11,7 +11,7 @@
 .block-editor-hooks__background__inspector-media-replace-container {
 	button.components-button {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 1px $gray-400;
+		box-shadow: inset 0 0 0 $border-width $gray-300;
 		width: 100%;
 		display: block;
 		height: $grid-unit-50;
@@ -40,18 +40,37 @@
 	.components-dropdown {
 		display: block;
 	}
+}
 
-	img {
-		width: 20px;
-		min-width: 20px;
-		aspect-ratio: 1;
-		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-		border-radius: 50% !important;
-	}
+.block-editor-hooks__background__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;
+}
 
-	.block-editor-hooks__background__inspector-readonly-logo-preview {
-		padding: 6px 12px;
-		display: flex;
-		height: $grid-unit-50;
-	}
+.block-editor-hooks__background__inspector-image-indicator {
+	background-size: cover;
+	border-radius: $radius-round;
+	width: 20px;
+	height: 20px;
+	display: block;
+	position: relative;
+}
+
+.block-editor-hooks__background__inspector-image-indicator::after {
+	content: "";
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	bottom: -1px;
+	right: -1px;
+	border-radius: $radius-round;
+	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
+	border: 1px solid transparent;
+	box-sizing: inherit;
 }