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

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

@@ -9,7 +9,6 @@ import {
 	__experimentalBlockPatternsList as BlockPatternsList,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import { __unstableSerializeAndClean } from '@wordpress/blocks';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -66,7 +65,6 @@ export function useStartPatterns() {
 }
 
 function PatternSelection( { blockPatterns, onChoosePattern } ) {
-	const shownBlockPatterns = useAsyncList( blockPatterns );
 	const { editEntityRecord } = useDispatch( coreStore );
 	const { postType, postId } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
@@ -79,7 +77,6 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) {
 	return (
 		<BlockPatternsList
 			blockPatterns={ blockPatterns }
-			shownPatterns={ shownBlockPatterns }
 			onClickPattern={ ( _pattern, blocks ) => {
 				editEntityRecord( 'postType', postType, postId, {
 					blocks,

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

@@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 
@@ -111,11 +110,9 @@ function useStartPatterns( fallbackContent ) {
 function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
 	const blockPatterns = useStartPatterns( fallbackContent );
-	const shownBlockPatterns = useAsyncList( blockPatterns );
 	return (
 		<BlockPatternsList
 			blockPatterns={ blockPatterns }
-			shownPatterns={ shownBlockPatterns }
 			onClickPattern={ ( pattern, blocks ) => {
 				onChange( blocks, { selection: undefined } );
 				onChoosePattern();

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/visual-editor/index.js

@@ -462,7 +462,13 @@ function VisualEditor( {
 								renderingMode !== 'post-only' ||
 									isDesignPostType
 									? 'wp-site-blocks'
-									: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+									: `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules.
+								{
+									'has-global-padding':
+										renderingMode === 'post-only' &&
+										! isDesignPostType &&
+										hasRootPaddingAwareAlignments,
+								}
 							) }
 							layout={ blockListLayout }
 							dropZoneElement={

package/src/components/visual-editor/style.scss

@@ -1,8 +1,19 @@
 .editor-visual-editor {
 	position: relative;
 	display: flex;
+
+	// This duplicates the iframe background but it's necessary in some situations
+	// when the iframe doesn't cover the whole canvas
+	// like the "focused entities".
 	background-color: $gray-300;
 
+	// This overrides the iframe background since it's applied again here
+	// It also prevents some style glitches if `editor-visual-editor`
+	// like when hovering the preview in the site editor.
+	iframe[name="editor-canvas"] {
+		background-color: transparent;
+	}
+
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 

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 = {} ) =>
@@ -812,9 +813,12 @@ export function setIsListViewOpened( isOpen ) {
  * Action that toggles Distraction free mode.
  * Distraction free mode expects there are no sidebars, as due to the
  * z-index values set, you can't close sidebars.
+ *
+ * @param {Object}  [options={}]                Optional configuration object
+ * @param {boolean} [options.createNotice=true] Whether to create a notice
  */
 export const toggleDistractionFree =
-	() =>
+	( { createNotice = true } = {} ) =>
 	( { dispatch, registry } ) => {
 		const isDistractionFree = registry
 			.select( preferencesStore )
@@ -831,48 +835,125 @@ export const toggleDistractionFree =
 					.set( 'core', 'fixedToolbar', true );
 				dispatch.setIsInserterOpened( false );
 				dispatch.setIsListViewOpened( false );
+				unlock(
+					registry.dispatch( blockEditorStore )
+				).resetZoomLevel();
 			} );
 		}
 		registry.batch( () => {
 			registry
 				.dispatch( preferencesStore )
 				.set( 'core', 'distractionFree', ! isDistractionFree );
-			registry
-				.dispatch( noticesStore )
-				.createInfoNotice(
-					isDistractionFree
-						? __( 'Distraction free mode deactivated.' )
-						: __( 'Distraction free mode activated.' ),
-					{
-						id: 'core/editor/distraction-free-mode/notice',
-						type: 'snackbar',
-						actions: [
-							{
-								label: __( 'Undo' ),
-								onClick: () => {
-									registry.batch( () => {
-										registry
-											.dispatch( preferencesStore )
-											.set(
-												'core',
-												'fixedToolbar',
-												isDistractionFree ? true : false
-											);
-										registry
-											.dispatch( preferencesStore )
-											.toggle(
-												'core',
-												'distractionFree'
-											);
-									} );
+
+			if ( createNotice ) {
+				registry
+					.dispatch( noticesStore )
+					.createInfoNotice(
+						isDistractionFree
+							? __( 'Distraction free mode deactivated.' )
+							: __( 'Distraction free mode activated.' ),
+						{
+							id: 'core/editor/distraction-free-mode/notice',
+							type: 'snackbar',
+							actions: [
+								{
+									label: __( 'Undo' ),
+									onClick: () => {
+										registry.batch( () => {
+											registry
+												.dispatch( preferencesStore )
+												.set(
+													'core',
+													'fixedToolbar',
+													isDistractionFree
+												);
+											registry
+												.dispatch( preferencesStore )
+												.toggle(
+													'core',
+													'distractionFree'
+												);
+										} );
+									},
 								},
-							},
-						],
-					}
-				);
+							],
+						}
+					);
+			}
 		} );
 	};
 
+/**
+ * Action that toggles the Spotlight Mode view option.
+ */
+export const toggleSpotlightMode =
+	() =>
+	( { registry } ) => {
+		registry.dispatch( preferencesStore ).toggle( 'core', 'focusMode' );
+
+		const isFocusMode = registry
+			.select( preferencesStore )
+			.get( 'core', 'focusMode' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isFocusMode
+					? __( 'Spotlight mode activated.' )
+					: __( 'Spotlight mode deactivated.' ),
+				{
+					id: 'core/editor/toggle-spotlight-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'focusMode' );
+							},
+						},
+					],
+				}
+			);
+	};
+
+/**
+ * Action that toggles the Top Toolbar view option.
+ */
+export const toggleTopToolbar =
+	() =>
+	( { registry } ) => {
+		registry.dispatch( preferencesStore ).toggle( 'core', 'fixedToolbar' );
+
+		const isTopToolbar = registry
+			.select( preferencesStore )
+			.get( 'core', 'fixedToolbar' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isTopToolbar
+					? __( 'Top toolbar activated.' )
+					: __( 'Top toolbar deactivated.' ),
+				{
+					id: 'core/editor/toggle-top-toolbar/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'fixedToolbar' );
+							},
+						},
+					],
+				}
+			);
+	};
+
 /**
  * Triggers an action used to switch editor mode.
  *