@wordpress/edit-post 7.25.0 → 7.26.0

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

@@ -10,6 +10,7 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -19,13 +20,14 @@ import { store as postEditorStore } from '../../../store';
 function WritingMenu() {
 	const registry = useRegistry();
 
-	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();
@@ -33,7 +35,7 @@ function WritingMenu() {
 	};
 
 	const turnOffDistractionFree = () => {
-		setPreference( 'core/edit-post', 'distractionFree', false );
+		setPreference( 'core', 'distractionFree', false );
 	};
 
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -44,7 +46,7 @@ function WritingMenu() {
 	return (
 		<MenuGroup label={ _x( 'View', 'noun' ) }>
 			<PreferenceToggleMenuItem
-				scope="core/edit-post"
+				scope="core"
 				name="fixedToolbar"
 				onToggle={ turnOffDistractionFree }
 				label={ __( 'Top toolbar' ) }
@@ -55,7 +57,7 @@ function WritingMenu() {
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
 			<PreferenceToggleMenuItem
-				scope="core/edit-post"
+				scope="core"
 				name="distractionFree"
 				onToggle={ toggleDistractionFree }
 				label={ __( 'Distraction free' ) }
@@ -65,7 +67,7 @@ function WritingMenu() {
 				shortcut={ displayShortcut.primaryShift( '\\' ) }
 			/>
 			<PreferenceToggleMenuItem
-				scope="core/edit-post"
+				scope="core"
 				name="focusMode"
 				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
@@ -76,7 +78,7 @@ 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' ) }

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 )
 	);

package/src/components/layout/index.js

@@ -16,6 +16,7 @@ import {
 	EditorSnackbars,
 	PostSyncStatusModal,
 	store as editorStore,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -38,13 +39,10 @@ import {
 import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
-
+import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
-const { useCommands } = unlock( coreCommandsPrivateApis );
-const { useCommandContext } = unlock( commandsPrivateApis );
-
 /**
  * Internal dependencies
  */
@@ -55,8 +53,6 @@ import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import EditPostPreferencesModal from '../preferences-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
-import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
-import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
@@ -67,6 +63,9 @@ import { unlock } from '../../lock-unlock';
 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 interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
@@ -142,9 +141,10 @@ function Layout() {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
+	const { openGeneralSidebar, closeGeneralSidebar } =
 		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
+	const { setIsInserterOpened } = useDispatch( editorStore );
 	const {
 		mode,
 		isFullscreenActive,
@@ -161,7 +161,9 @@ function Layout() {
 		showBlockBreadcrumbs,
 		showMetaBoxes,
 		documentLabel,
+		hasHistory,
 	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
@@ -176,8 +178,8 @@ function Layout() {
 			),
 			isFullscreenActive:
 				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
-			isInserterOpened: select( editPostStore ).isInserterOpened(),
-			isListViewOpened: select( editPostStore ).isListViewOpened(),
+			isInserterOpened: select( editorStore ).isInserterOpened(),
+			isListViewOpened: select( editorStore ).isListViewOpened(),
 			mode: select( editPostStore ).getEditorMode(),
 			isRichEditingEnabled: editorSettings.richEditingEnabled,
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -187,17 +189,14 @@ function Layout() {
 			nextShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			isDistractionFree:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ),
-			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
-				'showBlockBreadcrumbs'
-			),
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 			hasBlockSelected:
-				select( blockEditorStore ).getBlockSelectionStart(),
+				!! select( blockEditorStore ).getBlockSelectionStart(),
+			hasHistory: !! getEditorSettings().goBack,
 		};
 	}, [] );
 
@@ -231,9 +230,6 @@ function Layout() {
 	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
 		useState( false );
 
-	const [ listViewToggleElement, setListViewToggleElement ] =
-		useState( null );
-
 	const closeEntitiesSavedStates = useCallback(
 		( arg ) => {
 			if ( typeof entitiesSavedStatesCallback === 'function' ) {
@@ -267,11 +263,7 @@ function Layout() {
 			return <InserterSidebar />;
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
-			return (
-				<ListViewSidebar
-					listViewToggleElement={ listViewToggleElement }
-				/>
-			);
+			return <ListViewSidebar />;
 		}
 
 		return null;
@@ -292,7 +284,7 @@ function Layout() {
 	return (
 		<>
 			<FullscreenMode isActive={ isFullscreenActive } />
-			<BrowserURL />
+			<BrowserURL hasHistory={ hasHistory } />
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />
 			<LocalAutosaveMonitor />
@@ -312,7 +304,6 @@ function Layout() {
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
-						setListViewToggleElement={ setListViewToggleElement }
 					/>
 				}
 				editorNotices={ <EditorNotices /> }

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

@@ -22,7 +22,11 @@ import {
 	Tooltip,
 	__unstableAutocompletionItemsSlot as AutocompletionItemsSlot,
 } from '@wordpress/components';
-import { AutosaveMonitor, store as editorStore } from '@wordpress/editor';
+import {
+	AutosaveMonitor,
+	OfflineStatus,
+	store as editorStore,
+} from '@wordpress/editor';
 import { sendNativeEditorDidLayout } from '@wordpress/react-native-bridge';
 
 /**
@@ -148,6 +152,10 @@ class Layout extends Component {
 					onLayout={ this.onRootViewLayout }
 				>
 					<AutosaveMonitor disableIntervalChecks />
+					{
+						// eslint-disable-next-line no-undef
+						__DEV__ && <OfflineStatus />
+					}
 					<View style={ editorStyles }>
 						{ isHtmlView ? this.renderHTML() : this.renderVisual() }
 						{ ! isHtmlView && Platform.OS === 'android' && (

package/src/components/meta-boxes/meta-box-visibility.js

@@ -3,11 +3,7 @@
  */
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 class MetaBoxVisibility extends Component {
 	componentDidMount() {
@@ -41,7 +37,5 @@ class MetaBoxVisibility extends Component {
 }
 
 export default withSelect( ( select, { id } ) => ( {
-	isVisible: select( editPostStore ).isEditorPanelEnabled(
-		`meta-box-${ id }`
-	),
+	isVisible: select( editorStore ).isEditorPanelEnabled( `meta-box-${ id }` ),
 } ) )( MetaBoxVisibility );

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

@@ -44,14 +44,14 @@ export default function EditPostPreferencesModal() {
 	const [ isModalActive, showBlockBreadcrumbsOption ] = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
-			const { getEditorMode, isFeatureActive } = select( editPostStore );
+			const { getEditorMode } = select( editPostStore );
+			const { get } = select( preferencesStore );
 			const modalActive = select( interfaceStore ).isModalActive(
 				PREFERENCES_MODAL_NAME
 			);
 			const mode = getEditorMode();
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
-			const isDistractionFreeEnabled =
-				isFeatureActive( 'distractionFree' );
+			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
 			return [
 				modalActive,
 				! isDistractionFreeEnabled &&
@@ -64,20 +64,20 @@ export default function EditPostPreferencesModal() {
 		[ isLargeViewport ]
 	);
 
-	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
-		useDispatch( editPostStore );
-
+	const { closeGeneralSidebar } = useDispatch( editPostStore );
+	const { setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-post', 'fixedToolbar', true );
+		setPreference( 'core', 'fixedToolbar', true );
 		setIsInserterOpened( false );
 		setIsListViewOpened( false );
 		closeGeneralSidebar();
 	};
 
 	const turnOffDistractionFree = () => {
-		setPreference( 'core/edit-post', 'distractionFree', false );
+		setPreference( 'core', 'distractionFree', false );
 	};
 
 	const sections = useMemo(
@@ -95,12 +95,13 @@ export default function EditPostPreferencesModal() {
 									help={ __(
 										'Review settings, such as visibility and tags.'
 									) }
-									label={ __( 'Enable pre-publish flow' ) }
+									label={ __( 'Enable pre-publish checks' ) }
 								/>
 							</PreferencesModalSection>
 						) }
 						<PreferencesModalSection title={ __( 'Interface' ) }>
 							<EnableFeature
+								scope="core"
 								featureName="showListViewByDefault"
 								help={ __(
 									'Opens the block list view sidebar by default.'
@@ -109,6 +110,7 @@ export default function EditPostPreferencesModal() {
 							/>
 							{ showBlockBreadcrumbsOption && (
 								<EnableFeature
+									scope="core"
 									featureName="showBlockBreadcrumbs"
 									help={ __(
 										'Display the block hierarchy trail at the bottom of the editor.'
@@ -116,6 +118,16 @@ export default function EditPostPreferencesModal() {
 									label={ __( 'Show block breadcrumbs' ) }
 								/>
 							) }
+							<EnableFeature
+								scope="core"
+								featureName="allowRightClickOverrides"
+								help={ __(
+									'Allows contextual list view menus via right-click, overriding browser defaults.'
+								) }
+								label={ __(
+									'Allow right-click contextual menus'
+								) }
+							/>
 						</PreferencesModalSection>
 						<PreferencesModalSection
 							title={ __( 'Document settings' ) }
@@ -174,6 +186,7 @@ export default function EditPostPreferencesModal() {
 						) }
 					>
 						<EnableFeature
+							scope="core"
 							featureName="fixedToolbar"
 							onToggle={ turnOffDistractionFree }
 							help={ __(
@@ -182,6 +195,7 @@ export default function EditPostPreferencesModal() {
 							label={ __( 'Top toolbar' ) }
 						/>
 						<EnableFeature
+							scope="core"
 							featureName="distractionFree"
 							onToggle={ toggleDistractionFree }
 							help={ __(
@@ -190,6 +204,7 @@ export default function EditPostPreferencesModal() {
 							label={ __( 'Distraction free' ) }
 						/>
 						<EnableFeature
+							scope="core"
 							featureName="focusMode"
 							help={ __(
 								'Highlights the current block and fades other content.'
@@ -218,6 +233,7 @@ export default function EditPostPreferencesModal() {
 							) }
 						>
 							<EnableFeature
+								scope="core"
 								featureName="keepCaretInsideBlock"
 								help={ __(
 									'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
@@ -229,6 +245,7 @@ export default function EditPostPreferencesModal() {
 						</PreferencesModalSection>
 						<PreferencesModalSection title={ __( 'Interface' ) }>
 							<EnableFeature
+								scope="core"
 								featureName="showIconLabels"
 								label={ __( 'Show button text labels' ) }
 								help={ __(
@@ -246,6 +263,7 @@ export default function EditPostPreferencesModal() {
 					<>
 						<PreferencesModalSection title={ __( 'Inserter' ) }>
 							<EnableFeature
+								scope="core"
 								featureName="mostUsedBlocks"
 								help={ __(
 									'Adds a category with the most frequently used blocks in the inserter.'

package/src/components/preferences-modal/options/enable-feature.js

@@ -1,26 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default compose(
-	withSelect( ( select, { featureName } ) => {
-		const { isFeatureActive } = select( editPostStore );
-		return {
-			isChecked: isFeatureActive( featureName ),
-		};
-	} ),
-	withDispatch( ( dispatch, { featureName, onToggle = () => {} } ) => ( {
-		onChange: () => {
-			onToggle();
-			dispatch( editPostStore ).toggleFeature( featureName );
-		},
-	} ) )
-)( BaseOption );
+export default function EnableFeature( props ) {
+	const {
+		scope = 'core/edit-post',
+		featureName,
+		onToggle = () => {},
+		...remainingProps
+	} = props;
+	const isChecked = useSelect(
+		( select ) => !! select( preferencesStore ).get( scope, featureName ),
+		[ scope, featureName ]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+	const onChange = () => {
+		onToggle();
+		toggle( scope, featureName );
+	};
+	return (
+		<BaseOption
+			onChange={ onChange }
+			isChecked={ isChecked }
+			{ ...remainingProps }
+		/>
+	);
+}

package/src/components/preferences-modal/options/enable-panel.js

@@ -4,16 +4,12 @@
 import { compose, ifCondition } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 export default compose(
 	withSelect( ( select, { panelName } ) => {
 		const { isEditorPanelEnabled, isEditorPanelRemoved } =
-			select( editPostStore );
+			select( editorStore );
 		return {
 			isRemoved: isEditorPanelRemoved( panelName ),
 			isChecked: isEditorPanelEnabled( panelName ),
@@ -22,6 +18,6 @@ export default compose(
 	ifCondition( ( { isRemoved } ) => ! isRemoved ),
 	withDispatch( ( dispatch, { panelName } ) => ( {
 		onChange: () =>
-			dispatch( editPostStore ).toggleEditorPanelEnabled( panelName ),
+			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
 	} ) )
 )( BaseOption );