@wordpress/editor 14.14.0 → 14.15.0

package/src/components/provider/disable-non-page-content-blocks.js

@@ -16,9 +16,13 @@ import usePostContentBlocks from './use-post-content-blocks';
  */
 export default function DisableNonPageContentBlocks() {
 	const contentOnlyIds = usePostContentBlocks();
-	const templateParts = useSelect( ( select ) => {
-		const { getBlocksByName } = select( blockEditorStore );
-		return getBlocksByName( 'core/template-part' );
+	const { templateParts, isNavigationMode } = useSelect( ( select ) => {
+		const { getBlocksByName, isNavigationMode: _isNavigationMode } =
+			select( blockEditorStore );
+		return {
+			templateParts: getBlocksByName( 'core/template-part' ),
+			isNavigationMode: _isNavigationMode(),
+		};
 	}, [] );
 	const disabledIds = useSelect(
 		( select ) => {
@@ -32,38 +36,85 @@ export default function DisableNonPageContentBlocks() {
 
 	const registry = useRegistry();
 
+	// The code here is split into multiple `useEffects` calls.
+	// This is done to avoid setting/unsetting block editing modes multiple times unnecessarily.
+	//
+	// For example, the block editing mode of the root block (clientId: '') only
+	// needs to be set once, not when `contentOnlyIds` or `disabledIds` change.
+	//
+	// It's also unlikely that these different types of blocks are being inserted
+	// or removed at the same time, so using different effects reflects that.
+	useEffect( () => {
+		const { setBlockEditingMode, unsetBlockEditingMode } =
+			registry.dispatch( blockEditorStore );
+
+		setBlockEditingMode( '', 'disabled' );
+
+		return () => {
+			unsetBlockEditingMode( '' );
+		};
+	}, [ registry ] );
+
 	useEffect( () => {
 		const { setBlockEditingMode, unsetBlockEditingMode } =
 			registry.dispatch( blockEditorStore );
 
 		registry.batch( () => {
-			setBlockEditingMode( '', 'disabled' );
 			for ( const clientId of contentOnlyIds ) {
 				setBlockEditingMode( clientId, 'contentOnly' );
 			}
-			for ( const clientId of templateParts ) {
-				setBlockEditingMode( clientId, 'contentOnly' );
-			}
-			for ( const clientId of disabledIds ) {
-				setBlockEditingMode( clientId, 'disabled' );
-			}
 		} );
 
 		return () => {
 			registry.batch( () => {
-				unsetBlockEditingMode( '' );
 				for ( const clientId of contentOnlyIds ) {
 					unsetBlockEditingMode( clientId );
 				}
+			} );
+		};
+	}, [ contentOnlyIds, registry ] );
+
+	useEffect( () => {
+		const { setBlockEditingMode, unsetBlockEditingMode } =
+			registry.dispatch( blockEditorStore );
+
+		registry.batch( () => {
+			if ( ! isNavigationMode ) {
 				for ( const clientId of templateParts ) {
-					unsetBlockEditingMode( clientId );
+					setBlockEditingMode( clientId, 'contentOnly' );
 				}
+			}
+		} );
+
+		return () => {
+			registry.batch( () => {
+				if ( ! isNavigationMode ) {
+					for ( const clientId of templateParts ) {
+						unsetBlockEditingMode( clientId );
+					}
+				}
+			} );
+		};
+	}, [ templateParts, isNavigationMode, registry ] );
+
+	useEffect( () => {
+		const { setBlockEditingMode, unsetBlockEditingMode } =
+			registry.dispatch( blockEditorStore );
+
+		registry.batch( () => {
+			for ( const clientId of disabledIds ) {
+				setBlockEditingMode( clientId, 'disabled' );
+			}
+		} );
+
+		return () => {
+			registry.batch( () => {
 				for ( const clientId of disabledIds ) {
 					unsetBlockEditingMode( clientId );
 				}
 			} );
 		};
-	}, [ templateParts, contentOnlyIds, disabledIds, registry ] );
+	}, [ disabledIds, registry ] );
 
 	return null;
 }

package/src/components/provider/index.js

@@ -13,7 +13,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';
@@ -164,6 +163,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
 		__unstableTemplate: template,
 	} ) => {
+		const hasTemplate = !! template;
 		const {
 			editorSettings,
 			selection,
@@ -196,7 +196,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					isReady: __unstableIsEditorReady(),
 					mode: getRenderingMode(),
 					defaultMode:
-						postTypeObject?.default_rendering_mode ?? 'post-only',
+						hasTemplate && postTypeObject?.default_rendering_mode
+							? postTypeObject?.default_rendering_mode
+							: 'post-only',
 					selection: getEditorSelection(),
 					postTypeEntities:
 						post.type === 'wp_template'
@@ -204,17 +206,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							: null,
 				};
 			},
-			[ post.type ]
+			[ post.type, hasTemplate ]
 		);
 
