Skip to content

Commit 839c17d

Browse files
youknowriadMamadukajeryjjasmussen
authored
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>
1 parent 2c2f899 commit 839c17d

20 files changed

Lines changed: 512 additions & 750 deletions

File tree

‎packages/e2e-test-utils-playwright/src/editor/publish-post.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export async function publishPost( this: Editor ) {
1616
.getByRole( 'button', { name: 'Save', exact: true } );
1717
const publishButton = this.page
1818
.getByRole( 'region', { name: 'Editor top bar' } )
19-
.getByRole( 'button', { name: 'Publish' } );
19+
.getByRole( 'button', { name: 'Publish', exact: true } );
2020
const buttonToClick = ( await saveButton.isVisible() )
2121
? saveButton
2222
: publishButton;

‎packages/e2e-test-utils/src/ensure-sidebar-opened.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export async function ensureSidebarOpened() {
88
'.edit-post-header__settings [aria-label="Settings"][aria-expanded="false"],' +
99
'.edit-site-header__actions [aria-label="Settings"][aria-expanded="false"],' +
1010
'.edit-widgets-header__actions [aria-label="Settings"][aria-expanded="false"],' +
11-
'.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"]'
11+
'.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"],' +
12+
'.editor-header__settings [aria-label="Settings"][aria-expanded="false"]'
1213
);
1314

1415
if ( toggleSidebarButton ) {

‎packages/e2e-test-utils/src/inserter.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ async function isGlobalInserterOpen() {
5353
'.edit-site-header [aria-label="Toggle block inserter"].is-pressed,' +
5454
'.edit-widgets-header [aria-label="Toggle block inserter"].is-pressed,' +
5555
'.edit-widgets-header [aria-label="Add block"].is-pressed,' +
56-
'.edit-site-header-edit-mode__inserter-toggle.is-pressed'
56+
'.edit-site-header-edit-mode__inserter-toggle.is-pressed,' +
57+
'.editor-header [aria-label="Toggle block inserter"].is-pressed'
5758
);
5859
} );
5960
}

‎packages/e2e-test-utils/src/site-editor.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
9797
* Toggles the global styles sidebar (opens it if closed and closes it if open).
9898
*/
9999
export async function toggleGlobalStyles() {
100-
await page.click(
101-
'.edit-site-header-edit-mode__actions button[aria-label="Styles"]'
102-
);
100+
await page.click( '.editor-header__settings button[aria-label="Styles"]' );
103101
}
104102

105103
/**

‎packages/edit-post/src/components/header/index.js‎

Lines changed: 9 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,9 @@
1-
/**
2-
* External dependencies
3-
*/
4-
import clsx from 'clsx';
5-
61
/**
72
* WordPress dependencies
83
*/
9-
import {
10-
DocumentBar,
11-
PostSavedState,
12-
PostPreviewButton,
13-
store as editorStore,
14-
privateApis as editorPrivateApis,
15-
} from '@wordpress/editor';
4+
import { privateApis as editorPrivateApis } from '@wordpress/editor';
165
import { useSelect } from '@wordpress/data';
17-
import { useViewportMatch } from '@wordpress/compose';
186
import { __unstableMotion as motion } from '@wordpress/components';
19-
import { store as preferencesStore } from '@wordpress/preferences';
20-
import { useState } from '@wordpress/element';
21-
import { store as blockEditorStore } from '@wordpress/block-editor';
227

