@wordpress/editor 13.24.1 → 13.26.0

package/src/components/provider/index.js

@@ -9,7 +9,6 @@ import {
 	BlockEditorProvider,
 	BlockContextProvider,
 	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
@@ -23,73 +22,13 @@ import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
-import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
+import NavigationBlockEditingMode from './navigation-block-editing-mode';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
 const noop = () => {};
 
-/**
- * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
- *
- * Set block editing mode to contentOnly when entering Navigation focus mode.
- * this ensures that non-content controls on the block will be hidden and thus
- * the user can focus on editing the Navigation Menu content only.
- *
- * @param {string} navigationBlockClientId ClientId.
- */
-function useForceFocusModeForNavigation( navigationBlockClientId ) {
-	const { setBlockEditingMode, unsetBlockEditingMode } =
-		useDispatch( blockEditorStore );
-
-	useEffect( () => {
-		if ( ! navigationBlockClientId ) {
-			return;
-		}
-
-		setBlockEditingMode( navigationBlockClientId, 'contentOnly' );
-
-		return () => {
-			unsetBlockEditingMode( navigationBlockClientId );
-		};
-	}, [
-		navigationBlockClientId,
-		unsetBlockEditingMode,
-		setBlockEditingMode,
-	] );
-}
-
-/**
- * Helper method to extract the post content block types from a template.
- *
- * @param {Array} blocks Template blocks.
- *
- * @return {Array} Flattened object.
- */
-function extractPageContentBlockTypesFromTemplateBlocks( blocks ) {
-	const result = [];
-	for ( let i = 0; i < blocks.length; i++ ) {
-		// Since the Query Block could contain PAGE_CONTENT_BLOCK_TYPES block types,
-		// we skip it because we only want to render stand-alone page content blocks in the block list.
-		if ( blocks[ i ].name === 'core/query' ) {
-			continue;
-		}
-		if ( PAGE_CONTENT_BLOCK_TYPES.includes( blocks[ i ].name ) ) {
-			result.push( createBlock( blocks[ i ].name ) );
-		}
-		if ( blocks[ i ].innerBlocks.length ) {
-			result.push(
-				...extractPageContentBlockTypesFromTemplateBlocks(
-					blocks[ i ].innerBlocks
-				)
-			);
-		}
-	}
-
-	return result;
-}
-
 /**
  * Depending on the post, template and template mode,
  * returns the appropriate blocks and change handlers for the block editor provider.
@@ -125,36 +64,6 @@ function useBlockEditorProps( post, template, mode ) {
 		}
 	}, [ post.type, post.id ] );
 
-	const maybePostOnlyBlocks = useMemo( () => {
-		if ( mode === 'post-only' ) {
-			const postContentBlocks =
-				extractPageContentBlockTypesFromTemplateBlocks(
-					templateBlocks
-				);
-			return [
-				createBlock(
-					'core/group',
-					{
-						layout: { type: 'constrained' },
-						style: {
-							spacing: {
-								margin: {
-									top: '4em', // Mimics the post editor.
-								},
-							},
-						},
-					},
-					postContentBlocks.length
-						? postContentBlocks
-						: [
-								createBlock( 'core/post-title' ),
-								createBlock( 'core/post-content' ),
-						  ]
-				),
-			];
-		}
-	}, [ templateBlocks, mode ] );
-
 	// It is important that we don't create a new instance of blocks on every change
 	// We should only create a new instance if the blocks them selves change, not a dependency of them.
 	const blocks = useMemo( () => {
@@ -162,33 +71,19 @@ function useBlockEditorProps( post, template, mode ) {
 			return maybeNavigationBlocks;
 		}
 
-		if ( maybePostOnlyBlocks ) {
-			return maybePostOnlyBlocks;
-		}
-
 		if ( rootLevelPost === 'template' ) {
 			return templateBlocks;
 		}
 
 		return postBlocks;
-	}, [
-		maybeNavigationBlocks,
-		maybePostOnlyBlocks,
-		rootLevelPost,
-		templateBlocks,
-		postBlocks,
-	] );
+	}, [ maybeNavigationBlocks, rootLevelPost, templateBlocks, postBlocks ] );
 
 	// Handle fallback to postBlocks outside of the above useMemo, to ensure
 	// that constructed block templates that call `createBlock` are not generated
 	// too frequently. This ensures that clientIds are stable.
 	const disableRootLevelChanges =
 		( !! template && mode === 'template-locked' ) ||
-		post.type === 'wp_navigation' ||
-		mode === 'post-only';
-	const navigationBlockClientId =
-		post.type === 'wp_navigation' && blocks && blocks[ 0 ]?.clientId;
-	useForceFocusModeForNavigation( navigationBlockClientId );
+		post.type === 'wp_navigation';
 	if ( disableRootLevelChanges ) {
 		return [ blocks, noop, noop ];
 	}
@@ -269,11 +164,12 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			updatePostLock,
 			setupEditor,
 			updateEditorSettings,
-			__experimentalTearDownEditor,
-		} = useDispatch( editorStore );
+			setCurrentTemplateId,
+			setEditedPost,
+			setRenderingMode,
+		} = unlock( useDispatch( editorStore ) );
 		const { createWarningNotice } = useDispatch( noticesStore );
 
-		// Initialize and tear down the editor.
 		// Ideally this should be synced on each change and not just something you do once.
 		useLayoutEffect( () => {
 			// Assume that we don't need to initialize in the case of an error recovery.
@@ -299,17 +195,28 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					}
 				);
 			}
-
-			return () => {
-				__experimentalTearDownEditor();
-			};
 		}, [] );
 
+		// Synchronizes the active post with the state
+		useEffect( () => {
+			setEditedPost( post.type, post.id );
+		}, [ post.type, post.id ] );
+
 		// Synchronize the editor settings as they change.
 		useEffect( () => {
 			updateEditorSettings( settings );
 		}, [ settings, updateEditorSettings ] );
 
+		// Synchronizes the active template with the state.
+		useEffect( () => {
+			setCurrentTemplateId( template?.id );
+		}, [ template?.id, setCurrentTemplateId ] );
+
+		// Sets the right rendering mode when loading the editor.
+		useEffect( () => {
+			setRenderingMode( settings.defaultRenderingMode ?? 'post-only' );
+		}, [ settings.defaultRenderingMode, setRenderingMode ] );
+
 		if ( ! isReady ) {
 			return null;
 		}
@@ -332,9 +239,12 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 						>
 							{ children }
 							<PatternsMenuItems />
-							{ [ 'post-only', 'template-locked' ].includes(
-								mode
-							) && <DisableNonPageContentBlocks /> }
+							{ mode === 'template-locked' && (
+								<DisableNonPageContentBlocks />
+							) }
+							{ type === 'wp_navigation' && (
+								<NavigationBlockEditingMode />
+							) }
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { BackHandler } from 'react-native';
 import memize from 'memize';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
@@ -27,6 +28,7 @@ import {
 	parse,
 	serialize,
 	getUnregisteredTypeHandlerName,
+	getBlockType,
 	createBlock,
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -35,6 +37,7 @@ import { applyFilters } from '@wordpress/hooks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components';
 import { NEW_BLOCK_TYPES } from '@wordpress/block-library';
+import { __ } from '@wordpress/i18n';
 
 const postTypeEntities = [
 	{ name: 'post', baseURL: '/wp/v2/posts' },
@@ -77,6 +80,8 @@ class NativeEditorProvider extends Component {
 			this.post
 		);
 
+		this.onHardwareBackPress = this.onHardwareBackPress.bind( this );
+
 		this.getEditorSettings = memize(
 			( settings, capabilities ) => ( {
 				...settings,
@@ -94,6 +99,7 @@ class NativeEditorProvider extends Component {
 	componentDidMount() {
 		const {
 			capabilities,
+			createErrorNotice,
 			locale,
 			hostAppNamespace,
 			updateEditorSettings,
@@ -136,17 +142,26 @@ class NativeEditorProvider extends Component {
 		this.subscriptionParentMediaAppend = subscribeMediaAppend(
 			( payload ) => {
 				const blockName = 'core/' + payload.mediaType;
-				const newBlock = createBlock( blockName, {
-					id: payload.mediaId,
-					[ payload.mediaType === 'image' ? 'url' : 'src' ]:
-						payload.mediaUrl,
-				} );
-
-				const indexAfterSelected = this.props.selectedBlockIndex + 1;
-				const insertionIndex =
-					indexAfterSelected || this.props.blockCount;
-
-				this.props.insertBlock( newBlock, insertionIndex );
+				const blockType = getBlockType( blockName );
+
+				if ( blockType && blockType?.name ) {
+					const newBlock = createBlock( blockType.name, {
+						id: payload.mediaId,
+						[ payload.mediaType === 'image' ? 'url' : 'src' ]:
+							payload.mediaUrl,
+					} );
+
+					const indexAfterSelected =
+						this.props.selectedBlockIndex + 1;
+					const insertionIndex =
+						indexAfterSelected || this.props.blockCount;
+
+					this.props.insertBlock( newBlock, insertionIndex );
+				} else {
+					createErrorNotice(
+						__( 'File type not supported as a media file.' )
+					);
+				}
 			}
 		);
 
@@ -179,6 +194,11 @@ class NativeEditorProvider extends Component {
 			this.setState( { isHelpVisible: true } );
 		} );
 
+		this.hardwareBackPressListener = BackHandler.addEventListener(
+			'hardwareBackPress',
+			this.onHardwareBackPress
+		);
+
 		// Request current block impressions from native app.
 		requestBlockTypeImpressions( ( storedImpressions ) => {
 			const impressions = { ...NEW_BLOCK_TYPES, ...storedImpressions };
@@ -238,6 +258,10 @@ class NativeEditorProvider extends Component {
 		if ( this.subscriptionParentShowEditorHelp ) {
 			this.subscriptionParentShowEditorHelp.remove();
 		}
+
+		if ( this.hardwareBackPressListener ) {
+			this.hardwareBackPressListener.remove();
+		}
 	}
 
 	getThemeColors( { rawStyles, rawFeatures } ) {
@@ -268,6 +292,16 @@ class NativeEditorProvider extends Component {
 		}
 	}
 
+	onHardwareBackPress() {
+		const { clearSelectedBlock, selectedBlockIndex } = this.props;
+
+		if ( selectedBlockIndex !== -1 ) {
+			clearSelectedBlock();
+			return true;
+		}
+		return false;
+	}
+
 	serializeToNativeAction() {
 		const title = this.props.title;
 		let html;
@@ -385,11 +419,16 @@ const ComposedNativeProvider = compose( [
 	withDispatch( ( dispatch ) => {
 		const { editPost, resetEditorBlocks, updateEditorSettings } =
 			dispatch( editorStore );
-		const { updateSettings, insertBlock, replaceBlock } =
-			dispatch( blockEditorStore );
+		const {
+			clearSelectedBlock,
+			updateSettings,
+			insertBlock,
+			replaceBlock,
+		} = dispatch( blockEditorStore );
 		const { switchEditorMode } = dispatch( editPostStore );
 		const { addEntities, receiveEntityRecords } = dispatch( coreStore );
-		const { createSuccessNotice } = dispatch( noticesStore );
+		const { createSuccessNotice, createErrorNotice } =
+			dispatch( noticesStore );
 
 		return {
 			updateBlockEditorSettings: updateSettings,
@@ -397,6 +436,8 @@ const ComposedNativeProvider = compose( [
 			addEntities,
 			insertBlock,
 			createSuccessNotice,
+			createErrorNotice,
+			clearSelectedBlock,
 			editTitle( title ) {
 				editPost( { title } );
 			},

package/src/components/provider/navigation-block-editing-mode.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
+ *
+ * Set block editing mode to contentOnly when entering Navigation focus mode.
+ * this ensures that non-content controls on the block will be hidden and thus
+ * the user can focus on editing the Navigation Menu content only.
+ */
+
+export default function NavigationBlockEditingMode() {
+	// In the navigation block editor,
+	// the navigation block is the only root block.
+	const blockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getBlockOrder()?.[ 0 ],
+		[]
+	);
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( ! blockClientId ) {
+			return;
+		}
+
+		setBlockEditingMode( blockClientId, 'contentOnly' );
+
+		return () => {
+			unsetBlockEditingMode( blockClientId );
+		};
+	}, [ blockClientId, unsetBlockEditingMode, setBlockEditingMode ] );
+}

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

