.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;
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index fe03b2f7133735..4ed6875e2c5130 100644
--- a/packages/edit-post/src/style.scss
+++ b/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";
diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
index 3cd65802b29de5..cbe70cbee83c07 100644
--- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
+++ b/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,
diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
index ec37cadfbc0de0..b09a2cfde618bd 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
@@ -1,34 +1,24 @@
/**
* 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,
@@ -36,159 +26,46 @@ export default function DocumentTools( {
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 (
-
-
- { ! isDistractionFree && (
+ { isZoomedOutViewExperimentEnabled &&
+ isLargeViewport &&
+ ! isDistractionFree &&
+ ! hasFixedToolbar && (
{
+ setDeviceType( 'Desktop' );
+ __unstableSetEditorMode(
+ isZoomedOutView ? 'edit' : 'zoom-out'
+ );
+ } }
size="compact"
/>
) }
- { isLargeViewport && (
- <>
- { ! hasFixedToolbar && (
-
- ) }
-
-
- { ! isDistractionFree && (
-
- ) }
- { isZoomedOutViewExperimentEnabled &&
- ! isDistractionFree &&
- ! hasFixedToolbar && (
- {
- setDeviceType( 'Desktop' );
- __unstableSetEditorMode(
- isZoomedOutView
- ? 'edit'
- : 'zoom-out'
- );
- } }
- size="compact"
- />
- ) }
-
- ) }
-
-
+
);
}
diff --git a/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js b/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js
index f4b63edfae6e80..2c27444f669c03 100644
--- a/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js
+++ b/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(),
} ),
[]
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index cbd0a7422b5364..44b762a667bb7b 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -99,49 +99,6 @@ $header-toolbar-min-width: 335px;
}
}
-.edit-site-header-edit-mode__document-tools {
- display: flex;
- border: none;
-
- // The Toolbar component adds different styles to buttons, so we reset them
- // here to the original button styles
- .edit-site-header-edit-mode__toolbar > .components-button.has-icon,
- .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
- // @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
- // This is best fixed by making the mover control area a proper single toolbar group.
- // It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
- height: $button-size-compact;
- min-width: $button-size-compact;
- padding: 4px;
-
- &.is-pressed {
- background: $gray-900;
- }
-
- &:focus:not(:disabled) {
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
- outline: $border-width solid transparent;
- }
-
- &::before {
- display: none;
- }
- }
-
- .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
- // Special dimensions for this button.
- min-width: $button-size-compact;
- width: $button-size-compact;
- height: $button-size-compact;
- padding: 0;
- }
-
- .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
- width: auto;
- padding: 0 $grid-unit-10;
- }
-}
-
// Button text label styles
.edit-site-header-edit-mode.show-icon-labels {
@@ -185,10 +142,6 @@ $header-toolbar-min-width: 335px;
padding: 0 $grid-unit-10;
}
- .edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
- margin-left: $grid-unit-10;
- }
-
.block-editor-block-mover {
border-left: none;
diff --git a/packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js b/packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js
deleted file mode 100644
index 17d0ecb892d0a5..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
-
-function RedoButton( props, ref ) {
- const shortcut = isAppleOS()
- ? displayShortcut.primaryShift( 'z' )
- : displayShortcut.primary( 'y' );
-
- const hasRedo = useSelect(
- ( select ) => select( coreStore ).hasRedo(),
- []
- );
- const { redo } = useDispatch( coreStore );
- return (
-
- );
-}
-
-export default forwardRef( RedoButton );
diff --git a/packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js b/packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js
deleted file mode 100644
index 271c73a452d9ea..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
-
-function UndoButton( props, ref ) {
- const hasUndo = useSelect(
- ( select ) => select( coreStore ).hasUndo(),
- []
- );
- const { undo } = useDispatch( coreStore );
- return (
-
- );
-}
-
-export default forwardRef( UndoButton );
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/editor/src/components/document-tools/index.js
similarity index 66%
rename from packages/edit-post/src/components/header/header-toolbar/index.js
rename to packages/editor/src/components/document-tools/index.js
index e8786900e4f257..999f49d8c9cdbe 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
@@ -10,11 +15,6 @@ import {
store as blockEditorStore,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
-import {
- EditorHistoryRedo,
- EditorHistoryUndo,
- store as editorStore,
-} from '@wordpress/editor';
import { Button, ToolbarItem } from '@wordpress/components';
import { listView, plus } from '@wordpress/icons';
import { useRef, useCallback } from '@wordpress/element';
@@ -23,8 +23,10 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
/**
* Internal dependencies
*/
-import { store as editPostStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import EditorHistoryRedo from '../editor-history/redo';
+import EditorHistoryUndo from '../editor-history/undo';
const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
@@ -32,42 +34,38 @@ const preventDefault = ( event ) => {
event.preventDefault();
};
-function HeaderToolbar( { hasFixedToolbar } ) {
+function DocumentTools( {
+ className,
+ showIconLabels,
+ disableBlockTools = false,
+ children,
+ // This is a temporary prop until the list view is fully unified between post and site editors.
+ listViewLabel = __( 'Document Overview' ),
+} ) {
const inserterButton = useRef();
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editorStore );
const {
- isInserterEnabled,
isInserterOpened,
- isTextModeEnabled,
- showIconLabels,
isListViewOpen,
listViewShortcut,
listViewToggleRef,
+ hasFixedToolbar,
} = useSelect( ( select ) => {
- const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
- select( blockEditorStore );
- const { getEditorSettings, isListViewOpened, getListViewToggleRef } =
- unlock( select( editorStore ) );
- const { getEditorMode, isFeatureActive } = select( editPostStore );
+ const { getSettings } = select( blockEditorStore );
+ const { isListViewOpened, getListViewToggleRef } = unlock(
+ select( editorStore )
+ );
const { getShortcutRepresentation } = select( keyboardShortcutsStore );
return {
- // This setting (richEditingEnabled) should not live in the block editor's setting.
- isInserterEnabled:
- getEditorMode() === 'visual' &&
- getEditorSettings().richEditingEnabled &&
- hasInserterItems(
- getBlockRootClientId( getBlockSelectionEnd() )
- ),
isInserterOpened: select( editorStore ).isInserterOpened(),
- isTextModeEnabled: getEditorMode() === 'text',
- showIconLabels: isFeatureActive( 'showIconLabels' ),
isListViewOpen: isListViewOpened(),
listViewShortcut: getShortcutRepresentation(
'core/editor/toggle-list-view'
),
listViewToggleRef: getListViewToggleRef(),
+ hasFixedToolbar: getSettings().hasFixedToolbar,
};
}, [] );
@@ -82,26 +80,7 @@ function HeaderToolbar( { hasFixedToolbar } ) {
() => setIsListViewOpened( ! isListViewOpen ),
[ setIsListViewOpened, isListViewOpen ]
);
- const overflowItems = (
- <>
-
-
- );
+
const toggleInserter = useCallback( () => {
if ( isInserterOpened ) {
// Focusing the inserter button should close the inserter popover.
@@ -123,21 +102,21 @@ function HeaderToolbar( { hasFixedToolbar } ) {
return (
-
+
) }
@@ -168,12 +147,28 @@ function HeaderToolbar( { hasFixedToolbar } ) {
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
- { overflowItems }
+
) }
+ { children }
);
}
-export default HeaderToolbar;
+export default DocumentTools;
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/editor/src/components/document-tools/style.scss
similarity index 63%
rename from packages/edit-post/src/components/header/header-toolbar/style.scss
rename to packages/editor/src/components/document-tools/style.scss
index 717d5cd760db58..2aa39b1cbed858 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/editor/src/components/document-tools/style.scss
@@ -1,9 +1,9 @@
-.edit-post-header-toolbar {
+.editor-document-tools {
display: inline-flex;
align-items: center;
// Hide all action buttons except the inserter on mobile.
- .edit-post-header-toolbar__left > .components-button {
+ .editor-document-tools__left > .components-button {
display: none;
@include break-small() {
@@ -11,7 +11,7 @@
}
}
- .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle {
+ .editor-document-tools__left > .editor-document-tools__inserter-toggle {
display: inline-flex;
svg {
@@ -37,8 +37,8 @@
// The Toolbar component adds different styles to buttons, so we reset them
// here to the original button styles
- .edit-post-header-toolbar__left > .components-button.has-icon,
- .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
+ .editor-document-tools__left > .components-button.has-icon,
+ .editor-document-tools__left > .components-dropdown > .components-button.has-icon {
// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
// This is best fixed by making the mover control area a proper single toolbar group.
// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
@@ -61,25 +61,7 @@
}
}
-// Reduced UI.
-.edit-post-header.has-reduced-ui {
- @include break-small () {
- // Apply transition to every button but the first one.
- .edit-post-header-toolbar__left > * + .components-button,
- .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
- transition: opacity 0.1s linear;
- @include reduce-motion("transition");
- }
-
- // Zero out opacity unless hovered.
- &:not(:hover) .edit-post-header-toolbar__left > * + .components-button,
- &:not(:hover) .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
- opacity: 0;
- }
- }
-}
-
-.edit-post-header-toolbar__left {
+.editor-document-tools__left {
display: inline-flex;
align-items: center;
padding-left: $grid-unit-20;
@@ -98,7 +80,7 @@
}
}
-.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
+.editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
min-width: $button-size-compact;
width: $button-size-compact;
height: $button-size-compact;
@@ -111,6 +93,6 @@
}
}
-.show-icon-labels .edit-post-header-toolbar__left > * + * {
+.show-icon-labels .editor-document-tools__left > * + * {
margin-left: $grid-unit-10;
}
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
index fab84cdd53946c..8b8dda313367a9 100644
--- a/packages/editor/src/private-apis.js
+++ b/packages/editor/src/private-apis.js
@@ -6,6 +6,7 @@ import { ExperimentalEditorProvider } from './components/provider';
import { lock } from './lock-unlock';
import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import DocumentTools from './components/document-tools';
import PostPanelRow from './components/post-panel-row';
import PostViewLink from './components/post-view-link';
import PreviewDropdown from './components/preview-dropdown';
@@ -13,6 +14,7 @@ import PluginPostExcerpt from './components/post-excerpt/plugin';
export const privateApis = {};
lock( privateApis, {
+ DocumentTools,
EditorCanvas,
ExperimentalEditorProvider,
EntitiesSavedStatesExtensible,
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 50359984af1628..c699d13c55a07d 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -1,6 +1,7 @@
@import "./components/autocompleters/style.scss";
@import "./components/document-bar/style.scss";
@import "./components/document-outline/style.scss";
+@import "./components/document-tools/style.scss";
@import "./components/editor-notices/style.scss";
@import "./components/entities-saved-states/style.scss";
@import "./components/error-boundary/style.scss";
diff --git a/test/e2e/specs/editor/plugins/post-type-locking.spec.js b/test/e2e/specs/editor/plugins/post-type-locking.spec.js
index 5c1d6ebf06dac0..cdfce4c08dcc9b 100644
--- a/test/e2e/specs/editor/plugins/post-type-locking.spec.js
+++ b/test/e2e/specs/editor/plugins/post-type-locking.spec.js
@@ -21,14 +21,6 @@ test.describe( 'Post-type locking', () => {
await admin.createNewPost( { postType: 'locked-all-post' } );
} );
- test( 'should disable the inserter', async ( { page } ) => {
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
- ).toBeDisabled();
- } );
-
test( 'should not allow blocks to be removed', async ( {
editor,
page,
@@ -147,31 +139,6 @@ test.describe( 'Post-type locking', () => {
'The content of your post doesn’t match the template assigned to your post type.'
);
} );
-
- test( 'should not allow blocks to be inserted in inner blocks', async ( {
- editor,
- page,
- } ) => {
- await editor.canvas
- .getByRole( 'button', {
- name: 'Two columns; equal split',
- } )
- .click();
-
- await expect(
- page
- .getByRole( 'document', {
- name: 'Block: Column (1 of 2)',
- } )
- .getByRole( 'button', { name: 'Add block' } )
- ).toBeHidden();
-
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
- ).toBeDisabled();
- } );
} );
test.describe( 'template_lock insert', () => {
@@ -179,14 +146,6 @@ test.describe( 'Post-type locking', () => {
await admin.createNewPost( { postType: 'locked-insert-post' } );
} );
- test( 'should disable the inserter', async ( { page } ) => {
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
- ).toBeDisabled();
- } );
-
test( 'should not allow blocks to be removed', async ( {
editor,
page,