@wordpress/edit-post 7.18.0 → 7.19.0

package/build-style/style-rtl.css

@@ -475,7 +475,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: none;
   margin: 0;
 }
-.interface-pinned-items .components-button:nth-last-child(1), .interface-pinned-items .components-button:nth-last-child(2) {
+.interface-pinned-items .components-button[aria-controls="edit-post:document"], .interface-pinned-items .components-button[aria-controls="edit-post:block"], .interface-pinned-items .components-button[aria-controls="edit-site:template"], .interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"], .interface-pinned-items .components-button[aria-controls="edit-site:global-styles"] {
   display: flex;
 }
 .interface-pinned-items .components-button svg {
@@ -1877,6 +1877,99 @@ h2.edit-post-template-summary__title {
   flex-grow: 1;
 }
 
+.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  /* Set left position when auto-fold is not on the body element. */
+  right: 0;
+}
+@media (min-width: 783px) {
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    right: 160px;
+  }
+}
+
+.auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
+}
+@media (min-width: 783px) {
+  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    right: 36px;
+  }
+}
+@media (min-width: 961px) {
+  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    right: 160px;
+  }
+}
+
+/* Sidebar manually collapsed. */
+.folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  right: 0;
+}
+@media (min-width: 783px) {
+  .folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    right: 36px;
+  }
+}
+
+body.is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  right: 0 !important;
+}
+
+.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 31;
+  display: block;
+  width: 100%;
+}
+@media (min-width: 782px) {
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 180px;
+    position: fixed;
+    top: 32px;
+    min-height: initial;
+    border-bottom: none;
+    display: flex;
+    height: 60px;
+    align-items: center;
+    width: calc(100% - 180px);
+  }
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+  }
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 240px;
+    top: 0;
+  }
+  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+  }
+  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% + 40px - 180px);
+    margin-right: 80px;
+  }
+  .is-fullscreen-mode .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 144px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
+  }
+}
+
 .edit-post-welcome-guide,
 .edit-template-welcome-guide {
   width: 312px;
@@ -2168,13 +2261,6 @@ body.admin-color-sunrise {
   }
 }
 
-@supports (scrollbar-gutter: stable) {
-  .interface-interface-skeleton__header .edit-post-header {
-    scrollbar-gutter: stable;
-    overflow: hidden;
-  }
-}
-
 .interface-interface-skeleton__sidebar {
   border-right: none;
 }

package/build-style/style.css

@@ -475,7 +475,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: none;
   margin: 0;
 }
-.interface-pinned-items .components-button:nth-last-child(1), .interface-pinned-items .components-button:nth-last-child(2) {
+.interface-pinned-items .components-button[aria-controls="edit-post:document"], .interface-pinned-items .components-button[aria-controls="edit-post:block"], .interface-pinned-items .components-button[aria-controls="edit-site:template"], .interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"], .interface-pinned-items .components-button[aria-controls="edit-site:global-styles"] {
   display: flex;
 }
 .interface-pinned-items .components-button svg {
@@ -1877,6 +1877,99 @@ h2.edit-post-template-summary__title {
   flex-grow: 1;
 }
 
+.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  /* Set left position when auto-fold is not on the body element. */
+  left: 0;
+}
+@media (min-width: 783px) {
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    left: 160px;
+  }
+}
+
+.auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
+}
+@media (min-width: 783px) {
+  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    left: 36px;
+  }
+}
+@media (min-width: 961px) {
+  .auto-fold .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    left: 160px;
+  }
+}
+
+/* Sidebar manually collapsed. */
+.folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  left: 0;
+}
+@media (min-width: 783px) {
+  .folded .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    left: 36px;
+  }
+}
+
+body.is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  left: 0 !important;
+}
+
+.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 31;
+  display: block;
+  width: 100%;
+}
+@media (min-width: 782px) {
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 180px;
+    position: fixed;
+    top: 32px;
+    min-height: initial;
+    border-bottom: none;
+    display: flex;
+    height: 60px;
+    align-items: center;
+    width: calc(100% - 180px);
+  }
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+  }
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 240px;
+    top: 0;
+  }
+  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+  }
+  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% + 40px - 180px);
+    margin-left: 80px;
+  }
+  .is-fullscreen-mode .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 144px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .show-icon-labels .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
+  }
+}
+
 .edit-post-welcome-guide,
 .edit-template-welcome-guide {
   width: 312px;
@@ -2168,13 +2261,6 @@ body.admin-color-sunrise {
   }
 }
 
