@wordpress/edit-post 7.24.1 → 7.26.0

package/src/components/layout/index.js

@@ -16,11 +16,13 @@ import {
 	EditorSnackbars,
 	PostSyncStatusModal,
 	store as editorStore,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	useBlockCommands,
 	BlockBreadcrumb,
+	BlockToolbar,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -37,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
  */
@@ -54,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';
@@ -66,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. */
@@ -138,17 +138,19 @@ function Layout() {
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
-	const isLargeViewport = useViewportMatch( 'large' );
-	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+
+	const { openGeneralSidebar, closeGeneralSidebar } =
 		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
+	const { setIsInserterOpened } = useDispatch( editorStore );
 	const {
 		mode,
 		isFullscreenActive,
 		isRichEditingEnabled,
 		sidebarIsOpened,
 		hasActiveMetaboxes,
-		hasFixedToolbar,
 		previousShortcut,
 		nextShortcut,
 		hasBlockSelected,
@@ -157,17 +159,18 @@ function Layout() {
 		showIconLabels,
 		isDistractionFree,
 		showBlockBreadcrumbs,
-		isTemplateMode,
+		showMetaBoxes,
 		documentLabel,
+		hasHistory,
 	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
 
 		return {
-			isTemplateMode: select( editPostStore ).isEditingTemplate(),
-			hasFixedToolbar:
-				select( editPostStore ).isFeatureActive( 'fixedToolbar' ),
+			showMetaBoxes:
+				select( editorStore ).getRenderingMode() === 'post-only',
 			sidebarIsOpened: !! (
 				select( interfaceStore ).getActiveComplementaryArea(
 					editPostStore.name
@@ -175,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(),
@@ -186,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,
 		};
 	}, [] );
 
@@ -218,21 +218,18 @@ function Layout() {
 		if ( sidebarIsOpened && ! isHugeViewport ) {
 			setIsInserterOpened( false );
 		}
-	}, [ sidebarIsOpened, isHugeViewport ] );
+	}, [ isHugeViewport, setIsInserterOpened, sidebarIsOpened ] );
 	useEffect( () => {
 		if ( isInserterOpened && ! isHugeViewport ) {
 			closeGeneralSidebar();
 		}
-	}, [ isInserterOpened, isHugeViewport ] );
+	}, [ closeGeneralSidebar, isInserterOpened, isHugeViewport ] );
 
 	// Local state for save panel.
 	// Note 'truthy' callback implies an open panel.
 	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
 		useState( false );
 
