@wordpress/edit-post 7.28.2 → 7.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.28.2",
+	"version": "7.29.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.2",
-		"@wordpress/block-library": "^8.28.2",
-		"@wordpress/blocks": "^12.28.2",
-		"@wordpress/commands": "^0.22.2",
-		"@wordpress/components": "^26.0.2",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/core-commands": "^0.20.2",
-		"@wordpress/core-data": "^6.28.2",
-		"@wordpress/data": "^9.21.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/editor": "^13.28.2",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.1",
-		"@wordpress/interface": "^5.28.2",
-		"@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.2",
-		"@wordpress/preferences": "^3.28.2",
-		"@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.2",
+		"@wordpress/a11y": "^3.52.0",
+		"@wordpress/api-fetch": "^6.49.0",
+		"@wordpress/block-editor": "^12.20.0",
+		"@wordpress/block-library": "^8.29.0",
+		"@wordpress/blocks": "^12.29.0",
+		"@wordpress/commands": "^0.23.0",
+		"@wordpress/components": "^27.0.0",
+		"@wordpress/compose": "^6.29.0",
+		"@wordpress/core-commands": "^0.21.0",
+		"@wordpress/core-data": "^6.29.0",
+		"@wordpress/data": "^9.22.0",
+		"@wordpress/deprecated": "^3.52.0",
+		"@wordpress/dom": "^3.52.0",
+		"@wordpress/editor": "^13.29.0",
+		"@wordpress/element": "^5.29.0",
+		"@wordpress/hooks": "^3.52.0",
+		"@wordpress/i18n": "^4.52.0",
+		"@wordpress/icons": "^9.43.0",
+		"@wordpress/interface": "^5.29.0",
+		"@wordpress/keyboard-shortcuts": "^4.29.0",
+		"@wordpress/keycodes": "^3.52.0",
+		"@wordpress/media-utils": "^4.43.0",
+		"@wordpress/notices": "^4.20.0",
+		"@wordpress/plugins": "^6.20.0",
+		"@wordpress/preferences": "^3.29.0",
+		"@wordpress/private-apis": "^0.34.0",
+		"@wordpress/url": "^3.53.0",
+		"@wordpress/viewport": "^5.29.0",
+		"@wordpress/warning": "^2.52.0",
+		"@wordpress/widgets": "^3.29.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36"
+	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
 }

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

