Editor: Unify the DocumentTools component

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

@@ -64,7 +64,8 @@ export async function toggleGlobalBlockInserter() {
 	// "Add block" selector is required to make sure performance comparison
 	// doesn't fail on older branches where we still had "Add block" as label.
 	await page.click(
-		'.edit-post-header [aria-label="Add block"],' +
+		'.editor-document-tools__inserter-toggle,' +
+			'.edit-post-header [aria-label="Add block"],' +
 			'.edit-site-header [aria-label="Add block"],' +
 			'.edit-post-header [aria-label="Toggle block inserter"],' +
 			'.edit-site-header [aria-label="Toggle block inserter"],' +

packages/e2e-test-utils/src/list-view.js

@@ -1,15 +1,15 @@
 async function toggleListView() {
 	// selector .edit-post-header-toolbar__list-view-toggle is still required because the performance tests also execute against older versions that still use that selector.
 	await page.click(
-		'.edit-post-header-toolbar__document-overview-toggle, .edit-post-header-toolbar__list-view-toggle, .edit-site-header-edit-mode__list-view-toggle, .edit-widgets-header-toolbar__list-view-toggle'
+		'.edit-post-header-toolbar__document-overview-toggle, .edit-post-header-toolbar__list-view-toggle, .edit-site-header-edit-mode__list-view-toggle, .edit-widgets-header-toolbar__list-view-toggle, editor-document-tools__document-overview-toggle'
 	);
 }
 
 export async function isListViewOpen() {
 	return await page.evaluate( () => {
 		// selector .edit-post-header-toolbar__list-view-toggle is still required because the performance tests also execute against older versions that still use that selector.
 		return !! document.querySelector(
-			'.edit-post-header-toolbar__document-overview-toggle.is-pressed, .edit-post-header-toolbar__list-view-toggle.is-pressed, .edit-site-header-edit-mode__list-view-toggle.is-pressed, .edit-widgets-header-toolbar__list-view-toggle.is-pressed'
+			'.edit-post-header-toolbar__document-overview-toggle.is-pressed, .edit-post-header-toolbar__list-view-toggle.is-pressed, .edit-site-header-edit-mode__list-view-toggle.is-pressed, .edit-widgets-header-toolbar__list-view-toggle.is-pressed, editor-document-tools__document-overview-toggle.is-pressed'
 		);
 	} );
 }

packages/e2e-tests/specs/editor/various/editor-modes.test.js

@@ -127,7 +127,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// The inserter is disabled.
 		const disabledInserter = await page.$(
-			'.edit-post-header-toolbar__inserter-toggle:disabled, .edit-post-header-toolbar__inserter-toggle[aria-disabled="true"]'
+			'.editor-document-tools__inserter-toggle:disabled, .editor-document-tools__inserter-toggle[aria-disabled="true"]'
 		);
 		expect( disabledInserter ).not.toBeNull();
 	} );

packages/e2e-tests/specs/editor/various/inserting-blocks.test.js

