diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 691fff09fb3b5..0ce90bec9c097 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -28,7 +28,6 @@ $z-layers: (
".block-editor-warning": 5,
".block-library-gallery-item__inline-menu": 20,
".block-editor-url-input__suggestions": 30,
- ".edit-post-layout__footer": 30,
".interface-interface-skeleton__header": 30,
".interface-interface-skeleton__content": 20,
".edit-widgets-header": 30,
@@ -86,13 +85,12 @@ $z-layers: (
// Show sidebar above wp-admin navigation bar for mobile viewports:
// #wpadminbar { z-index: 99999 }
".interface-interface-skeleton__sidebar": 100000,
- ".edit-post-layout__toggle-sidebar-panel": 100000,
".editor-layout__toggle-sidebar-panel": 100000,
".edit-widgets-sidebar": 100000,
- ".edit-post-layout .edit-post-post-publish-panel": 100001,
+ ".editor-post-publish-panel": 100001,
// For larger views, the wp-admin navbar dropdown should be at top of
// the Publish Post sidebar.
- ".edit-post-layout .edit-post-post-publish-panel {greater than small}": 99998,
+ ".editor-post-publish-panel {greater than small}": 99998,
// For larger views, the wp-admin navbar dropdown should be on top of
// the multi-entity saving sidebar.
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 107fb6e6de5fd..9f22262c53bd9 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -468,10 +468,6 @@ $color-control-label-height: 20px;
top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
}
-.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
- right: $sidebar-width;
-}
-
// When fullscreen.
.is-fullscreen-mode {
.wp-block-navigation__responsive-container.is-menu-open {
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 6603b1f685152..c152be045f129 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -20,7 +20,6 @@ import {
privateApis as blockEditorPrivateApis,
store as blockEditorStore,
} from '@wordpress/block-editor';
-import { useViewportMatch } from '@wordpress/compose';
import { PluginArea } from '@wordpress/plugins';
import { __, sprintf } from '@wordpress/i18n';
import { useCallback, useMemo } from '@wordpress/element';
@@ -144,19 +143,16 @@ function useEditorStyles() {
function Layout( { initialPost } ) {
useCommands();
useEditPostCommands();
- const isWideViewport = useViewportMatch( 'large' );
const paddingAppenderRef = usePaddingAppender();
const shouldIframe = useShouldIframe();
const { createErrorNotice } = useDispatch( noticesStore );
const {
mode,
isFullscreenActive,
- sidebarIsOpened,
hasActiveMetaboxes,
hasBlockSelected,
showIconLabels,
isDistractionFree,
- showBlockBreadcrumbs,
showMetaBoxes,
hasHistory,
isEditingTemplate,
@@ -175,7 +171,6 @@ function Layout( { initialPost } ) {
!! select( blockEditorStore ).getBlockSelectionStart(),
showIconLabels: get( 'core', 'showIconLabels' ),
isDistractionFree: get( 'core', 'distractionFree' ),
- showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
showMetaBoxes:
select( editorStore ).getRenderingMode() === 'post-only',
hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
@@ -201,11 +196,7 @@ function Layout( { initialPost } ) {
}
const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
- 'is-sidebar-opened': sidebarIsOpened,
'has-metaboxes': hasActiveMetaboxes,
- 'is-distraction-free': isDistractionFree && isWideViewport,
- 'has-block-breadcrumbs':
- showBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
} );
function onPluginAreaError( name ) {
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 26b20b66f11c7..6f61e01c1d7c6 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -234,7 +234,7 @@ export default function Editor( { isLoading } ) {
{
const { getAllShortcutKeyCombinations } = select(
keyboardShortcutsStore
@@ -102,10 +101,6 @@ export default function Layout() {
'core',
'distractionFree'
),
- hasBlockBreadcrumbs: select( preferencesStore ).get(
- 'core',
- 'showBlockBreadcrumbs'
- ),
hasBlockSelected:
select( blockEditorStore ).getBlockSelectionStart(),
};
@@ -185,10 +180,6 @@ export default function Layout() {
'is-full-canvas': canvasMode === 'edit',
'has-fixed-toolbar': hasFixedToolbar,
'is-block-toolbar-visible': hasBlockSelected,
- 'has-block-breadcrumbs':
- hasBlockBreadcrumbs &&
- ! isDistractionFree &&
- canvasMode === 'edit',
}
) }
>
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
index b78e3caa0b57c..c948c294507fa 100644
--- a/packages/editor/src/components/editor-interface/index.js
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -121,8 +121,10 @@ export default function EditorInterface( {
-
-
+
)
}
actions={
diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
new file mode 100644
index 0000000000000..e7e0a93af2090
--- /dev/null
+++ b/packages/editor/src/components/editor-interface/style.scss
@@ -0,0 +1,3 @@
+.editor-editor-interface .entities-saved-states__panel-header {
+ height: $header-height + $border-width;
+}
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 30317a5367f65..8f0d8f53ca9cb 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -31,13 +31,6 @@
}
}
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
- .entities-saved-states__panel-header {
- height: $header-height + $border-width;
- }
-}
-
.entities-saved-states__post-meta {
margin-left: $grid-unit-30;
align-items: center;
diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
index 427297161ed8b..e2efba2e9375a 100644
--- a/packages/editor/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -190,7 +190,7 @@
}
}
-.is-distraction-free {
+.editor-editor-interface.is-distraction-free {
.interface-interface-skeleton__header {
border-bottom: none;
}
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index c0ddec29253e3..5e05776ba159c 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -1,7 +1,3 @@
-.editor-post-publish-panel {
- background: $white;
-}
-
.editor-post-publish-panel__content {
// Ensure the post-publish panel accounts for the header and footer height.
min-height: calc(100% - #{$header-height + 84px});
@@ -71,6 +67,7 @@
.editor-post-publish-panel__header-publish-button {
padding-right: $grid-unit-05;
+ justify-content: center;
}
.editor-post-publish-panel__header-cancel-button {
@@ -194,40 +191,34 @@
}
}
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
- .editor-post-publish-panel {
- position: fixed;
- z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
- top: $admin-bar-height-big;
- bottom: 0;
- right: 0;
- left: 0;
- overflow: auto;
-
- @include break-medium() {
- z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
- top: $admin-bar-height;
- left: auto;
- width: $sidebar-width + $border-width;
- border-left: $border-width solid $gray-300;
- transform: translateX(+100%);
- animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
- @include reduce-motion("animation");
-
- body.is-fullscreen-mode & {
- top: 0;
- }
-
- // Keep it open on focus to avoid conflict with navigate-regions animation.
- [role="region"]:focus & {
- transform: translateX(0%);
- }
+.editor-post-publish-panel {
+ position: fixed;
+ z-index: z-index(".editor-post-publish-panel");
+ background: $white;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ overflow: auto;
+
+ @include break-medium() {
+ z-index: z-index(".editor-post-publish-panel {greater than small}");
+ top: $admin-bar-height;
+ left: auto;
+ width: $sidebar-width + $border-width;
+ border-left: $border-width solid $gray-300;
+ transform: translateX(+100%);
+ animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+ @include reduce-motion("animation");
+
+ body.is-fullscreen-mode & {
+ top: 0;
}
- }
- .editor-post-publish-panel__header-publish-button {
- justify-content: center;
+ // Keep it open on focus to avoid conflict with navigate-regions animation.
+ [role="region"]:focus & {
+ transform: translateX(0%);
+ }
}
}
diff --git a/packages/editor/src/components/save-publish-panels/style.scss b/packages/editor/src/components/save-publish-panels/style.scss
index eefa32a8a9a1a..74dcf113f0479 100644
--- a/packages/editor/src/components/save-publish-panels/style.scss
+++ b/packages/editor/src/components/save-publish-panels/style.scss
@@ -26,11 +26,3 @@
bottom: 0;
}
}
-
-.edit-post-layout__toggle-sidebar-panel {
- .interface-interface-skeleton__sidebar:focus &,
- .interface-interface-skeleton__sidebar:focus-within & {
- top: auto;
- bottom: 0;
- }
-}
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index bd8d03568e9d4..a4034a8a51c73 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -9,6 +9,7 @@
@import "./components/document-bar/style.scss";
@import "./components/document-outline/style.scss";
@import "./components/document-tools/style.scss";
+@import "./components/editor-interface/style.scss";
@import "./components/editor-notices/style.scss";
@import "./components/entities-saved-states/style.scss";
@import "./components/error-boundary/style.scss";
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index be8eced71daba..379601c4a6ee7 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -114,13 +114,6 @@ html.interface-interface-skeleton__html-container {
// On Mobile the header is fixed to keep HTML as scrollable.
@include break-medium() {
position: relative !important;
-
- // Set this z-index only when the sidebar is opened. When it's closed, the
- // button to open the sidebar that is shown when navigating regions needs to
- // be above the footer. See `editor-layout__toggle-sidebar-panel`.
- .is-sidebar-opened & {
- z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
- }
}
}
@@ -170,16 +163,6 @@ html.interface-interface-skeleton__html-container {
@include break-medium() {
display: flex;
}
-
- .block-editor-block-breadcrumb {
- z-index: z-index(".edit-post-layout__footer");
- display: flex;
- background: $white;
- height: $button-size-small;
- align-items: center;
- font-size: $default-font-size;
- padding: 0 ($grid-unit-15 + 6px);
- }
}
.interface-interface-skeleton__actions {