Improve SiteIcon display and transition (#58472)

* Improve display and transition of icon * comment * Tweak * Add reduce motion * fix icon size Co-authored-by: richtabor <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: priethor <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Feb 6, 2024 · 1c26a17 · 1c26a17
1 parent b501797
commit 1c26a17
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
@@ -54,7 +54,6 @@
 }
 
 .edit-site-site-hub__site-title {
-	margin-left: $grid-unit-05;
 	flex-grow: 1;
 	color: $gray-200;
 }

diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js
@@ -36,8 +36,8 @@ function SiteIcon( { className } ) {
 	) : (
 		<Icon
 			className="edit-site-site-icon__icon"
-			size="48px"
 			icon={ wordpress }
+			size={ 48 }
 		/>
 	);
 

diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss
@@ -1,10 +1,18 @@
 .edit-site-site-icon__icon {
 	fill: currentColor;
+	// Matches SiteIcon motion, smoothing out the transition.
+	transition: padding 0.3s ease-out;
+	@include reduce-motion("transition");
+
+	.edit-site-layout.is-full-canvas & {
+		// Make the WordPress icon not so big in full canvas.
+		padding: $grid-unit-15 * 0.5; // 6px.
+	}
 }
 
 .edit-site-site-icon__image {
 	width: 100%;
-	height: auto;
+	height: 100%;
 	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
 	background: #333;