@wordpress/edit-post 7.28.5 → 7.30.0

package/build-style/style.css

@@ -113,6 +113,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
+  margin: 0;
 }
 @media (min-width: 782px) {
   .components-panel__header.interface-complementary-area-header__small {
@@ -124,6 +125,9 @@
   background: #fff;
   padding-right: 4px;
 }
+.interface-complementary-area-header .interface-complementary-area-header__title {
+  margin: 0;
+}
 .interface-complementary-area-header .components-button.has-icon {
   display: none;
   margin-left: auto;
@@ -435,38 +439,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
-.interface-more-menu-dropdown {
-  margin-left: -4px;
-}
-.interface-more-menu-dropdown .components-button {
-  width: auto;
-  padding: 0 2px;
-}
-@media (min-width: 600px) {
-  .interface-more-menu-dropdown {
-    margin-left: 0;
-  }
-  .interface-more-menu-dropdown .components-button {
-    padding: 0 4px;
-  }
-}
-
-.interface-more-menu-dropdown__content .components-popover__content {
-  min-width: 300px;
-}
-@media (min-width: 480px) {
-  .interface-more-menu-dropdown__content .components-popover__content {
-    max-width: 480px;
-  }
-}
-.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.components-popover.interface-more-menu-dropdown__content {
-  z-index: 99998;
-}
-
 .interface-pinned-items {
   display: flex;
   gap: 8px;
@@ -776,6 +748,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   z-index: 35;
 }
 
+.components-popover.more-menu-dropdown__content {
+  z-index: 99998;
+}
+
 .edit-post-fullscreen-mode-close.components-button {
   display: none;
 }
@@ -1371,8 +1347,7 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .edit-post-header,
 .edit-post-text-editor,
 .edit-post-sidebar,
-.editor-post-publish-panel,
-.components-modal__frame {
+.editor-post-publish-panel {
   box-sizing: border-box;
 }
 .edit-post-header *,
@@ -1386,10 +1361,7 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 .edit-post-sidebar *::after,
 .editor-post-publish-panel *,
 .editor-post-publish-panel *::before,
-.editor-post-publish-panel *::after,
-.components-modal__frame *,
-.components-modal__frame *::before,
-.components-modal__frame *::after {
+.editor-post-publish-panel *::after {
   box-sizing: inherit;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.28.5",
+	"version": "7.30.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.51.1",
-		"@wordpress/api-fetch": "^6.48.1",
-		"@wordpress/block-editor": "^12.19.5",
-		"@wordpress/block-library": "^8.28.5",
-		"@wordpress/blocks": "^12.28.5",
-		"@wordpress/commands": "^0.22.4",
-		"@wordpress/components": "^26.0.4",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/core-commands": "^0.20.5",
-		"@wordpress/core-data": "^6.28.5",
-		"@wordpress/data": "^9.21.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/editor": "^13.28.5",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.3",
-		"@wordpress/interface": "^5.28.4",
-		"@wordpress/keyboard-shortcuts": "^4.28.1",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/media-utils": "^4.42.1",
-		"@wordpress/notices": "^4.19.1",
-		"@wordpress/plugins": "^6.19.4",
-		"@wordpress/preferences": "^3.28.4",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/url": "^3.52.1",
-		"@wordpress/viewport": "^5.28.1",
-		"@wordpress/warning": "^2.51.1",
-		"@wordpress/widgets": "^3.28.5",
+		"@wordpress/a11y": "^3.53.0",
+		"@wordpress/api-fetch": "^6.50.0",
+		"@wordpress/block-editor": "^12.21.0",
+		"@wordpress/block-library": "^8.30.0",
+		"@wordpress/blocks": "^12.30.0",
+		"@wordpress/commands": "^0.24.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/core-commands": "^0.22.0",
+		"@wordpress/core-data": "^6.30.0",
+		"@wordpress/data": "^9.23.0",
+		"@wordpress/deprecated": "^3.53.0",
+		"@wordpress/dom": "^3.53.0",
+		"@wordpress/editor": "^13.30.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/interface": "^5.30.0",
+		"@wordpress/keyboard-shortcuts": "^4.30.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/media-utils": "^4.44.0",
+		"@wordpress/notices": "^4.21.0",
+		"@wordpress/plugins": "^6.21.0",
+		"@wordpress/preferences": "^3.30.0",
+		"@wordpress/private-apis": "^0.35.0",
+		"@wordpress/url": "^3.54.0",
+		"@wordpress/viewport": "^5.30.0",
+		"@wordpress/warning": "^2.53.0",
+		"@wordpress/widgets": "^3.30.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

package/src/components/editor-initialization/index.js

@@ -10,11 +10,10 @@ import {
  * Data component used for initializing the editor and re-initializes
  * when postId changes or on unmount.
  *
- * @param {number} postId The id of the post.
  * @return {null} This is a data component so does not render any ui.
  */
-export default function EditorInitialization( { postId } ) {
-	useBlockSelectionListener( postId );
-	useUpdatePostLinkListener( postId );
+export default function EditorInitialization() {
+	useBlockSelectionListener();
+	useUpdatePostLinkListener();
 	return null;
 }

package/src/components/editor-initialization/listener-hooks.js

@@ -19,24 +19,19 @@ import {
 /**
  * This listener hook monitors for block selection and triggers the appropriate
  * sidebar state.
- *
- * @param {number} postId The current post id.
  */
-export const useBlockSelectionListener = ( postId ) => {
+export const useBlockSelectionListener = () => {
 	const { hasBlockSelection, isEditorSidebarOpened, isDistractionFree } =
-		useSelect(
-			( select ) => {
-				const { get } = select( preferencesStore );
-				return {
-					hasBlockSelection:
-						!! select( blockEditorStore ).getBlockSelectionStart(),
-					isEditorSidebarOpened:
-						select( STORE_NAME ).isEditorSidebarOpened(),
-					isDistractionFree: get( 'core', 'distractionFree' ),
-				};
-			},
-			[ postId ]
-		);
+		useSelect( ( select ) => {
+			const { get } = select( preferencesStore );
+			return {
+				hasBlockSelection:
+					!! select( blockEditorStore ).getBlockSelectionStart(),
+				isEditorSidebarOpened:
+					select( STORE_NAME ).isEditorSidebarOpened(),
+				isDistractionFree: get( 'core', 'distractionFree' ),
+			};
+		}, [] );
 
 	const { openGeneralSidebar } = useDispatch( STORE_NAME );
 
@@ -49,21 +44,24 @@ export const useBlockSelectionListener = ( postId ) => {
 		} else {
 			openGeneralSidebar( 'edit-post/document' );
 		}
-	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+	}, [
+		hasBlockSelection,
+		isDistractionFree,
+		isEditorSidebarOpened,
+		openGeneralSidebar,
+	] );
 };
 
 /**
  * This listener hook monitors any change in permalink and updates the view
  * post link in the admin bar.
- *
- * @param {number} postId
  */
-export const useUpdatePostLinkListener = ( postId ) => {
+export const useUpdatePostLinkListener = () => {
 	const { newPermalink } = useSelect(
 		( select ) => ( {
 			newPermalink: select( editorStore ).getCurrentPost().link,
 		} ),
-		[ postId ]
+		[]
 	);
 	const nodeToUpdate = useRef();
 
@@ -71,7 +69,7 @@ export const useUpdatePostLinkListener = ( postId ) => {
 		nodeToUpdate.current =
 			document.querySelector( VIEW_AS_PREVIEW_LINK_SELECTOR ) ||
 			document.querySelector( VIEW_AS_LINK_SELECTOR );
-	}, [ postId ] );
+	}, [] );
 
 	useEffect( () => {
 		if ( ! newPermalink || ! nodeToUpdate.current ) {

package/src/components/editor-initialization/test/listener-hooks.js

@@ -88,14 +88,14 @@ describe( 'listener hook tests', () => {
 	} );
 	describe( 'useBlockSelectionListener', () => {
 		const registry = createRegistry( mockStores );
-		const TestComponent = ( { postId } ) => {
-			useBlockSelectionListener( postId );
+		const TestComponent = () => {
+			useBlockSelectionListener();
 			return null;
 		};
 		const TestedOutput = () => {
 			return (
 				<RegistryProvider value={ registry }>
-					<TestComponent postId={ 10 } />
+					<TestComponent />
 				</RegistryProvider>
 			);
 		};
@@ -177,14 +177,14 @@ describe( 'listener hook tests', () => {
 
 	describe( 'useUpdatePostLinkListener', () => {
 		const registry = createRegistry( mockStores );
-		const TestComponent = ( { postId } ) => {
-			useUpdatePostLinkListener( postId );
+		const TestComponent = () => {
+			useUpdatePostLinkListener();
 			return null;
 		};
-		const TestedOutput = ( { postId = 10 } ) => {
+		const TestedOutput = () => {
 			return (
 				<RegistryProvider value={ registry }>
-					<TestComponent postId={ postId } />
+					<TestComponent />
 				</RegistryProvider>
 			);
 		};
@@ -222,7 +222,7 @@ describe( 'listener hook tests', () => {
 			} );
 			const { rerender } = render( <TestedOutput /> );
 
-			rerender( <TestedOutput id={ 20 } /> );
+			rerender( <TestedOutput /> );
 
 			expect( mockSelector ).toHaveBeenCalledTimes( 1 );
 			act( () => {

package/src/components/header/header-toolbar/index.native.js

@@ -181,7 +181,7 @@ function HeaderToolbar( {
 			<ScrollView
 				ref={ scrollViewRef }
 				onContentSizeChange={ scrollToStart }
-				horizontal={ true }
+				horizontal
 				showsHorizontalScrollIndicator={ false }
 				keyboardShouldPersistTaps="always"
 				alwaysBounceHorizontal={ false }

package/src/components/header/index.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import {
 	BlockToolbar,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
@@ -40,6 +41,7 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+const { useShowBlockTools } = unlock( blockEditorPrivateApis );
 const { DocumentTools, PostViewLink, PreviewDropdown } =
 	unlock( editorPrivateApis );
 
@@ -63,13 +65,12 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 		isTextEditor,
 		blockSelectionStart,
 		hasActiveMetaboxes,
-		hasFixedToolbar,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasHistory,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
-		const { getEditorMode } = select( editPostStore );
+		const { getEditorMode } = select( editorStore );
 
 		return {
 			isTextEditor: getEditorMode() === 'text',
@@ -81,11 +82,13 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					.onNavigateToPreviousEntityRecord,
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
-			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 		};
 	}, [] );
 
+	const { showFixedToolbar } = useShowBlockTools();
+	const showTopToolbar = isLargeViewport && showFixedToolbar;
+
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 	const hasBlockSelection = !! blockSelectionStart;
@@ -116,7 +119,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 				className="edit-post-header__toolbar"
 			>
 				<DocumentTools disableBlockTools={ isTextEditor } />
-				{ hasFixedToolbar && isLargeViewport && (
+				{ showTopToolbar && (
 					<>
 						<div
 							className={ classnames(
@@ -134,32 +137,29 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 							ref={ blockToolbarRef }
 							name="block-toolbar"
 						/>
-						{ hasBlockSelection && (
-							<Button
-								className="edit-post-header__block-tools-toggle"
-								icon={ isBlockToolsCollapsed ? next : previous }
-								onClick={ () => {
-									setIsBlockToolsCollapsed(
-										( collapsed ) => ! collapsed
-									);
-								} }
-								label={
-									isBlockToolsCollapsed
-										? __( 'Show block tools' )
-										: __( 'Hide block tools' )
-								}
-							/>
-						) }
+						<Button
+							className="edit-post-header__block-tools-toggle"
+							icon={ isBlockToolsCollapsed ? next : previous }
+							onClick={ () => {
+								setIsBlockToolsCollapsed(
+									( collapsed ) => ! collapsed
+								);
+							} }
+							label={
+								isBlockToolsCollapsed
+									? __( 'Show block tools' )
+									: __( 'Hide block tools' )
+							}
+							size="compact"
+						/>
 					</>
 				) }
 				<div
 					className={ classnames( 'edit-post-header__center', {
 						'is-collapsed':
 							hasHistory &&
-							hasBlockSelection &&
 							! isBlockToolsCollapsed &&
-							hasFixedToolbar &&
-							isLargeViewport,
+							showTopToolbar,
 					} ) }
 				>
 					{ hasHistory && <DocumentBar /> }

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

@@ -2,30 +2,37 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuGroup } from '@wordpress/components';
-import {
-	ActionItem,
-	MoreMenuDropdown,
-	PinnedItems,
-} from '@wordpress/interface';
+import { MenuGroup, DropdownMenu } from '@wordpress/components';
+import { ActionItem, PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import ModeSwitcher from '../mode-switcher';
 import PreferencesMenuItem from '../preferences-menu-item';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import WritingMenu from '../writing-menu';
+import { unlock } from '../../../lock-unlock';
+
+const { ModeSwitcher } = unlock( editorPrivateApis );
 
 const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
-		<MoreMenuDropdown
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			popoverProps={ {
+				placement: 'bottom-end',
+				className: 'more-menu-dropdown__content',
+			} }
 			toggleProps={ {
-				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),
+				tooltipPosition: 'bottom',
+				showTooltip: ! showIconLabels,
 				size: 'compact',
 			} }
 		>
@@ -51,7 +58,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 					</MenuGroup>
 				</>
 			) }
-		</MoreMenuDropdown>
+		</DropdownMenu>
 	);
 };
 

package/src/components/header/style.scss

@@ -322,3 +322,7 @@
 		z-index: 35;
 	}
 }
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

package/src/components/header/test/index.js

@@ -10,19 +10,14 @@ import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
 
 describe( 'PostPublishButtonOrToggle should render a', () => {
 	it( 'button when the post is published (1)', () => {
-		render( <PostPublishButtonOrToggle isPublished={ true } /> );
+		render( <PostPublishButtonOrToggle isPublished /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Submit for Review' } )
 		).toBeVisible();
 	} );
 
 	it( 'button when the post is scheduled (2)', () => {
-		render(
-			<PostPublishButtonOrToggle
-				isScheduled={ true }
-				isBeingScheduled={ true }
-			/>
-		);
+		render( <PostPublishButtonOrToggle isScheduled isBeingScheduled /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Submit for Review' } )
 		).toBeVisible();
@@ -30,10 +25,7 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
 
 	it( 'button when the post is pending and cannot be published but the viewport is >= medium (3)', () => {
 		render(
-			<PostPublishButtonOrToggle
-				isPending={ true }
-				hasPublishAction={ false }
-			/>
+			<PostPublishButtonOrToggle isPending hasPublishAction={ false } />
 		);
 
 		expect(
@@ -42,9 +34,7 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
 	} );
 
 	it( 'toggle when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is enabled', () => {
-		render(
-			<PostPublishButtonOrToggle isPublishSidebarEnabled={ true } />
-		);
+		render( <PostPublishButtonOrToggle isPublishSidebarEnabled /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Publish' } )
 		).toBeVisible();

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

@@ -10,15 +10,11 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
-import { store as postEditorStore } from '../../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 function WritingMenu() {
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { toggleDistractionFree } = useDispatch( postEditorStore );
+	const { toggleDistractionFree } = useDispatch( editorStore );
 
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );

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

@@ -8,7 +8,6 @@ import {
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
-import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
@@ -18,19 +17,9 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { getEditorMode, isEditorSidebarOpened } = useSelect( editPostStore );
-	const isModeToggleDisabled = useSelect( ( select ) => {
-		const { richEditingEnabled, codeEditingEnabled } =
-			select( editorStore ).getEditorSettings();
-		return ! richEditingEnabled || ! codeEditingEnabled;
-	}, [] );
-	const {
-		switchEditorMode,
-		openGeneralSidebar,
-		closeGeneralSidebar,
-		toggleFeature,
-		toggleDistractionFree,
-	} = useDispatch( editPostStore );
+	const { isEditorSidebarOpened } = useSelect( editPostStore );
+	const { openGeneralSidebar, closeGeneralSidebar, toggleFeature } =
+		useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const {
@@ -69,26 +58,6 @@ function KeyboardShortcuts() {
 	};
 
 	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-post/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				character: 'm',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/toggle-distraction-free',
-			category: 'global',
-			description: __( 'Toggle distraction free mode.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: '\\',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-post/toggle-fullscreen',
 			category: 'global',
@@ -178,26 +147,10 @@ function KeyboardShortcuts() {
 		} );
 	}, [] );
 
-	useShortcut(
-		'core/edit-post/toggle-mode',
-		() => {
-			switchEditorMode(
-				getEditorMode() === 'visual' ? 'text' : 'visual'
-			);
-		},
-		{
-			isDisabled: isModeToggleDisabled,
-		}
-	);
-
 	useShortcut( 'core/edit-post/toggle-fullscreen', () => {
 		toggleFeature( 'fullscreenMode' );
 	} );
 
-	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
-		toggleDistractionFree();
-	} );
-
 	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
 		// This shortcut has no known clashes, but use preventDefault to prevent any
 		// obscure shortcuts from triggering.

package/src/components/layout/index.js

@@ -20,7 +20,6 @@ import {
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	useBlockCommands,
 	BlockBreadcrumb,
 	BlockToolbar,
 	privateApis as blockEditorPrivateApis,
@@ -134,7 +133,6 @@ function useEditorStyles() {
 function Layout( { initialPost } ) {
 	useCommands();
 	useCommonCommands();
-	useBlockCommands();
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
@@ -180,7 +178,7 @@ function Layout( { initialPost } ) {
 				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
 			isInserterOpened: select( editorStore ).isInserterOpened(),
 			isListViewOpened: select( editorStore ).isListViewOpened(),
-			mode: select( editPostStore ).getEditorMode(),
+			mode: select( editorStore ).getEditorMode(),
 			isRichEditingEnabled: editorSettings.richEditingEnabled,
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			previousShortcut: select(
@@ -310,7 +308,8 @@ function Layout( { initialPost } ) {
 				editorNotices={ <EditorNotices /> }
 				secondarySidebar={ secondarySidebar() }
 				sidebar={
-					( ! isMobileViewport || sidebarIsOpened ) && (
+					( ( isMobileViewport && sidebarIsOpened ) ||
+						( ! isMobileViewport && ! isDistractionFree ) ) && (
 						<>
 							{ ! isMobileViewport && ! sidebarIsOpened && (
 								<div className="edit-post-layout__toggle-sidebar-panel">