238
/**
249
* Internal dependencies
@@ -29,21 +14,7 @@ import MainDashboardButton from './main-dashboard-button';
2914
import { store as editPostStore } from '../../store';
3015
import { unlock } from '../../lock-unlock';
3116

32-
const {
33-
CollapsableBlockToolbar,
34-
DocumentTools,
35-
PostViewLink,
36-
PreviewDropdown,
37-
PinnedItems,
38-
MoreMenu,
39-
PostPublishButtonOrToggle,
40-
} = unlock( editorPrivateApis );
41-
42-
const slideY = {
43-
hidden: { y: '-50px' },
44-
distractionFreeInactive: { y: 0 },
45-
hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
46-
};
17+
const { Header: EditorHeader } = unlock( editorPrivateApis );
4718

4819
const slideX = {
4920
hidden: { x: '-100%' },
@@ -52,42 +23,17 @@ const slideX = {
5223
};
5324

5425
function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
55-
const isWideViewport = useViewportMatch( 'large' );
56-
const isLargeViewport = useViewportMatch( 'medium' );
57-
const {
58-
isTextEditor,
59-
hasActiveMetaboxes,
60-
isPublishSidebarOpened,
61-
showIconLabels,
62-
hasHistory,
63-
hasFixedToolbar,
64-
isZoomedOutView,
65-
} = useSelect( ( select ) => {
66-
const { get: getPreference } = select( preferencesStore );
67-
const { getEditorMode } = select( editorStore );
68-
const { __unstableGetEditorMode } = select( blockEditorStore );
69-
26+
const { hasActiveMetaboxes } = useSelect( ( select ) => {
7027
return {
71-
isTextEditor: getEditorMode() === 'text',
7228
hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
73-
hasHistory:
74-
!! select( editorStore ).getEditorSettings()
75-
.onNavigateToPreviousEntityRecord,
76-
isPublishSidebarOpened:
77-
select( editorStore ).isPublishSidebarOpened(),
78-
showIconLabels: getPreference( 'core', 'showIconLabels' ),
79-
hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
80-
isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
8129
};
8230
}, [] );
8331

84-
const hasTopToolbar = isLargeViewport && hasFixedToolbar;
85-
86-
const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
87-
useState( true );
88-
8932
return (
90-
<div className="edit-post-header">
33+
<EditorHeader
34+
forceIsDirty={ hasActiveMetaboxes }
35+
setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
36+
>
9137
<MainDashboardButton.Slot>
9238
<motion.div
9339
variants={ slideX }
@@ -99,64 +45,8 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
9945
/>
10046
</motion.div>
10147
</MainDashboardButton.Slot>
102-
<motion.div
103-
variants={ slideY }
104-
transition={ { type: 'tween', delay: 0.8 } }
105-
className="edit-post-header__toolbar"
106-
>
107-
<DocumentTools disableBlockTools={ isTextEditor } />
108-
{ hasTopToolbar && (
109-
<CollapsableBlockToolbar
110-
isCollapsed={ isBlockToolsCollapsed }
111-
onToggle={ setIsBlockToolsCollapsed }
112-
/>
113-
) }
114-
<div
115-
className={ clsx( 'edit-post-header__center', {
116-
'is-collapsed':
117-
hasHistory &&
118-
! isBlockToolsCollapsed &&
119-
hasTopToolbar,
120-
} ) }
121-
>
122-
{ hasHistory && <DocumentBar /> }
123-
</div>
124-
</motion.div>
125-
<motion.div
126-
variants={ slideY }
127-
transition={ { type: 'tween', delay: 0.8 } }
128-
className="edit-post-header__settings"
129-
>
130-
{ ! isPublishSidebarOpened && (
131-
// This button isn't completely hidden by the publish sidebar.
132-
// We can't hide the whole toolbar when the publish sidebar is open because
133-
// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
134-
// We track that DOM node to return focus to the PostPublishButtonOrToggle
135-
// when the publish sidebar has been closed.
136-
<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
137-
) }
138-
<PreviewDropdown
139-
disabled={ isZoomedOutView }
140-
forceIsAutosaveable={ hasActiveMetaboxes }
141-
/>
142-
<PostPreviewButton
143-
className="edit-post-header__post-preview-button"
144-
forceIsAutosaveable={ hasActiveMetaboxes }
145-
/>
146-
<PostViewLink />
147-
<PostPublishButtonOrToggle
148-
forceIsDirty={ hasActiveMetaboxes }
149-
setEntitiesSavedStatesCallback={
150-
setEntitiesSavedStatesCallback
151-
}
152-
/>
153-
{ ( isWideViewport || ! showIconLabels ) && (
154-
<PinnedItems.Slot scope="core" />
155-
) }
156-
<MoreMenu />
157-
<PostEditorMoreMenu />
158-
</motion.div>
159-
</div>
48+
<PostEditorMoreMenu />
49+
</EditorHeader>
16050
);
16151
}
16252

0 commit comments

Comments
 (0)