Skip to content

Commit

Permalink
Improve background image control (#54439)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
richtabor authored Sep 21, 2023
1 parent a4efbba commit ea24e06
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
/>
<InspectorControls.Slot
group="background"
label={ __( 'Background image' ) }
label={ __( 'Background' ) }
/>
<InspectorControls.Slot group="filter" />
<InspectorControls.Slot
Expand Down
42 changes: 35 additions & 7 deletions packages/block-editor/src/hooks/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -232,7 +252,8 @@ function BackgroundImagePanelItem( props ) {
onSelect={ onSelectMedia }
name={
<InspectorImagePreview
label={ title }
label={ __( 'Background image' ) }
filename={ title }
url={ url }
/>
}
Expand All @@ -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>
) }
/>
Expand Down
45 changes: 32 additions & 13 deletions packages/block-editor/src/hooks/background.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

1 comment on commit ea24e06

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in ea24e06.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6268154047
📝 Reported issues:

Please sign in to comment.