@wordpress/editor 14.12.0 → 14.12.1-next.082ed6819.0

package/src/components/post-taxonomies/panel.js

@@ -11,6 +11,15 @@ import { store as editorStore } from '../../store';
 import PostTaxonomiesForm from './index';
 import PostTaxonomiesCheck from './check';
 
+/**
+ * Renders a panel for a specific taxonomy.
+ *
+ * @param {Object}          props          The component props.
+ * @param {Object}          props.taxonomy The taxonomy object.
+ * @param {React.ReactNode} props.children The child components.
+ *
+ * @return {React.ReactNode} The rendered taxonomy panel.
+ */
 function TaxonomyPanel( { taxonomy, children } ) {
 	const slug = taxonomy?.slug;
 	const panelName = slug ? `taxonomy-panel-${ slug }` : '';
@@ -47,7 +56,12 @@ function TaxonomyPanel( { taxonomy, children } ) {
 	);
 }
 
-function PostTaxonomies() {
+/**
+ * Component that renders the post taxonomies panel.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PostTaxonomies() {
 	return (
 		<PostTaxonomiesCheck>
 			<PostTaxonomiesForm
@@ -62,14 +76,3 @@ function PostTaxonomies() {
 		</PostTaxonomiesCheck>
 	);
 }
-
-/**
- * Renders a panel for a specific taxonomy.
- *
- * @param {Object}  props          The component props.
- * @param {Object}  props.taxonomy The taxonomy object.
- * @param {Element} props.children The child components.
- *
- * @return {Component} The rendered taxonomy panel.
- */
-export default PostTaxonomies;

package/src/components/post-template/classic-theme.js

@@ -63,7 +63,7 @@ function PostTemplateToggle( { isOpen, onClick } ) {
  * @param {Object}   props         The component props.
  * @param {Function} props.onClose The function to close the dropdown.
  *
- * @return {JSX.Element} The rendered dropdown content.
+ * @return {React.ReactNode} The rendered dropdown content.
  */
 function PostTemplateDropdownContent( { onClose } ) {
 	const allowSwitchingTemplate = useAllowSwitchingTemplates();
@@ -235,6 +235,6 @@ function ClassicThemeControl() {
  *
  * The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates.
  *
- * @return {JSX.Element} The rendered ClassicThemeControl component.
+ * @return {React.ReactNode} The rendered ClassicThemeControl component.
  */
 export default ClassicThemeControl;

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

@@ -16,7 +16,7 @@ import PostPanelRow from '../post-panel-row';
 /**
  * Displays the template controls based on the current editor settings and user permissions.
  *
- * @return {JSX.Element|null} The rendered PostTemplatePanel component.
+ * @return {React.ReactNode} The rendered PostTemplatePanel component.
  */
 export default function PostTemplatePanel() {
 	const { templateId, isBlockTheme } = useSelect( ( select ) => {

package/src/components/post-text-editor/index.js

@@ -22,7 +22,7 @@ import { store as editorStore } from '../../store';
 /**
  * Displays the Post Text Editor along with content in Visual and Text mode.
  *
- * @return {JSX.Element|null} The rendered PostTextEditor component.
+ * @return {React.ReactNode} The rendered PostTextEditor component.
  */
 export default function PostTextEditor() {
 	const instanceId = useInstanceId( PostTextEditor );

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

@@ -28,7 +28,7 @@ import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
 import PostTypeSupportCheck from '../post-type-support-check';
 
-function PostTitle( _, forwardedRef ) {
+const PostTitle = forwardRef( ( _, forwardedRef ) => {
 	const { placeholder } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { titlePlaceholder } = getSettings();
@@ -171,23 +171,21 @@ function PostTitle( _, forwardedRef ) {
 
 	return (
 		/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
-		<PostTypeSupportCheck supportKeys="title">
-			<h1
-				ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
-				contentEditable
-				className={ className }
-				aria-label={ decodedPlaceholder }
-				role="textbox"
-				aria-multiline="true"
-				onFocus={ onSelect }
-				onBlur={ onUnselect }
-				onKeyDown={ onKeyDown }
-				onPaste={ onPaste }
-			/>
-		</PostTypeSupportCheck>
+		<h1
+			ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
+			contentEditable
+			className={ className }
+			aria-label={ decodedPlaceholder }
+			role="textbox"
+			aria-multiline="true"
+			onFocus={ onSelect }
+			onBlur={ onUnselect }
+			onKeyDown={ onKeyDown }
+			onPaste={ onPaste }
+		/>
 		/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 	);
-}
+} );
 
 /**
  * Renders the `PostTitle` component.
@@ -195,6 +193,10 @@ function PostTitle( _, forwardedRef ) {
  * @param {Object}  _            Unused parameter.
  * @param {Element} forwardedRef Forwarded ref for the component.
  *
- * @return {Component} The rendered PostTitle component.
+ * @return {React.ReactNode} The rendered PostTitle component.
  */
-export default forwardRef( PostTitle );
+export default forwardRef( ( _, forwardedRef ) => (
+	<PostTypeSupportCheck supportKeys="title">
+		<PostTitle ref={ forwardedRef } />
+	</PostTypeSupportCheck>
+) );

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

@@ -26,7 +26,7 @@ import usePostTitle from './use-post-title';
  * @param {Object}  _            Unused parameter.
  * @param {Element} forwardedRef Reference to the component's DOM node.
  *
- * @return {Component} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 function PostTitleRaw( _, forwardedRef ) {
 	const { placeholder } = useSelect( ( select ) => {

package/src/components/post-trash/check.js

@@ -13,10 +13,10 @@ import { GLOBAL_POST_TYPES } from '../../store/constants';
 /**
  * Wrapper component that renders its children only if the post can trashed.
  *
- * @param {Object}  props          - The component props.
- * @param {Element} props.children - The child components to render.
+ * @param {Object}        props          - The component props.
+ * @param {React.ReactEl} props.children - The child components to render.
  *
- * @return {Component|null} The rendered child components or null if the post can not trashed.
+ * @return {React.ReactElement} The rendered child components or null if the post can not trashed.
  */
 export default function PostTrashCheck( { children } ) {
 	const { canTrashPost } = useSelect( ( select ) => {

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

@@ -19,7 +19,7 @@ import PostTrashCheck from './check';
  * Displays the Post Trash Button and Confirm Dialog in the Editor.
  *
  * @param {?{onActionPerformed: Object}} An object containing the onActionPerformed function.
- * @return {JSX.Element|null} The rendered PostTrash component.
+ * @return {React.ReactNode} The rendered PostTrash component.
  */
 export default function PostTrash( { onActionPerformed } ) {
 	const registry = useRegistry();

package/src/components/post-type-support-check/index.js

@@ -13,13 +13,13 @@ import { store as editorStore } from '../../store';
  * A component which renders its own children only if the current editor post
  * type supports one of the given `supportKeys` prop.
  *
- * @param {Object}            props             Props.
- * @param {Element}           props.children    Children to be rendered if post
- *                                              type supports.
- * @param {(string|string[])} props.supportKeys String or string array of keys
- *                                              to test.
+ * @param {Object}             props             Props.
+ * @param {React.ReactElement} props.children    Children to be rendered if post
+ *                                               type supports.
+ * @param {(string|string[])}  props.supportKeys String or string array of keys
+ *                                               to test.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactElement} The component to be rendered.
  */
 function PostTypeSupportCheck( { children, supportKeys } ) {
 	const postType = useSelect( ( select ) => {

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

@@ -12,10 +12,10 @@ import { store as editorStore } from '../../store';
 /**
  * Check if the post URL is valid and visible.
  *
- * @param {Object}  props          The component props.
- * @param {Element} props.children The child components.
+ * @param {Object}             props          The component props.
+ * @param {React.ReactElement} props.children The child components.
  *
- * @return {Component|null} The child components if the post URL is valid and visible, otherwise null.
+ * @return {React.ReactElement} The child components if the post URL is valid and visible, otherwise null.
  */
 export default function PostURLCheck( { children } ) {
 	const isVisible = useSelect( ( select ) => {

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

@@ -34,7 +34,7 @@ import { store as editorStore } from '../../store';
  *
  * @param {Function} onClose Callback function to be executed when the popover is closed.
  *
- * @return {Component} The rendered PostURL component.
+ * @return {React.ReactNode} The rendered PostURL component.
  */
 export default function PostURL( { onClose } ) {
 	const {

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

@@ -12,7 +12,7 @@ import { store as editorStore } from '../../store';
 /**
  * Represents a label component for a post URL.
  *
- * @return {Component} The PostURLLabel component.
+ * @return {React.ReactNode} The PostURLLabel component.
  */
 export default function PostURLLabel() {
 	return usePostURLLabel();

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

@@ -19,7 +19,7 @@ import { store as editorStore } from '../../store';
 /**
  * Renders the `PostURLPanel` component.
  *
- * @return {JSX.Element} The rendered PostURLPanel component.
+ * @return {React.ReactNode} The rendered PostURLPanel component.
  */
 export default function PostURLPanel() {
 	const { isFrontPage } = useSelect( ( select ) => {

package/src/components/post-visibility/check.js

@@ -15,7 +15,7 @@ import { store as editorStore } from '../../store';
  * @param {Object}   props        The component props.
  * @param {Function} props.render Function to render the component.
  *                                Receives an object with a `canEdit` property.
- * @return {JSX.Element} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function PostVisibilityCheck( { render } ) {
 	const canEdit = useSelect( ( select ) => {

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

@@ -22,7 +22,7 @@ import { store as editorStore } from '../../store';
  *
  * @param {Object}   props         The component props.
  * @param {Function} props.onClose Function to call when the popover is closed.
- * @return {JSX.Element} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function PostVisibility( { onClose } ) {
 	const instanceId = useInstanceId( PostVisibility );

package/src/components/preferences-modal/block-visibility.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { BlockManager } = unlock( blockEditorPrivateApis );
+
+export default function BlockVisibility() {
+	const { showBlockTypes, hideBlockTypes } = unlock(
+		useDispatch( editorStore )
+	);
+
+	const {
+		blockTypes,
+		allowedBlockTypes: _allowedBlockTypes,
+		hiddenBlockTypes: _hiddenBlockTypes,
+	} = useSelect( ( select ) => {
+		return {
+			blockTypes: select( blocksStore ).getBlockTypes(),
+			allowedBlockTypes:
+				select( editorStore ).getEditorSettings().allowedBlockTypes,
+			hiddenBlockTypes:
+				select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ??
+				[],
+		};
+	}, [] );
+
+	const allowedBlockTypes = useMemo( () => {
+		if ( _allowedBlockTypes === true ) {
+			return blockTypes;
+		}
+		return blockTypes.filter( ( { name } ) => {
+			return _allowedBlockTypes?.includes( name );
+		} );
+	}, [ _allowedBlockTypes, blockTypes ] );
+
+	const filteredBlockTypes = allowedBlockTypes.filter(
+		( blockType ) =>
+			hasBlockSupport( blockType, 'inserter', true ) &&
+			( ! blockType.parent ||
+				blockType.parent.includes( 'core/post-content' ) )
+	);
+
+	// Some hidden blocks become unregistered
+	// by removing for instance the plugin that registered them, yet
+	// they're still remain as hidden by the user's action.
+	// We consider "hidden", blocks which were hidden and
+	// are still registered.
+	const hiddenBlockTypes = _hiddenBlockTypes.filter( ( hiddenBlock ) => {
+		return filteredBlockTypes.some(
+			( registeredBlock ) => registeredBlock.name === hiddenBlock
+		);
+	} );
+
+	const selectedBlockTypes = filteredBlockTypes.filter(
+		( blockType ) => ! hiddenBlockTypes.includes( blockType.name )
+	);
+
+	const onChangeSelectedBlockTypes = ( newSelectedBlockTypes ) => {
+		if ( selectedBlockTypes.length > newSelectedBlockTypes.length ) {
+			const blockTypesToHide = selectedBlockTypes.filter(
+				( blockType ) =>
+					! newSelectedBlockTypes.find(
+						( { name } ) => name === blockType.name
+					)
+			);
+			hideBlockTypes( blockTypesToHide.map( ( { name } ) => name ) );
+		} else if ( selectedBlockTypes.length < newSelectedBlockTypes.length ) {
+			const blockTypesToShow = newSelectedBlockTypes.filter(
+				( blockType ) =>
+					! selectedBlockTypes.find(
+						( { name } ) => name === blockType.name
+					)
+			);
+			showBlockTypes( blockTypesToShow.map( ( { name } ) => name ) );
+		}
+	};
+
+	return (
+		<BlockManager
+			blockTypes={ filteredBlockTypes }
+			selectedBlockTypes={ selectedBlockTypes }
+			onChange={ onChangeSelectedBlockTypes }
+		/>
+	);
+}

package/src/components/preferences-modal/enable-panel.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
 /**
@@ -13,18 +12,29 @@ import { store as editorStore } from '../../store';
 
 const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
 
-export default compose(
-	withSelect( ( select, { panelName } ) => {
-		const { isEditorPanelEnabled, isEditorPanelRemoved } =
-			select( editorStore );
-		return {
-			isRemoved: isEditorPanelRemoved( panelName ),
-			isChecked: isEditorPanelEnabled( panelName ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch, { panelName } ) => ( {
-		onChange: () =>
-			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
-	} ) )
-)( PreferenceBaseOption );
+export default function EnablePanelOption( props ) {
+	const { toggleEditorPanelEnabled } = useDispatch( editorStore );
+	const { isChecked, isRemoved } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelRemoved } =
+				select( editorStore );
+			return {
+				isChecked: isEditorPanelEnabled( props.panelName ),
+				isRemoved: isEditorPanelRemoved( props.panelName ),
+			};
+		},
+		[ props.panelName ]
+	);
+
+	if ( isRemoved ) {
+		return null;
+	}
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ () => toggleEditorPanelEnabled( props.panelName ) }
+			{ ...props }
+		/>
+	);
+}

package/src/components/preferences-modal/enable-publish-sidebar.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
 /**
@@ -13,16 +12,20 @@ import { store as editorStore } from '../../store';
 
 const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
 
-export default compose(
-	withSelect( ( select ) => ( {
-		isChecked: select( editorStore ).isPublishSidebarEnabled(),
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		const { enablePublishSidebar, disablePublishSidebar } =
-			dispatch( editorStore );
-		return {
-			onChange: ( isEnabled ) =>
-				isEnabled ? enablePublishSidebar() : disablePublishSidebar(),
-		};
-	} )
-)( PreferenceBaseOption );
+export default function EnablePublishSidebarOption( props ) {
+	const isChecked = useSelect( ( select ) => {
+		return select( editorStore ).isPublishSidebarEnabled();
+	}, [] );
+	const { enablePublishSidebar, disablePublishSidebar } =
+		useDispatch( editorStore );
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ ( isEnabled ) =>
+				isEnabled ? enablePublishSidebar() : disablePublishSidebar()
+			}
+			{ ...props }
+		/>
+	);
+}

package/src/components/preferences-modal/index.js

@@ -18,7 +18,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 import EnablePanelOption from './enable-panel';
 import EnablePluginDocumentSettingPanelOption from './enable-plugin-document-setting-panel';
 import EnablePublishSidebarOption from './enable-publish-sidebar';
-import BlockManager from '../block-manager';
+import BlockVisibility from './block-visibility';
 import PostTaxonomies from '../post-taxonomies';
 import PostFeaturedImageCheck from '../post-featured-image/check';
 import PostExcerptCheck from '../post-excerpt/check';
@@ -297,7 +297,7 @@ function PreferencesModalContents( { extraSections = {} } ) {
 									"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
 								) }
 							>
-								<BlockManager />
+								<BlockVisibility />
 							</PreferencesModalSection>
 						</>
 					),

package/src/components/provider/index.js

@@ -72,8 +72,7 @@ const NON_CONTEXTUAL_POST_TYPES = [
  * @return {Array} Block editor props.
  */
 function useBlockEditorProps( post, template, mode ) {
-	const rootLevelPost =
-		mode === 'post-only' || ! template ? 'post' : 'template';
+	const rootLevelPost = mode === 'template-locked' ? 'template' : 'post';
 	const [ postBlocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		post.type,
@@ -164,30 +163,48 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
 		__unstableTemplate: template,
 	} ) => {
-		const { editorSettings, selection, isReady, mode, postTypeEntities } =
-			useSelect(
-				( select ) => {
-					const {
-						getEditorSettings,
-						getEditorSelection,
-						getRenderingMode,
-						__unstableIsEditorReady,
-					} = select( editorStore );
-					const { getEntitiesConfig } = select( coreStore );
+		const {
+			editorSettings,
+			selection,
+			isReady,
+			mode,
+			defaultMode,
+			postTypeEntities,
+			hasLoadedPostObject,
+		} = useSelect(
+			( select ) => {
+				const {
+					getEditorSettings,
+					getEditorSelection,
+					getRenderingMode,
+					__unstableIsEditorReady,
+				} = select( editorStore );
+				const { getEntitiesConfig } = select( coreStore );
+
+				const postTypeObject = select( coreStore ).getPostType(
+					post.type
+				);
+
+				const _hasLoadedPostObject = select(
+					coreStore
+				).hasFinishedResolution( 'getPostType', [ post.type ] );
 
-					return {
-						editorSettings: getEditorSettings(),
-						isReady: __unstableIsEditorReady(),
-						mode: getRenderingMode(),
-						selection: getEditorSelection(),
-						postTypeEntities:
-							post.type === 'wp_template'
-								? getEntitiesConfig( 'postType' )
-								: null,
-					};
-				},
-				[ post.type ]
-			);
+				return {
+					hasLoadedPostObject: _hasLoadedPostObject,
+					editorSettings: getEditorSettings(),
+					isReady: __unstableIsEditorReady(),
+					mode: getRenderingMode(),
+					defaultMode:
+						postTypeObject?.default_rendering_mode ?? 'post-only',
+					selection: getEditorSelection(),
+					postTypeEntities:
+						post.type === 'wp_template'
+							? getEntitiesConfig( 'postType' )
+							: null,
+				};
+			},
+			[ post.type ]
+		);
 		const shouldRenderTemplate = !! template && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
@@ -282,7 +299,15 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					}
 				);
 			}
-		}, [] );
+		}, [
+			createWarningNotice,
+			initialEdits,
+			settings,
+			post,
+			recovery,
+			setupEditor,
+			updatePostLock,
+		] );
 
 		// Synchronizes the active post with the state
 		useEffect( () => {
@@ -301,15 +326,15 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 
 		// Sets the right rendering mode when loading the editor.
 		useEffect( () => {
-			setRenderingMode( settings.defaultRenderingMode ?? 'post-only' );
-		}, [ settings.defaultRenderingMode, setRenderingMode ] );
+			setRenderingMode( defaultMode );
+		}, [ defaultMode, setRenderingMode ] );
 
 		useHideBlocksFromInserter( post.type, mode );
 
 		// Register the editor commands.
 		useCommands();
 
-		if ( ! isReady ) {
+		if ( ! isReady || ! mode || ! hasLoadedPostObject ) {
 			return null;
 		}
 
@@ -386,7 +411,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
  * </EditorProvider>
  * ```
  *
- * @return {JSX.Element} The rendered EditorProvider component.
+ * @return {React.ReactNode} The rendered EditorProvider component.
  */
 export function EditorProvider( props ) {
 	return (

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

@@ -61,6 +61,6 @@ function TableOfContents(
  * @param {boolean}     props.repositionDropdown      Whether to reposition the dropdown.
  * @param {Element.ref} ref                           The component's ref.
  *
- * @return {JSX.Element} The rendered table of contents component.
+ * @return {React.ReactNode} The rendered table of contents component.
  */
 export default forwardRef( TableOfContents );

package/src/components/theme-support-check/index.js

@@ -12,11 +12,11 @@ import { store as editorStore } from '../../store';
 /**
  * Checks if the current theme supports specific features and renders the children if supported.
  *
- * @param {Object}          props             The component props.
- * @param {Element}         props.children    The children to render if the theme supports the specified features.
- * @param {string|string[]} props.supportKeys The key(s) of the theme support(s) to check.
+ * @param {Object}             props             The component props.
+ * @param {React.ReactElement} props.children    The children to render if the theme supports the specified features.
+ * @param {string|string[]}    props.supportKeys The key(s) of the theme support(s) to check.
  *
- * @return {JSX.Element|null} The rendered children if the theme supports the specified features, otherwise null.
+ * @return {React.ReactElement} The rendered children if the theme supports the specified features, otherwise null.
  */
 export default function ThemeSupportCheck( { children, supportKeys } ) {
 	const { postType, themeSupports } = useSelect( ( select ) => {

package/src/components/time-to-read/index.js

@@ -23,7 +23,7 @@ const AVERAGE_READING_RATE = 189;
 /**
  * Component for showing Time To Read in Content.
  *
- * @return {JSX.Element} The rendered TimeToRead component.
+ * @return {React.ReactNode} The rendered TimeToRead component.
  */
 export default function TimeToRead() {
 	const content = useSelect(

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

@@ -10,7 +10,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Warns the user if there are unsaved changes before leaving the editor.
  * Compatible with Post Editor and Site Editor.
  *
- * @return {Component} The component.
+ * @return {React.ReactNode} The component.
  */
 export default function UnsavedChangesWarning() {
 	const { __experimentalGetDirtyEntityRecords } = useSelect( coreStore );