@wordpress/edit-post 7.31.0 → 7.33.0

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

@@ -11,10 +11,7 @@ import { RegistryProvider, createRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import {
-	useBlockSelectionListener,
-	useUpdatePostLinkListener,
-} from '../listener-hooks';
+import { useUpdatePostLinkListener } from '../listener-hooks';
 import { STORE_NAME } from '../../../store/constants';
 
 describe( 'listener hook tests', () => {
@@ -71,10 +68,6 @@ describe( 'listener hook tests', () => {
 	const setMockReturnValue = ( store, functionName, value ) => {
 		mockStores[ store ].selectors[ functionName ].mockReturnValue( value );
 	};
-	const getSpyedFunction = ( store, functionName ) =>
-		mockStores[ store ].selectors[ functionName ];
-	const getSpyedAction = ( store, actionName ) =>
-		mockStores[ store ].actions[ actionName ];
 
 	afterEach( () => {
 		Object.values( mockStores ).forEach( ( storeMocks ) => {
@@ -86,94 +79,6 @@ describe( 'listener hook tests', () => {
 			} );
 		} );
 	} );
-	describe( 'useBlockSelectionListener', () => {
-		const registry = createRegistry( mockStores );
-		const TestComponent = () => {
-			useBlockSelectionListener();
-			return null;
-		};
-		const TestedOutput = () => {
-			return (
-				<RegistryProvider value={ registry }>
-					<TestComponent />
-				</RegistryProvider>
-			);
-		};
-
-		it( 'does nothing when editor sidebar is not open', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', false );
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedFunction( STORE_NAME, 'isEditorSidebarOpened' )
-			).toHaveBeenCalled();
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).not.toHaveBeenCalled();
-		} );
-		it( 'opens block sidebar if block is selected', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				true
-			);
-			setMockReturnValue( 'core/preferences', 'get', false );
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledWith( 'edit-post/block' );
-		} );
-		it( 'opens document sidebar if block is not selected', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				false
-			);
-			setMockReturnValue( 'core/preferences', 'get', false );
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledWith( 'edit-post/document' );
-		} );
-		it( 'does not open block sidebar if block is selected and distraction free mode is on', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				true
-			);
-			setMockReturnValue( 'core/preferences', 'get', true );
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledTimes( 0 );
-		} );
-		it( 'does not open document sidebar if block is not selected and distraction free is on', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				false
-			);
-			setMockReturnValue( 'core/preferences', 'get', true );
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledTimes( 0 );
-		} );
-	} );
 
 	describe( 'useUpdatePostLinkListener', () => {
 		const registry = createRegistry( mockStores );

package/src/components/header/index.js

@@ -22,7 +22,6 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
-import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
@@ -42,7 +41,7 @@ import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-const { DocumentTools, PostViewLink, PreviewDropdown } =
+const { DocumentTools, PostViewLink, PreviewDropdown, PinnedItems } =
 	unlock( editorPrivateApis );
 
 const slideY = {
@@ -81,7 +80,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 				!! select( editorStore ).getEditorSettings()
 					.onNavigateToPreviousEntityRecord,
 			isPublishSidebarOpened:
-				select( editPostStore ).isPublishSidebarOpened(),
+				select( editorStore ).isPublishSidebarOpened(),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 		};
 	}, [] );
@@ -191,7 +190,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					}
 				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
-					<PinnedItems.Slot scope="core/edit-post" />
+					<PinnedItems.Slot scope="core" />
 				) }
 				<MoreMenu showIconLabels={ showIconLabels } />
 			</motion.div>

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

