@wordpress/edit-post 7.24.1 → 7.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.24.1",
+	"version": "7.26.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.47.0",
-		"@wordpress/api-fetch": "^6.44.0",
-		"@wordpress/block-editor": "^12.15.0",
-		"@wordpress/block-library": "^8.24.1",
-		"@wordpress/blocks": "^12.24.0",
-		"@wordpress/commands": "^0.18.0",
-		"@wordpress/components": "^25.13.0",
-		"@wordpress/compose": "^6.24.0",
-		"@wordpress/core-commands": "^0.16.0",
-		"@wordpress/core-data": "^6.24.0",
-		"@wordpress/data": "^9.17.0",
-		"@wordpress/deprecated": "^3.47.0",
-		"@wordpress/dom": "^3.47.0",
-		"@wordpress/editor": "^13.24.1",
-		"@wordpress/element": "^5.24.0",
-		"@wordpress/hooks": "^3.47.0",
-		"@wordpress/i18n": "^4.47.0",
-		"@wordpress/icons": "^9.38.0",
-		"@wordpress/interface": "^5.24.0",
-		"@wordpress/keyboard-shortcuts": "^4.24.0",
-		"@wordpress/keycodes": "^3.47.0",
-		"@wordpress/media-utils": "^4.38.0",
-		"@wordpress/notices": "^4.15.0",
-		"@wordpress/plugins": "^6.15.0",
-		"@wordpress/preferences": "^3.24.0",
-		"@wordpress/private-apis": "^0.29.0",
-		"@wordpress/url": "^3.48.0",
-		"@wordpress/viewport": "^5.24.0",
-		"@wordpress/warning": "^2.47.0",
-		"@wordpress/widgets": "^3.24.0",
+		"@wordpress/a11y": "^3.49.0",
+		"@wordpress/api-fetch": "^6.46.0",
+		"@wordpress/block-editor": "^12.17.0",
+		"@wordpress/block-library": "^8.26.0",
+		"@wordpress/blocks": "^12.26.0",
+		"@wordpress/commands": "^0.20.0",
+		"@wordpress/components": "^25.15.0",
+		"@wordpress/compose": "^6.26.0",
+		"@wordpress/core-commands": "^0.18.0",
+		"@wordpress/core-data": "^6.26.0",
+		"@wordpress/data": "^9.19.0",
+		"@wordpress/deprecated": "^3.49.0",
+		"@wordpress/dom": "^3.49.0",
+		"@wordpress/editor": "^13.26.0",
+		"@wordpress/element": "^5.26.0",
+		"@wordpress/hooks": "^3.49.0",
+		"@wordpress/i18n": "^4.49.0",
+		"@wordpress/icons": "^9.40.0",
+		"@wordpress/interface": "^5.26.0",
+		"@wordpress/keyboard-shortcuts": "^4.26.0",
+		"@wordpress/keycodes": "^3.49.0",
+		"@wordpress/media-utils": "^4.40.0",
+		"@wordpress/notices": "^4.17.0",
+		"@wordpress/plugins": "^6.17.0",
+		"@wordpress/preferences": "^3.26.0",
+		"@wordpress/private-apis": "^0.31.0",
+		"@wordpress/url": "^3.50.0",
+		"@wordpress/viewport": "^5.26.0",
+		"@wordpress/warning": "^2.49.0",
+		"@wordpress/widgets": "^3.26.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "12b897d7feff1cb00ddbf9016b62c1177d9c0081"
+	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
 }

package/src/components/browser-url/index.js

@@ -43,7 +43,8 @@ export class BrowserURL extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { postId, postStatus, postType, isSavingPost } = this.props;
+		const { postId, postStatus, postType, isSavingPost, hasHistory } =
+			this.props;
 		const { historyId } = this.state;
 
 		// Posts are still dirty while saving so wait for saving to finish
