Editor: Unify Header component. (#61273)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
WordPress · May 8, 2024 · 839c17d · 839c17d
1 parent 2c2f899
commit 839c17d
Show file tree

Hide file tree

Showing 20 changed files with 512 additions and 750 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
-		<div className="edit-post-header">
+		<EditorHeader
+			forceIsDirty={ hasActiveMetaboxes }
+			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
+		>
 			<MainDashboardButton.Slot>
 				<motion.div
 					variants={ slideX }
@@ -99,64 +45,8 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					/>
 				</motion.div>
 			</MainDashboardButton.Slot>
-			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
-				className="edit-post-header__toolbar"
-			>
-				<DocumentTools disableBlockTools={ isTextEditor } />
-				{ hasTopToolbar && (
-					<CollapsableBlockToolbar
-						isCollapsed={ isBlockToolsCollapsed }
-						onToggle={ setIsBlockToolsCollapsed }
-					/>
-				) }
-				<div
-					className={ clsx( 'edit-post-header__center', {
-						'is-collapsed':
-							hasHistory &&
-							! isBlockToolsCollapsed &&
-							hasTopToolbar,
-					} ) }
-				>
-					{ hasHistory && <DocumentBar /> }
-				</div>
-			</motion.div>
-			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
-				className="edit-post-header__settings"
-			>
-				{ ! 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.
-					<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
-				) }
-				<PreviewDropdown
-					disabled={ isZoomedOutView }
-					forceIsAutosaveable={ hasActiveMetaboxes }
-				/>
-				<PostPreviewButton
-					className="edit-post-header__post-preview-button"
-					forceIsAutosaveable={ hasActiveMetaboxes }
-				/>
-				<PostViewLink />
-				<PostPublishButtonOrToggle
-					forceIsDirty={ hasActiveMetaboxes }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-				/>
-				{ ( isWideViewport || ! showIconLabels ) && (
-					<PinnedItems.Slot scope="core" />
-				) }
-				<MoreMenu />
-				<PostEditorMoreMenu />
-			</motion.div>
-		</div>
+			<PostEditorMoreMenu />
+		</EditorHeader>
 	);
 }