@@ -7,7 +7,7 @@ import { Keyboard } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import '@wordpress/interface';
+import '@wordpress/editor';
 
 /**
  * Internal dependencies

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

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 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';
@@ -16,7 +15,7 @@ import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import WritingMenu from '../writing-menu';
 import { unlock } from '../../../lock-unlock';
 
-const { ModeSwitcher } = unlock( editorPrivateApis );
+const { ModeSwitcher, ActionItem, PinnedItems } = unlock( editorPrivateApis );
 
 const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );
@@ -41,13 +40,13 @@ const MoreMenu = ( { showIconLabels } ) => {
 					{ showIconLabels && ! isLargeViewport && (
 						<PinnedItems.Slot
 							className={ showIconLabels && 'show-icon-labels' }
-							scope="core/edit-post"
+							scope="core"
 						/>
 					) }
 					<WritingMenu />
 					<ModeSwitcher />
 					<ActionItem.Slot
-						name="core/edit-post/plugin-more-menu"
+						name="core/plugin-more-menu"
 						label={ __( 'Plugins' ) }
 						as={ MenuGroup }
 						fillProps={ { onClick: onClose } }

package/src/components/header/post-publish-button-or-toggle.js

@@ -5,11 +5,6 @@ import { useViewportMatch, compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { PostPublishButton, store as editorStore } from '@wordpress/editor';
 
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
 export function PostPublishButtonOrToggle( {
 	forceIsDirty,
 	hasPublishAction,
@@ -21,6 +16,8 @@ export function PostPublishButtonOrToggle( {
 	isScheduled,
 	togglePublishSidebar,
 	setEntitiesSavedStatesCallback,
+	postStatusHasChanged,
+	postStatus,
 } ) {
 	const IS_TOGGLE = 'toggle';
 	const IS_BUTTON = 'button';
@@ -34,6 +31,7 @@ export function PostPublishButtonOrToggle( {
 	 * for a particular role (see https://wordpress.org/documentation/article/post-status/):
 	 *
 	 * - is published
+	 * - post status has changed explicitely to something different than 'future' or 'publish'
 	 * - is scheduled to be published
 	 * - is pending and can't be published (but only for viewports >= medium).
 	 * 	 Originally, we considered showing a button for pending posts that couldn't be published
@@ -51,13 +49,13 @@ export function PostPublishButtonOrToggle( {
 	 */
 	if (
 		isPublished ||
+		( postStatusHasChanged &&
+			! [ 'future', 'publish' ].includes( postStatus ) ) ||
 		( isScheduled && isBeingScheduled ) ||
 		( isPending && ! hasPublishAction && ! isSmallerThanMediumViewport )
 	) {
 		component = IS_BUTTON;
-	} else if ( isSmallerThanMediumViewport ) {
-		component = IS_TOGGLE;
-	} else if ( isPublishSidebarEnabled ) {
+	} else if ( isSmallerThanMediumViewport || isPublishSidebarEnabled ) {
 		component = IS_TOGGLE;
 	} else {
 		component = IS_BUTTON;
@@ -85,12 +83,13 @@ export default compose(
 		isPublished: select( editorStore ).isCurrentPostPublished(),
 		isPublishSidebarEnabled:
 			select( editorStore ).isPublishSidebarEnabled(),
-		isPublishSidebarOpened:
-			select( editPostStore ).isPublishSidebarOpened(),
+		isPublishSidebarOpened: select( editorStore ).isPublishSidebarOpened(),
 		isScheduled: select( editorStore ).isCurrentPostScheduled(),
+		postStatus: select( editorStore ).getEditedPostAttribute( 'status' ),
+		postStatusHasChanged: select( editorStore ).getPostEdits()?.status,
 	} ) ),
 	withDispatch( ( dispatch ) => {
-		const { togglePublishSidebar } = dispatch( editPostStore );
+		const { togglePublishSidebar } = dispatch( editorStore );
 		return {
 			togglePublishSidebar,
 		};

package/src/components/header/preferences-menu-item/index.js

@@ -4,19 +4,25 @@
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
-import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 /**
  * Internal dependencies
  */
-import { PREFERENCES_MODAL_NAME } from '../../../components/preferences-modal';
 
 export default function PreferencesMenuItem() {
 	const { openModal } = useDispatch( interfaceStore );
 	return (
 		<MenuItem
 			onClick={ () => {
-				openModal( PREFERENCES_MODAL_NAME );
+				openModal( 'editor/preferences' );
 			} }
 		>
 			{ __( 'Preferences' ) }

package/src/components/header/style.scss

@@ -25,6 +25,10 @@
 	// Leave enough room for the focus ring to show.
 	padding: 2px 0;
 	align-items: center;
+	// Allow focus ring to be fully visible on furthest right button.
+	@include break-medium() {
+		padding-right: var(--wp-admin-border-width-focus);
+	}
 
 	.table-of-contents {
 		display: none;
@@ -286,8 +290,7 @@
 	}
 
 	.edit-post-header {
-		backdrop-filter: blur(20px) !important;
-		background-color: rgba(255, 255, 255, 0.9);
+		background-color: $white;
 		border-bottom: 1px solid #e0e0e0;
 		position: absolute;
 		width: 100%;
@@ -298,7 +301,6 @@
 			visibility: hidden;
 		}
 
-		& > .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 {

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

@@ -3,12 +3,23 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
 
+jest.mock( '@wordpress/compose/src/hooks/use-viewport-match' );
+
 describe( 'PostPublishButtonOrToggle should render a', () => {
+	afterEach( () => {
+		useViewportMatch.mockRestore();
+	} );
+
 	it( 'button when the post is published (1)', () => {
 		render( <PostPublishButtonOrToggle isPublished /> );
 		expect(
@@ -33,7 +44,8 @@ describe( 'PostPublishButtonOrToggle should render a', () => {
 		).toBeVisible();
 	} );
 
-	it( 'toggle when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is enabled', () => {
+	it( 'toggle when post is not (1), (2), (3), the viewport is <= medium, and the publish sidebar is enabled', () => {
+		useViewportMatch.mockReturnValue( true );
 		render( <PostPublishButtonOrToggle isPublishSidebarEnabled /> );
 		expect(
 			screen.getByRole( 'button', { name: 'Publish' } )

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

@@ -17,17 +17,11 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { isEditorSidebarOpened } = useSelect( editPostStore );
-	const { openGeneralSidebar, closeGeneralSidebar, toggleFeature } =
-		useDispatch( editPostStore );
+	const { toggleFeature } = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const {
-		getBlockName,
-		getSelectedBlockClientId,
-		getBlockAttributes,
-		getBlockSelectionStart,
-	} = useSelect( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
 
 	const handleTextLevelShortcut = ( event, level ) => {
 		event.preventDefault();
@@ -68,16 +62,6 @@ function KeyboardShortcuts() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/edit-post/toggle-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the Settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-post/next-region',
 			category: 'global',
@@ -114,16 +98,6 @@ function KeyboardShortcuts() {
 			],
 		} );
 
-		registerShortcut( {
-			name: 'core/edit-post/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-post/transform-heading-to-paragraph',
 			category: 'block-library',
@@ -151,21 +125,6 @@ function KeyboardShortcuts() {
 		toggleFeature( 'fullscreenMode' );
 	} );
 
-	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
-		// This shortcut has no known clashes, but use preventDefault to prevent any
-		// obscure shortcuts from triggering.
-		event.preventDefault();
-
-		if ( isEditorSidebarOpened() ) {
-			closeGeneralSidebar();
-		} else {
-			const sidebarToOpen = getBlockSelectionStart()
-				? 'edit-post/block'
-				: 'edit-post/document';
-			openGeneralSidebar( sidebarToOpen );
-		}
-	} );
-
 	useShortcut( 'core/edit-post/transform-heading-to-paragraph', ( event ) =>
 		handleTextLevelShortcut( event, 0 )
 	);

package/src/components/layout/actions-panel.js

@@ -4,17 +4,18 @@
 import {
 	EntitiesSavedStates,
 	PostPublishPanel,
+	PluginPrePublishPanel,
+	PluginPostPublishPanel,
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button, createSlotFill } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
-import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
 import { store as editPostStore } from '../../store';
 
 const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
@@ -27,7 +28,7 @@ export default function ActionsPanel( {
 	isEntitiesSavedStatesOpen,
 } ) {
 	const { closePublishSidebar, togglePublishSidebar } =
-		useDispatch( editPostStore );
+		useDispatch( editorStore );
 	const {
 		publishSidebarOpened,
 		hasActiveMetaboxes,
@@ -35,7 +36,7 @@ export default function ActionsPanel( {
 	} = useSelect(
 		( select ) => ( {
 			publishSidebarOpened:
-				select( editPostStore ).isPublishSidebarOpened(),
+				select( editorStore ).isPublishSidebarOpened(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			hasNonPostEntityChanges:
 				select( editorStore ).hasNonPostEntityChanges(),

package/src/components/layout/index.js

@@ -24,16 +24,10 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Button, ScrollLock } from '@wordpress/components';
+import { ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import {
-	ComplementaryArea,
-	FullscreenMode,
-	InterfaceSkeleton,
-	store as interfaceStore,
-} from '@wordpress/interface';
 import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
@@ -47,7 +41,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
-import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import EditPostPreferencesModal from '../preferences-modal';
 import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
@@ -56,7 +49,6 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
-import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useCommonCommands from '../../hooks/commands/use-common-commands';
@@ -64,7 +56,14 @@ import useCommonCommands from '../../hooks/commands/use-common-commands';
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const { InserterSidebar, ListViewSidebar } = unlock( editorPrivateApis );
+const {
+	InserterSidebar,
+	ListViewSidebar,
+	ComplementaryArea,
+	FullscreenMode,
+	InterfaceSkeleton,
+	interfaceStore,
+} = unlock( editorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -139,8 +138,7 @@ function Layout( { initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
+	const { closeGeneralSidebar } = useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setIsInserterOpened } = useDispatch( editorStore );
 	const {
@@ -170,9 +168,8 @@ function Layout( { initialPost } ) {
 			showMetaBoxes:
 				select( editorStore ).getRenderingMode() === 'post-only',
 			sidebarIsOpened: !! (
-				select( interfaceStore ).getActiveComplementaryArea(
-					editPostStore.name
-				) || select( editPostStore ).isPublishSidebarOpened()
+				select( interfaceStore ).getActiveComplementaryArea( 'core' ) ||
+				select( editorStore ).isPublishSidebarOpened()
 			),
 			isFullscreenActive:
 				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
@@ -206,11 +203,6 @@ function Layout( { initialPost } ) {
 
 	const styles = useEditorStyles();
 
-	const openSidebarPanel = () =>
-		openGeneralSidebar(
-			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
-		);
-
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
 		if ( sidebarIsOpened && ! isHugeViewport ) {
@@ -258,7 +250,12 @@ function Layout( { initialPost } ) {
 
 	const secondarySidebar = () => {
 		if ( mode === 'visual' && isInserterOpened ) {
-			return <InserterSidebar />;
+			return (
+				<InserterSidebar
+					closeGeneralSidebar={ closeGeneralSidebar }
+					isRightSidebarOpen={ sidebarIsOpened }
+				/>
+			);
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
 			return <ListViewSidebar />;
@@ -308,25 +305,8 @@ function Layout( { initialPost } ) {
 				editorNotices={ <EditorNotices /> }
 				secondarySidebar={ secondarySidebar() }
 				sidebar={
-					( ( isMobileViewport && sidebarIsOpened ) ||
-						( ! isMobileViewport && ! isDistractionFree ) ) && (
-						<>
-							{ ! isMobileViewport && ! sidebarIsOpened && (
-								<div className="edit-post-layout__toggle-sidebar-panel">
-									<Button
-										variant="secondary"
-										className="edit-post-layout__toggle-sidebar-panel-button"
-										onClick={ openSidebarPanel }
-										aria-expanded={ false }
-									>
-										{ hasBlockSelected
-											? __( 'Open block settings' )
-											: __( 'Open document settings' ) }
-									</Button>
-								</div>
-							) }
-							<ComplementaryArea.Slot scope="core/edit-post" />
-						</>
+					! isDistractionFree && (
+						<ComplementaryArea.Slot scope="core" />
 					)
 				}
 				notices={ <EditorSnackbars /> }
@@ -379,10 +359,8 @@ function Layout( { initialPost } ) {
 				} }
 			/>
 			<EditPostPreferencesModal />
-			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
 			<InitPatternModal />
-			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
 			{ ! isDistractionFree && <SettingsSidebar /> }
 		</>

package/src/components/meta-boxes/meta-boxes-area/style.scss

@@ -88,7 +88,7 @@
 
 	// Until checkboxes WordPress-wide are updated to match the new style,
 	// checkboxes used in metaboxes have to be slightly unstyled here.
-	// @todo: remove this entire rule once checkboxes are the same everywhere.
+	// @todo remove this entire rule once checkboxes are the same everywhere.
 	// See: https://github.com/WordPress/gutenberg/issues/18053
 	.metabox-location-side .postbox input[type="checkbox"] {
 		border: $border-width solid $gray-700;

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

@@ -4,8 +4,6 @@
 
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
@@ -21,19 +19,8 @@ const { PreferencesModalSection, PreferenceToggleControl } = unlock(
 );
 const { PreferencesModal } = unlock( editorPrivateApis );
 
-export const PREFERENCES_MODAL_NAME = 'edit-post/preferences';
-
 export default function EditPostPreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { closeModal } = useDispatch( interfaceStore );
-	const { isModalActive } = useSelect( ( select ) => {
-		const modalActive = select( interfaceStore ).isModalActive(
-			PREFERENCES_MODAL_NAME
-		);
-		return {
-			isModalActive: modalActive,
-		};
-	}, [] );
 
 	const extraSections = {
 		general: (
@@ -61,15 +48,5 @@ export default function EditPostPreferencesModal() {
 		),
 	};
 
-	if ( ! isModalActive ) {
-		return null;
-	}
-
-	return (
-		<PreferencesModal
-			extraSections={ extraSections }
-			isActive={ isModalActive }
-			onClose={ closeModal }
-		/>
-	);
+	return <PreferencesModal extraSections={ extraSections } />;
 }