[Site Logo]: Add logo replace flow in Inspector controls (#49992)

* [Site Logo]: Add logo replace flow in Inspector controls * Update packages/block-library/src/site-logo/edit.js Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com> * feedback * define `InspectorLogoPreview` outside * change label case * adjust styles * update `MediaReplaceFlow` readme and use valid html inside `button` * update hover/focus styles --------- Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>
WordPress · Apr 25, 2023 · c602985 · c602985
1 parent 62ca715
commit c602985
Show file tree

Hide file tree

Showing 4 changed files with 187 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/media-replace-flow/README.md b/packages/block-editor/src/components/media-replace-flow/README.md
@@ -65,10 +65,11 @@ Callback called when an upload error happens and receives an error message as an
 
 ### name
 
-The label of the replace button.
+A `string` value will be used as the label of the replace button. It can also accept `Phrasing content` elements(ex. `span`).
 
--   Type: `string`
+-   Type: `string|Element`
 -   Required: No
+-   Default: `Replace`
 
 ### createNotice
 

diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -59,6 +59,9 @@ const MediaReplaceFlow = ( {
 	multiple = false,
 	addToGallery,
 	handleUpload = true,
+	popoverProps = {
+		variant: 'toolbar',
+	},
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
@@ -136,13 +139,9 @@ const MediaReplaceFlow = ( {
 
 	const gallery = multiple && onlyAllowsImages();
 
-	const POPOVER_PROPS = {
-		variant: 'toolbar',
-	};
-
 	return (
 		<Dropdown
-			popoverProps={ POPOVER_PROPS }
+			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<ToolbarButton

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
@@ -24,12 +24,19 @@ import {
 	ToolbarButton,
 	Placeholder,
 	Button,
+	DropZone,
+	FlexItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	BlockControls,
 	InspectorControls,
 	MediaPlaceholder,
+	MediaUpload,
+	MediaUploadCheck,
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
@@ -349,6 +356,45 @@ const SiteLogo = ( {
 	);
 };
 
+// This is a light wrapper around MediaReplaceFlow because the block has two
+// different MediaReplaceFlows, one for the inspector and one for the toolbar.
+function SiteLogoReplaceFlow( { onRemoveLogo, ...mediaReplaceProps } ) {
+	return (
+		<MediaReplaceFlow
+			{ ...mediaReplaceProps }
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			accept={ ACCEPT_MEDIA_STRING }
+		>
+			<MenuItem onClick={ onRemoveLogo }>{ __( 'Reset' ) }</MenuItem>
+		</MediaReplaceFlow>
+	);
+}
+
+const InspectorLogoPreview = ( { mediaItemData = {}, itemGroupProps } ) => {
+	const {
+		alt_text: alt,
+		source_url: logoUrl,
+		slug: logoSlug,
+		media_details: logoMediaDetails,
+	} = mediaItemData;
+	const logoLabel = logoMediaDetails?.sizes?.full?.file || logoSlug;
+	return (
+		<ItemGroup { ...itemGroupProps } as="span">
+			<HStack justify="flex-start" as="span">
+				<img src={ logoUrl } alt={ alt } />
+				<FlexItem as="span">
+					<Truncate
+						numberOfLines={ 1 }
+						className="block-library-site-logo__inspector-media-replace-title"
+					>
+						{ logoLabel }
+					</Truncate>
+				</FlexItem>
+			</HStack>
+		</ItemGroup>
+	);
+};
+
 export default function LogoEdit( {
 	attributes,
 	className,
@@ -365,6 +411,7 @@ export default function LogoEdit( {
 		siteIconId,
 		mediaItemData,
 		isRequestingMediaItem,
+		mediaUpload,
 	} = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -396,6 +443,7 @@ export default function LogoEdit( {
 			mediaItemData: mediaItem,
 			isRequestingMediaItem: _isRequestingMediaItem,
 			siteIconId: _siteIconId,
+			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
 		};
 	}, [] );
 
@@ -461,17 +509,29 @@ export default function LogoEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
+	const onFilesDrop = ( filesList ) => {
+		mediaUpload( {
+			allowedTypes: [ 'image' ],
+			filesList,
+			onFileChange( [ image ] ) {
+				if ( isBlobURL( image?.url ) ) {
+					return;
+				}
+				onInitialSelectLogo( image );
+			},
+			onError: onUploadError,
+		} );
+	};
+
+	const mediaReplaceFlowProps = {
+		mediaURL: logoUrl,
+		onSelect: onSelectLogo,
+		onError: onUploadError,
+		onRemoveLogo,
+	};
 	const controls = canUserEdit && logoUrl && (
 		<BlockControls group="other">
-			<MediaReplaceFlow
-				mediaURL={ logoUrl }
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				accept={ ACCEPT_MEDIA_STRING }
-				onSelect={ onSelectLogo }
-				onError={ onUploadError }
-			>
-				<MenuItem onClick={ onRemoveLogo }>{ __( 'Reset' ) }</MenuItem>
-			</MediaReplaceFlow>
+			<SiteLogoReplaceFlow { ...mediaReplaceFlowProps } />
 		</BlockControls>
 	);
 
@@ -530,9 +590,63 @@ export default function LogoEdit( {
 
 	const label = __( 'Add a site logo' );
 
+	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
+		<InspectorControls>
+			<PanelBody title={ __( 'Media' ) }>
+				<div className="block-library-site-logo__inspector-media-replace-container">
+					{ ! canUserEdit && !! logoUrl && (
+						<InspectorLogoPreview
+							mediaItemData={ mediaItemData }
+							itemGroupProps={ {
+								isBordered: true,
+								className:
+									'block-library-site-logo__inspector-readonly-logo-preview',
+							} }
+						/>
+					) }
+					{ canUserEdit && !! logoUrl && (
+						<SiteLogoReplaceFlow
+							{ ...mediaReplaceFlowProps }
+							name={
+								<InspectorLogoPreview
+									mediaItemData={ mediaItemData }
+								/>
+							}
+							popoverProps={ {} }
+						/>
+					) }
+					{ canUserEdit && ! logoUrl && (
+						<MediaUploadCheck>
+							<MediaUpload
+								onSelect={ onInitialSelectLogo }
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								render={ ( { open } ) => (
+									<div className="block-library-site-logo__inspector-upload-container">
+										<Button
+											onClick={ open }
+											variant="secondary"
+										>
+											{ isLoading ? (
+												<Spinner />
+											) : (
+												__( 'Add media' )
+											) }
+										</Button>
+										<DropZone onFilesDrop={ onFilesDrop } />
+									</div>
+								) }
+							/>
+						</MediaUploadCheck>
+					) }
+				</div>
+			</PanelBody>
+		</InspectorControls>
+	);
+
 	return (
 		<div { ...blockProps }>
 			{ controls }
+			{ mediaInspectorPanel }
 			{ !! logoUrl && logoImage }
 			{ ! logoUrl && ! canUserEdit && (
 				<Placeholder className="site-logo_placeholder">

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
@@ -93,3 +93,60 @@
 		}
 	}
 }
+
+.block-library-site-logo__inspector-upload-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-library-site-logo__inspector-upload-container,
+.block-library-site-logo__inspector-media-replace-container {
+	button.components-button {
+		color: $gray-900;
+		box-shadow: inset 0 0 0 1px $gray-400;
+		width: 100%;
+		display: block;
+		height: $grid-unit-50;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.block-library-site-logo__inspector-media-replace-title {
+		word-break: break-all;
+		// The Button component is white-space: nowrap, and that won't work with line-clamp.
+		white-space: normal;
+
+		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+		text-align: start;
+		text-align-last: center;
+	}
+}
+
+.block-library-site-logo__inspector-media-replace-container {
+	.components-dropdown {
+		display: block;
+	}
+
+	img {
+		width: $grid-unit-50 * 0.5;
+		aspect-ratio: 1;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+		border-radius: 50% !important;
+	}
+
+	.block-library-site-logo__inspector-readonly-logo-preview {
+		padding: 6px 12px;
+		display: flex;
+		height: $grid-unit-50;
+	}
+}