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); + } }