-@supports (scrollbar-gutter: stable) {
-  .interface-interface-skeleton__header .edit-post-header {
-    scrollbar-gutter: stable;
-    overflow: hidden;
-  }
-}
-
 .interface-interface-skeleton__sidebar {
   border-left: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.18.0",
+	"version": "7.19.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.41.0",
-		"@wordpress/api-fetch": "^6.38.0",
-		"@wordpress/block-editor": "^12.9.0",
-		"@wordpress/block-library": "^8.18.0",
-		"@wordpress/blocks": "^12.18.0",
-		"@wordpress/commands": "^0.12.0",
-		"@wordpress/components": "^25.7.0",
-		"@wordpress/compose": "^6.18.0",
-		"@wordpress/core-commands": "^0.10.0",
-		"@wordpress/core-data": "^6.18.0",
-		"@wordpress/data": "^9.11.0",
-		"@wordpress/deprecated": "^3.41.0",
-		"@wordpress/dom": "^3.41.0",
-		"@wordpress/editor": "^13.18.0",
-		"@wordpress/element": "^5.18.0",
-		"@wordpress/hooks": "^3.41.0",
-		"@wordpress/i18n": "^4.41.0",
-		"@wordpress/icons": "^9.32.0",
-		"@wordpress/interface": "^5.18.0",
-		"@wordpress/keyboard-shortcuts": "^4.18.0",
-		"@wordpress/keycodes": "^3.41.0",
-		"@wordpress/media-utils": "^4.32.0",
-		"@wordpress/notices": "^4.9.0",
-		"@wordpress/plugins": "^6.9.0",
-		"@wordpress/preferences": "^3.18.0",
-		"@wordpress/private-apis": "^0.23.0",
-		"@wordpress/url": "^3.42.0",
-		"@wordpress/viewport": "^5.18.0",
-		"@wordpress/warning": "^2.41.0",
-		"@wordpress/widgets": "^3.18.0",
+		"@wordpress/a11y": "^3.42.0",
+		"@wordpress/api-fetch": "^6.39.0",
+		"@wordpress/block-editor": "^12.10.0",
+		"@wordpress/block-library": "^8.19.0",
+		"@wordpress/blocks": "^12.19.0",
+		"@wordpress/commands": "^0.13.0",
+		"@wordpress/components": "^25.8.0",
+		"@wordpress/compose": "^6.19.0",
+		"@wordpress/core-commands": "^0.11.0",
+		"@wordpress/core-data": "^6.19.0",
+		"@wordpress/data": "^9.12.0",
+		"@wordpress/deprecated": "^3.42.0",
+		"@wordpress/dom": "^3.42.0",
+		"@wordpress/editor": "^13.19.0",
+		"@wordpress/element": "^5.19.0",
+		"@wordpress/hooks": "^3.42.0",
+		"@wordpress/i18n": "^4.42.0",
+		"@wordpress/icons": "^9.33.0",
+		"@wordpress/interface": "^5.19.0",
+		"@wordpress/keyboard-shortcuts": "^4.19.0",
+		"@wordpress/keycodes": "^3.42.0",
+		"@wordpress/media-utils": "^4.33.0",
+		"@wordpress/notices": "^4.10.0",
+		"@wordpress/plugins": "^6.10.0",
+		"@wordpress/preferences": "^3.19.0",
+		"@wordpress/private-apis": "^0.24.0",
+		"@wordpress/url": "^3.43.0",
+		"@wordpress/viewport": "^5.19.0",
+		"@wordpress/warning": "^2.42.0",
+		"@wordpress/widgets": "^3.19.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
+	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
 }

package/src/components/header/index.js

@@ -22,11 +22,13 @@ import DocumentActions from './document-actions';
 
 const slideY = {
 	hidden: { y: '-50px' },
+	distractionFreeInactive: { y: 0 },
 	hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
 };
 
 const slideX = {
 	hidden: { x: '-100%' },
+	distractionFreeInactive: { x: 0 },
 	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
 };
 

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

