Try: Site Logo placeholder tweaks (#35397)

* Initial work. * Add illustration. * Add animation. * Border radius. * Site Logo: use custom media logo button * Site Logo: pass through custom placeholder and remove z-index rules 🔪 * Site Logo: add a tooltip on hover * Site Logo: use snackbar for errors * Tweak the hover/select mechanism, polish. * Provide size smarts, and fix a radius issue. * Add comment to currentColor property. * Add blinking fix. Co-authored-by: Kerry Liu <kerryliu@gmail.com>
WordPress · Oct 8, 2021 · a1b1690 · a1b1690
1 parent d03b756
commit a1b1690
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 61 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -76,6 +76,8 @@ export function MediaPlaceholder( {
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
 	children,
+	mediaLibraryButton,
+	placeholder,
 } ) {
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -178,7 +180,7 @@ export function MediaPlaceholder( {
 		onFilesUpload( event.target.files );
 	};
 
-	const renderPlaceholder = ( content ) => {
+	const defaultRenderPlaceholder = ( content ) => {
 		let { instructions, title } = labels;
 
 		if ( ! mediaUpload && ! onSelectURL ) {
@@ -252,6 +254,7 @@ export function MediaPlaceholder( {
 			</Placeholder>
 		);
 	};
+	const renderPlaceholder = placeholder ?? defaultRenderPlaceholder;
 
 	const renderDropZone = () => {
 		if ( disableDropZone ) {
@@ -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() }
@@ -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 }
 			/>
 		);
 
@@ -352,7 +357,7 @@ export function MediaPlaceholder( {
 									>
 										{ __( 'Upload' ) }
 									</Button>
-									{ mediaLibraryButton }
+									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
 									{ renderCancelLink() }
 								</>
@@ -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 ) {

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
@@ -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,
@@ -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
@@ -309,7 +310,6 @@ export default function LogoEdit( {
 } ) {
 	const { width } = attributes;
 	const [ logoUrl, setLogoUrl ] = useState();
-	const [ error, setError ] = useState();
 	const ref = useRef();
 
 	const {
@@ -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;
 		}
@@ -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 && (
@@ -404,7 +404,6 @@ export default function LogoEdit( {
 		</BlockControls>
 	);
 
-	const label = __( 'Site Logo' );
 	let logoImage;
 	const isLoading = siteLogoId === undefined || isRequestingMediaItem;
 	if ( isLoading ) {
@@ -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' );
+
 	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 />
@@ -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>