@@ -56,7 +57,8 @@ export class BrowserURL extends Component {
 		if (
 			( postId !== prevProps.postId || postId !== historyId ) &&
 			postStatus !== 'auto-draft' &&
-			postId
+			postId &&
+			! hasHistory
 		) {
 			this.setBrowserURL( postId );
 		}

package/src/components/header/index.js

@@ -7,10 +7,16 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	privateApis as blockEditorPrivateApis,
+	BlockToolbar,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
+import {
+	PostSavedState,
+	PostPreviewButton,
+	store as editorStore,
+	DocumentBar,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -28,17 +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 { default as DevicePreview } from '../device-preview';
-import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
-import DocumentActions from './document-actions';
 import { unlock } from '../../lock-unlock';
 
-const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
+const { DocumentTools, PostViewLink, PreviewDropdown } =
+	unlock( editorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -52,47 +55,47 @@ const slideX = {
 	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
 };
 
-function Header( {
-	setEntitiesSavedStatesCallback,
-	setListViewToggleElement,
-} ) {
+function Header( { setEntitiesSavedStatesCallback } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
 	const {
-		blockSelectionStart,
+		isTextEditor,
+		hasBlockSelection,
 		hasActiveMetaboxes,
 		hasFixedToolbar,
 		isEditingTemplate,
 		isPublishSidebarOpened,
 		showIconLabels,
+		hasHistory,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
+		const { getEditorMode } = select( editPostStore );
 
 		return {
-			blockSelectionStart:
-				select( blockEditorStore ).getBlockSelectionStart(),
+			isTextEditor: getEditorMode() === 'text',
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
+			hasHistory: !! select( editorStore ).getEditorSettings().goBack,
+			isEditingTemplate:
+				select( editorStore ).getRenderingMode() === 'template-only',
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
-			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 		};
 	}, [] );
 
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
-	const hasBlockSelected = !! blockSelectionStart;
-
 	useEffect( () => {
 		// If we have a new block selection, show the block tools
-		if ( blockSelectionStart ) {
+		if ( hasBlockSelection ) {
 			setIsBlockToolsCollapsed( false );
 		}
-	}, [ blockSelectionStart ] );
+	}, [ hasBlockSelection ] );
 
 	return (
 		<div className="edit-post-header">
@@ -109,27 +112,26 @@ function Header( {
 				transition={ { type: 'tween', delay: 0.8 } }
 				className="edit-post-header__toolbar"
 			>
-				<HeaderToolbar
-					hasFixedToolbar={ hasFixedToolbar }
-					setListViewToggleElement={ setListViewToggleElement }
-				/>
+				<DocumentTools disableBlockTools={ isTextEditor } />
 				{ hasFixedToolbar && isLargeViewport && (
 					<>
 						<div
 							className={ classnames(
 								'selected-block-tools-wrapper',
 								{
-									'is-collapsed': isBlockToolsCollapsed,
+									'is-collapsed':
+										isEditingTemplate &&
+										isBlockToolsCollapsed,
 								}
 							) }
 						>
-							<BlockContextualToolbar isFixed />
+							<BlockToolbar hideDragHandle />
 						</div>
 						<Popover.Slot
 							ref={ blockToolbarRef }
 							name="block-toolbar"
 						/>
-						{ isEditingTemplate && hasBlockSelected && (
+						{ isEditingTemplate && hasBlockSelection && (
 							<Button
 								className="edit-post-header__block-tools-toggle"
 								icon={ isBlockToolsCollapsed ? next : previous }
@@ -150,12 +152,14 @@ function Header( {
 				<div
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
+							isEditingTemplate &&
+							hasBlockSelection &&
 							! isBlockToolsCollapsed &&
-							isLargeViewport &&
-							isEditingTemplate,
+							hasFixedToolbar &&
+							isLargeViewport,
 					} ) }
 				>
-					{ isEditingTemplate && <DocumentActions /> }
+					{ ( isEditingTemplate || hasHistory ) && <DocumentBar /> }
 				</div>
 			</motion.div>
 			<motion.div
@@ -169,14 +173,14 @@ function Header( {
 					// 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 }
-						showIconLabels={ showIconLabels }
-					/>
+					<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
 				) }
-				<DevicePreview />
-				<PostPreviewButton forceIsAutosaveable={ hasActiveMetaboxes } />
-				<ViewLink />
+				<PreviewDropdown forceIsAutosaveable={ hasActiveMetaboxes } />
+				<PostPreviewButton
+					className="edit-post-header__post-preview-button"
+					forceIsAutosaveable={ hasActiveMetaboxes }
+				/>
+				<PostViewLink />
 				<PostPublishButtonOrToggle
 					forceIsDirty={ hasActiveMetaboxes }
 					setEntitiesSavedStatesCallback={
@@ -184,14 +188,9 @@ function Header( {
 					}
 				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
-					<>
-						<PinnedItems.Slot scope="core/edit-post" />
-						<MoreMenu showIconLabels={ showIconLabels } />
-					</>
-				) }
-				{ showIconLabels && ! isWideViewport && (
-					<MoreMenu showIconLabels={ showIconLabels } />
+					<PinnedItems.Slot scope="core/edit-post" />
 				) }
+				<MoreMenu showIconLabels={ showIconLabels } />
 			</motion.div>
 		</div>
 	);

package/src/components/header/mode-switcher/index.js

@@ -44,7 +44,8 @@ function ModeSwitcher() {
 				select( editorStore ).getEditorSettings().richEditingEnabled,
 			isCodeEditingEnabled:
 				select( editorStore ).getEditorSettings().codeEditingEnabled,
-			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
+			isEditingTemplate:
+				select( editorStore ).getRenderingMode() === 'template-only',
 			mode: select( editPostStore ).getEditorMode(),
 		} ),
 		[]

package/src/components/header/more-menu/index.js

@@ -26,6 +26,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 			toggleProps={ {
 				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),
+				size: 'compact',
 			} }
 		>
 			{ ( { onClose } ) => (

package/src/components/header/style.scss

@@ -52,12 +52,43 @@
 		}
 	}
 
-	.block-editor-block-contextual-toolbar.is-fixed {
-		border: none;
-	}
-
 	.selected-block-tools-wrapper {
 		overflow-x: hidden;
+		display: flex;
+
+		.block-editor-block-contextual-toolbar {
+			border-bottom: 0;
+		}
+
+		&::after {
+			content: "";
+			width: $border-width;
+			margin-top: $grid-unit + $grid-unit-05;
+			margin-bottom: $grid-unit + $grid-unit-05;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
+		}
+
+		// Modified group borders
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right: none;
+
+			&::after {
+				content: "";
+				width: $border-width;
+				margin-top: $grid-unit + $grid-unit-05;
+				margin-bottom: $grid-unit + $grid-unit-05;
+				background-color: $gray-300;
+				margin-left: $grid-unit;
+			}
+
+			& .components-toolbar-group.components-toolbar-group {
+				&::after {
+					display: none;
+				}
+			}
+		}
 
 		&.is-collapsed {
 			display: none;
@@ -93,34 +124,7 @@
 		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
 	}
 
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
-}
-
-.edit-post-header-preview__grouping-external {
-	display: flex;
-	position: relative;
-	padding-bottom: 0;
-}
-
-.edit-post-header-preview__button-external {
-	padding-left: $grid-unit-10;
-
-	margin-right: auto;
-	width: 100%;
-	display: flex;
-	justify-content: flex-start;
-
-	svg {
-		margin-left: auto;
-	}
-}
-
-.edit-post-post-preview-dropdown .components-popover__content {
-	padding-bottom: 0;
+	gap: $grid-unit-10;
 }
 
 /**
@@ -170,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;
@@ -189,6 +193,22 @@
 	}
 }
 
+.show-icon-labels {
+
+	.edit-post-header__toolbar .block-editor-block-mover {
+		border-left: none;
+
+		&::before {
+			content: "";
+			width: $border-width;
+			margin-top: $grid-unit + $grid-unit-05;
+			margin-bottom: $grid-unit + $grid-unit-05;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
+		}
+	}
+}
+
 .edit-post-header__dropdown {
 	.components-menu-item__button.components-menu-item__button,
 	.components-button.editor-history__undo,
@@ -231,6 +251,12 @@
 	}
 }
 
+.edit-post-header__post-preview-button {
+	@include break-small {
+		display: none;
+	}
+}
+
 .is-distraction-free {
 	.interface-interface-skeleton__header {
 		border-bottom: none;
@@ -245,13 +271,13 @@
 
 
 		// hide some parts
-		& > .edit-post-header__settings > .editor-post-preview {
+		& > .edit-post-header__settings > .edit-post-header__post-preview-button {
 			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__settings > .block-editor-post-preview__dropdown,
+		& > .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;
 		}

package/src/components/header/writing-menu/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
@@ -10,7 +10,7 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -19,25 +19,25 @@ import { store as postEditorStore } from '../../../store';
 
 function WritingMenu() {
 	const registry = useRegistry();
-	const isDistractionFree = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().isDistractionFree,
-		[]
-	);
 
-	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
-		useDispatch( postEditorStore );
+	const { closeGeneralSidebar } = useDispatch( postEditorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editorStore );
 
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
-			setPreference( 'core/edit-post', 'fixedToolbar', true );
+			setPreference( 'core', 'fixedToolbar', true );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();
 		} );
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core', 'distractionFree', false );
+	};
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	if ( ! isLargeViewport ) {
 		return null;
@@ -46,9 +46,9 @@ function WritingMenu() {
 	return (
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
 			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				disabled={ isDistractionFree }
+				scope="core"
 				name="fixedToolbar"
+				onToggle={ turnOffDistractionFree }
 				label={ __( 'Top toolbar' ) }
 				info={ __(
 					'Access all block and document tools in a single place'
@@ -57,7 +57,17 @@ function WritingMenu() {
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
 			<PreferenceToggleMenuItem
-				scope="core/edit-post"
+				scope="core"
+				name="distractionFree"
+				onToggle={ toggleDistractionFree }
+				label={ __( 'Distraction free' ) }
+				info={ __( 'Write with calmness' ) }
+				messageActivated={ __( 'Distraction free mode activated' ) }
+				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
+				shortcut={ displayShortcut.primaryShift( '\\' ) }
+			/>
+			<PreferenceToggleMenuItem
+				scope="core"
 				name="focusMode"
 				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
@@ -68,21 +78,11 @@ function WritingMenu() {
 				scope="core/edit-post"
 				name="fullscreenMode"
 				label={ __( 'Fullscreen mode' ) }
-				info={ __( 'Show and hide admin UI' ) }
+				info={ __( 'Show and hide the admin user interface' ) }
 				messageActivated={ __( 'Fullscreen mode activated' ) }
 				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
 				shortcut={ displayShortcut.secondary( 'f' ) }
 			/>
-			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				name="distractionFree"
-				onToggle={ toggleDistractionFree }
-				label={ __( 'Distraction free' ) }
-				info={ __( 'Write with calmness' ) }
-				messageActivated={ __( 'Distraction free mode activated' ) }
-				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
-				shortcut={ displayShortcut.primaryShift( '\\' ) }
-			/>
 		</MenuGroup>
 	);
 }

package/src/components/keyboard-shortcut-help-modal/test/index.js

@@ -16,21 +16,6 @@ import { KeyboardShortcutHelpModal } from '../index';
 const noop = () => {};
 
 describe( 'KeyboardShortcutHelpModal', () => {
-	it( 'should match snapshot when the modal is active', () => {
-		render(
-			<>
-				<EditorKeyboardShortcutsRegister />
-				<KeyboardShortcutHelpModal isModalActive toggleModal={ noop } />
-			</>
-		);
-
-		expect(
-			screen.getByRole( 'dialog', {
-				name: 'Keyboard shortcuts',
-			} )
-		).toMatchSnapshot();
-	} );
-
 	it( 'should not render the modal when inactive', () => {
 		render(
 			<>

package/src/components/keyboard-shortcuts/index.js

@@ -18,24 +18,20 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
-		useSelect( editPostStore );
+	const { getEditorMode, isEditorSidebarOpened } = useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
 		const { richEditingEnabled, codeEditingEnabled } =
 			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
-
 	const {
 		switchEditorMode,
 		openGeneralSidebar,
 		closeGeneralSidebar,
 		toggleFeature,
-		setIsListViewOpened,
 		toggleDistractionFree,
 	} = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const {
 		getBlockName,
@@ -103,16 +99,6 @@ function KeyboardShortcuts() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/edit-post/toggle-list-view',
-			category: 'global',
-			description: __( 'Open the block list view.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'o',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-post/toggle-sidebar',
 			category: 'global',
@@ -227,14 +213,6 @@ function KeyboardShortcuts() {
 		}
 	} );
 
-	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
-	useShortcut( 'core/edit-post/toggle-list-view', ( event ) => {
-		if ( ! isListViewOpened() ) {
-			event.preventDefault();
-			setIsListViewOpened( true );
-		}
-	} );
-
 	useShortcut( 'core/edit-post/transform-heading-to-paragraph', ( event ) =>
 		handleTextLevelShortcut( event, 0 )
 	);