Fix the Publish region position and focus style. (#48102)

WordPress · Feb 17, 2023 · 05d3575 · 05d3575 · github-actions · Feb 17, 2023
1 parent 7505416
commit 05d3575
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 23 deletions.
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -24,13 +24,14 @@
 	// visible. For the future, it's important to take into consideration that
 	// the navigable regions should always have a computed size. For now, we can
 	// fix some edge cases but these CSS rules should be later removed in favor of
-	// a more abstracted approach to make the navigabel regions focus style work
+	// a more abstracted approach to make the navigable regions focus style work
 	// regardles of the CSS used on other components.
 
 	// Header top bar when Distraction free mode is on.
 	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
 	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
 	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
+	.interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -128,13 +128,6 @@ function Layout( { styles } ) {
 
 	const isDistractionFree = isDistractionFreeMode && isLargeViewport;
 
-	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
-		'is-sidebar-opened': sidebarIsOpened,
-		'has-fixed-toolbar': hasFixedToolbar,
-		'has-metaboxes': hasActiveMetaboxes,
-		'show-icon-labels': showIconLabels,
-		'is-distraction-free': isDistractionFree,
-	} );
 	const openSidebarPanel = () =>
 		openGeneralSidebar(
 			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
@@ -166,6 +159,15 @@ function Layout( { styles } ) {
 		[ entitiesSavedStatesCallback ]
 	);
 
+	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
+		'is-sidebar-opened': sidebarIsOpened,
+		'has-fixed-toolbar': hasFixedToolbar,
+		'has-metaboxes': hasActiveMetaboxes,
+		'show-icon-labels': showIconLabels,
+		'is-distraction-free': isDistractionFree,
+		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+	} );
+
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
 		: __( 'Block Library' );

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -6,12 +6,6 @@
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
-
-	.edit-site-layout__actions:focus &,
-	.edit-site-layout__actions:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
 }
 
 // Adjust the position of the notices

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -207,10 +207,17 @@
 
 	&:focus,
 	&:focus-within {
-		top: 0;
+		top: auto;
 		bottom: 0;
 	}
 
+	&.is-entity-save-view-open {
+		&:focus,
+		&:focus-within {
+			top: 0;
+		}
+	}
+
 	@include break-medium {
 		border-left: $border-width solid $gray-300;
 	}

diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -46,7 +51,9 @@ export default function SavePanel() {
 
 	return (
 		<NavigableRegion
-			className="edit-site-layout__actions"
+			className={ classnames( 'edit-site-layout__actions', {
+				'is-entity-save-view-open': isSaveViewOpen,
+			} ) }
 			ariaLabel={ __( 'Save sidebar' ) }
 		>
 			{ isSaveViewOpen ? (

diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
@@ -184,16 +184,20 @@ html.interface-interface-skeleton__html-container {
 
 	&:focus,
 	&:focus-within {
-		top: $admin-bar-height-big;
+		top: auto;
+		bottom: 0;
 
-		@include break-medium() {
-			border-left: $border-width solid $gray-300;
-			top: $admin-bar-height;
+		.is-entity-save-view-open & {
+			top: $admin-bar-height-big;
 
-			.is-fullscreen-mode & {
-				top: 0;
+			@include break-medium() {
+				border-left: $border-width solid $gray-300;
+				top: $admin-bar-height;
+
+				.is-fullscreen-mode & {
+					top: 0;
+				}
 			}
 		}
-		bottom: 0;
 	}
 }