@wordpress/editor 13.2.0 → 13.3.0

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, unescape as unescapeString } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,11 +14,13 @@ import {
 	TextControl,
 	TreeSelect,
 	withFilters,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useDebounce } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -364,7 +366,7 @@ export function HierarchicalTermSelector( { slug } ) {
 							const termId = parseInt( term.id, 10 );
 							onChange( termId );
 						} }
-						label={ unescapeString( term.name ) }
+						label={ decodeEntities( term.name ) }
 					/>
 					{ !! term.children.length && (
 						<div className="editor-post-taxonomies__hierarchical-terms-subchoices">
@@ -415,6 +417,7 @@ export function HierarchicalTermSelector( { slug } ) {
 		<>
 			{ showFilter && (
 				<TextControl
+					__nextHasNoMarginBottom
 					className="editor-post-taxonomies__hierarchical-terms-filter"
 					label={ filterLabel }
 					value={ filterValue }
@@ -443,22 +446,25 @@ export function HierarchicalTermSelector( { slug } ) {
 			) }
 			{ showForm && (
 				<form onSubmit={ onAddTerm }>
-					<TextControl
-						className="editor-post-taxonomies__hierarchical-terms-input"
-						label={ newTermLabel }
-						value={ formName }
-						onChange={ onChangeFormName }
-						required
-					/>
-					{ !! availableTerms.length && (
-						<TreeSelect
-							label={ parentSelectLabel }
-							noOptionLabel={ noParentOption }
-							onChange={ onChangeFormParent }
-							selectedId={ formParent }
-							tree={ availableTermsTree }
+					<VStack>
+						<TextControl
+							__nextHasNoMarginBottom
+							className="editor-post-taxonomies__hierarchical-terms-input"
+							label={ newTermLabel }
+							value={ formName }
+							onChange={ onChangeFormName }
+							required
 						/>
-					) }
+						{ !! availableTerms.length && (
+							<TreeSelect
+								label={ parentSelectLabel }
+								noOptionLabel={ noParentOption }
+								onChange={ onChangeFormParent }
+								selectedId={ formParent }
+								tree={ availableTermsTree }
+							/>
+						) }
+					</VStack>
 					<Button
 						variant="secondary"
 						type="submit"

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, map } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -52,9 +52,8 @@ export function PostTemplate() {
 					template: templateSlug || '',
 				} );
 			} }
-			options={ map(
-				availableTemplates,
-				( templateName, templateSlug ) => ( {
+			options={ Object.entries( availableTemplates ?? {} ).map(
+				( [ templateSlug, templateName ] ) => ( {
 					value: templateSlug,
 					label: templateName,
 				} )

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

@@ -51,6 +51,7 @@ export default function PostURL( { onClose } ) {
 			<InspectorPopoverHeader title={ __( 'URL' ) } onClose={ onClose } />
 			{ isEditable && (
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Permalink' ) }
 					value={ forceEmptyField ? '' : postSlug }
 					autoComplete="off"

package/src/components/provider/index.js

@@ -8,6 +8,7 @@ import { EntityProvider, useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	BlockEditorProvider,
 	BlockContextProvider,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 import { store as noticesStore } from '@wordpress/notices';
@@ -18,107 +19,135 @@ import { store as noticesStore } from '@wordpress/notices';
 import withRegistryProvider from './with-registry-provider';
 import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
+import { unlock } from '../../lockUnlock';
 
-function EditorProvider( {
-	__unstableTemplate,
-	post,
-	settings,
-	recovery,
-	initialEdits,
-	children,
-} ) {
-	const defaultBlockContext = useMemo( () => {
-		if ( post.type === 'wp_template' ) {
-			return {};
-		}
-		return { postId: post.id, postType: post.type };
-	}, [ post.id, post.type ] );
-	const { selection, isReady } = useSelect( ( select ) => {
-		const { getEditorSelection, __unstableIsEditorReady } =
-			select( editorStore );
-		return {
-			isReady: __unstableIsEditorReady(),
-			selection: getEditorSelection(),
-		};
-	}, [] );
-	const { id, type } = __unstableTemplate ?? post;
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		type,
-		{ id }
-	);
-	const editorSettings = useBlockEditorSettings(
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorExperiments );
+
+export const ExperimentalEditorProvider = withRegistryProvider(
+	( {
+		__unstableTemplate,
+		post,
 		settings,
-		!! __unstableTemplate
-	);
-	const {
-		updatePostLock,
-		setupEditor,
-		updateEditorSettings,
-		__experimentalTearDownEditor,
-	} = useDispatch( editorStore );
-	const { createWarningNotice } = useDispatch( noticesStore );
+		recovery,
+		initialEdits,
+		children,
+		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
+	} ) => {
+		const defaultBlockContext = useMemo( () => {
+			if ( post.type === 'wp_template' ) {
+				return {};
+			}
+			return { postId: post.id, postType: post.type };
+		}, [ post.id, post.type ] );
+		const { editorSettings, selection, isReady } = useSelect(
+			( select ) => {
+				const {
+					getEditorSettings,
+					getEditorSelection,
+					__unstableIsEditorReady,
+				} = select( editorStore );
+				return {
+					editorSettings: getEditorSettings(),
+					isReady: __unstableIsEditorReady(),
+					selection: getEditorSelection(),
+				};
+			},
+			[]
+		);
+		const { id, type } = __unstableTemplate ?? post;
+		const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+			'postType',
+			type,
+			{ id }
+		);
+		const blockEditorSettings = useBlockEditorSettings(
+			editorSettings,
+			!! __unstableTemplate
+		);
+		const {
+			updatePostLock,
+			setupEditor,
+			updateEditorSettings,
+			__experimentalTearDownEditor,
+		} = 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.
-		if ( recovery ) {
-			return;
-		}
+		// 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.
+			if ( recovery ) {
+				return;
+			}
 
-		updatePostLock( settings.postLock );
-		setupEditor( post, initialEdits, settings.template );
-		if ( settings.autosave ) {
-			createWarningNotice(
-				__(
-					'There is an autosave of this post that is more recent than the version below.'
-				),
-				{
-					id: 'autosave-exists',
-					actions: [
-						{
-							label: __( 'View the autosave' ),
-							url: settings.autosave.editLink,
-						},
-					],
-				}
-			);
-		}
+			updatePostLock( settings.postLock );
+			setupEditor( post, initialEdits, settings.template );
+			if ( settings.autosave ) {
+				createWarningNotice(
+					__(
+						'There is an autosave of this post that is more recent than the version below.'
+					),
+					{
+						id: 'autosave-exists',
+						actions: [
+							{
+								label: __( 'View the autosave' ),
+								url: settings.autosave.editLink,
+							},
+						],
+					}
+				);
+			}
+
+			return () => {
+				__experimentalTearDownEditor();
+			};
+		}, [] );
 
-		return () => {
-			__experimentalTearDownEditor();
-		};
-	}, [] );
+		// Synchronize the editor settings as they change.
+		useEffect( () => {
+			updateEditorSettings( settings );
+		}, [ settings ] );
 
-	// Synchronize the editor settings as they change.
-	useEffect( () => {
-		updateEditorSettings( settings );
-	}, [ settings ] );
+		if ( ! isReady ) {
+			return null;
+		}
 
-	if ( ! isReady ) {
-		return null;
+		return (
+			<EntityProvider kind="root" type="site">
+				<EntityProvider
+					kind="postType"
+					type={ post.type }
+					id={ post.id }
+				>
+					<BlockContextProvider value={ defaultBlockContext }>
+						<BlockEditorProviderComponent
+							value={ blocks }
+							onChange={ onChange }
+							onInput={ onInput }
+							selection={ selection }
+							settings={ blockEditorSettings }
+							useSubRegistry={ false }
+						>
+							{ children }
+							<ReusableBlocksMenuItems />
+						</BlockEditorProviderComponent>
+					</BlockContextProvider>
+				</EntityProvider>
+			</EntityProvider>
+		);
 	}
+);
 
+export function EditorProvider( props ) {
 	return (
-		<EntityProvider kind="root" type="site">
-			<EntityProvider kind="postType" type={ post.type } id={ post.id }>
-				<BlockContextProvider value={ defaultBlockContext }>
-					<BlockEditorProvider
-						value={ blocks }
-						onChange={ onChange }
-						onInput={ onInput }
-						selection={ selection }
-						settings={ editorSettings }
-						useSubRegistry={ false }
-					>
-						{ children }
-						<ReusableBlocksMenuItems />
-					</BlockEditorProvider>
-				</BlockContextProvider>
-			</EntityProvider>
-		</EntityProvider>
+		<ExperimentalEditorProvider
+			{ ...props }
+			BlockEditorProviderComponent={ BlockEditorProvider }
+		>
+			{ props.children }
+		</ExperimentalEditorProvider>
 	);
 }
 
-export default withRegistryProvider( EditorProvider );
+export default EditorProvider;

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

@@ -92,11 +92,16 @@ class NativeEditorProvider extends Component {
 	}
 
 	componentDidMount() {
-		const { capabilities, locale, hostAppNamespace, updateSettings } =
-			this.props;
+		const {
+			capabilities,
+			locale,
+			hostAppNamespace,
+			updateEditorSettings,
+			updateBlockEditorSettings,
+		} = this.props;
 
-		updateSettings( {
-			...capabilities,
+		updateEditorSettings( {
+			capabilities,
 			...this.getThemeColors( this.props ),
 			locale,
 			hostAppNamespace,
@@ -152,7 +157,9 @@ class NativeEditorProvider extends Component {
 						window.wp.galleryBlockV2Enabled =
 							galleryWithImageBlocks;
 					}
-					updateSettings( this.getThemeColors( editorSettings ) );
+					updateEditorSettings(
+						this.getThemeColors( editorSettings )
+					);
 				}
 			);
 
@@ -177,7 +184,7 @@ class NativeEditorProvider extends Component {
 			const impressions = { ...NEW_BLOCK_TYPES, ...storedImpressions };
 
 			// Persist impressions to JavaScript store.
-			updateSettings( { impressions } );
+			updateBlockEditorSettings( { impressions } );
 
 			// Persist impressions to native store if they do not include latest
 			// `NEW_BLOCK_TYPES` configuration.
@@ -318,7 +325,7 @@ class NativeEditorProvider extends Component {
 	}
 
 	updateCapabilitiesAction( capabilities ) {
-		this.props.updateSettings( capabilities );
+		this.props.updateEditorSettings( { capabilities } );
 	}
 
 	render() {
@@ -345,24 +352,21 @@ class NativeEditorProvider extends Component {
 	}
 }
 
-export default compose( [
+const ComposedNativeProvider = compose( [
 	withSelect( ( select ) => {
 		const {
 			__unstableIsEditorReady: isEditorReady,
 			getEditorBlocks,
 			getEditedPostAttribute,
 			getEditedPostContent,
+			getEditorSettings,
 		} = select( editorStore );
 		const { getEditorMode } = select( editPostStore );
 
-		const {
-			getBlockIndex,
-			getSelectedBlockClientId,
-			getGlobalBlockCount,
-			getSettings: getBlockEditorSettings,
-		} = select( blockEditorStore );
+		const { getBlockIndex, getSelectedBlockClientId, getGlobalBlockCount } =
+			select( blockEditorStore );
 
-		const settings = getBlockEditorSettings();
+		const settings = getEditorSettings();
 		const defaultEditorColors = settings?.colors ?? [];
 		const defaultEditorGradients = settings?.gradients ?? [];
 
@@ -381,7 +385,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { editPost, resetEditorBlocks } = dispatch( editorStore );
+		const { editPost, resetEditorBlocks, updateEditorSettings } =
+			dispatch( editorStore );
 		const {
 			updateSettings,
 			clearSelectedBlock,
@@ -393,7 +398,8 @@ export default compose( [
 		const { createSuccessNotice } = dispatch( noticesStore );
 
 		return {
-			updateSettings,
+			updateBlockEditorSettings: updateSettings,
+			updateEditorSettings,
 			addEntities,
 			clearSelectedBlock,
 			insertBlock,
@@ -414,3 +420,6 @@ export default compose( [
 		};
 	} ),
 ] )( NativeEditorProvider );
+
+export default ComposedNativeProvider;
+export { ComposedNativeProvider as ExperimentalEditorProvider };

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

@@ -7,18 +7,75 @@ import {
 	store as coreStore,
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
-	__experimentalFetchMedia as fetchMedia,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
 
 const EMPTY_BLOCKS_LIST = [];
 
+const BLOCK_EDITOR_SETTINGS = [
+	'__experimentalBlockDirectory',
+	'__experimentalBlockInspectorAnimation',
+	'__experimentalDiscussionSettings',
+	'__experimentalFeatures',
+	'__experimentalGlobalStylesBaseStyles',
+	'__experimentalPreferredStyleVariations',
+	'__experimentalSetIsInserterOpened',
+	'__unstableGalleryWithImageBlocks',
+	'alignWide',
+	'allowedBlockTypes',
+	'blockInspectorTabs',
+	'allowedMimeTypes',
+	'bodyPlaceholder',
+	'canLockBlocks',
+	'capabilities',
+	'clearBlockSelection',
+	'codeEditingEnabled',
+	'colors',
+	'disableCustomColors',
+	'disableCustomFontSizes',
+	'disableCustomSpacingSizes',
+	'disableCustomGradients',
+	'disableLayoutStyles',
+	'enableCustomLineHeight',
+	'enableCustomSpacing',
+	'enableCustomUnits',
+	'enableOpenverseMediaCategory',
+	'focusMode',
+	'fontSizes',
+	'gradients',
+	'generateAnchors',
+	'hasFixedToolbar',
+	'hasInlineToolbar',
+	'isDistractionFree',
+	'imageDefaultSize',
+	'imageDimensions',
+	'imageEditing',
+	'imageSizes',
+	'isRTL',
+	'keepCaretInsideBlock',
+	'locale',
+	'maxWidth',
+	'onUpdateDefaultBlockStyles',
+	'postsPerPage',
+	'readOnly',
+	'styles',
+	'template',
+	'templateLock',
+	'titlePlaceholder',
+	'supportsLayout',
+	'widgetTypesToHideFromLegacyWidgetBlock',
+	'__unstableHasCustomAppender',
+	'__unstableIsPreviewMode',
+	'__unstableResolvedAssets',
+];
+
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
@@ -133,51 +190,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		() => ( {
 			...Object.fromEntries(
 				Object.entries( settings ).filter( ( [ key ] ) =>
-					[
-						'__experimentalBlockDirectory',
-						'__experimentalDiscussionSettings',
-						'__experimentalFeatures',
-						'__experimentalPreferredStyleVariations',
-						'__experimentalSetIsInserterOpened',
-						'__unstableGalleryWithImageBlocks',
-						'alignWide',
-						'allowedBlockTypes',
-						'blockInspectorTabs',
-						'bodyPlaceholder',
-						'canLockBlocks',
-						'codeEditingEnabled',
-						'colors',
-						'disableCustomColors',
-						'disableCustomFontSizes',
-						'disableCustomSpacingSizes',
-						'disableCustomGradients',
-						'disableLayoutStyles',
-						'enableCustomLineHeight',
-						'enableCustomSpacing',
-						'enableCustomUnits',
-						'focusMode',
-						'fontSizes',
-						'gradients',
-						'generateAnchors',
-						'hasFixedToolbar',
-						'isDistractionFree',
-						'hasInlineToolbar',
-						'imageDefaultSize',
-						'imageDimensions',
-						'imageEditing',
-						'imageSizes',
-						'isRTL',
-						'keepCaretInsideBlock',
-						'maxWidth',
-						'onUpdateDefaultBlockStyles',
-						'styles',
-						'template',
-						'templateLock',
-						'titlePlaceholder',
-						'supportsLayout',
-						'widgetTypesToHideFromLegacyWidgetBlock',
-						'__unstableResolvedAssets',
-					].includes( key )
+					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
@@ -186,9 +199,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
 				fetchLinkSuggestions( search, searchOptions, settings ),
-			// TODO: We should find a proper way to consolidate similar cases
-			// like reusable blocks, fetch entities, etc.
-			__unstableFetchMedia: fetchMedia,
+			inserterMediaCategories,
 			__experimentalFetchRichUrlData: fetchUrlData,
 			__experimentalCanUserUseUnfilteredHTML: canUseUnfilteredHTML,
 			__experimentalUndo: undo,

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

@@ -14,10 +14,9 @@ import { store as editorStore } from '../../store';
 const EMPTY_BLOCKS_LIST = [];
 
 function useNativeBlockEditorSettings( settings, hasTemplate ) {
-	const capabilities = settings.capabilities ?? {};
 	const editorSettings = useBlockEditorSettings( settings, hasTemplate );
+	const supportReusableBlock = settings.capabilities?.reusableBlock === true;
 
-	const supportReusableBlock = capabilities.reusableBlock === true;
 	const { reusableBlocks, isTitleSelected } = useSelect(
 		( select ) => {
 			return {

package/src/components/table-of-contents/index.js

@@ -23,7 +23,9 @@ function TableOfContents(
 	);
 	return (
 		<Dropdown
-			position={ repositionDropdown ? 'middle right right' : 'bottom' }
+			popoverProps={ {
+				placement: repositionDropdown ? 'right' : 'bottom',
+			} }
 			className="table-of-contents"
 			contentClassName="table-of-contents__popover"
 			renderToggle={ ( { isOpen, onToggle } ) => (

package/src/components/unsaved-changes-warning/index.js

@@ -26,7 +26,7 @@ export default function UnsavedChangesWarning() {
 	 *
 	 * @param {Event} event `beforeunload` event.
 	 *
-	 * @return {?string} Warning prompt message, if unsaved changes exist.
+	 * @return {string | undefined} Warning prompt message, if unsaved changes exist.
 	 */
 	const warnIfUnsavedChanges = ( event ) => {
 		// We need to call the selector directly in the listener to avoid race

package/src/experiments.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { ExperimentalEditorProvider } from './components/provider';
+import { lock } from './lockUnlock';
+
+export const experiments = {};
+lock( experiments, {
+	ExperimentalEditorProvider,
+} );

package/src/hooks/default-autocompleters.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { clone } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,7 +10,7 @@ import { userAutocompleter } from '../components';
 
 function setDefaultCompleters( completers = [] ) {
 	// Provide copies so filters may directly modify them.
-	completers.push( clone( userAutocompleter ) );
+	completers.push( { ...userAutocompleter } );
 
 	return completers;
 }

package/src/index.js

@@ -6,6 +6,7 @@ import './hooks';
 export { storeConfig, store } from './store';
 export * from './components';
 export * from './utils';
+export * from './experiments';
 
 /*
  * Backward compatibility

package/src/index.native.js

@@ -13,3 +13,4 @@ import './hooks';
 export { store } from './store';
 export * from './components';
 export * from './utils';
+export * from './experiments';

package/src/lockUnlock.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/editor'
+	);