@@ -332,7 +332,7 @@ describe( 'Inserting blocks', () => {
 	it( 'closes the main inserter after inserting a single-use block, like the More block', async () => {
 		await insertBlock( 'More' );
 		await page.waitForSelector(
-			'.edit-post-header-toolbar__inserter-toggle:not(.is-pressed)'
+			'.editor-document-tools__inserter-toggle:not(.is-pressed)'
 		);
 
 		// The inserter panel should've closed.

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

@@ -34,14 +34,14 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 import FullscreenModeClose from './fullscreen-mode-close';
-import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
+const { DocumentTools, PostViewLink, PreviewDropdown } =
+	unlock( editorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -60,6 +60,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const {
+		isTextEditor,
 		hasBlockSelection,
 		hasActiveMetaboxes,
 		hasFixedToolbar,
@@ -68,8 +69,10 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
+		const { getEditorMode } = select( editPostStore );
 
 		return {
+			isTextEditor: getEditorMode() === 'text',
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -108,7 +111,10 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				transition={ { type: 'tween', delay: 0.8 } }
 				className="edit-post-header__toolbar"
 			>
-				<HeaderToolbar hasFixedToolbar={ hasFixedToolbar } />
+				<DocumentTools
+					disableBlockTools={ isTextEditor }
+					showIconLabels={ showIconLabels }
+				/>
 				{ hasFixedToolbar && isLargeViewport && (
 					<>
 						<div

packages/edit-post/src/components/header/style.scss

@@ -174,7 +174,7 @@
 	.components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
 		display: block;
 	}
-	.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
+	.editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
 	.interface-pinned-items .components-button {
 		padding-left: $grid-unit;
 		padding-right: $grid-unit;
@@ -275,8 +275,8 @@
 			visibility: hidden;
 		}
 
-		& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
-		& > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle,
+		& > .edit-post-header__toolbar .editor-document-tools__inserter-toggle,
+		& > .edit-post-header__toolbar .editor-document-tools__document-overview-toggle,
 		& > .edit-post-header__settings > .editor-preview-dropdown,
 		& > .edit-post-header__settings > .interface-pinned-items {
 			display: none;

packages/edit-post/src/style.scss

@@ -1,7 +1,6 @@
 @import "../../interface/src/style.scss";
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
-@import "./components/header/header-toolbar/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/block-manager/style.scss";

packages/edit-site/src/components/block-editor/use-site-editor-settings.js

@@ -150,6 +150,7 @@ export function useSpecificEditorSettings() {
 		return {
 			...settings,
 
+			richEditingEnabled: true,
 			supportsTemplateMode: true,
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
 			allowRightClickOverrides,

packages/edit-site/src/components/header-edit-mode/document-tools/index.js

@@ -1,194 +1,71 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	ToolSelector,
-	NavigableToolbar,
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { _x, __ } from '@wordpress/i18n';
-import { listView, plus, chevronUpDown } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { chevronUpDown } from '@wordpress/icons';
 import { Button, ToolbarItem } from '@wordpress/components';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import UndoButton from '../undo-redo/undo';
-import RedoButton from '../undo-redo/redo';
 import { store as editSiteStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
-
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
+const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );
 
 export default function DocumentTools( {
 	blockEditorMode,
 	hasFixedToolbar,
 	isDistractionFree,
 	showIconLabels,
 } ) {
-	const inserterButton = useRef();
-	const {
-		isInserterOpen,
-		isListViewOpen,
-		listViewShortcut,
-		isVisualMode,
-		listViewToggleRef,
-	} = useSelect( ( select ) => {
+	const { isVisualMode } = useSelect( ( select ) => {
 		const { getEditorMode } = select( editSiteStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const { isInserterOpened, isListViewOpened, getListViewToggleRef } =
-			unlock( select( editorStore ) );
 
 		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			listViewShortcut: getShortcutRepresentation(
-				'core/editor/toggle-list-view'
-			),
 			isVisualMode: getEditorMode() === 'visual',
-			listViewToggleRef: getListViewToggleRef(),
 		};
 	}, [] );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { setDeviceType, setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editorStore );
-
+	const { setDeviceType } = useDispatch( editorStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
-
-	const toggleInserter = useCallback( () => {
-		if ( isInserterOpen ) {
-			// Focusing the inserter button should close the inserter popover.
-			// However, there are some cases it won't close when the focus is lost.
-			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
-			inserterButton.current.focus();
-			setIsInserterOpened( false );
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpen, setIsInserterOpened ] );
-
-	const toggleListView = useCallback(
-		() => setIsListViewOpened( ! isListViewOpen ),
-		[ setIsListViewOpened, isListViewOpen ]
-	);
-
-	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
-	const blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();
-
-	/* translators: button label text should, if possible, be under 16 characters. */
-	const longLabel = _x(
-		'Toggle block inserter',
-		'Generic label for block inserter button'
-	);
-	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
-
 	const isZoomedOutViewExperimentEnabled =
 		window?.__experimentalEnableZoomedOutView && isVisualMode;
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
 	return (
-		<NavigableToolbar
-			className="edit-site-header-edit-mode__document-tools"
-			aria-label={ __( 'Document tools' ) }
-			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+		<EditorDocumentTools
+			showIconLabels={ showIconLabels }
+			disableBlockTools={ ! isVisualMode }
+			listViewLabel={ __( 'List View' ) }
 		>
-			<div className="edit-site-header-edit-mode__toolbar">
-				{ ! isDistractionFree && (
+			{ isZoomedOutViewExperimentEnabled &&
+				isLargeViewport &&
+				! isDistractionFree &&
+				! hasFixedToolbar && (
 					<ToolbarItem
-						ref={ inserterButton }
 						as={ Button }
-						className="edit-site-header-edit-mode__inserter-toggle"
-						variant="primary"
-						isPressed={ isInserterOpen }
-						onMouseDown={ preventDefault }
-						onClick={ toggleInserter }
-						disabled={ ! isVisualMode }
-						icon={ plus }
-						label={ showIconLabels ? shortLabel : longLabel }
-						showTooltip={ ! showIconLabels }
-						aria-expanded={ isInserterOpen }
+						className="edit-site-header-edit-mode__zoom-out-view-toggle"
+						icon={ chevronUpDown }
+						isPressed={ isZoomedOutView }
+						/* translators: button label text should, if possible, be under 16 characters. */
+						label={ __( 'Zoom-out View' ) }
+						onClick={ () => {
+							setDeviceType( 'Desktop' );
+							__unstableSetEditorMode(
+								isZoomedOutView ? 'edit' : 'zoom-out'
+							);
+						} }
 						size="compact"
 					/>
 				) }
-				{ isLargeViewport && (
-					<>
-						{ ! hasFixedToolbar && (
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ ! isVisualMode }
-								size="compact"
-							/>
-						) }
-						<ToolbarItem
-							as={ UndoButton }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							size="compact"
-						/>
-						<ToolbarItem
-							as={ RedoButton }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							size="compact"
-						/>
-						{ ! isDistractionFree && (
-							<ToolbarItem
-								as={ Button }
-								className="edit-site-header-edit-mode__list-view-toggle"
-								disabled={ ! isVisualMode || isZoomedOutView }
-								icon={ listView }
-								isPressed={ isListViewOpen }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ __( 'List View' ) }
-								onClick={ toggleListView }
-								ref={ listViewToggleRef }
-								shortcut={ listViewShortcut }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								aria-expanded={ isListViewOpen }
-								size="compact"
-							/>
-						) }
-						{ isZoomedOutViewExperimentEnabled &&
-							! isDistractionFree &&
-							! hasFixedToolbar && (
-								<ToolbarItem
-									as={ Button }
-									className="edit-site-header-edit-mode__zoom-out-view-toggle"
-									icon={ chevronUpDown }
-									isPressed={ isZoomedOutView }
-									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'Zoom-out View' ) }
-									onClick={ () => {
-										setDeviceType( 'Desktop' );
-										__unstableSetEditorMode(
-											isZoomedOutView
-												? 'edit'
-												: 'zoom-out'
-										);
-									} }
-									size="compact"
-								/>
-							) }
-					</>
-				) }
-			</div>
-		</NavigableToolbar>
+		</EditorDocumentTools>
 	);
 }

packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js

@@ -33,10 +33,6 @@ function ModeSwitcher() {
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
-			isRichEditingEnabled:
-				select( editSiteStore ).getSettings().richEditingEnabled,
-			isCodeEditingEnabled:
-				select( editSiteStore ).getSettings().codeEditingEnabled,
 			mode: select( editSiteStore ).getEditorMode(),
 		} ),
 		[]