diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
index bf4b240a3fd619..81451cd516f0ed 100644
--- a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
@@ -16,7 +16,7 @@ export async function publishPost( this: Editor ) {
.getByRole( 'button', { name: 'Save', exact: true } );
const publishButton = this.page
.getByRole( 'region', { name: 'Editor top bar' } )
- .getByRole( 'button', { name: 'Publish' } );
+ .getByRole( 'button', { name: 'Publish', exact: true } );
const buttonToClick = ( await saveButton.isVisible() )
? saveButton
: publishButton;
diff --git a/packages/e2e-test-utils/src/ensure-sidebar-opened.js b/packages/e2e-test-utils/src/ensure-sidebar-opened.js
index 5ea99c629c15ef..95c674e980643a 100644
--- a/packages/e2e-test-utils/src/ensure-sidebar-opened.js
+++ b/packages/e2e-test-utils/src/ensure-sidebar-opened.js
@@ -8,7 +8,8 @@ export async function ensureSidebarOpened() {
'.edit-post-header__settings [aria-label="Settings"][aria-expanded="false"],' +
'.edit-site-header__actions [aria-label="Settings"][aria-expanded="false"],' +
'.edit-widgets-header__actions [aria-label="Settings"][aria-expanded="false"],' +
- '.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"]'
+ '.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"],' +
+ '.editor-header__settings [aria-label="Settings"][aria-expanded="false"]'
);
if ( toggleSidebarButton ) {
diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js
index cf5d7c48c9dfdd..5beab3c6205b6e 100644
--- a/packages/e2e-test-utils/src/inserter.js
+++ b/packages/e2e-test-utils/src/inserter.js
@@ -53,7 +53,8 @@ async function isGlobalInserterOpen() {
'.edit-site-header [aria-label="Toggle block inserter"].is-pressed,' +
'.edit-widgets-header [aria-label="Toggle block inserter"].is-pressed,' +
'.edit-widgets-header [aria-label="Add block"].is-pressed,' +
- '.edit-site-header-edit-mode__inserter-toggle.is-pressed'
+ '.edit-site-header-edit-mode__inserter-toggle.is-pressed,' +
+ '.editor-header [aria-label="Toggle block inserter"].is-pressed'
);
} );
}
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index 4f6cf1773134fb..98ba34f7db4f51 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -97,9 +97,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
* Toggles the global styles sidebar (opens it if closed and closes it if open).
*/
export async function toggleGlobalStyles() {
- await page.click(
- '.edit-site-header-edit-mode__actions button[aria-label="Styles"]'
- );
+ await page.click( '.editor-header__settings button[aria-label="Styles"]' );
}
/**
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 86c928ff157662..311279292d8f6a 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -1,24 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
/**
* WordPress dependencies
*/
-import {
- DocumentBar,
- PostSavedState,
- PostPreviewButton,
- store as editorStore,
- privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
import { __unstableMotion as motion } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { useState } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
/**
* Internal dependencies
@@ -29,21 +14,7 @@ import MainDashboardButton from './main-dashboard-button';
import { store as editPostStore } from '../../store';
import { unlock } from '../../lock-unlock';
-const {
- CollapsableBlockToolbar,
- DocumentTools,
- PostViewLink,
- PreviewDropdown,
- PinnedItems,
- MoreMenu,
- PostPublishButtonOrToggle,
-} = unlock( editorPrivateApis );
-
-const slideY = {
- hidden: { y: '-50px' },
- distractionFreeInactive: { y: 0 },
- hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
-};
+const { Header: EditorHeader } = unlock( editorPrivateApis );
const slideX = {
hidden: { x: '-100%' },
@@ -52,42 +23,17 @@ const slideX = {
};
function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
- const isWideViewport = useViewportMatch( 'large' );
- const isLargeViewport = useViewportMatch( 'medium' );
- const {
- isTextEditor,
- hasActiveMetaboxes,
- isPublishSidebarOpened,
- showIconLabels,
- hasHistory,
- hasFixedToolbar,
- isZoomedOutView,
- } = useSelect( ( select ) => {
- const { get: getPreference } = select( preferencesStore );
- const { getEditorMode } = select( editorStore );
- const { __unstableGetEditorMode } = select( blockEditorStore );
-
+ const { hasActiveMetaboxes } = useSelect( ( select ) => {
return {
- isTextEditor: getEditorMode() === 'text',
hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
- hasHistory:
- !! select( editorStore ).getEditorSettings()
- .onNavigateToPreviousEntityRecord,
- isPublishSidebarOpened:
- select( editorStore ).isPublishSidebarOpened(),
- showIconLabels: getPreference( 'core', 'showIconLabels' ),
- hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
- isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
};
}, [] );
- const hasTopToolbar = isLargeViewport && hasFixedToolbar;
-
- const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
- useState( true );
-
return (
-
+
-
-
- { hasTopToolbar && (
-
- ) }
-
- { hasHistory && }
-
-
-
- { ! isPublishSidebarOpened && (
- // This button isn't completely hidden by the publish sidebar.
- // We can't hide the whole toolbar when the publish sidebar is open because
- // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
- // We track that DOM node to return focus to the PostPublishButtonOrToggle
- // when the publish sidebar has been closed.
-
- ) }
-
-
-
-
- { ( isWideViewport || ! showIconLabels ) && (
-
- ) }
-
-
-
-
- { ! hasDefaultEditorCanvasView ? (
- getEditorCanvasContainerTitle( editorCanvasView )
- ) : (
-
- ) }
-
- ) }
-
-
-
- { isLargeViewport && (
-
- ) }
-
- {
- // TODO: For now we conditionally render the Save/Publish buttons based on
- // some specific site editor extra handling. Examples are when we're previewing
- // a theme, handling of global styles changes or when we're in 'view' mode,
- // which opens the save panel in a Modal.
- }
- { ! _isPreviewingTheme && ! isPublishSidebarOpened && (
- // This button isn't completely hidden by the publish sidebar.
- // We can't hide the whole toolbar when the publish sidebar is open because
- // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
- // We track that DOM node to return focus to the PostPublishButtonOrToggle
- // when the publish sidebar has been closed.
-
- ) }
- { ! _isPreviewingTheme && (
-
- ) }
- { _isPreviewingTheme && }
- { ! isDistractionFree && }
-
-
-
-
+ { children }
+
+
+ { hasTopToolbar && (
+
+ ) }
+
+ { ! title ? (
+
+
+
+ ) : (
+ title
+ ) }
+
+
+ { ! customSaveButton && ! isPublishSidebarOpened && (
+ // This button isn't completely hidden by the publish sidebar.
+ // We can't hide the whole toolbar when the publish sidebar is open because
+ // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+ // We track that DOM node to return focus to the PostPublishButtonOrToggle
+ // when the publish sidebar has been closed.
+
+ ) }
+
+
+
+ { ! customSaveButton && (
+
+ ) }
+ { customSaveButton }
+ { ( isWideViewport || ! showIconLabels ) && (
+
+ ) }
+
+
+