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

Image: Try different resting state for placeholder, alternate version #43180

Merged
merged 4 commits into from
Aug 18, 2022
Merged

Image: Try different resting state for placeholder, alternate version #43180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f3b898
Image: Try different resting state for placeholder, alternate version
jasmussen Aug 11, 2022
0fc7715
Polish after rebase.
jasmussen Aug 15, 2022
306d178
Try: Minimal styling.
jasmussen Aug 15, 2022
814fa5f
Add back the legacy placeholder.
jasmussen Aug 17, 2022
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
20 changes: 19 additions & 1 deletion packages/block-library/src/image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { get, has, isEmpty, omit, pick } from 'lodash';
* WordPress dependencies
*/
import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
import { withNotices } from '@wordpress/components';
import { withNotices, Placeholder } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import {
BlockAlignmentControl,
Expand All @@ -28,6 +28,23 @@ import { image as icon } from '@wordpress/icons';
*/
import Image from './image';

// Much of this description is duplicated from MediaPlaceholder.
const placeholder = ( content ) => {
return (
<Placeholder
className="block-editor-media-placeholder"
withIllustration={ true }
icon={ icon }
label={ __( 'Image' ) }
instructions={ __(
'Upload an image file, pick one from your media library, or add one with a URL.'
) }
>
{ content }
</Placeholder>
);
};

/**
* Module constants
*/
Expand Down Expand Up @@ -344,6 +361,7 @@ export function ImageEdit( {
onSelectURL={ onSelectURL }
notices={ noticeUI }
onError={ onUploadError }
placeholder={ placeholder }
accept="image/*"
allowedTypes={ ALLOWED_MEDIA_TYPES }
value={ { id, src } }
Expand Down
35 changes: 32 additions & 3 deletions packages/block-library/src/image/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,33 @@
// Provide special styling for the placeholder.
// @todo: this particular minimal style of placeholder could be componentized further.
.wp-block-image.wp-block-image {
// Show Placeholder style on-select.
&.is-selected .components-placeholder {
// Block UI appearance.
color: $gray-900;
background-color: $white;
box-shadow: inset 0 0 0 $border-width $gray-900;
border: none;

// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
border-radius: $radius-block-ui;

> svg {
opacity: 0;
}
}

// Remove the transition while we still have a legacy placeholder style.
// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
// parent border that may get applied when you deselect.
.components-placeholder__label,
.components-placeholder__instructions,
.components-button {
transition: none;
}
}


figure.wp-block-image:not(.wp-block) {
margin: 0;
}
Expand All @@ -14,13 +44,12 @@ figure.wp-block-image:not(.wp-block) {
display: inline;
}

// Shown while image is being uploaded
// Shown while image is being uploaded.
.components-spinner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -9px;
transform: translate(-50%, -50%);
}
}

Expand Down
10 changes: 8 additions & 2 deletions packages/components/src/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,14 +185,20 @@

// Show placeholder buttons on block selection.
// Note that these can't be display: none; or visibility: hidden;, as that breaks the writing flow.
.components-placeholder__label,
.components-placeholder__instructions,
.components-button {
opacity: 0;
transition: opacity 0.1s linear;
@include reduce-motion("transition");
}

.is-selected > & .components-button {
opacity: 1;
.is-selected > & {
.components-placeholder__label,
.components-placeholder__instructions,
.components-button {
opacity: 1;
}
}

// By painting the borders here, we enable them to be replaced by the Border control.
Expand Down