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

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

package/src/dataviews/store/private-actions.ts

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import type { Action } from '@wordpress/dataviews';
+import type { Action, Field } from '@wordpress/dataviews';
 import { doAction } from '@wordpress/hooks';
 
 /**
@@ -24,6 +24,15 @@ import {
 	renamePost,
 	resetPost,
 	deletePost,
+	featuredImageField,
+	dateField,
+	parentField,
+	passwordField,
+	commentStatusField,
+	slugField,
+	statusField,
+	authorField,
+	titleField,
 } from '@wordpress/fields';
 import duplicateTemplatePart from '../actions/duplicate-template-part';
 
@@ -53,6 +62,32 @@ export function unregisterEntityAction(
 	};
 }
 
+export function registerEntityField< Item >(
+	kind: string,
+	name: string,
+	config: Field< Item >
+) {
+	return {
+		type: 'REGISTER_ENTITY_FIELD' as const,
+		kind,
+		name,
+		config,
+	};
+}
+
+export function unregisterEntityField(
+	kind: string,
+	name: string,
+	fieldId: string
+) {
+	return {
+		type: 'UNREGISTER_ENTITY_FIELD' as const,
+		kind,
+		name,
+		fieldId,
+	};
+}
+
 export function setIsReady( kind: string, name: string ) {
 	return {
 		type: 'SET_IS_READY' as const,
@@ -61,7 +96,7 @@ export function setIsReady( kind: string, name: string ) {
 	};
 }
 
-export const registerPostTypeActions =
+export const registerPostTypeSchema =
 	( postType: string ) =>
 	async ( { registry }: { registry: any } ) => {
 		const isReady = unlock( registry.select( editorStore ) ).isEntityReady(
@@ -124,6 +159,18 @@ export const registerPostTypeActions =
 			permanentlyDeletePost,
 		];
 
+		const fields = [
+			featuredImageField,
+			titleField,
+			authorField,
+			statusField,
+			dateField,
+			slugField,
+			parentField,
+			commentStatusField,
+			passwordField,
+		];
+
 		registry.batch( () => {
 			actions.forEach( ( action ) => {
 				if ( ! action ) {
@@ -135,7 +182,14 @@ export const registerPostTypeActions =
 					action
 				);
 			} );
+			fields.forEach( ( field ) => {
+				unlock( registry.dispatch( editorStore ) ).registerEntityField(
+					'postType',
+					postType,
+					field
+				);
+			} );
 		} );
 
-		doAction( 'core.registerPostTypeActions', postType );
+		doAction( 'core.registerPostTypeSchema', postType );
 	};

package/src/dataviews/store/private-selectors.ts

@@ -9,6 +9,10 @@ export function getEntityActions( state: State, kind: string, name: string ) {
 	return state.actions[ kind ]?.[ name ] ?? EMPTY_ARRAY;
 }
 
+export function getEntityFields( state: State, kind: string, name: string ) {
+	return state.fields[ kind ]?.[ name ] ?? EMPTY_ARRAY;
+}
+
 export function isEntityReady( state: State, kind: string, name: string ) {
 	return state.isReady[ kind ]?.[ name ];
 }

package/src/dataviews/store/reducer.ts

@@ -2,17 +2,21 @@
  * WordPress dependencies
  */
 import { combineReducers } from '@wordpress/data';
-import type { Action } from '@wordpress/dataviews';
+import type { Action, Field } from '@wordpress/dataviews';
 
 type ReduxAction =
 	| ReturnType< typeof import('./private-actions').registerEntityAction >
 	| ReturnType< typeof import('./private-actions').unregisterEntityAction >
+	| ReturnType< typeof import('./private-actions').registerEntityField >
+	| ReturnType< typeof import('./private-actions').unregisterEntityField >
 	| ReturnType< typeof import('./private-actions').setIsReady >;
 
 export type ActionState = Record< string, Record< string, Action< any >[] > >;
+export type FieldsState = Record< string, Record< string, Field< any >[] > >;
 export type ReadyState = Record< string, Record< string, boolean > >;
 export type State = {
 	actions: ActionState;
+	fields: FieldsState;
 	isReady: ReadyState;
 };
 
