@wordpress/editor 13.28.2 → 13.29.0

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

@@ -10,10 +10,41 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '../../store';
 
 export default function EditorKeyboardShortcuts() {
-	const { redo, undo, savePost, setIsListViewOpened } =
-		useDispatch( editorStore );
-	const { isEditedPostDirty, isPostSavingLocked, isListViewOpened } =
-		useSelect( editorStore );
+	const isModeToggleDisabled = useSelect( ( select ) => {
+		const { richEditingEnabled, codeEditingEnabled } =
+			select( editorStore ).getEditorSettings();
+		return ! richEditingEnabled || ! codeEditingEnabled;
+	}, [] );
+	const {
+		redo,
+		undo,
+		savePost,
+		setIsListViewOpened,
+		switchEditorMode,
+		toggleDistractionFree,
+	} = useDispatch( editorStore );
+	const {
+		isEditedPostDirty,
+		isPostSavingLocked,
+		isListViewOpened,
+		getEditorMode,
+	} = useSelect( editorStore );
+
+	useShortcut(
+		'core/editor/toggle-mode',
+		() => {
+			switchEditorMode(
+				getEditorMode() === 'visual' ? 'text' : 'visual'
+			);
+		},
+		{
+			isDisabled: isModeToggleDisabled,
+		}
+	);
+
+	useShortcut( 'core/editor/toggle-distraction-free', () => {
+		toggleDistractionFree();
+	} );
 
 	useShortcut( 'core/editor/undo', ( event ) => {
 		undo();

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -12,6 +12,16 @@ function EditorKeyboardShortcutsRegister() {
 	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
+		registerShortcut( {
+			name: 'core/editor/toggle-mode',
+			category: 'global',
+			description: __( 'Switch between visual editor and code editor.' ),
+			keyCombination: {
+				modifier: 'secondary',
+				character: 'm',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/editor/save',
 			category: 'global',
@@ -63,6 +73,16 @@ function EditorKeyboardShortcutsRegister() {
 				character: 'o',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/editor/toggle-distraction-free',
+			category: 'global',
+			description: __( 'Toggle distraction free mode.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: '\\',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return <BlockEditorKeyboardShortcuts.Register />;

package/src/components/mode-switcher/index.js

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Set of available mode options.
+ *
+ * @type {Array}
+ */
+const MODES = [
+	{
+		value: 'visual',
+		label: __( 'Visual editor' ),
+	},
+	{
+		value: 'text',
+		label: __( 'Code editor' ),
+	},
+];
+
+function ModeSwitcher() {
+	const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } =
+		useSelect(
+			( select ) => ( {
+				shortcut: select(
+					keyboardShortcutsStore
+				).getShortcutRepresentation( 'core/editor/toggle-mode' ),
+				isRichEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.richEditingEnabled,
+				isCodeEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.codeEditingEnabled,
+				mode: select( editorStore ).getEditorMode(),
+			} ),
+			[]
+		);
+	const { switchEditorMode } = useDispatch( editorStore );
+
+	let selectedMode = mode;
+	if ( ! isRichEditingEnabled && mode === 'visual' ) {
+		selectedMode = 'text';
+	}
+	if ( ! isCodeEditingEnabled && mode === 'text' ) {
+		selectedMode = 'visual';
+	}
+
+	const choices = MODES.map( ( choice ) => {
+		if ( ! isCodeEditingEnabled && choice.value === 'text' ) {
+			choice = {
+				...choice,
+				disabled: true,
+			};
+		}
+		if ( ! isRichEditingEnabled && choice.value === 'visual' ) {
+			choice = {
+				...choice,
+				disabled: true,
+				info: __(
+					'You can enable the visual editor in your profile settings.'
+				),
+			};
+		}
+		if ( choice.value !== selectedMode && ! choice.disabled ) {
+			return { ...choice, shortcut };
+		}
+		return choice;
+	} );
+
+	return (
+		<MenuGroup label={ __( 'Editor' ) }>
+			<MenuItemsChoice
+				choices={ choices }
+				value={ selectedMode }
+				onSelect={ switchEditorMode }
+			/>
+		</MenuGroup>
+	);
+}
+
+export default ModeSwitcher;

package/src/components/post-title/index.js

@@ -25,7 +25,6 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
 import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
 import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
@@ -33,13 +32,11 @@ import PostTypeSupportCheck from '../post-type-support-check';
 
 function PostTitle( _, forwardedRef ) {
 	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
-		const { getEditedPostAttribute } = select( editorStore );
 		const { getSettings } = select( blockEditorStore );
 		const { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =
 			getSettings();
 
 		return {
-			title: getEditedPostAttribute( 'title' ),
 			placeholder: titlePlaceholder,
 			hasFixedToolbar: _hasFixedToolbar,
 		};

package/src/components/provider/index.js

@@ -23,6 +23,8 @@ import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
 import NavigationBlockEditingMode from './navigation-block-editing-mode';
+import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
+import useCommands from '../commands';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -229,6 +231,11 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			setRenderingMode( settings.defaultRenderingMode ?? 'post-only' );
 		}, [ settings.defaultRenderingMode, setRenderingMode ] );
 
+		useHideBlocksFromInserter( post.type );
+
+		// Register the editor commands.
+		useCommands();
+
 		if ( ! isReady ) {
 			return null;
 		}

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

@@ -59,8 +59,6 @@ const postTypeEntities = [
 import { EditorHelpTopics, store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
-// eslint-disable-next-line no-restricted-imports
-import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
  * Internal dependencies
@@ -392,8 +390,8 @@ const ComposedNativeProvider = compose( [
 			getEditedPostAttribute,
 			getEditedPostContent,
 			getEditorSettings,
+			getEditorMode,
 		} = select( editorStore );
-		const { getEditorMode } = select( editPostStore );
 
 		const { getBlockIndex, getSelectedBlockClientId, getGlobalBlockCount } =
 			select( blockEditorStore );
@@ -417,15 +415,18 @@ const ComposedNativeProvider = compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { editPost, resetEditorBlocks, updateEditorSettings } =
-			dispatch( editorStore );
+		const {
+			editPost,
+			resetEditorBlocks,
+			updateEditorSettings,
+			switchEditorMode,
+		} = dispatch( editorStore );
 		const {
 			clearSelectedBlock,
 			updateSettings,
 			insertBlock,
 			replaceBlock,
 		} = dispatch( blockEditorStore );
-		const { switchEditorMode } = dispatch( editPostStore );
 		const { addEntities, receiveEntityRecords } = dispatch( coreStore );
 		const { createSuccessNotice, createErrorNotice } =
 			dispatch( noticesStore );

package/src/components/provider/use-block-editor-settings.js

@@ -7,12 +7,12 @@ import {
 	store as coreStore,
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
-	fetchBlockPatterns,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useViewportMatch } from '@wordpress/compose';
 import { store as blocksStore } from '@wordpress/blocks';
+import { privateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -20,6 +20,7 @@ import { store as blocksStore } from '@wordpress/blocks';
 import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const EMPTY_BLOCKS_LIST = [];
 
@@ -28,7 +29,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalDiscussionSettings',
 	'__experimentalFeatures',
 	'__experimentalGlobalStylesBaseStyles',
-	'__experimentalPreferredStyleVariations',
 	'__unstableGalleryWithImageBlocks',
 	'alignWide',
 	'blockInspectorTabs',
@@ -52,7 +52,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'gradients',
 	'generateAnchors',
 	'onNavigateToEntityRecord',
-	'hasInlineToolbar',
 	'imageDefaultSize',
 	'imageDimensions',
 	'imageEditing',
@@ -60,7 +59,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'isRTL',
 	'locale',
 	'maxWidth',
-	'onUpdateDefaultBlockStyles',
 	'postContentAttributes',
 	'postsPerPage',
 	'readOnly',
@@ -247,17 +245,10 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalBlockPatterns: blockPatterns,
-			__experimentalFetchBlockPatterns: async () => {
-				return ( await fetchBlockPatterns() ).filter(
-					( { postTypes } ) => {
-						return (
-							! postTypes ||
-							( Array.isArray( postTypes ) &&
-								postTypes.includes( postType ) )
-						);
-					}
-				);
-			},
+			[ unlock( privateApis ).selectBlockPatternsKey ]: ( select ) =>
+				unlock( select( coreStore ) ).getBlockPatternsForPostType(
+					postType
+				),
 			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalUserPatternCategories: userPatternCategories,

package/src/components/provider/use-hide-blocks-from-inserter.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+
+// These post types are "structural" block lists.
+// We should be allowed to use
+// the post content and template parts blocks within them.
+const POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART = [
+	'wp_block',
+	'wp_template',
+	'wp_template_part',
+];
+
+/**
+ * In some specific contexts,
+ * the template part and post content blocks need to be hidden.
+ *
+ * @param {string} postType Post Type
+ */
+export function useHideBlocksFromInserter( postType ) {
+	useEffect( () => {
+		/*
+		 * Prevent adding template part in the editor.
+		 */
+		addFilter(
+			'blockEditor.__unstableCanInsertBlockType',
+			'removeTemplatePartsFromInserter',
+			( canInsert, blockType ) => {
+				if (
+					! POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART.includes(
+						postType
+					) &&
+					blockType.name === 'core/template-part'
+				) {
+					return false;
+				}
+				return canInsert;
+			}
+		);
+
+		/*
+		 * Prevent adding post content block (except in query block) in the editor.
+		 */
+		addFilter(
+			'blockEditor.__unstableCanInsertBlockType',
+			'removePostContentFromInserter',
+			(
+				canInsert,
+				blockType,
+				rootClientId,
+				{ getBlockParentsByBlockName }
+			) => {
+				if (
+					! POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART.includes(
+						postType
+					) &&
+					blockType.name === 'core/post-content'
+				) {
+					return (
+						getBlockParentsByBlockName( rootClientId, 'core/query' )
+							.length > 0
+					);
+				}
+				return canInsert;
+			}
+		);
+
+		return () => {
+			removeFilter(
+				'blockEditor.__unstableCanInsertBlockType',
+				'removeTemplatePartsFromInserter'
+			);
+			removeFilter(
+				'blockEditor.__unstableCanInsertBlockType',
+				'removePostContentFromInserter'
+			);
+		};
+	}, [ postType ] );
+}

package/src/private-apis.js

@@ -10,6 +10,7 @@ import useBlockEditorSettings from './components/provider/use-block-editor-setti
 import DocumentTools from './components/document-tools';
 import InserterSidebar from './components/inserter-sidebar';
 import ListViewSidebar from './components/list-view-sidebar';
+import ModeSwitcher from './components/mode-switcher';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostPanelRow from './components/post-panel-row';
 import PostViewLink from './components/post-view-link';
@@ -25,6 +26,7 @@ lock( privateApis, {
 	EntitiesSavedStatesExtensible,
 	InserterSidebar,
 	ListViewSidebar,
+	ModeSwitcher,
 	PluginPostExcerpt,
 	PostPanelRow,
 	PostViewLink,

package/src/store/actions.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { speak } from '@wordpress/a11y';
 import apiFetch from '@wordpress/api-fetch';
 import deprecated from '@wordpress/deprecated';
 import {
@@ -13,6 +14,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { applyFilters } from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -725,6 +727,99 @@ export function setIsListViewOpened( isOpen ) {
 	};
 }
 
+/**
+ * Action that toggles Distraction free mode.
+ * Distraction free mode expects there are no sidebars, as due to the
+ * z-index values set, you can't close sidebars.
+ */
+export const toggleDistractionFree =
+	() =>
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core', 'distractionFree' );
+		if ( isDistractionFree ) {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'fixedToolbar', false );
+		}
+		if ( ! isDistractionFree ) {
+			registry.batch( () => {
+				registry
+					.dispatch( preferencesStore )
+					.set( 'core', 'fixedToolbar', true );
+				dispatch.setIsInserterOpened( false );
+				dispatch.setIsListViewOpened( false );
+			} );
+		}
+		registry.batch( () => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'distractionFree', ! isDistractionFree );
+			registry
+				.dispatch( noticesStore )
+				.createInfoNotice(
+					isDistractionFree
+						? __( 'Distraction free off.' )
+						: __( 'Distraction free on.' ),
+					{
+						id: 'core/editor/distraction-free-mode/notice',
+						type: 'snackbar',
+						actions: [
+							{
+								label: __( 'Undo' ),
+								onClick: () => {
+									registry.batch( () => {
+										registry
+											.dispatch( preferencesStore )
+											.set(
+												'core',
+												'fixedToolbar',
+												isDistractionFree ? true : false
+											);
+										registry
+											.dispatch( preferencesStore )
+											.toggle(
+												'core',
+												'distractionFree'
+											);
+									} );
+								},
+							},
+						],
+					}
+				);
+		} );
+	};
+
+/**
+ * Triggers an action used to switch editor mode.
+ *
+ * @param {string} mode The editor mode.
+ */
+export const switchEditorMode =
+	( mode ) =>
+	( { dispatch, registry } ) => {
+		registry.dispatch( preferencesStore ).set( 'core', 'editorMode', mode );
+
+		// Unselect blocks when we switch to a non visual mode.
+		if ( mode !== 'visual' ) {
+			registry.dispatch( blockEditorStore ).clearSelectedBlock();
+		}
+
+		if ( mode === 'visual' ) {
+			speak( __( 'Visual editor selected' ), 'assertive' );
+		} else if ( mode === 'text' ) {
+			const isDistractionFree = registry
+				.select( preferencesStore )
+				.get( 'core', 'distractionFree' );
+			if ( isDistractionFree ) {
+				dispatch.toggleDistractionFree();
+			}
+			speak( __( 'Code editor selected' ), 'assertive' );
+		}
+	};
+
 /**
  * Backward compatibility
  */

package/src/store/selectors.js

@@ -1313,6 +1313,18 @@ export function isInserterOpened( state ) {
 	return !! state.blockInserterPanel;
 }
 
+/**
+ * Returns the current editing mode.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Editing mode.
+ */
+export const getEditorMode = createRegistrySelector(
+	( select ) => () =>
+		select( preferencesStore ).get( 'core', 'editorMode' ) ?? 'visual'
+);
+
 /*
  * Backward compatibility
  */

package/src/store/test/actions.js

@@ -488,4 +488,86 @@ describe( 'Editor actions', () => {
 			).toBe( false );
 		} );
 	} );
+
+	describe( 'switchEditorMode', () => {
+		let registry;
+
+		beforeEach( () => {
+			registry = createRegistryWithStores();
+		} );
+
+		it( 'to visual', () => {
+			// Switch to text first, since the default is visual.
+			registry.dispatch( editorStore ).switchEditorMode( 'text' );
+			expect( registry.select( editorStore ).getEditorMode() ).toEqual(
+				'text'
+			);
+			registry.dispatch( editorStore ).switchEditorMode( 'visual' );
+			expect( registry.select( editorStore ).getEditorMode() ).toEqual(
+				'visual'
+			);
+		} );
+
+		it( 'to text', () => {
+			// It defaults to visual.
+			expect( registry.select( editorStore ).getEditorMode() ).toEqual(
+				'visual'
+			);
+			// Add a selected client id and make sure it's there.
+			const clientId = 'clientId_1';
+			registry.dispatch( blockEditorStore ).selectionChange( clientId );
+			expect(
+				registry.select( blockEditorStore ).getSelectedBlockClientId()
+			).toEqual( clientId );
+
+			registry.dispatch( editorStore ).switchEditorMode( 'text' );
+			expect(
+				registry.select( blockEditorStore ).getSelectedBlockClientId()
+			).toBeNull();
+			expect( registry.select( editorStore ).getEditorMode() ).toEqual(
+				'text'
+			);
+		} );
+		it( 'should turn off distraction free mode when switching to code editor', () => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'distractionFree', true );
+			registry.dispatch( editorStore ).switchEditorMode( 'text' );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core', 'distractionFree' )
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'toggleDistractionFree', () => {
+		it( 'should properly update settings to prevent layout corruption when enabling distraction free mode', () => {
+			const registry = createRegistryWithStores();
+
+			// Enable everything that shouldn't be enabled in distraction free mode.
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'fixedToolbar', true );
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+			// Initial state is falsy.
+			registry.dispatch( editorStore ).toggleDistractionFree();
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core', 'fixedToolbar' )
+			).toBe( true );
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core', 'distractionFree' )
+			).toBe( true );
+		} );
+	} );
 } );