Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve background image control #54439

Merged
merged 9 commits into from
Sep 21, 2023
Merged

Improve background image control #54439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9321f08
Update background.js
richtabor Sep 13, 2023
f370d1e
Update background.scss
richtabor Sep 13, 2023
85920b1
Update background.scss
richtabor Sep 13, 2023
e25c8f8
Use variables
richtabor Sep 13, 2023
6fadbf9
Update background.js
richtabor Sep 13, 2023
48a4d28
Add describedby for empty state
richtabor Sep 13, 2023
0e18b03
Add filename description (wip)
richtabor Sep 13, 2023
d1b7787
Update a11y based on feedback
richtabor Sep 14, 2023
80c8b1b
Use "Background" for panel name
richtabor Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
View file
Open in desktop
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
View file
Open in desktop
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 );
Copy link
Contributor

@andrewserong andrewserong Sep 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

imgLabel appears to now always be Background image 🤔

Copy link
Member Author

Choose a reason for hiding this comment

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

Yea, we can consolidate that.

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
View file
Open in desktop
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;
}
Loading