@@ -64,7 +68,40 @@ function actions( state: ActionState = {}, action: ReduxAction ) {
 	return state;
 }
 
+function fields( state: FieldsState = {}, action: ReduxAction ) {
+	switch ( action.type ) {
+		case 'REGISTER_ENTITY_FIELD':
+			return {
+				...state,
+				[ action.kind ]: {
+					...state[ action.kind ],
+					[ action.name ]: [
+						...(
+							state[ action.kind ]?.[ action.name ] ?? []
+						).filter(
+							( _field ) => _field.id !== action.config.id
+						),
+						action.config,
+					],
+				},
+			};
+		case 'UNREGISTER_ENTITY_FIELD':
+			return {
+				...state,
+				[ action.kind ]: {
+					...state[ action.kind ],
+					[ action.name ]: (
+						state[ action.kind ]?.[ action.name ] ?? []
+					).filter( ( _field ) => _field.id !== action.fieldId ),
+				},
+			};
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	actions,
+	fields,
 	isReady,
 } );

package/src/private-apis.js

@@ -16,6 +16,7 @@ import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostCardPanel from './components/post-card-panel';
 import PreferencesModal from './components/preferences-modal';
 import { usePostActions } from './components/post-actions/actions';
+import usePostFields from './components/post-fields';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
 import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
 import ResizableEditor from './components/resizable-editor';
@@ -24,6 +25,7 @@ import {
 	GlobalStylesProvider,
 } from './components/global-styles-provider';
 import { registerCoreBlockBindingsSources } from './bindings/api';
