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.

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

Try: Site Logo placeholder tweaks #35397

Merged
merged 12 commits into from
Oct 8, 2021
39 changes: 22 additions & 17 deletions packages/block-editor/src/components/media-placeholder/index.js
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Loading