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

Background Image control: use consistent button, ensure descriptive text accounts for no image selected #54711

Merged
merged 2 commits into from
Sep 22, 2023
Merged

Background Image control: use consistent button, ensure descriptive text accounts for no image selected #54711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
040d135
Background Image control: use consistent button, ensure descriptive t…
andrewserong Sep 22, 2023
ca56e08
only show crossed out line when a background image is not set
andrewserong Sep 22, 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
97 changes: 40 additions & 57 deletions packages/block-editor/src/hooks/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { isBlobURL } from '@wordpress/blob';
import { getBlockSupport } from '@wordpress/blocks';
import {
__experimentalToolsPanelItem as ToolsPanelItem,
Button,
DropZone,
FlexItem,
MenuItem,
Expand All @@ -25,8 +29,6 @@ import { getFilename } from '@wordpress/url';
*/
import InspectorControls from '../components/inspector-controls';
import MediaReplaceFlow from '../components/media-replace-flow';
import MediaUpload from '../components/media-upload';
import MediaUploadCheck from '../components/media-upload/check';
import useSetting from '../components/use-setting';
import { cleanEmptyObject } from './utils';
import { store as blockEditorStore } from '../store';
Expand Down Expand Up @@ -103,7 +105,12 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
<ItemGroup as="span">
<HStack justify="flex-start" as="span">
<span
className="block-editor-hooks__background__inspector-image-indicator-wrapper"
className={ classnames(
'block-editor-hooks__background__inspector-image-indicator-wrapper',
{
'has-image': imgUrl,
}
) }
aria-hidden
>
{ imgUrl && (
Expand All @@ -123,11 +130,13 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
{ imgLabel }
</Truncate>
<VisuallyHidden as="span">
{ sprintf(
/* translators: %s: file name */
__( 'Selected image: %s' ),
filename
) }
{ filename
? sprintf(
/* translators: %s: file name */
__( 'Selected image: %s' ),
filename
)
: __( 'No image selected' ) }
</VisuallyHidden>
</FlexItem>
</HStack>
Expand Down Expand Up @@ -243,55 +252,29 @@ function BackgroundImagePanelItem( props ) {
panelId={ clientId }
>
<div className="block-editor-hooks__background__inspector-media-replace-container">
{ !! url && (
<MediaReplaceFlow
mediaId={ id }
mediaURL={ url }
allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
accept="image/*"
onSelect={ onSelectMedia }
name={
<InspectorImagePreview
label={ __( 'Background image' ) }
filename={ title }
url={ url }
/>
}
variant="secondary"
>
<MenuItem
onClick={ () => resetBackgroundImage( props ) }
>
{ __( 'Reset ' ) }
</MenuItem>
</MediaReplaceFlow>
) }
{ ! url && (
<MediaUploadCheck>
<MediaUpload
onSelect={ onSelectMedia }
allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
render={ ( { open } ) => (
<div className="block-editor-hooks__background__inspector-upload-container">
<Button
onClick={ open }
aria-label={ __(
'Background image style'
) }
>
<InspectorImagePreview
label={ __( 'Background image' ) }
/>
</Button>
<DropZone
onFilesDrop={ onFilesDrop }
label={ __( 'Drop to upload' ) }
/>
</div>
) }
<MediaReplaceFlow
mediaId={ id }
mediaURL={ url }
allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
accept="image/*"
onSelect={ onSelectMedia }
name={
<InspectorImagePreview
label={ __( 'Background image' ) }
filename={ title }
url={ url }
/>
</MediaUploadCheck>
) }
}
variant="secondary"
>
<MenuItem onClick={ () => resetBackgroundImage( props ) }>
{ __( 'Reset ' ) }
</MenuItem>
</MediaReplaceFlow>
<DropZone
onFilesDrop={ onFilesDrop }
label={ __( 'Drop to upload' ) }
/>
</div>
</ToolsPanelItem>
);
Expand Down
11 changes: 5 additions & 6 deletions packages/block-editor/src/hooks/background.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
.block-editor-hooks__background__inspector-upload-container {
.block-editor-hooks__background__inspector-media-replace-container {
position: relative;
// Since there is no option to skip rendering the drag'n'drop icon in drop
// zone, we hide it for now.
.components-drop-zone__content-icon {
display: none;
}
}

.block-editor-hooks__background__inspector-upload-container,
.block-editor-hooks__background__inspector-media-replace-container {
button.components-button {
color: $gray-900;
box-shadow: inset 0 0 0 $border-width $gray-300;
Expand All @@ -34,9 +31,7 @@
text-align: start;
text-align-last: center;
}
}

.block-editor-hooks__background__inspector-media-replace-container {
.components-dropdown {
display: block;
}
Expand All @@ -50,6 +45,10 @@
width: 20px;
height: 20px;
flex: none;

&.has-image {
background: #fff; // No diagonal line for non-empty background image. A background color is in use to account for partially transparent images.
}
}

.block-editor-hooks__background__inspector-image-indicator {
Expand Down
Loading