+import { getTemplateInfo } from './utils/get-template-info';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
@@ -40,11 +42,12 @@ lock( privateApis, {
 	PostCardPanel,
 	PreferencesModal,
 	usePostActions,
+	usePostFields,
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
 	ResizableEditor,
 	registerCoreBlockBindingsSources,
-
+	getTemplateInfo,
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	interfaceStore,
 	...remainingInterfaceApis,

package/src/store/actions.js

@@ -35,9 +35,9 @@ import { unlock } from '../lock-unlock';
  * Returns an action generator used in signalling that editor has initialized with
  * the specified post object and editor settings.
  *
- * @param {Object} post     Post object.
- * @param {Object} edits    Initial edited attributes object.
- * @param {Array?} template Block Template.
+ * @param {Object} post       Post object.
+ * @param {Object} edits      Initial edited attributes object.
+ * @param {Array}  [template] Block Template.
  */
 export const setupEditor =
 	( post, edits, template ) =>
@@ -157,8 +157,8 @@ export function setEditedPost( postType, postId ) {
  * Returns an action object used in signalling that attributes of the post have
  * been edited.
  *
- * @param {Object} edits   Post attributes to edit.
- * @param {Object} options Options for the edit.
+ * @param {Object} edits     Post attributes to edit.
+ * @param {Object} [options] Options for the edit.
  *
  * @example
  * ```js
@@ -195,7 +195,7 @@ export const editPost =
 /**
  * Action for saving the current post in the editor.
  *
- * @param {Object} options
+ * @param {Object} [options]
  */
 export const savePost =
 	( options = {} ) =>
@@ -375,7 +375,8 @@ export const trashPost =
  * autosaving (e.g. on the Web, the post might be committed to Session
  * Storage).
  *
- * @param {Object?} options Extra flags to identify the autosave.
+ * @param {Object}  [options]       Extra flags to identify the autosave.
+ * @param {boolean} [options.local] Whether to perform a local autosave.
  */
 export const autosave =
 	( { local = false, ...options } = {} ) =>
@@ -598,8 +599,8 @@ export function unlockPostAutosaving( lockName ) {
 /**
  * Returns an action object used to signal that the blocks have been updated.
  *
- * @param {Array}   blocks  Block Array.
- * @param {?Object} options Optional options.
+ * @param {Array}  blocks    Block Array.
+ * @param {Object} [options] Optional options.
  */
 export const resetEditorBlocks =
 	( blocks, options = {} ) =>
@@ -834,6 +835,9 @@ export const toggleDistractionFree =
 					.set( 'core', 'fixedToolbar', true );
 				dispatch.setIsInserterOpened( false );
 				dispatch.setIsListViewOpened( false );
+				unlock(
+					registry.dispatch( blockEditorStore )
+				).resetZoomLevel();
 			} );
 		}
 		registry.batch( () => {

package/src/store/private-selectors.js

@@ -20,13 +20,10 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import {
-	getRenderingMode,
-	getCurrentPost,
-	__experimentalGetDefaultTemplatePartAreas,
-} from './selectors';
+import { getRenderingMode, getCurrentPost } from './selectors';
 import {
 	getEntityActions as _getEntityActions,
+	getEntityFields as _getEntityFields,
 	isEntityReady as _isEntityReady,
 } from '../dataviews/store/private-selectors';
 
@@ -101,9 +98,13 @@ export const getPostIcon = createRegistrySelector(
 				postType === 'wp_template'
 			) {
 				return (
-					__experimentalGetDefaultTemplatePartAreas( state ).find(
-						( item ) => options.area === item.area
-					)?.icon || layout
+					(
+						select( coreStore ).getEntityRecord(
+							'root',
+							'__unstableBase'
+						)?.default_template_part_areas || []
+					).find( ( item ) => options.area === item.area )?.icon ||
+					layout
 				);
 			}
 			if ( CARD_ICONS[ postType ] ) {
@@ -171,6 +172,10 @@ export function isEntityReady( state, ...args ) {
 	return _isEntityReady( state.dataviews, ...args );
 }
 
+export function getEntityFields( state, ...args ) {
+	return _getEntityFields( state.dataviews, ...args );
+}
+
 /**
  * Similar to getBlocksByName in @wordpress/block-editor, but only returns the top-most
  * blocks that aren't descendants of the query block.

package/src/store/reducer.native.js

@@ -9,6 +9,7 @@ import { combineReducers } from '@wordpress/data';
 import {
 	postId,
 	postType,
+	renderingMode,
 	saving,
 	postLock,
 	postSavingLock,
@@ -82,6 +83,7 @@ export default combineReducers( {
 	postId,
 	postType,
 	postTitle,
+	renderingMode,
 	saving,
 	postLock,
 	postSavingLock,

package/src/store/selectors.js

@@ -12,7 +12,6 @@ import { addQueryArgs, cleanForSlug } from '@wordpress/url';
 import { createSelector, createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { Platform } from '@wordpress/element';
-import { layout } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -29,6 +28,7 @@ import {
 import { getPostRawValue } from './reducer';
 import { getTemplatePartIcon } from '../utils/get-template-part-icon';
 import { unlock } from '../lock-unlock';
+import { getTemplateInfo } from '../utils/get-template-info';
 
 /**
  * Shared reference to an empty object for cases where it is important to avoid
@@ -1702,16 +1702,20 @@ export const getBlockListSettings = getBlockEditorSelector(
 	'getBlockListSettings'
 );
 
-/**
- * Returns the default template types.
- *
- * @param {Object} state Global application state.
- *
- * @return {Object} The template types.
- */
-export function __experimentalGetDefaultTemplateTypes( state ) {
-	return getEditorSettings( state )?.defaultTemplateTypes;
-}
+export const __experimentalGetDefaultTemplateTypes = createRegistrySelector(
+	( select ) => () => {
+		deprecated(
+			"select('core/editor').__experimentalGetDefaultTemplateTypes",
+			{
+				since: '6.8',
+				alternative:
+					"select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.default_template_types",
+			}
+		);
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.default_template_types;
+	}
+);
 
 /**
  * Returns the default template part areas.
@@ -1720,15 +1724,26 @@ export function __experimentalGetDefaultTemplateTypes( state ) {
  *
  * @return {Array} The template part areas.
  */
-export const __experimentalGetDefaultTemplatePartAreas = createSelector(
-	( state ) => {
-		const areas =
-			getEditorSettings( state )?.defaultTemplatePartAreas ?? [];
-		return areas.map( ( item ) => {
-			return { ...item, icon: getTemplatePartIcon( item.icon ) };
-		} );
-	},
-	( state ) => [ getEditorSettings( state )?.defaultTemplatePartAreas ]
+export const __experimentalGetDefaultTemplatePartAreas = createRegistrySelector(
+	( select ) =>
+		createSelector( () => {
+			deprecated(
+				"select('core/editor').__experimentalGetDefaultTemplatePartAreas",
+				{
+					since: '6.8',
+					alternative:
+						"select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.default_template_part_areas",
+				}
+			);
+
+			const areas =
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
+
+			return areas.map( ( item ) => {
+				return { ...item, icon: getTemplatePartIcon( item.icon ) };
+			} );
+		} )
 );
 
 /**
@@ -1739,20 +1754,30 @@ export const __experimentalGetDefaultTemplatePartAreas = createSelector(
  *
  * @return {Object} The template type.
  */
-export const __experimentalGetDefaultTemplateType = createSelector(
-	( state, slug ) => {
-		const templateTypes = __experimentalGetDefaultTemplateTypes( state );
-		if ( ! templateTypes ) {
-			return EMPTY_OBJECT;
-		}
+export const __experimentalGetDefaultTemplateType = createRegistrySelector(
+	( select ) =>
+		createSelector( ( state, slug ) => {
+			deprecated(
+				"select('core/editor').__experimentalGetDefaultTemplateType",
+				{
+					since: '6.8',
+				}
+			);
+			const templateTypes = select( coreStore ).getEntityRecord(
+				'root',
+				'__unstableBase'
+			)?.default_template_types;
+
+			if ( ! templateTypes ) {
+				return EMPTY_OBJECT;
+			}
 
-		return (
-			Object.values( templateTypes ).find(
-				( type ) => type.slug === slug
-			) ?? EMPTY_OBJECT
-		);
-	},
-	( state ) => [ __experimentalGetDefaultTemplateTypes( state ) ]
+			return (
+				Object.values( templateTypes ).find(
+					( type ) => type.slug === slug
+				) ?? EMPTY_OBJECT
+			);
+		} )
 );
 
 /**
@@ -1763,38 +1788,31 @@ export const __experimentalGetDefaultTemplateType = createSelector(
  * @param {Object} template The template for which we need information.
  * @return {Object} Information about the template, including title, description, and icon.
  */
-export const __experimentalGetTemplateInfo = createSelector(
-	( state, template ) => {
-		if ( ! template ) {
-			return EMPTY_OBJECT;
-		}
+export const __experimentalGetTemplateInfo = createRegistrySelector(
+	( select ) =>
+		createSelector( ( state, template ) => {
+			deprecated( "select('core/editor').__experimentalGetTemplateInfo", {
+				since: '6.8',
+			} );
 
-		const { description, slug, title, area } = template;
-		const { title: defaultTitle, description: defaultDescription } =
-			__experimentalGetDefaultTemplateType( state, slug );
+			if ( ! template ) {
+				return EMPTY_OBJECT;
+			}
 
-		const templateTitle =
-			typeof title === 'string' ? title : title?.rendered;
-		const templateDescription =
-			typeof description === 'string' ? description : description?.raw;
-		const templateIcon =
-			__experimentalGetDefaultTemplatePartAreas( state ).find(
-				( item ) => area === item.area
-			)?.icon || layout;
+			const templateTypes =
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_types || [];
 
-		return {
-			title:
-				templateTitle && templateTitle !== slug
-					? templateTitle
-					: defaultTitle || slug,
-			description: templateDescription || defaultDescription,
-			icon: templateIcon,
-		};
-	},
-	( state ) => [
-		__experimentalGetDefaultTemplateTypes( state ),
-		__experimentalGetDefaultTemplatePartAreas( state ),
-	]
+			const templateAreas =
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
+
+			return getTemplateInfo( {
+				template,
+				templateAreas,
+				templateTypes,
+			} );
+		} )
 );
 
 /**