@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -22,19 +23,25 @@ import {
  * @param {number} postId The current post id.
  */
 export const useBlockSelectionListener = ( postId ) => {
-	const { hasBlockSelection, isEditorSidebarOpened } = useSelect(
-		( select ) => ( {
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
-			isEditorSidebarOpened: select( STORE_NAME ).isEditorSidebarOpened(),
-		} ),
-		[ postId ]
-	);
+	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 ]
+		);
 
 	const { openGeneralSidebar } = useDispatch( STORE_NAME );
 
 	useEffect( () => {
-		if ( ! isEditorSidebarOpened ) {
+		if ( ! isEditorSidebarOpened || isDistractionFree ) {
 			return;
 		}
 		if ( hasBlockSelection ) {

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

@@ -44,6 +44,12 @@ describe( 'listener hook tests', () => {
 				isViewportMatch: jest.fn(),
 			},
 		},
+		'core/preferences': {
+			...storeConfig,
+			selectors: {
+				get: jest.fn(),
+			},
+		},
 		[ STORE_NAME ]: {
 			...storeConfig,
 			actions: {
@@ -112,6 +118,7 @@ describe( 'listener hook tests', () => {
 				'getBlockSelectionStart',
 				true
 			);
+			setMockReturnValue( 'core/preferences', 'get', false );
 
 			render( <TestedOutput /> );
 
@@ -120,12 +127,14 @@ describe( 'listener hook tests', () => {
 			).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 /> );
 
@@ -133,6 +142,37 @@ describe( 'listener hook tests', () => {
 				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', () => {

package/src/components/header/index.js

@@ -69,7 +69,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 		hasHistory,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
-		const { getEditorMode } = select( editPostStore );
+		const { getEditorMode } = select( editorStore );
 
 		return {
 			isTextEditor: getEditorMode() === 'text',

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

@@ -9,14 +9,17 @@ import {
 	PinnedItems,
 } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * 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' );

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">
@@ -385,7 +384,7 @@ function Layout( { initialPost } ) {
 			<PostSyncStatusModal />
 			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
-			<SettingsSidebar />
+			{ ! isDistractionFree && <SettingsSidebar /> }
 		</>
 	);
 }

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

@@ -36,7 +36,6 @@ import styles from './style.scss';
 import headerToolbarStyles from '../header/header-toolbar/style.scss';
 import Header from '../header';
 import VisualEditor from '../visual-editor';
-import { store as editPostStore } from '../../store';
 
 class Layout extends Component {
 	constructor() {
@@ -192,9 +191,8 @@ class Layout extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { __unstableIsEditorReady: isEditorReady } =
+		const { __unstableIsEditorReady: isEditorReady, getEditorMode } =
 			select( editorStore );
-		const { getEditorMode } = select( editPostStore );
 		const { getSettings } = select( blockEditorStore );
 		const globalStyles =
 			getSettings()?.__experimentalGlobalStylesBaseStyles?.color;

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

@@ -21,7 +21,7 @@ export default function TextEditor() {
 	const isRichEditingEnabled = useSelect( ( select ) => {
 		return select( editorStore ).getEditorSettings().richEditingEnabled;
 	}, [] );
-	const { switchEditorMode } = useDispatch( editPostStore );
+	const { switchEditorMode } = useDispatch( editorStore );
 
 	const { isWelcomeGuideVisible } = useSelect( ( select ) => {
 		const { isFeatureActive } = select( editPostStore );

package/src/editor.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	ErrorBoundary,
 	PostLockedModal,
@@ -11,7 +11,6 @@ import {
 import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as preferencesStore } from '@wordpress/preferences';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
@@ -49,46 +48,37 @@ function Editor( {
 		onNavigateToPreviousEntityRecord,
 	} = useNavigateToEntityRecord( initialPostId, initialPostType );
 
-	const { hasInlineToolbar, post, preferredStyleVariations, template } =
-		useSelect(
-			( select ) => {
-				const { isFeatureActive, getEditedPostTemplate } =
-					select( editPostStore );
-				const { getEntityRecord, getPostType, canUser } =
-					select( coreStore );
-				const { getEditorSettings } = select( editorStore );
+	const { post, template } = useSelect(
+		( select ) => {
+			const { getEditedPostTemplate } = select( editPostStore );
+			const { getEntityRecord, getPostType, canUser } =
+				select( coreStore );
+			const { getEditorSettings } = select( editorStore );
 
-				const postObject = getEntityRecord(
-					'postType',
-					currentPost.postType,
-					currentPost.postId
-				);
+			const postObject = getEntityRecord(
+				'postType',
+				currentPost.postType,
+				currentPost.postId
+			);
 
-				const supportsTemplateMode =
-					getEditorSettings().supportsTemplateMode;
-				const isViewable =
-					getPostType( currentPost.postType )?.viewable ?? false;
-				const canEditTemplate = canUser( 'create', 'templates' );
-				return {
-					hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
-					preferredStyleVariations: select( preferencesStore ).get(
-						'core/edit-post',
-						'preferredStyleVariations'
-					),
-					template:
-						supportsTemplateMode &&
-						isViewable &&
-						canEditTemplate &&
-						currentPost.postType !== 'wp_template'
-							? getEditedPostTemplate()
-							: null,
-					post: postObject,
-				};
-			},
-			[ currentPost.postType, currentPost.postId ]
-		);
-
-	const { updatePreferredStyleVariations } = useDispatch( editPostStore );
+			const supportsTemplateMode =
+				getEditorSettings().supportsTemplateMode;
+			const isViewable =
+				getPostType( currentPost.postType )?.viewable ?? false;
+			const canEditTemplate = canUser( 'create', 'templates' );
+			return {
+				template:
+					supportsTemplateMode &&
+					isViewable &&
+					canEditTemplate &&
+					currentPost.postType !== 'wp_template'
+						? getEditedPostTemplate()
+						: null,
+				post: postObject,
+			};
+		},
+		[ currentPost.postType, currentPost.postId ]
+	);
 
 	const editorSettings = useMemo(
 		() => ( {
@@ -96,20 +86,8 @@ function Editor( {
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
 			defaultRenderingMode: 'post-only',
-			__experimentalPreferredStyleVariations: {
-				value: preferredStyleVariations,
-				onChange: updatePreferredStyleVariations,
-			},
-			hasInlineToolbar,
 		} ),
-		[
-			settings,
-			hasInlineToolbar,
-			preferredStyleVariations,
-			updatePreferredStyleVariations,
-			onNavigateToEntityRecord,
-			onNavigateToPreviousEntityRecord,
-		]
+		[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
 	);
 
 	if ( ! post ) {

package/src/editor.native.js

@@ -9,7 +9,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { EditorProvider } from '@wordpress/editor';
+import { EditorProvider, store as editorStore } from '@wordpress/editor';
 import { parse, serialize } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -24,7 +24,6 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import Layout from './components/layout';
-import { store as editPostStore } from './store';
 
 class Editor extends Component {
 	constructor( props ) {
@@ -154,14 +153,14 @@ class Editor extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getEditorMode } = select( editPostStore );
+		const { getEditorMode } = select( editorStore );
 
 		return {
 			mode: getEditorMode(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { switchEditorMode } = dispatch( editPostStore );
+		const { switchEditorMode } = dispatch( editorStore );
 		const { editEntityRecord } = dispatch( coreStore );
 		return {
 			switchEditorMode,