-		const isZoomOut = useSelect( ( select ) => {
-			const { isZoomOut: _isZoomOut } = unlock(
-				select( blockEditorStore )
-			);
-
-			return _isZoomOut();
-		} );
-
 		const shouldRenderTemplate = !! template && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
@@ -309,15 +303,11 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					}
 				);
 			}
-		}, [
-			createWarningNotice,
-			initialEdits,
-			settings,
-			post,
-			recovery,
-			setupEditor,
-			updatePostLock,
-		] );
+
+			// The dependencies of the hook are omitted deliberately
+			// We only want to run setupEditor (with initialEdits) only once per post.
+			// A better solution in the future would be to split this effect into multiple ones.
+		}, [] );
 
 		// Synchronizes the active post with the state
 		useEffect( () => {
@@ -367,13 +357,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ children }
 							{ ! settings.isPreviewMode && (
 								<>
-									{ ! isZoomOut && (
-										<>
-											<PatternsMenuItems />
-											<TemplatePartMenuItems />
-											<ContentOnlySettingsMenu />
-										</>
-									) }
+									<PatternsMenuItems />
+									<TemplatePartMenuItems />
+									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }

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

@@ -23,6 +23,7 @@ import {
  */
 import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
+import { default as mediaSideload } from '../../utils/media-sideload';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
@@ -45,6 +46,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalGlobalStylesBaseStyles',
 	'alignWide',
 	'blockInspectorTabs',
+	'maxUploadFileSize',
 	'allowedMimeTypes',
 	'bodyPlaceholder',
 	'canLockBlocks',
@@ -290,6 +292,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			isDistractionFree,
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
+			mediaSideload: hasUploadPermissions ? mediaSideload : undefined,
 			__experimentalBlockPatterns: blockPatterns,
 			[ selectBlockPatternsKey ]: ( select ) => {
 				const { hasFinishedResolution, getBlockPatternsForPostType } =

package/src/components/start-page-options/index.js

@@ -1,16 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
-import {
-	store as blockEditorStore,
-	__experimentalBlockPatternsList as BlockPatternsList,
-} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { __unstableSerializeAndClean } from '@wordpress/blocks';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -18,124 +10,41 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { TEMPLATE_POST_TYPE } from '../../store/constants';
-
-export function useStartPatterns() {
-	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
-	// and it has no postTypes declared and the current post type is page or if
-	// the current post type is part of the postTypes declared.
-	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
-		( select ) => {
-			const { getPatternsByBlockTypes, getBlocksByName } =
-				select( blockEditorStore );
-			const { getCurrentPostType, getRenderingMode } =
-				select( editorStore );
-			const rootClientId =
-				getRenderingMode() === 'post-only'
-					? ''
-					: getBlocksByName( 'core/post-content' )?.[ 0 ];
-			return {
-				blockPatternsWithPostContentBlockType: getPatternsByBlockTypes(
-					'core/post-content',
-					rootClientId
-				),
-				postType: getCurrentPostType(),
-			};
-		},
-		[]
-	);
-
-	return useMemo( () => {
-		if ( ! blockPatternsWithPostContentBlockType?.length ) {
-			return [];
-		}
-
-		/*
-		 * Filter patterns without postTypes declared if the current postType is page
-		 * or patterns that declare the current postType in its post type array.
-		 */
-		return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
-			return (
-				( postType === 'page' && ! pattern.postTypes ) ||
-				( Array.isArray( pattern.postTypes ) &&
-					pattern.postTypes.includes( postType ) )
-			);
-		} );
-	}, [ postType, blockPatternsWithPostContentBlockType ] );
-}
-
-function PatternSelection( { blockPatterns, onChoosePattern } ) {
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { postType, postId } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
-
-		return {
-			postType: getCurrentPostType(),
-			postId: getCurrentPostId(),
-		};
-	}, [] );
-	return (
-		<BlockPatternsList
-			blockPatterns={ blockPatterns }
-			onClickPattern={ ( _pattern, blocks ) => {
-				editEntityRecord( 'postType', postType, postId, {
-					blocks,
-					content: ( { blocks: blocksForSerialization = [] } ) =>
-						__unstableSerializeAndClean( blocksForSerialization ),
-				} );
-				onChoosePattern();
-			} }
-		/>
-	);
-}
-
-function StartPageOptionsModal( { onClose } ) {
-	const startPatterns = useStartPatterns();
-	const hasStartPattern = startPatterns.length > 0;
-
-	if ( ! hasStartPattern ) {
-		return null;
-	}
-
-	return (
-		<Modal
-			title={ __( 'Choose a pattern' ) }
-			isFullScreen
-			onRequestClose={ onClose }
-		>
-			<div className="editor-start-page-options__modal-content">
-				<PatternSelection
-					blockPatterns={ startPatterns }
-					onChoosePattern={ onClose }
-				/>
-			</div>
-		</Modal>
-	);
-}
 
 export default function StartPageOptions() {
-	const [ isClosed, setIsClosed ] = useState( false );
-	const shouldEnableModal = useSelect( ( select ) => {
-		const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } =
-			select( editorStore );
+	const { postId, shouldEnable } = useSelect( ( select ) => {
+		const {
+			isEditedPostDirty,
+			isEditedPostEmpty,
+			getCurrentPostId,
+			getCurrentPostType,
+		} = select( editorStore );
 		const preferencesModalActive =
 			select( interfaceStore ).isModalActive( 'editor/preferences' );
 		const choosePatternModalEnabled = select( preferencesStore ).get(
 			'core',
 			'enableChoosePatternModal'
 		);
-		return (
-			choosePatternModalEnabled &&
-			! preferencesModalActive &&
-			! isEditedPostDirty() &&
-			isEditedPostEmpty() &&
-			TEMPLATE_POST_TYPE !== getCurrentPostType()
-		);
+		return {
+			postId: getCurrentPostId(),
+			shouldEnable:
+				choosePatternModalEnabled &&
+				! preferencesModalActive &&
+				! isEditedPostDirty() &&
+				isEditedPostEmpty() &&
+				'page' === getCurrentPostType(),
+		};
 	}, [] );
+	const { setIsInserterOpened } = useDispatch( editorStore );
+
+	useEffect( () => {
+		if ( shouldEnable ) {
+			setIsInserterOpened( {
+				tab: 'patterns',
+				category: 'core/starter-content',
+			} );
+		}
+	}, [ postId, shouldEnable, setIsInserterOpened ] );
 
-	if ( ! shouldEnableModal || isClosed ) {
-		return null;
-	}
-
-	return <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;
+	return null;
 }

package/src/components/template-part-menu-items/index.js

@@ -27,25 +27,16 @@ export default function TemplatePartMenuItems() {
 }
 
 function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
-	const { isContentOnly, blocks } = useSelect(
+	const { blocks } = useSelect(
 		( select ) => {
-			const { getBlocksByClientId, getBlockEditingMode } =
-				select( blockEditorStore );
+			const { getBlocksByClientId } = select( blockEditorStore );
 			return {
 				blocks: getBlocksByClientId( clientIds ),
-				isContentOnly:
-					clientIds.length === 1 &&
-					getBlockEditingMode( clientIds[ 0 ] ) === 'contentOnly',
 			};
 		},
 		[ clientIds ]
 	);
 
-	// Do not show the convert button if the block is in content-only mode.
-	if ( isContentOnly ) {
-		return null;
-	}
-
 	// Allow converting a single template part to standard blocks.
 	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
 		return (

package/src/store/actions.js

@@ -23,7 +23,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { TRASH_POST_NOTICE_ID } from './constants';
 import { localAutosaveSet } from './local-autosave';
 import {
 	getNotificationArgumentsForSaveSuccess,
@@ -347,7 +346,6 @@ export const trashPost =
 		const postType = await registry
 			.resolveSelect( coreStore )
 			.getPostType( postTypeSlug );
-		registry.dispatch( noticesStore ).removeNotice( TRASH_POST_NOTICE_ID );
 		const { rest_base: restBase, rest_namespace: restNamespace = 'wp/v2' } =
 			postType;
 		dispatch( { type: 'REQUEST_POST_DELETE_START' } );

package/src/store/constants.ts

@@ -11,8 +11,6 @@ export const EDIT_MERGE_PROPERTIES = new Set( [ 'meta' ] );
  */
 export const STORE_NAME = 'core/editor';
 
-export const SAVE_POST_NOTICE_ID = 'SAVE_POST_NOTICE_ID';
-export const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
 export const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
 export const ONE_MINUTE_IN_MS = 60 * 1000;
 export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];

package/src/store/private-actions.js

@@ -34,7 +34,7 @@ export function setCurrentTemplateId( id ) {
 /**
  * Create a block based template.
  *
- * @param {Object?} template Template to create and assign.
+ * @param {?Object} template Template to create and assign.
  */
 export const createTemplate =
 	( template ) =>

package/src/store/utils/notice-builder.js

@@ -3,11 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { SAVE_POST_NOTICE_ID, TRASH_POST_NOTICE_ID } from '../constants';
-
 /**
  * Builds the arguments for a success notification dispatch.
  *
@@ -68,7 +63,7 @@ export function getNotificationArgumentsForSaveSuccess( data ) {
 	return [
 		noticeMessage,
 		{
-			id: SAVE_POST_NOTICE_ID,
+			id: 'editor-save',
 			type: 'snackbar',
 			actions,
 		},
@@ -113,7 +108,7 @@ export function getNotificationArgumentsForSaveFail( data ) {
 	return [
 		noticeMessage,
 		{
-			id: SAVE_POST_NOTICE_ID,
+			id: 'editor-save',
 		},
 	];
 }
@@ -131,7 +126,7 @@ export function getNotificationArgumentsForTrashFail( data ) {
 			? data.error.message
 			: __( 'Trashing failed' ),
 		{
-			id: TRASH_POST_NOTICE_ID,
+			id: 'editor-trash-fail',
 		},
 	];
 }

package/src/store/utils/test/notice-builder.js

@@ -6,7 +6,6 @@ import {
 	getNotificationArgumentsForSaveFail,
 	getNotificationArgumentsForTrashFail,
 } from '../notice-builder';
-import { SAVE_POST_NOTICE_ID, TRASH_POST_NOTICE_ID } from '../../constants';
 
 describe( 'getNotificationArgumentsForSaveSuccess()', () => {
 	const postType = {
@@ -27,7 +26,7 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => {
 	};
 	const post = { ...previousPost };
 	const defaultExpectedAction = {
-		id: SAVE_POST_NOTICE_ID,
+		id: 'editor-save',
 		actions: [],
 		type: 'snackbar',
 	};
@@ -106,7 +105,7 @@ describe( 'getNotificationArgumentsForSaveFail()', () => {
 	const error = { code: '42', message: 'Something went wrong.' };
 	const post = { status: 'publish' };
 	const edits = { status: 'publish' };
-	const defaultExpectedAction = { id: SAVE_POST_NOTICE_ID };
+	const defaultExpectedAction = { id: 'editor-save' };
 	[
 		[
 			'when error code is `rest_autosave_no_changes`',
@@ -190,7 +189,7 @@ describe( 'getNotificationArgumentsForTrashFail()', () => {
 	].forEach( ( [ description, error, message ] ) => {
 		// eslint-disable-next-line jest/valid-title
 		it( description, () => {
-			const expectedValue = [ message, { id: TRASH_POST_NOTICE_ID } ];
+			const expectedValue = [ message, { id: 'editor-trash-fail' } ];
 			expect( getNotificationArgumentsForTrashFail( { error } ) ).toEqual(
 				expectedValue
 			);

package/src/utils/get-item-title.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Helper function to get the title of a post item.
+ * This is duplicated from the `@wordpress/fields` package.
+ * `packages/fields/src/actions/utils.ts`
+ *
+ * @param {Object} item The post item.
+ * @return {string} The title of the item, or an empty string if the title is not found.
+ */
+export function getItemTitle( item ) {
+	if ( typeof item.title === 'string' ) {
+		return decodeEntities( item.title );
+	}
+	if ( item.title && 'rendered' in item.title ) {
+		return decodeEntities( item.title.rendered );
+	}
+	if ( item.title && 'raw' in item.title ) {
+		return decodeEntities( item.title.raw );
+	}
+	return '';
+}

package/src/utils/media-sideload/index.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/media-utils';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { sideloadMedia: mediaSideload } = unlock( privateApis );
+
+export default mediaSideload;

package/src/utils/media-sideload/index.native.js

@@ -0,0 +1 @@
+export default function mediaSideload() {}

package/src/utils/media-upload/index.js

@@ -27,6 +27,7 @@ const noop = () => {};
  * @param {?number}  $0.maxUploadFileSize Maximum upload size in bytes allowed for the site.
  * @param {Function} $0.onError           Function called when an error happens.
  * @param {Function} $0.onFileChange      Function called each time a file or a temporary representation of the file is available.
+ * @param {Function} $0.onSuccess         Function called after the final representation of the file is available.
  */
 export default function mediaUpload( {
 	additionalData = {},
@@ -35,6 +36,7 @@ export default function mediaUpload( {
 	maxUploadFileSize,
 	onError = noop,
 	onFileChange,
+	onSuccess,
 } ) {
 	const { getCurrentPost, getEditorSettings } = select( editorStore );
 	const {
@@ -77,8 +79,9 @@ export default function mediaUpload( {
 			} else {
 				clearSaveLock();
 			}
-			onFileChange( file );
+			onFileChange?.( file );
 		},
+		onSuccess,
 		additionalData: {
 			...postData,
 			...additionalData,

package/tsconfig.json

@@ -2,8 +2,6 @@
 	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"rootDir": "src",
-		"declarationDir": "build-types",
 		"checkJs": false
 	},
 	"references": [
@@ -34,6 +32,5 @@
 		{ "path": "../url" },
 		{ "path": "../warning" },
 		{ "path": "../wordcount" }
-	],
-	"include": [ "src" ]
+	]
 }