diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 6e66c854dd70ee..f146413a09dc9e 100644 --- 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 index 8353b4ed6b15e7..3fe02dbe5004f9 100644 --- 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 index c63a0dcb954d2b..1a24d3ee1475e7 100644 --- 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 index f9837e5fa3c84b..5e47588369c80d 100644 --- 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 index 0c3a2083af6961..7b8993c0be4956 100644 --- 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 ( { isSaveViewOpen ? ( diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index 57d88626636dde..a45239b529ddd0 100644 --- 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; } }