@wordpress/editor 14.12.0 → 14.13.0

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

package/src/components/word-count/index.js

@@ -13,7 +13,7 @@ import { store as editorStore } from '../../store';
 /**
  * Renders the word count of the post content.
  *
- * @return {JSX.Element|null} The rendered WordCount component.
+ * @return {React.ReactNode} The rendered WordCount component.
  */
 export default function WordCount() {
 	const content = useSelect(

package/src/components/zoom-out-toggle/index.js

@@ -20,13 +20,19 @@ import { isAppleOS } from '@wordpress/keycodes';
 import { unlock } from '../../lock-unlock';
 
 const ZoomOutToggle = ( { disabled } ) => {
-	const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( {
-		isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
-		showIconLabels: select( preferencesStore ).get(
-			'core',
-			'showIconLabels'
-		),
-	} ) );
+	const { isZoomOut, showIconLabels, isDistractionFree } = useSelect(
+		( select ) => ( {
+			isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+			showIconLabels: select( preferencesStore ).get(
+				'core',
+				'showIconLabels'
+			),
+			isDistractionFree: select( preferencesStore ).get(
+				'core',
+				'distractionFree'
+			),
+		} )
+	);
 
 	const { resetZoomLevel, setZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
@@ -52,13 +58,19 @@ const ZoomOutToggle = ( { disabled } ) => {
 		};
 	}, [ registerShortcut, unregisterShortcut ] );
 
-	useShortcut( 'core/editor/zoom', () => {
-		if ( isZoomOut ) {
-			resetZoomLevel();
-		} else {
-			setZoomLevel( 'auto-scaled' );
+	useShortcut(
+		'core/editor/zoom',
+		() => {
+			if ( isZoomOut ) {
+				resetZoomLevel();
+			} else {
+				setZoomLevel( 'auto-scaled' );
+			}
+		},
+		{
+			isDisabled: isDistractionFree,
 		}
-	} );
+	);
 
 	const handleZoomOut = () => {
 		if ( isZoomOut ) {
@@ -78,6 +90,7 @@ const ZoomOutToggle = ( { disabled } ) => {
 			isPressed={ isZoomOut }
 			size="compact"
 			showTooltip={ ! showIconLabels }
+			className="editor-zoom-out-toggle"
 		/>
 	);
 };

package/src/dataviews/api.js

@@ -11,6 +11,7 @@ import { store as editorStore } from '../store';
 
 /**
  * @typedef {import('@wordpress/dataviews').Action} Action
+ * @typedef {import('@wordpress/dataviews').Field} Field
  */
 
 /**
@@ -53,3 +54,43 @@ export function unregisterEntityAction( kind, name, actionId ) {
 		_unregisterEntityAction( kind, name, actionId );
 	}
 }
+
+/**
+ * Registers a new DataViews field.
+ *
+ * This is an experimental API and is subject to change.
+ * it's only available in the Gutenberg plugin for now.
+ *
+ * @param {string} kind   Entity kind.
+ * @param {string} name   Entity name.
+ * @param {Field}  config Field configuration.
+ */
+export function registerEntityField( kind, name, config ) {
+	const { registerEntityField: _registerEntityField } = unlock(
+		dispatch( editorStore )
+	);
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		_registerEntityField( kind, name, config );
+	}
+}
+
+/**
+ * Unregisters a DataViews field.
+ *
+ * This is an experimental API and is subject to change.
+ * it's only available in the Gutenberg plugin for now.
+ *
+ * @param {string} kind    Entity kind.
+ * @param {string} name    Entity name.
+ * @param {string} fieldId Field ID.
+ */
+export function unregisterEntityField( kind, name, fieldId ) {
+	const { unregisterEntityField: _unregisterEntityField } = unlock(
+		dispatch( editorStore )
+	);
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		_unregisterEntityField( kind, name, fieldId );
+	}
+}