From dc57d46516a08623c170c37f65dfaec4a303e4a0 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 22 Dec 2021 12:01:54 +1100
Subject: [PATCH 1/2] Fix site icon styling to display non-square site icons
within a square button
---
.../src/components/header/fullscreen-mode-close/index.js | 7 ++++---
.../src/components/header/fullscreen-mode-close/style.scss | 3 +++
.../navigation-sidebar/navigation-toggle/index.js | 7 ++++---
.../navigation-sidebar/navigation-toggle/style.scss | 3 +++
4 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
index a698ce4994e44b..12701c4b508b09 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
@@ -67,11 +67,12 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
if ( siteIconUrl ) {
buttonIcon = (
-
);
}
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index 72f14c823e168c..bd4d94fcd27cc2 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -55,5 +55,8 @@
.edit-post-fullscreen-mode-close_site-icon {
width: $button-size;
+ height: $button-size;
border-radius: $radius-block-ui;
+ background-size: cover;
+ margin-top: -1px;
}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
index 63401f3564814f..02a2894b03592b 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -66,11 +66,12 @@ function NavigationToggle( { icon } ) {
if ( siteIconUrl ) {
buttonIcon = (
-
);
} else if ( isRequestingSiteIcon ) {
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
index d78d3d4e6f6681..f71082f1e2e8d1 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -62,5 +62,8 @@
.edit-site-navigation-toggle__site-icon {
width: $button-size;
+ height: $button-size;
border-radius: $radius-block-ui;
+ background-size: cover;
+ margin-top: -1px;
}
From 04e0109edc7f2f06a6b174b83ed8e58e47c3ad71 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 23 Dec 2021 11:43:16 +1100
Subject: [PATCH 2/2] Switch back to using an img element, use object-fit
instead
---
.../header/fullscreen-mode-close/index.js | 7 +++----
.../header/fullscreen-mode-close/style.scss | 15 ++++++++-------
.../navigation-sidebar/navigation-toggle/index.js | 7 +++----
.../navigation-toggle/style.scss | 15 ++++++++-------
4 files changed, 22 insertions(+), 22 deletions(-)
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
index 12701c4b508b09..a698ce4994e44b 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
@@ -67,12 +67,11 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
if ( siteIconUrl ) {
buttonIcon = (
-
);
}
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index bd4d94fcd27cc2..103ea372c0a640 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -51,12 +51,13 @@
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}
-}
-.edit-post-fullscreen-mode-close_site-icon {
- width: $button-size;
- height: $button-size;
- border-radius: $radius-block-ui;
- background-size: cover;
- margin-top: -1px;
+ .edit-post-fullscreen-mode-close_site-icon {
+ width: $button-size;
+ height: $button-size;
+ border-radius: $radius-block-ui;
+ object-fit: cover;
+ // Compensate for the top-bar border.
+ margin-top: -($border-width);
+ }
}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
index 02a2894b03592b..63401f3564814f 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -66,12 +66,11 @@ function NavigationToggle( { icon } ) {
if ( siteIconUrl ) {
buttonIcon = (
-
);
} else if ( isRequestingSiteIcon ) {
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
index f71082f1e2e8d1..4105d74df9553a 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -58,12 +58,13 @@
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}
-}
-.edit-site-navigation-toggle__site-icon {
- width: $button-size;
- height: $button-size;
- border-radius: $radius-block-ui;
- background-size: cover;
- margin-top: -1px;
+ .edit-site-navigation-toggle__site-icon {
+ width: $button-size;
+ height: $button-size;
+ border-radius: $radius-block-ui;
+ object-fit: cover;
+ // Compensate for the top-bar border.
+ margin-top: -($border-width);
+ }
}