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

Try: Site Logo placeholder tweaks #35397

Merged
merged 12 commits into from Oct 8, 2021
+183 −61
Merged

Try: Site Logo placeholder tweaks #35397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
af55ccb
Initial work.
jasmussen Oct 6, 2021
daba47c
Add illustration.
jasmussen Oct 6, 2021
1fc4596
Add animation.
jasmussen Oct 6, 2021
197fa4f
Border radius.
jasmussen Oct 6, 2021
c252863
Site Logo: use custom media logo button
gwwar Oct 6, 2021
94594ac
Site Logo: pass through custom placeholder and remove z-index rules 🔪
gwwar Oct 6, 2021
3bdb879
Site Logo: add a tooltip on hover
gwwar Oct 6, 2021
eed6ec5
Site Logo: use snackbar for errors
gwwar Oct 6, 2021
8084312
Tweak the hover/select mechanism, polish.
jasmussen Oct 7, 2021
2142224
Provide size smarts, and fix a radius issue.
jasmussen Oct 7, 2021
ea0da01
Add comment to currentColor property.
jasmussen Oct 7, 2021
166a766
Add blinking fix.
jasmussen Oct 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 22 additions & 17 deletions packages/block-editor/src/components/media-placeholder/index.js
View file
Open in desktop
Expand Up @@ -76,6 +76,8 @@ export function MediaPlaceholder( {
onFilesPreUpload = noop,
onHTMLDrop = noop,
children,
mediaLibraryButton,
placeholder,
} ) {
const mediaUpload = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
Expand Down Expand Up @@ -178,7 +180,7 @@ export function MediaPlaceholder( {
onFilesUpload( event.target.files );
};

const renderPlaceholder = ( content ) => {
const defaultRenderPlaceholder = ( content ) => {
let { instructions, title } = labels;

if ( ! mediaUpload && ! onSelectURL ) {
Expand Down Expand Up @@ -252,6 +254,7 @@ export function MediaPlaceholder( {
</Placeholder>
);
};
const renderPlaceholder = placeholder ?? defaultRenderPlaceholder;

const renderDropZone = () => {
if ( disableDropZone ) {
Expand Down Expand Up @@ -304,7 +307,20 @@ export function MediaPlaceholder( {
};

const renderMediaUploadChecked = () => {
const mediaLibraryButton = (
const defaultButton = ( { open } ) => {
return (
<Button
variant="tertiary"
onClick={ () => {
open();
} }
>
{ __( 'Media Library' ) }
</Button>
);
};
const libraryButton = mediaLibraryButton ?? defaultButton;
const uploadMediaLibraryButton = (
<MediaUpload
addToGallery={ addToGallery }
gallery={ multiple && onlyAllowsImages() }
Expand All @@ -316,18 +332,7 @@ export function MediaPlaceholder( {
? value.map( ( { id } ) => id )
: value.id
}
render={ ( { open } ) => {
return (
<Button
variant="tertiary"
onClick={ () => {
open();
} }
>
{ __( 'Media Library' ) }
</Button>
);
} }
render={ libraryButton }
/>
);

Expand All @@ -352,7 +357,7 @@ export function MediaPlaceholder( {
>
{ __( 'Upload' ) }
</Button>
{ mediaLibraryButton }
{ uploadMediaLibraryButton }
{ renderUrlSelectionUI() }
{ renderCancelLink() }
</>
Expand Down Expand Up @@ -380,15 +385,15 @@ export function MediaPlaceholder( {
>
{ __( 'Upload' ) }
</FormFileUpload>
{ mediaLibraryButton }
{ uploadMediaLibraryButton }
{ renderUrlSelectionUI() }
{ renderCancelLink() }
</>
);
return renderPlaceholder( content );
}

return renderPlaceholder( mediaLibraryButton );
return renderPlaceholder( uploadMediaLibraryButton );
};

if ( dropZoneUIOnly || disableMediaButtons ) {
Expand Down
82 changes: 55 additions & 27 deletions packages/block-library/src/site-logo/edit.js
View file
Open in desktop
Expand Up @@ -12,19 +12,18 @@ import { useEffect, useState, useRef } from '@wordpress/element';
import { __, isRTL } from '@wordpress/i18n';
import {
MenuItem,
Notice,
PanelBody,
RangeControl,
ResizableBox,
Spinner,
ToggleControl,
ToolbarButton,
Placeholder,
Button,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import {
BlockControls,
BlockIcon,
InspectorControls,
MediaPlaceholder,
MediaReplaceFlow,
Expand All @@ -35,7 +34,9 @@ import {
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { crop, siteLogo as icon } from '@wordpress/icons';
import { crop, upload } from '@wordpress/icons';
import { SVG, Path } from '@wordpress/primitives';
import { store as noticesStore } from '@wordpress/notices';

/**
* Internal dependencies
Expand Down Expand Up @@ -309,7 +310,6 @@ export default function LogoEdit( {
} ) {
const { width } = attributes;
const [ logoUrl, setLogoUrl ] = useState();
const [ error, setError ] = useState();
const ref = useRef();

const {
Expand Down Expand Up @@ -373,7 +373,6 @@ export default function LogoEdit( {
if ( ! media.id && media.url ) {
// This is a temporary blob image
setLogo( undefined );
setError( null );
setLogoUrl( media.url );
return;
}
Expand All @@ -386,8 +385,9 @@ export default function LogoEdit( {
setLogoUrl( undefined );
};

const { createErrorNotice } = useDispatch( noticesStore );
const onUploadError = ( message ) => {
setError( message[ 2 ] ? message[ 2 ] : null );
createErrorNotice( message[ 2 ], { type: 'snackbar' } );
};

const controls = canUserEdit && logoUrl && (
Expand All @@ -404,7 +404,6 @@ export default function LogoEdit( {
</BlockControls>
);

const label = __( 'Site Logo' );
let logoImage;
const isLoading = siteLogoId === undefined || isRequestingMediaItem;
if ( isLoading ) {
Expand All @@ -426,23 +425,52 @@ export default function LogoEdit( {
/>
);
}
const placeholder = ( content ) => {
const placeholderClassName = classnames(
'block-editor-media-placeholder',
className
);

return (
<Placeholder
className={ placeholderClassName }
preview={ logoImage }
>
{
<SVG
className="components-placeholder__illustration"
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 60 60"
>
<Path
vectorEffect="non-scaling-stroke"
d="m61 32.622-13.555-9.137-15.888 9.859a5 5 0 0 1-5.386-.073l-9.095-5.989L1 37.5"
/>
</SVG>
}
{ content }
</Placeholder>
);
};

const classes = classnames( className, {
'is-default-size': ! width,
} );

const blockProps = useBlockProps( {
ref,
className: classes,
} );

const label = __( 'Add a site logo' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Did we want to give a hint about drag&drop or clicking for the media library?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Per a newer comment on the ticket, I thought it worth it to start small. But it reminds me, I forgot to probably test the drag and drop 🙈 I need to give that a quick spin. It's probably fine.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks so much again for all the help. I took the drag and drop for a spin and pushed a tiny tweak, otherwise it's looking good!


return (
<div { ...blockProps }>
{ controls }
{ !! logoUrl && logoImage }
{ ! logoUrl && ! canUserEdit && (
<Placeholder
className="site-logo_placeholder"
icon={ icon }
label={ label }
>
<Placeholder className="site-logo_placeholder">
{ isLoading && (
<span className="components-placeholder__preview">
<Spinner />
Expand All @@ -452,25 +480,25 @@ export default function LogoEdit( {
) }
{ ! logoUrl && canUserEdit && (
<MediaPlaceholder
icon={ <BlockIcon icon={ icon } /> }
labels={ {
title: label,
instructions: __(
'Upload an image, or pick one from your media library, to be your site logo'
),
} }
onSelect={ onSelectLogo }
accept={ ACCEPT_MEDIA_STRING }
allowedTypes={ ALLOWED_MEDIA_TYPES }
mediaPreview={ logoImage }
notices={
error && (
<Notice status="error" isDismissible={ false }>
{ error }
</Notice>
)
}
onError={ onUploadError }
placeholder={ placeholder }
mediaLibraryButton={ ( { open } ) => {
return (
<Button
icon={ upload }
variant="primary"
label={ label }
showTooltip
tooltipPosition="top center"
onClick={ () => {
open();
} }
/>
);
} }
/>
) }
</div>
Expand Down