@@ -7,7 +7,6 @@ import { render, screen } from '@testing-library/react';
  * WordPress dependencies
  */
 import { EditorKeyboardShortcutsRegister } from '@wordpress/editor';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -19,10 +18,10 @@ const noop = () => {};
 describe( 'KeyboardShortcutHelpModal', () => {
 	it( 'should match snapshot when the modal is active', () => {
 		render(
-			<ShortcutProvider>
+			<>
 				<EditorKeyboardShortcutsRegister />
 				<KeyboardShortcutHelpModal isModalActive toggleModal={ noop } />
-			</ShortcutProvider>
+			</>
 		);
 
 		expect(
@@ -34,13 +33,13 @@ describe( 'KeyboardShortcutHelpModal', () => {
 
 	it( 'should not render the modal when inactive', () => {
 		render(
-			<ShortcutProvider>
+			<>
 				<EditorKeyboardShortcutsRegister />
 				<KeyboardShortcutHelpModal
 					isModalActive={ false }
 					toggleModal={ noop }
 				/>
-			</ShortcutProvider>
+			</>
 		);
 
 		expect(

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

@@ -10,8 +10,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as preferencesStore } from '@wordpress/preferences';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -21,39 +19,24 @@ import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
 	const { getBlockSelectionStart } = useSelect( blockEditorStore );
-	const {
-		getEditorMode,
-		isEditorSidebarOpened,
-		isListViewOpened,
-		isFeatureActive,
-	} = useSelect( editPostStore );
+	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
+		useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
 		const { richEditingEnabled, codeEditingEnabled } =
 			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
 
-	const { createInfoNotice } = useDispatch( noticesStore );
-
 	const {
 		switchEditorMode,
 		openGeneralSidebar,
 		closeGeneralSidebar,
 		toggleFeature,
 		setIsListViewOpened,
-		setIsInserterOpened,
+		toggleDistractionFree,
 	} = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 
-	const { set: setPreference } = useDispatch( preferencesStore );
-
-	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-post', 'fixedToolbar', false );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		closeGeneralSidebar();
-	};
-
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
@@ -224,16 +207,6 @@ function KeyboardShortcuts() {
 
 	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
 		toggleDistractionFree();
-		toggleFeature( 'distractionFree' );
-		createInfoNotice(
-			isFeatureActive( 'distractionFree' )
-				? __( 'Distraction free on.' )
-				: __( 'Distraction free off.' ),
-			{
-				id: 'core/edit-post/distraction-free-mode/notice',
-				type: 'snackbar',
-			}
-		);
 	} );
 
 	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
@@ -252,8 +225,9 @@ function KeyboardShortcuts() {
 	} );
 
 	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
-	useShortcut( 'core/edit-post/toggle-list-view', () => {
+	useShortcut( 'core/edit-post/toggle-list-view', ( event ) => {
 		if ( ! isListViewOpened() ) {
+			event.preventDefault();
 			setIsListViewOpened( true );
 		}
 	} );

package/src/components/layout/index.js

@@ -220,11 +220,17 @@ function Layout() {
 		[ entitiesSavedStatesCallback ]
 	);
 
+	// We need to add the show-icon-labels class to the body element so it is applied to modals.
+	if ( showIconLabels ) {
+		document.body.classList.add( 'show-icon-labels' );
+	} else {
+		document.body.classList.remove( 'show-icon-labels' );
+	}
+
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
 		'is-sidebar-opened': sidebarIsOpened,
 		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
-		'show-icon-labels': showIconLabels,
 		'is-distraction-free': isDistractionFree && isLargeViewport,
 		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
 	} );
@@ -266,7 +272,7 @@ function Layout() {
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
 			<EditorKeyboardShortcuts />
-			<SettingsSidebar />
+
 			<InterfaceSkeleton
 				isDistractionFree={ isDistractionFree && isLargeViewport }
 				className={ className }
@@ -358,6 +364,7 @@ function Layout() {
 			<PostSyncStatusModal />
 			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
+			<SettingsSidebar />
 		</>
 	);
 }

package/src/components/preferences-modal/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -20,25 +20,52 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
 	describe( 'should match snapshot when the modal is active', () => {
+		afterEach( () => {
+			useViewportMatch.mockClear();
+		} );
 		it( 'large viewports', async () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => true );
 			render( <EditPostPreferencesModal /> );
-			await screen.findByRole( 'tab', {
+			const tabPanel = await screen.findByRole( 'tabpanel', {
 				name: 'General',
-				selected: true,
 			} );
+
 			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
-			).toMatchSnapshot();
+				within( tabPanel ).getByLabelText(
+					'Include pre-publish checklist'
+				)
+			).toBeInTheDocument();
 		} );
-		it( 'small viewports', () => {
+		it( 'small viewports', async () => {
 			useSelect.mockImplementation( () => [ true, true, false ] );
 			useViewportMatch.mockImplementation( () => false );
 			render( <EditPostPreferencesModal /> );
+
+			// The tabpanel is not rendered in small viewports.
+			expect(
+				screen.queryByRole( 'tabpanel', {
+					name: 'General',
+				} )
+			).not.toBeInTheDocument();
+
+			const dialog = screen.getByRole( 'dialog', {
+				name: 'Preferences',
+			} );
+
+			// Checkbox toggle controls are not rendered in small viewports.
+			expect(
+				within( dialog ).queryByLabelText(
+					'Include pre-publish checklist'
+				)
+			).not.toBeInTheDocument();
+
+			// Individual preference nav buttons are rendered in small viewports.
 			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
-			).toMatchSnapshot();
+				within( dialog ).getByRole( 'button', {
+					name: 'General',
+				} )
+			).toBeInTheDocument();
 		} );
 	} );
 

package/src/components/start-page-options/index.js

@@ -97,14 +97,13 @@ function StartPageOptionsModal() {
 
 export default function StartPageOptions() {
 	const shouldEnableModal = useSelect( ( select ) => {
-		const { getEditedPostContent, isEditedPostSaveable } =
-			select( editorStore );
+		const { isCleanNewPost } = select( editorStore );
 		const { isEditingTemplate, isFeatureActive } = select( editPostStore );
+
 		return (
-			! isEditedPostSaveable() &&
-			'' === getEditedPostContent() &&
 			! isEditingTemplate() &&
-			! isFeatureActive( 'welcomeGuide' )
+			! isFeatureActive( 'welcomeGuide' ) &&
+			isCleanNewPost()
 		);
 	}, [] );