From af55ccb256e5c872d3a7b9b4f4f79e3288ae82c0 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 6 Oct 2021 13:26:35 +0200
Subject: [PATCH 01/12] Initial work.

---
 packages/block-library/src/site-logo/edit.js  |  2 -
 .../block-library/src/site-logo/editor.scss   | 81 +++++++++++++++----
 .../block-library/src/site-logo/style.scss    |  5 +-
 3 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index a2d3515aefbe4..a10e4536a8cb5 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -24,7 +24,6 @@ import {
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	BlockControls,
-	BlockIcon,
 	InspectorControls,
 	MediaPlaceholder,
 	MediaReplaceFlow,
@@ -452,7 +451,6 @@ export default function LogoEdit( {
 			) }
 			{ ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
-					icon={ <BlockIcon icon={ icon } /> }
 					labels={ {
 						title: label,
 						instructions: __(
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 6c420268aa36b..003c58273a668 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -24,7 +24,6 @@
 		}
 	}
 
-
 	.custom-logo-link {
 		cursor: inherit;
 
@@ -42,24 +41,24 @@
 		height: auto;
 		max-width: 100%;
 	}
+}
 
-	// Placeholder improvements.
+// Provide special styling for the placeholder.
+// Mostly a proof of concept. We likely need to extract these styles
+// to a separate component that more intrinsically inherits block styles
+// and provides the on-hover upload button.
+// That would also let it work with with less specificity.
+.wp-block-site-logo.wp-block-site-logo {
 	.components-placeholder {
-		justify-content: flex-start;
+		justify-content: center;
+		align-items: center;
 		min-height: auto;
+		box-shadow: none;
 		height: 120px;
-		padding: $grid-unit-15;
+		padding: 0;
 
-		// Massage the label.
-		.components-placeholder__label {
-			margin-top: $grid-unit-15;
-			white-space: nowrap;
-		}
-
-		.components-placeholder__label .block-editor-block-icon,
-		.components-placeholder__label > svg {
-			margin-right: $grid-unit-05;
-		}
+		// Inherit border radius from style variations.
+		border-radius: inherit;
 
 		// Hide the upload button, as it's also available in the media library.
 		.components-form-file-upload {
@@ -79,9 +78,61 @@
 			justify-content: center;
 		}
 
-		// Hide drag and drop text.
+		// Hide items.
+		.components-placeholder__label,
 		.components-drop-zone__content-text {
 			display: none;
 		}
+
+		// Draw the dashed outline.
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			border: $border-width dashed currentColor;
+			opacity: 0.5;
+			pointer-events: none;
+
+			// Inherit border radius from style variations.
+			border-radius: inherit;
+		}
+
+		// Style the upload button.
+		.components-placeholder__fieldset {
+			width: auto;
+		}
+
+		color: currentColor;
+		.components-button.components-button {
+			color: inherit;
+			padding: 0;
+			margin: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+
+			// @todo: needs to be icon button.
+			text-indent: 100%;
+			overflow: hidden;
+		}
 	}
+
+	// Show upload button on focus/hover.
+	&.is-selected .components-button,
+	.components-placeholder:focus .components-button,
+	.components-placeholder:hover .components-button {
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
+		border-style: solid;
+		color: $white;
+		opacity: 1;
+	}
+
 }
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index dd8a883238f56..f5c86fedbbeb2 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -9,6 +9,9 @@
 	&.is-default-size img {
 		width: 120px;
 		height: auto;
+
+		// Inherit border radius from style variations.
+		border-radius: inherit;
 	}
 
 	.aligncenter {
@@ -16,7 +19,7 @@
 	}
 
 	// Style variations
-	&.is-style-rounded img {
+	&.is-style-rounded {
 		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
 		// to rectangular images. A pill-shape is better than otherwise.
 		border-radius: 9999px;

From daba47ccf90b814883e2289ee2360f10452273c9 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 6 Oct 2021 13:42:21 +0200
Subject: [PATCH 02/12] Add illustration.

---
 packages/block-library/src/site-logo/edit.js   | 15 ++++++++++++++-
 .../block-library/src/site-logo/editor.scss    | 18 ++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index a10e4536a8cb5..cb89c21a9eada 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -35,6 +35,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { crop, siteLogo as icon } from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -469,7 +470,19 @@ export default function LogoEdit( {
 						)
 					}
 					onError={ onUploadError }
-				/>
+				>
+					<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>
+				</MediaPlaceholder>
 			) }
 		</div>
 	);
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 003c58273a668..ed28f37efc71f 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -94,7 +94,7 @@
 			bottom: 0;
 			left: 0;
 			border: $border-width dashed currentColor;