@@ -9,6 +9,8 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,7 +27,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalFeatures',
 	'__experimentalGlobalStylesBaseStyles',
 	'__experimentalPreferredStyleVariations',
-	'__experimentalSetIsInserterOpened',
 	'__unstableGalleryWithImageBlocks',
 	'alignWide',
 	'allowedBlockTypes',
@@ -46,20 +47,16 @@ const BLOCK_EDITOR_SETTINGS = [
 	'enableCustomSpacing',
 	'enableCustomUnits',
 	'enableOpenverseMediaCategory',
-	'focusMode',
-	'distractionFree',
 	'fontSizes',
 	'gradients',
 	'generateAnchors',
-	'hasFixedToolbar',
+	'getPostLinkProps',
 	'hasInlineToolbar',
-	'isDistractionFree',
 	'imageDefaultSize',
 	'imageDimensions',
 	'imageEditing',
 	'imageSizes',
 	'isRTL',
-	'keepCaretInsideBlock',
 	'locale',
 	'maxWidth',
 	'onUpdateDefaultBlockStyles',
@@ -88,7 +85,13 @@ const BLOCK_EDITOR_SETTINGS = [
  * @return {Object} Block Editor Settings.
  */
 function useBlockEditorSettings( settings, postType, postId ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
+		allowRightClickOverrides,
+		focusMode,
+		hasFixedToolbar,
+		isDistractionFree,
+		keepCaretInsideBlock,
 		reusableBlocks,
 		hasUploadPermissions,
 		canUseUnfilteredHTML,
@@ -96,6 +99,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		pageOnFront,
 		pageForPosts,
 		userPatternCategories,
+		restBlockPatterns,
+		restBlockPatternCategories,
 	} = useSelect(
 		( select ) => {
 			const isWeb = Platform.OS === 'web';
@@ -105,18 +110,30 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				getEntityRecord,
 				getUserPatternCategories,
 				getEntityRecords,
+				getBlockPatterns,
+				getBlockPatternCategories,
 			} = select( coreStore );
+			const { get } = select( preferencesStore );
 
 			const siteSettings = canUser( 'read', 'settings' )
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
 
 			return {
+				allowRightClickOverrides: get(
+					'core',
+					'allowRightClickOverrides'
+				),
 				canUseUnfilteredHTML: getRawEntityRecord(
 					'postType',
 					postType,
 					postId
 				)?._links?.hasOwnProperty( 'wp:action-unfiltered-html' ),
+				focusMode: get( 'core', 'focusMode' ),
+				hasFixedToolbar:
+					get( 'core', 'fixedToolbar' ) || ! isLargeViewport,
+				isDistractionFree: get( 'core', 'distractionFree' ),
+				keepCaretInsideBlock: get( 'core', 'keepCaretInsideBlock' ),
 				reusableBlocks: isWeb
 					? getEntityRecords( 'postType', 'wp_block', {
 							per_page: -1,
@@ -127,9 +144,11 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				pageOnFront: siteSettings?.page_on_front,
 				pageForPosts: siteSettings?.page_for_posts,
 				userPatternCategories: getUserPatternCategories(),
+				restBlockPatterns: getBlockPatterns(),
+				restBlockPatternCategories: getBlockPatternCategories(),
 			};
 		},
-		[ postType, postId ]
+		[ postType, postId, isLargeViewport ]
 	);
 
 	const settingsBlockPatterns =
@@ -139,15 +158,6 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		settings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
 		settings.__experimentalBlockPatternCategories; // WP 5.9
 
-	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
-		( select ) => ( {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
-		} ),
-		[]
-	);
-
 	const blockPatterns = useMemo(
 		() =>
 			[
@@ -180,7 +190,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		[ settingsBlockPatternCategories, restBlockPatternCategories ]
 	);
 
-	const { undo } = useDispatch( editorStore );
+	const { undo, setIsInserterOpened } = useDispatch( editorStore );
 
 	const { saveEntityRecord } = useDispatch( coreStore );
 
@@ -205,6 +215,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		[ saveEntityRecord, userCanCreatePages ]
 	);
 
+	const forceDisableFocusMode = settings.focusMode === false;
+
 	return useMemo(
 		() => ( {
 			...Object.fromEntries(
@@ -212,6 +224,11 @@ function useBlockEditorSettings( settings, postType, postId ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
+			allowRightClickOverrides,
+			focusMode: focusMode && ! forceDisableFocusMode,
+			hasFixedToolbar,
+			isDistractionFree,
+			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalBlockPatterns: blockPatterns,
@@ -241,8 +258,15 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				postType === 'wp_navigation'
 					? [ [ 'core/navigation', {}, [] ] ]
 					: settings.template,
+			__experimentalSetIsInserterOpened: setIsInserterOpened,
 		} ),
 		[
+			allowRightClickOverrides,
+			focusMode,
+			forceDisableFocusMode,
+			hasFixedToolbar,
+			isDistractionFree,
+			keepCaretInsideBlock,
 			settings,
 			hasUploadPermissions,
 			reusableBlocks,
@@ -256,6 +280,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
 			pageOnFront,
 			pageForPosts,
 			postType,
+			setIsInserterOpened,
 		]
 	);
 }

package/src/hooks/index.js

@@ -3,3 +3,4 @@
  */
 import './custom-sources-backwards-compatibility';
 import './default-autocompleters';
+import './pattern-partial-syncing';

package/src/hooks/pattern-partial-syncing.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useBlockEditingMode } from '@wordpress/block-editor';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+const {
+	PartialSyncingControls,
+	PATTERN_TYPES,
+	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+} = unlock( patternsPrivateApis );
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning a partial syncing controls to supported blocks in the pattern editor.
+ * Currently, only the `core/paragraph` block is supported.
+ *
+ * @param {Component} BlockEdit Original component.
+ *
+ * @return {Component} Wrapped component.
+ */
+const withPartialSyncingControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const blockEditingMode = useBlockEditingMode();
+		const hasCustomFieldsSupport = hasBlockSupport(
+			props.name,
+			'__experimentalConnections',
+			false
+		);
+		const isEditingPattern = useSelect(
+			( select ) =>
+				select( editorStore ).getCurrentPostType() ===
+				PATTERN_TYPES.user,
+			[]
+		);
+
+		const shouldShowPartialSyncingControls =
+			hasCustomFieldsSupport &&
+			props.isSelected &&
+			isEditingPattern &&
+			blockEditingMode === 'default' &&
+			Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
+				props.name
+			);
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				{ shouldShowPartialSyncingControls && (
+					<PartialSyncingControls { ...props } />
+				) }
+			</>
+		);
+	}
+);
+
+if ( window.__experimentalPatternPartialSyncing ) {
+	addFilter(
+		'editor.BlockEdit',
+		'core/editor/with-partial-syncing-controls',
+		withPartialSyncingControls
+	);
+}

package/src/private-apis.js

@@ -1,17 +1,31 @@
 /**
  * Internal dependencies
  */
+import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import DocumentTools from './components/document-tools';
+import InserterSidebar from './components/inserter-sidebar';
+import ListViewSidebar from './components/list-view-sidebar';
 import PostPanelRow from './components/post-panel-row';
+import PostViewLink from './components/post-view-link';
+import PreviewDropdown from './components/preview-dropdown';
+import PluginPostExcerpt from './components/post-excerpt/plugin';
 
 export const privateApis = {};
 lock( privateApis, {
+	DocumentTools,
+	EditorCanvas,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+	InserterSidebar,
+	ListViewSidebar,
 	PostPanelRow,
+	PostViewLink,
+	PreviewDropdown,
+	PluginPostExcerpt,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,