Fix site editor back button visual regressions (WordPress#66166)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
karthick-murugan · Nov 13, 2024 · 4b5c369 · 4b5c369
1 parent a6c2785
commit 4b5c369
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/sidebar-button/index.js b/packages/edit-site/src/components/sidebar-button/index.js
@@ -11,7 +11,7 @@ import { Button } from '@wordpress/components';
 export default function SidebarButton( props ) {
 	return (
 		<Button
-			__next40pxDefaultSize
+			size="compact"
 			{ ...props }
 			className={ clsx( 'edit-site-sidebar-button', props.className ) }
 		/>

diff --git a/packages/edit-site/src/components/sidebar-button/style.scss b/packages/edit-site/src/components/sidebar-button/style.scss
@@ -14,10 +14,10 @@
 		outline: 3px solid transparent;
 	}
 
-	&:hover,
+	&:hover:not(:disabled,[aria-disabled="true"]),
 	&:focus-visible,
 	&:focus,
-	&:not([aria-disabled="true"]):active,
+	&:not(:disabled,[aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
 		color: $gray-100;
 	}

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -68,7 +68,11 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	overflow-wrap: break-word;
-	padding: $grid-unit-05 * 0.5 0 0 0;
+
+	&#{&},
+	&#{&} .edit-site-sidebar-navigation-screen__title {
+		line-height: $font-line-height-x-large;
+	}
 }
 
 .edit-site-sidebar-navigation-screen__actions {