-			opacity: 0.5;
+			opacity: 0.3;
 			pointer-events: none;
 
 			// Inherit border radius from style variations.
@@ -117,11 +117,26 @@
 			width: $grid-unit-60;
 			height: $grid-unit-60;
 			border-radius: 50%;
+			position: relative;
+			z-index: 1;
 
 			// @todo: needs to be icon button.
 			text-indent: 100%;
 			overflow: hidden;
 		}
+
+		// Style the placeholder illustration.
+		.components-placeholder__illustration {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 0;
+			stroke: currentColor;
+			stroke-dasharray: 3;
+			opacity: 0.3;
+		}
 	}
 
 	// Show upload button on focus/hover.
@@ -134,5 +149,4 @@
 		color: $white;
 		opacity: 1;
 	}
-
 }

From 1fc459659fcb93a3e515a7bab3ec50b600335c39 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 6 Oct 2021 13:44:13 +0200
Subject: [PATCH 03/12] Add animation.

---
 packages/block-library/src/site-logo/editor.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index ed28f37efc71f..a48eb7efa3623 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -120,6 +120,11 @@
 			position: relative;
 			z-index: 1;
 
+			// Animation.
+			background: transparent;
+			transition: all 0.1s linear;
+			@include reduce-motion("transition");
+
 			// @todo: needs to be icon button.
 			text-indent: 100%;
 			overflow: hidden;

From 197fa4f9fe0b0c77842ecfacf57ced9cef2af13e Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 6 Oct 2021 13:55:27 +0200
Subject: [PATCH 04/12] Border radius.