-	const [ listViewToggleElement, setListViewToggleElement ] =
-		useState( null );
-
 	const closeEntitiesSavedStates = useCallback(
 		( arg ) => {
 			if ( typeof entitiesSavedStatesCallback === 'function' ) {
@@ -252,9 +249,8 @@ function Layout() {
 
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
 		'is-sidebar-opened': sidebarIsOpened,
-		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
-		'is-distraction-free': isDistractionFree && isLargeViewport,
+		'is-distraction-free': isDistractionFree && isWideViewport,
 		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
 	} );
 
@@ -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 />
@@ -301,7 +293,7 @@ function Layout() {
 			<EditorKeyboardShortcuts />
 
 			<InterfaceSkeleton
-				isDistractionFree={ isDistractionFree && isLargeViewport }
+				isDistractionFree={ isDistractionFree && isWideViewport }
 				className={ className }
 				labels={ {
 					...interfaceLabels,
@@ -312,7 +304,6 @@ function Layout() {
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
-						setListViewToggleElement={ setListViewToggleElement }
 					/>
 				}
 				editorNotices={ <EditorNotices /> }
@@ -345,10 +336,11 @@ function Layout() {
 						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
 							<TextEditor />
 						) }
+						{ ! isLargeViewport && <BlockToolbar hideDragHandle /> }
 						{ isRichEditingEnabled && mode === 'visual' && (
 							<VisualEditor styles={ styles } />
 						) }
-						{ ! isDistractionFree && ! isTemplateMode && (
+						{ ! isDistractionFree && showMetaBoxes && (
 							<div className="edit-post-layout__metaboxes">
 								<MetaBoxes location="normal" />
 								<MetaBoxes location="advanced" />

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,18 +64,22 @@ 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', 'distractionFree', false );
+	};
+
 	const sections = useMemo(
 		() => [
 			{
@@ -86,124 +90,49 @@ export default function EditPostPreferencesModal() {
 						{ isLargeViewport && (
 							<PreferencesModalSection
 								title={ __( 'Publishing' ) }
-								description={ __(
-									'Change options related to publishing.'
-								) }
 							>
 								<EnablePublishSidebarOption
 									help={ __(
 										'Review settings, such as visibility and tags.'
 									) }
-									label={ __(
-										'Include pre-publish checklist'
-									) }
+									label={ __( 'Enable pre-publish checks' ) }
 								/>
 							</PreferencesModalSection>
 						) }
-
-						<PreferencesModalSection
-							title={ __( 'Appearance' ) }
-							description={ __(
-								'Customize options related to the block editor interface and editing flow.'
-							) }
-						>
-							<EnableFeature
-								featureName="distractionFree"
-								onToggle={ toggleDistractionFree }
-								help={ __(
-									'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
-								) }
-								label={ __( 'Distraction free' ) }
-							/>
-							<EnableFeature
-								featureName="focusMode"
-								help={ __(
-									'Highlights the current block and fades other content.'
-								) }
-								label={ __( 'Spotlight mode' ) }
-							/>
-							<EnableFeature
-								featureName="showIconLabels"
-								label={ __( 'Show button text labels' ) }
-								help={ __(
-									'Show text instead of icons on buttons.'
-								) }
-							/>
+						<PreferencesModalSection title={ __( 'Interface' ) }>
 							<EnableFeature
+								scope="core"
 								featureName="showListViewByDefault"
 								help={ __(
 									'Opens the block list view sidebar by default.'
 								) }
 								label={ __( 'Always open list view' ) }
 							/>
-							<EnableFeature
-								featureName="themeStyles"
-								help={ __(
-									'Make the editor look like your theme.'
-								) }
-								label={ __( 'Use theme styles' ) }
-							/>
 							{ showBlockBreadcrumbsOption && (
 								<EnableFeature
+									scope="core"
 									featureName="showBlockBreadcrumbs"
 									help={ __(
-										'Shows block breadcrumbs at the bottom of the editor.'
+										'Display the block hierarchy trail at the bottom of the editor.'
 									) }
-									label={ __( 'Display block breadcrumbs' ) }
+									label={ __( 'Show block breadcrumbs' ) }
 								/>
 							) }
-						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'blocks',
-				tabLabel: __( 'Blocks' ),
-				content: (
-					<>
-						<PreferencesModalSection
-							title={ __( 'Block interactions' ) }
-							description={ __(
-								'Customize how you interact with blocks in the block library and editing canvas.'
-							) }
-						>
-							<EnableFeature
-								featureName="mostUsedBlocks"
-								help={ __(
-									'Places the most frequent blocks in the block library.'
-								) }
-								label={ __( 'Show most used blocks' ) }
-							/>
 							<EnableFeature
-								featureName="keepCaretInsideBlock"
+								scope="core"
+								featureName="allowRightClickOverrides"
 								help={ __(
-									'Aids screen readers by stopping text caret from leaving blocks.'
+									'Allows contextual list view menus via right-click, overriding browser defaults.'
 								) }
 								label={ __(
-									'Contain text cursor inside block'
+									'Allow right-click contextual menus'
 								) }
 							/>
 						</PreferencesModalSection>
-						<PreferencesModalSection
-							title={ __( 'Visible blocks' ) }
-							description={ __(
-								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
-							) }
-						>
-							<BlockManager />
-						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'panels',
-				tabLabel: __( 'Panels' ),
-				content: (
-					<>
 						<PreferencesModalSection
 							title={ __( 'Document settings' ) }
 							description={ __(
-								'Choose what displays in the panel.'
+								'Select what settings are shown in the document panel.'
 							) }
 						>
 							<EnablePluginDocumentSettingPanelOption.Slot />
@@ -242,12 +171,114 @@ export default function EditPostPreferencesModal() {
 								/>
 							</PageAttributesCheck>
 						</PreferencesModalSection>
-						<MetaBoxesSection
-							title={ __( 'Additional' ) }
-							description={ __(
-								'Add extra areas to the editor.'
+						<MetaBoxesSection title={ __( 'Advanced' ) } />
+					</>
+				),
+			},
+			{
+				name: 'appearance',
+				tabLabel: __( 'Appearance' ),
+				content: (
+					<PreferencesModalSection
+						title={ __( 'Appearance' ) }
+						description={ __(
+							'Customize the editor interface to suit your needs.'
+						) }
+					>
+						<EnableFeature
+							scope="core"
+							featureName="fixedToolbar"
+							onToggle={ turnOffDistractionFree }
+							help={ __(
+								'Access all block and document tools in a single place.'
 							) }
+							label={ __( 'Top toolbar' ) }
 						/>
+						<EnableFeature
+							scope="core"
+							featureName="distractionFree"
+							onToggle={ toggleDistractionFree }
+							help={ __(
+								'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+							) }
+							label={ __( 'Distraction free' ) }
+						/>
+						<EnableFeature
+							scope="core"
+							featureName="focusMode"
+							help={ __(
+								'Highlights the current block and fades other content.'
+							) }
+							label={ __( 'Spotlight mode' ) }
+						/>
+						<EnableFeature
+							featureName="themeStyles"
+							help={ __(
+								'Make the editor look like your theme.'
+							) }
+							label={ __( 'Use theme styles' ) }
+						/>
+					</PreferencesModalSection>
+				),
+			},
+			{
+				name: 'accessibility',
+				tabLabel: __( 'Accessibility' ),
+				content: (
+					<>
+						<PreferencesModalSection
+							title={ __( 'Navigation' ) }
+							description={ __(
+								'Optimize the editing experience for enhanced control.'
+							) }
+						>
+							<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.'
+								) }
+								label={ __(
+									'Contain text cursor inside block'
+								) }
+							/>
+						</PreferencesModalSection>
+						<PreferencesModalSection title={ __( 'Interface' ) }>
+							<EnableFeature
+								scope="core"
+								featureName="showIconLabels"
+								label={ __( 'Show button text labels' ) }
+								help={ __(
+									'Show text instead of icons on buttons across the interface.'
+								) }
+							/>
+						</PreferencesModalSection>
+					</>
+				),
+			},
+			{
+				name: 'blocks',
+				tabLabel: __( 'Blocks' ),
+				content: (
+					<>
+						<PreferencesModalSection title={ __( 'Inserter' ) }>
+							<EnableFeature
+								scope="core"
+								featureName="mostUsedBlocks"
+								help={ __(
+									'Adds a category with the most frequently used blocks in the inserter.'
+								) }
+								label={ __( 'Show most used blocks' ) }
+							/>
+						</PreferencesModalSection>
+						<PreferencesModalSection
+							title={ __( 'Manage block visibility' ) }
+							description={ __(
+								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
+							) }
+						>
+							<BlockManager />
+						</PreferencesModalSection>
 					</>
 				),
 			},

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