@wordpress/editor 13.28.5 → 13.30.0

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

@@ -29,7 +29,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalDiscussionSettings',
 	'__experimentalFeatures',
 	'__experimentalGlobalStylesBaseStyles',
-	'__experimentalPreferredStyleVariations',
 	'__unstableGalleryWithImageBlocks',
 	'alignWide',
 	'blockInspectorTabs',
@@ -53,7 +52,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'gradients',
 	'generateAnchors',
 	'onNavigateToEntityRecord',
-	'hasInlineToolbar',
 	'imageDefaultSize',
 	'imageDimensions',
 	'imageEditing',
@@ -61,7 +59,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'isRTL',
 	'locale',
 	'maxWidth',
-	'onUpdateDefaultBlockStyles',
 	'postContentAttributes',
 	'postsPerPage',
 	'readOnly',

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