---
 packages/block-library/src/site-logo/editor.scss | 8 ++++++--
 packages/block-library/src/site-logo/style.scss  | 5 ++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index a48eb7efa3623..c38dabc3e116e 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -49,6 +49,12 @@
 // and provides the on-hover upload button.
 // That would also let it work with with less specificity.
 .wp-block-site-logo.wp-block-site-logo {
+	// Inherit border radius from style variations.
+	.components-placeholder,
+	.components-resizable-box__container {
+		border-radius: inherit;
+	}
+
 	.components-placeholder {
 		justify-content: center;
 		align-items: center;
@@ -57,8 +63,6 @@
 		height: 120px;
 		padding: 0;
 
-		// Inherit border radius from style variations.
-		border-radius: inherit;
 
 		// Hide the upload button, as it's also available in the media library.
 		.components-form-file-upload {
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index f5c86fedbbeb2..ce94819156283 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -9,8 +9,11 @@
 	&.is-default-size img {
 		width: 120px;
 		height: auto;
+	}
 
-		// Inherit border radius from style variations.
+	// Inherit border radius from style variations.
+	&.is-default-size a,
+	&.is-default-size img {
 		border-radius: inherit;
 	}
 

From c252863fa429baab54c4d100893cc8df90a341e0 Mon Sep 17 00:00:00 2001
From: Kerry Liu <kerryliu@gmail.com>
Date: Wed, 6 Oct 2021 10:49:33 -0700
Subject: [PATCH 05/12] Site Logo: use custom media logo button

---
 .../src/components/media-placeholder/index.js | 27 ++++++++++---------
 packages/block-library/src/site-logo/edit.js  | 14 +++++++++-
 .../block-library/src/site-logo/editor.scss   |  5 ++++
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index d156138b96676..bd4afa193424d 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -76,6 +76,7 @@ export function MediaPlaceholder( {
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
 	children,
+	customMediaLibraryButton,
 } ) {
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -304,6 +305,19 @@ export function MediaPlaceholder( {
 	};
 
 	const renderMediaUploadChecked = () => {
+		const defaultButton = ( { open } ) => {
+			return (
+				<Button
+					variant="tertiary"
+					onClick={ () => {
+						open();
+					} }
+				>
+					{ __( 'Media Library' ) }
+				</Button>
+			);
+		};
+		const libraryButton = customMediaLibraryButton ?? defaultButton;
 		const mediaLibraryButton = (
 			<MediaUpload
 				addToGallery={ addToGallery }
@@ -316,18 +330,7 @@ export function MediaPlaceholder( {
 						? value.map( ( { id } ) => id )
 						: value.id
 				}
-				render={ ( { open } ) => {
-					return (
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								open();
-							} }
-						>
-							{ __( 'Media Library' ) }
-						</Button>
-					);
-				} }
+				render={ libraryButton }
 			/>
 		);
 
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index cb89c21a9eada..6959e13b84d44 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -20,6 +20,7 @@ import {
 	ToggleControl,
 	ToolbarButton,
 	Placeholder,
+	Button,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -34,7 +35,7 @@ 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, siteLogo as icon, upload } from '@wordpress/icons';
 import { SVG, Path } from '@wordpress/primitives';
 
 /**
@@ -470,6 +471,17 @@ export default function LogoEdit( {
 						)
 					}
 					onError={ onUploadError }
+					customMediaLibraryButton={ ( { open } ) => {
+						return (
+							<Button
+								icon={ upload }
+								variant="tertiary"
+								onClick={ () => {
+									open();
+								} }
+							/>
+						);
+					} }
 				>
 					<SVG
 						className="components-placeholder__illustration"
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index c38dabc3e116e..9b9455a68a7ef 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -123,6 +123,7 @@
 			border-radius: 50%;
 			position: relative;
 			z-index: 1;
+			visibility: hidden;
 
 			// Animation.
 			background: transparent;
@@ -133,6 +134,9 @@
 			text-indent: 100%;
 			overflow: hidden;
 		}
+		.components-button.components-button > svg {
+			color: $white;
+		}
 
 		// Style the placeholder illustration.
 		.components-placeholder__illustration {
@@ -157,5 +161,6 @@
 		border-style: solid;
 		color: $white;
 		opacity: 1;
+		visibility: visible;
 	}
 }

From 94594ac53e6577bddb1674a10a16b8abe0cb7d0c Mon Sep 17 00:00:00 2001
From: Kerry Liu <kerryliu@gmail.com>
Date: Wed, 6 Oct 2021 11:13:07 -0700
Subject: [PATCH 06/12] =?UTF-8?q?Site=20Logo:=20pass=20through=20custom=20?=
 =?UTF-8?q?placeholder=20and=20remove=20z-index=20rules=20=F0=9F=94=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/media-placeholder/index.js | 16 ++--
 packages/block-library/src/site-logo/edit.js  | 76 ++++++++++---------
 .../block-library/src/site-logo/editor.scss   |  3 -
 3 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index bd4afa193424d..58bc1a8635248 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -76,7 +76,8 @@ export function MediaPlaceholder( {
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
 	children,
-	customMediaLibraryButton,
+	mediaLibraryButton,
+	placeholder,
 } ) {
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -179,7 +180,7 @@ export function MediaPlaceholder( {
 		onFilesUpload( event.target.files );
 	};
 
-	const renderPlaceholder = ( content ) => {
+	const defaultRenderPlaceholder = ( content ) => {
 		let { instructions, title } = labels;
 
 		if ( ! mediaUpload && ! onSelectURL ) {
@@ -253,6 +254,7 @@ export function MediaPlaceholder( {
 			</Placeholder>
 		);
 	};
+	const renderPlaceholder = placeholder ?? defaultRenderPlaceholder;
 
 	const renderDropZone = () => {
 		if ( disableDropZone ) {
@@ -317,8 +319,8 @@ export function MediaPlaceholder( {
 				</Button>
 			);
 		};
-		const libraryButton = customMediaLibraryButton ?? defaultButton;
-		const mediaLibraryButton = (
+		const libraryButton = mediaLibraryButton ?? defaultButton;
+		const uploadMediaLibraryButton = (
 			<MediaUpload
 				addToGallery={ addToGallery }
 				gallery={ multiple && onlyAllowsImages() }
@@ -355,7 +357,7 @@ export function MediaPlaceholder( {
 									>
 										{ __( 'Upload' ) }
 									</Button>
-									{ mediaLibraryButton }
+									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
 									{ renderCancelLink() }
 								</>
@@ -383,7 +385,7 @@ export function MediaPlaceholder( {
 					>
 						{ __( 'Upload' ) }
 					</FormFileUpload>
-					{ mediaLibraryButton }
+					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
 					{ renderCancelLink() }
 				</>
@@ -391,7 +393,7 @@ export function MediaPlaceholder( {
 			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
index 6959e13b84d44..973c1bda8955e 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -35,7 +35,7 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { crop, siteLogo as icon, upload } from '@wordpress/icons';
+import { crop, upload } from '@wordpress/icons';
 import { SVG, Path } from '@wordpress/primitives';
 
 /**
@@ -405,7 +405,6 @@ export default function LogoEdit( {
 		</BlockControls>
 	);
 
-	const label = __( 'Site Logo' );
 	let logoImage;
 	const isLoading = siteLogoId === undefined || isRequestingMediaItem;
 	if ( isLoading ) {
@@ -427,6 +426,42 @@ export default function LogoEdit( {
 			/>
 		);
 	}
+	const placeholder = ( content ) => {
+		const placeholderClassName = classnames(
+			'block-editor-media-placeholder',
+			className
+		);
+
+		return (
+			<Placeholder
+				className={ placeholderClassName }
+				notices={
+					error && (
+						<Notice status="error" isDismissible={ false }>
+							{ error }
+						</Notice>
+					)
+				}
+				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,
 	} );
@@ -439,11 +474,7 @@ export default function LogoEdit( {
 			{ 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 />
@@ -453,25 +484,12 @@ export default function LogoEdit( {
 			) }
 			{ ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
-					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 }
-					customMediaLibraryButton={ ( { open } ) => {
+					placeholder={ placeholder }
+					mediaLibraryButton={ ( { open } ) => {
 						return (
 							<Button
 								icon={ upload }
@@ -482,19 +500,7 @@ export default function LogoEdit( {
 							/>
 						);
 					} }
-				>
-					<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>
-				</MediaPlaceholder>
+				/>
 			) }
 		</div>
 	);
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 9b9455a68a7ef..7edeb3c135254 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -83,7 +83,6 @@
 		}
 
 		// Hide items.
-		.components-placeholder__label,
 		.components-drop-zone__content-text {
 			display: none;
 		}
@@ -122,7 +121,6 @@
 			height: $grid-unit-60;
 			border-radius: 50%;
 			position: relative;
-			z-index: 1;
 			visibility: hidden;
 
 			// Animation.
@@ -145,7 +143,6 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			z-index: 0;
 			stroke: currentColor;
 			stroke-dasharray: 3;
 			opacity: 0.3;

From 3bdb87952998c549a5162d00c8656064516b2dbf Mon Sep 17 00:00:00 2001
From: Kerry Liu <kerryliu@gmail.com>
Date: Wed, 6 Oct 2021 13:27:01 -0700
Subject: [PATCH 07/12] Site Logo: add a tooltip on hover

---
 packages/block-library/src/site-logo/edit.js  | 57 +++++++++++--------
 .../block-library/src/site-logo/editor.scss   |  3 +-
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 973c1bda8955e..040887abcd19f 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -19,6 +19,7 @@ import {
 	Spinner,
 	ToggleControl,
 	ToolbarButton,
+	Tooltip,
 	Placeholder,
 	Button,
 } from '@wordpress/components';
@@ -433,32 +434,38 @@ export default function LogoEdit( {
 		);
 
 		return (
-			<Placeholder
-				className={ placeholderClassName }
-				notices={
-					error && (
-						<Notice status="error" isDismissible={ false }>
-							{ error }
-						</Notice>
-					)
-				}
-				preview={ logoImage }
+			<Tooltip
+				position="top center"
+				text={ __( 'Click, or drag and drop, to add a site logo' ) }
+				delay={ 0 }
 			>
-				{
-					<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>
+				<Placeholder
+					className={ placeholderClassName }
+					notices={
+						error && (
+							<Notice status="error" isDismissible={ false }>
+								{ error }
+							</Notice>
+						)
+					}
+					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>
+			</Tooltip>
 		);
 	};
 
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 7edeb3c135254..f75c7eef7c55b 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -113,7 +113,8 @@
 		.components-button.components-button {
 			color: inherit;
 			padding: 0;
-			margin: 0;
+			//top and bottom margin to push up tooltip
+			margin: 40px 0 40px 0;
 			display: flex;
 			justify-content: center;
 			align-items: center;

From eed6ec58d7d5636fd54c350c78d8661373c7bcdb Mon Sep 17 00:00:00 2001
From: Kerry Liu <kerryliu@gmail.com>
Date: Wed, 6 Oct 2021 13:48:19 -0700
Subject: [PATCH 08/12] Site Logo: use snackbar for errors

---
 packages/block-library/src/site-logo/edit.js | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 040887abcd19f..9ad7aee2c6640 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -12,7 +12,6 @@ import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	MenuItem,
-	Notice,
 	PanelBody,
 	RangeControl,
 	ResizableBox,
@@ -38,6 +37,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { crop, upload } from '@wordpress/icons';
 import { SVG, Path } from '@wordpress/primitives';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -311,7 +311,6 @@ export default function LogoEdit( {
 } ) {
 	const { width } = attributes;
 	const [ logoUrl, setLogoUrl ] = useState();
-	const [ error, setError ] = useState();
 	const ref = useRef();
 
 	const {
@@ -375,7 +374,6 @@ export default function LogoEdit( {
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image
 			setLogo( undefined );
-			setError( null );
 			setLogoUrl( media.url );
 			return;
 		}
@@ -388,8 +386,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 && (
@@ -441,13 +440,6 @@ export default function LogoEdit( {
 			>
 				<Placeholder
 					className={ placeholderClassName }
-					notices={
-						error && (
-							<Notice status="error" isDismissible={ false }>
-								{ error }
-							</Notice>
-						)
-					}
 					preview={ logoImage }
 				>
 					{

From 80843120390cec56f59dcddb23a298c825a1d227 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 7 Oct 2021 10:59:43 +0200
Subject: [PATCH 09/12] Tweak the hover/select mechanism, polish.

---
 packages/block-library/src/site-logo/edit.js  | 52 +++++++++----------
 .../block-library/src/site-logo/editor.scss   | 17 ++----
 2 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 9ad7aee2c6640..6719a4244ab8b 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -18,7 +18,6 @@ import {
 	Spinner,
 	ToggleControl,
 	ToolbarButton,
-	Tooltip,
 	Placeholder,
 	Button,
 } from '@wordpress/components';
@@ -433,41 +432,39 @@ export default function LogoEdit( {
 		);
 
 		return (
-			<Tooltip
-				position="top center"
-				text={ __( 'Click, or drag and drop, to add a site logo' ) }
-				delay={ 0 }
+			<Placeholder
+				className={ placeholderClassName }
+				preview={ logoImage }
 			>
-				<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>
-			</Tooltip>
+				{
+					<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 }
@@ -492,7 +489,10 @@ export default function LogoEdit( {
 						return (
 							<Button
 								icon={ upload }
-								variant="tertiary"
+								variant="primary"
+								label={ label }
+								showTooltip
+								tooltipPosition="top center"
 								onClick={ () => {
 									open();
 								} }
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index f75c7eef7c55b..4b2d5f1deaa1d 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -44,10 +44,6 @@
 }
 
 // Provide special styling for the placeholder.
-// Mostly a proof of concept. We likely need to extract these styles
-// to a separate component that more intrinsically inherits block styles
-// and provides the on-hover upload button.
-// That would also let it work with with less specificity.
 .wp-block-site-logo.wp-block-site-logo {
 	// Inherit border radius from style variations.
 	.components-placeholder,
@@ -113,8 +109,6 @@
 		.components-button.components-button {
 			color: inherit;
 			padding: 0;
-			//top and bottom margin to push up tooltip
-			margin: 40px 0 40px 0;
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -128,11 +122,8 @@
 			background: transparent;
 			transition: all 0.1s linear;
 			@include reduce-motion("transition");
-
-			// @todo: needs to be icon button.
-			text-indent: 100%;
-			overflow: hidden;
 		}
+
 		.components-button.components-button > svg {
 			color: $white;
 		}
@@ -150,10 +141,8 @@
 		}
 	}
 
-	// Show upload button on focus/hover.
-	&.is-selected .components-button,
-	.components-placeholder:focus .components-button,
-	.components-placeholder:hover .components-button {
+	// Show upload button on block selection.
+	&.is-selected .components-button.components-button {
 		background: var(--wp-admin-theme-color);
 		border-color: var(--wp-admin-theme-color);
 		border-style: solid;

From 2142224ea29a43326771f220389960a267789c10 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 7 Oct 2021 11:33:19 +0200
Subject: [PATCH 10/12] Provide size smarts, and fix a radius issue.

---
 .../block-library/src/site-logo/editor.scss    | 18 ++++++++++++++++--
 .../block-library/src/site-logo/style.scss     |  4 ++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 4b2d5f1deaa1d..9ff10571cb5c5 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -51,14 +51,26 @@
 		border-radius: inherit;
 	}
 
+	// Match the default logo size.
+	&.is-default-size .components-placeholder {
+		height: 120px;
+		width: 120px;
+	}
+
 	.components-placeholder {
 		justify-content: center;
 		align-items: center;
-		min-height: auto;
 		box-shadow: none;
-		height: 120px;
 		padding: 0;
 
+		// Provide a minimum size for the placeholder, for when the logo is resized.
+		// @todo: resizing is currently only possible by adding an image, resizing,
+		// and then removing the image again. We might want to enable resizing on the
+		// placeholder itself.
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
 
 		// Hide the upload button, as it's also available in the media library.
 		.components-form-file-upload {
@@ -135,6 +147,8 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
+			width: 100%;
+			height: 100%;
 			stroke: currentColor;
 			stroke-dasharray: 3;
 			opacity: 0.3;
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index ce94819156283..00dc6b44efe9a 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -12,8 +12,8 @@
 	}
 
 	// Inherit border radius from style variations.
-	&.is-default-size a,
-	&.is-default-size img {
+	a,
+	img {
 		border-radius: inherit;
 	}
 

From ea0da01ac63370c02cd08e2de2b252b973bd081b Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 7 Oct 2021 11:37:28 +0200
Subject: [PATCH 11/12] Add comment to currentColor property.

---
 packages/block-library/src/site-logo/editor.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 9ff10571cb5c5..cfde7320f9172 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -96,6 +96,9 @@
 		}
 
 		// Draw the dashed outline.
+		// By setting the dashed border to currentColor, we ensure it's visible
+		// against any background color.
+		color: currentColor;
 		&::before {
 			content: "";
 			display: block;
@@ -117,7 +120,6 @@
 			width: auto;
 		}
 
-		color: currentColor;
 		.components-button.components-button {
 			color: inherit;
 			padding: 0;

From 166a766b449a41a504a3fd64658b440e4d311756 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 7 Oct 2021 19:12:21 +0200
Subject: [PATCH 12/12] Add blinking fix.

---
 packages/components/src/drop-zone/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
index 012edd3ce8bed..a289d963a86fc 100644
--- a/packages/components/src/drop-zone/style.scss
+++ b/packages/components/src/drop-zone/style.scss
@@ -51,6 +51,7 @@
 	margin: 0 auto;
 	line-height: 0;
 	fill: currentColor;
+	pointer-events: none;
 }