@wordpress/editor 14.12.0 → 14.13.0

package/src/components/collab-sidebar/comment-author-info.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Render author information for a comment.
+ *
+ * @param {Object} props        - Component properties.
+ * @param {string} props.avatar - URL of the author's avatar.
+ * @param {string} props.name   - Name of the author.
+ * @param {string} props.date   - Date of the comment.
+ *
+ * @return {React.ReactNode} The JSX element representing the author's information.
+ */
+function CommentAuthorInfo( { avatar, name, date } ) {
+	const dateSettings = getDateSettings();
+	const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
+		'root',
+		'site',
+		'time_format'
+	);
+
+	const { currentUserAvatar, currentUserName } = useSelect( ( select ) => {
+		const userData = select( coreStore ).getCurrentUser();
+
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+		return {
+			currentUserAvatar: userData?.avatar_urls[ 48 ] ?? defaultAvatar,
+			currentUserName: userData?.name,
+		};
+	}, [] );
+
+	const currentDate = new Date();
+
+	return (
+		<>
+			<img
+				src={ avatar ?? currentUserAvatar }
+				className="editor-collab-sidebar-panel__user-avatar"
+				// translators: alt text for user avatar image
+				alt={ __( 'User avatar' ) }
+				width={ 32 }
+				height={ 32 }
+			/>
+			<VStack spacing="0">
+				<span className="editor-collab-sidebar-panel__user-name">
+					{ name ?? currentUserName }
+				</span>
+				<time
+					dateTime={ dateI18n( 'c', date ?? currentDate ) }
+					className="editor-collab-sidebar-panel__user-time"
+				>
+					{ dateI18n( dateTimeFormat, date ?? currentDate ) }
+				</time>
+			</VStack>
+		</>
+	);
+}
+
+export default CommentAuthorInfo;

package/src/components/collab-sidebar/comment-button-toolbar.js

@@ -11,18 +11,18 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { unlock } from '../../lock-unlock';
 
-const { __unstableCommentIconToolbarFill } = unlock( blockEditorPrivateApis );
+const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
 const AddCommentToolbarButton = ( { onClick } ) => {
 	return (
-		<__unstableCommentIconToolbarFill>
+		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
 				accessibleWhenDisabled
 				icon={ commentIcon }
 				label={ _x( 'Comment', 'View comment' ) }
 				onClick={ onClick }
 			/>
-		</__unstableCommentIconToolbarFill>
+		</CommentIconToolbarSlotFill.Fill>
 	);
 };
 

package/src/components/collab-sidebar/comment-button.js

@@ -12,11 +12,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { unlock } from '../../lock-unlock';
 
-const { __unstableCommentIconFill } = unlock( blockEditorPrivateApis );
+const { CommentIconSlotFill } = unlock( blockEditorPrivateApis );
 
 const AddCommentButton = ( { onClick } ) => {
 	return (
-		<__unstableCommentIconFill>
+		<CommentIconSlotFill.Fill>
 			<MenuItem
 				icon={ commentIcon }
 				onClick={ onClick }
@@ -24,7 +24,7 @@ const AddCommentButton = ( { onClick } ) => {
 			>
 				{ _x( 'Comment', 'Add comment button' ) }
 			</MenuItem>
-		</__unstableCommentIconFill>
+		</CommentIconSlotFill.Fill>
 	);
 };
 

package/src/components/collab-sidebar/comment-form.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	Button,
+	TextareaControl,
+} from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { sanitizeCommentString } from './utils';
+
+/**
+ * EditComment component.
+ *
+ * @param {Object}   props                  - The component props.
+ * @param {Function} props.onSubmit         - The function to call when updating the comment.
+ * @param {Function} props.onCancel         - The function to call when canceling the comment update.
+ * @param {Object}   props.thread           - The comment thread object.
+ * @param {string}   props.submitButtonText - The text to display on the submit button.
+ * @return {React.ReactNode} The CommentForm component.
+ */
+function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
+	const [ inputComment, setInputComment ] = useState(
+		thread?.content?.raw ?? ''
+	);
+
+	return (
+		<>
+			<TextareaControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				value={ inputComment ?? '' }
+				onChange={ setInputComment }
+			/>
+			<HStack alignment="left" spacing="3" justify="flex-start">
+				<Button
+					__next40pxDefaultSize
+					accessibleWhenDisabled
+					variant="primary"
+					onClick={ () => onSubmit( inputComment ) }
+					disabled={
+						0 === sanitizeCommentString( inputComment ).length
+					}
+					text={ submitButtonText }
+				/>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ onCancel }
+					text={ _x( 'Cancel', 'Cancel comment button' ) }
+				/>
+			</HStack>
+		</>
+	);
+}
+
+export default CommentForm;

package/src/components/collab-sidebar/comments.js

@@ -13,24 +13,18 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	Button,
 	DropdownMenu,
-	TextareaControl,
 	Tooltip,
 } from '@wordpress/components';
-import {
-	dateI18n,
-	format,
-	getSettings as getDateSettings,
-} from '@wordpress/date';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString } from './utils';
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
 
 /**
  * Renders the Comments component.
@@ -41,7 +35,7 @@ import { sanitizeCommentString } from './utils';
  * @param {Function} props.onAddReply       - The function to add a reply to a comment.
  * @param {Function} props.onCommentDelete  - The function to delete a comment.
  * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.
- * @return {JSX.Element} The rendered Comments component.
+ * @return {React.ReactNode} The rendered Comments component.
  */
 export function Comments( {
 	threads,
@@ -127,6 +121,7 @@ export function Comments( {
 									} }
 									onCancel={ () => setActionState( false ) }
 									thread={ thread }
+									submitButtonText={ _x( 'Update', 'verb' ) }
 								/>
 							) }
 						{ ( ! actionState ||
@@ -209,14 +204,33 @@ export function Comments( {
 						spacing="3"
 					>
 						<CommentBoard thread={ thread } />
+						{ 0 < thread?.reply?.length &&
+							thread.reply.map( ( reply ) => (
+								<VStack
+									key={ reply.id }
+									className="editor-collab-sidebar-panel__child-thread"
+									id={ reply.id }
+									spacing="2"
+								>
+									<CommentBoard
+										thread={ reply }
+										parentThread={ thread }
+									/>
+								</VStack>
+							) ) }
 						{ 'reply' === actionState?.action &&
 							thread.id === actionState?.id && (
-								<HStack
-									alignment="left"
-									spacing="3"
-									justify="flex-start"
-									className="editor-collab-sidebar-panel__user-comment"
+								<VStack
+									className="editor-collab-sidebar-panel__child-thread"
+									spacing="2"
 								>
+									<HStack
+										alignment="left"
+										spacing="3"
+										justify="flex-start"
+									>
+										<CommentAuthorInfo />
+									</HStack>
 									<VStack
 										spacing="3"
 										className="editor-collab-sidebar-panel__comment-field"
@@ -232,75 +246,20 @@ export function Comments( {
 											onCancel={ () =>
 												setActionState( false )
 											}
+											submitButtonText={ _x(
+												'Reply',
+												'Add reply comment'
+											) }
 										/>
 									</VStack>
-								</HStack>
-							) }
-						{ 0 < thread?.reply?.length &&
-							thread.reply.map( ( reply ) => (
-								<VStack
-									key={ reply.id }
-									className="editor-collab-sidebar-panel__child-thread"
-									id={ reply.id }
-									spacing="2"
-								>
-									<CommentBoard
-										thread={ reply }
-										parentThread={ thread }
-									/>
 								</VStack>
-							) ) }
+							) }
 					</VStack>
 				) ) }
 		</>
 	);
 }
 
-/**
- * EditComment component.
- *
- * @param {Object}   props          - The component props.
- * @param {Function} props.onSubmit - The function to call when updating the comment.
- * @param {Function} props.onCancel - The function to call when canceling the comment update.
- * @param {Object}   props.thread   - The comment thread object.
- * @return {JSX.Element} The CommentForm component.
- */
-function CommentForm( { onSubmit, onCancel, thread } ) {
-	const [ inputComment, setInputComment ] = useState(
-		thread?.content?.raw ?? ''
-	);
-
-	return (
-		<>
-			<TextareaControl
-				__nextHasNoMarginBottom
-				value={ inputComment ?? '' }
-				onChange={ setInputComment }
-			/>
-			<VStack alignment="left" spacing="3" justify="flex-start">
-				<HStack alignment="left" spacing="3" justify="flex-start">
-					<Button
-						__next40pxDefaultSize
-						accessibleWhenDisabled
-						variant="primary"
-						onClick={ () => onSubmit( inputComment ) }
-						disabled={
-							0 === sanitizeCommentString( inputComment ).length
-						}
-					>
-						{ thread
-							? _x( 'Update', 'verb' )
-							: _x( 'Reply', 'Add reply comment' ) }
-					</Button>
-					<Button __next40pxDefaultSize onClick={ onCancel }>
-						{ _x( 'Cancel', 'Cancel comment edit' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		</>
-	);
-}
-
 /**
  * Renders the header of a comment in the collaboration sidebar.
  *
@@ -311,7 +270,7 @@ function CommentForm( { onSubmit, onCancel, thread } ) {
  * @param {Function} props.onDelete  - The function to delete the comment.
  * @param {Function} props.onReply   - The function to reply to the comment.
  * @param {string}   props.status    - The status of the comment.
- * @return {JSX.Element} The rendered comment header.
+ * @return {React.ReactNode} The rendered comment header.
  */
 function CommentHeader( {
 	thread,
@@ -321,13 +280,6 @@ function CommentHeader( {
 	onReply,
 	status,
 } ) {
-	const dateSettings = getDateSettings();
-	const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
-		'root',
-		'site',
-		'time_format'
-	);
-
 	const actions = [
 		{
 			title: _x( 'Edit', 'Edit comment' ),
@@ -347,29 +299,15 @@ function CommentHeader( {
 
 	return (
 		<HStack alignment="left" spacing="3" justify="flex-start">
-			<img
-				src={ thread?.author_avatar_urls?.[ 48 ] }
-				className="editor-collab-sidebar-panel__user-avatar"
-				// translators: alt text for user avatar image
-				alt={ __( 'User avatar' ) }
-				width={ 32 }
-				height={ 32 }
+			<CommentAuthorInfo
+				avatar={ thread?.author_avatar_urls?.[ 48 ] }
+				name={ thread?.author_name }
+				date={ thread?.date }
 			/>
-			<VStack spacing="0">
-				<span className="editor-collab-sidebar-panel__user-name">
-					{ thread.author_name }
-				</span>
-				<time
-					dateTime={ format( 'h:i A', thread.date ) }
-					className="editor-collab-sidebar-panel__user-time"
-				>
-					{ dateI18n( dateTimeFormat, thread.date ) }
-				</time>
-			</VStack>
 			<span className="editor-collab-sidebar-panel__comment-status">
 				{ status !== 'approved' && (
 					<HStack alignment="right" justify="flex-end" spacing="0">
-						{ 0 === thread.parent && onResolve && (
+						{ 0 === thread?.parent && onResolve && (
 							<Button
 								label={ _x(
 									'Resolve',

package/src/components/create-template-part-modal/index.js

@@ -27,7 +27,6 @@ import { serialize } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
@@ -81,9 +80,11 @@ export function CreateTemplatePartModalContents( {
 
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
 		[]
 	);
+
 	async function createTemplatePart() {
 		if ( ! title || isSubmitting ) {
 			return;

package/src/components/document-bar/index.js

@@ -29,6 +29,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { TEMPLATE_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
+import { getTemplateInfo } from '../../utils/get-template-info';
 
 /** @typedef {import("@wordpress/components").IconType} IconType */
 
@@ -49,7 +50,7 @@ const MotionButton = motion( Button );
  * @param {IconType} props.icon  An icon for the document, no default.
  *                               (A default icon indicating the document post type is no longer used.)
  *
- * @return {JSX.Element} The rendered DocumentBar component.
+ * @return {React.ReactNode} The rendered DocumentBar component.
  */
 export default function DocumentBar( props ) {
 	const {
@@ -65,9 +66,9 @@ export default function DocumentBar( props ) {
 			getCurrentPostType,
 			getCurrentPostId,
 			getEditorSettings,
-			__experimentalGetTemplateInfo: getTemplateInfo,
 			getRenderingMode,
 		} = select( editorStore );
+
 		const {
 			getEditedEntityRecord,
 			getPostType,
@@ -80,7 +81,15 @@ export default function DocumentBar( props ) {
 			_postType,
 			_postId
 		);
-		const _templateInfo = getTemplateInfo( _document );
+
+		const { default_template_types: templateTypes = [] } =
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) ??
+			{};
+
+		const _templateInfo = getTemplateInfo( {
+			templateTypes,
+			template: _document,
+		} );
 		const _postTypeLabel = getPostType( _postType )?.labels?.singular_name;
 
 		return {

package/src/components/document-outline/check.js

@@ -7,10 +7,10 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Component check if there are any headings (core/heading blocks) present in the document.
  *
- * @param {Object}  props          Props.
- * @param {Element} props.children Children to be rendered.
+ * @param {Object}             props          Props.
+ * @param {React.ReactElement} props.children Children to be rendered.
  *
- * @return {Component|null} The component to be rendered or null if there are headings.
+ * @return {React.ReactElement} The component to be rendered or null if there are headings.
  */
 export default function DocumentOutlineCheck( { children } ) {
 	const hasHeadings = useSelect( ( select ) => {
@@ -19,7 +19,7 @@ export default function DocumentOutlineCheck( { children } ) {
 		return getGlobalBlockCount( 'core/heading' ) > 0;
 	} );
 
-	if ( hasHeadings ) {
+	if ( ! hasHeadings ) {
 		return null;
 	}
 

package/src/components/document-outline/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
 import { create, getTextContent } from '@wordpress/rich-text';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -102,19 +103,17 @@ const isEmptyHeading = ( heading ) =>
  * Renders a document outline component.
  *
  * @param {Object}   props                         Props.
- * @param {Function} props.onSelect                Function to be called when an outline item is selected.
- * @param {boolean}  props.isTitleSupported        Indicates whether the title is supported.
+ * @param {Function} props.onSelect                Function to be called when an outline item is selected
  * @param {boolean}  props.hasOutlineItemsDisabled Indicates whether the outline items are disabled.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function DocumentOutline( {
 	onSelect,
-	isTitleSupported,
 	hasOutlineItemsDisabled,
 } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { blocks, title } = useSelect( ( select ) => {
+	const { blocks, title, isTitleSupported } = useSelect( ( select ) => {
 		const { getBlocks } = select( blockEditorStore );
 		const { getEditedPostAttribute } = select( editorStore );
 		const { getPostType } = select( coreStore );
@@ -127,6 +126,8 @@ export default function DocumentOutline( {
 		};
 	} );
 
+	const prevHeadingLevelRef = useRef( 1 );
+
 	const headings = computeOutlineHeadings( blocks );
 	if ( headings.length < 1 ) {
 		return (
@@ -141,8 +142,6 @@ export default function DocumentOutline( {
 		);
 	}
 
-	let prevHeadingLevel = 1;
-
 	// Not great but it's the simplest way to locate the title right now.
 	const titleNode = document.querySelector( '.editor-post-title__input' );
 	const hasTitle = isTitleSupported && title && titleNode;
@@ -172,7 +171,8 @@ export default function DocumentOutline( {
 				{ headings.map( ( item, index ) => {
 					// Headings remain the same, go up by one, or down by any amount.
 					// Otherwise there are missing levels.
-					const isIncorrectLevel = item.level > prevHeadingLevel + 1;
+					const isIncorrectLevel =
+						item.level > prevHeadingLevelRef.current + 1;
 
 					const isValid =
 						! item.isEmpty &&
@@ -180,7 +180,7 @@ export default function DocumentOutline( {
 						!! item.level &&
 						( item.level !== 1 ||
 							( ! hasMultipleH1 && ! hasTitle ) );
-					prevHeadingLevel = item.level;
+					prevHeadingLevelRef.current = item.level;
 
 					return (
 						<DocumentOutlineItem

package/src/components/document-tools/index.js

@@ -60,8 +60,9 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
 			showTools:
-				getRenderingMode() !== 'post-only' ||
-				getCurrentPostType() === 'wp_template',
+				!! window?.__experimentalEditorWriteMode &&
+				( getRenderingMode() !== 'post-only' ||
+					getCurrentPostType() === 'wp_template' ),
 		};
 	}, [] );
 

package/src/components/editor-history/redo.js

@@ -50,6 +50,6 @@ function EditorHistoryRedo( props, ref ) {
  * @param {Object} props - Props.
  * @param {Ref}    ref   - Forwarded ref.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 export default forwardRef( EditorHistoryRedo );

package/src/components/editor-history/undo.js

@@ -46,6 +46,6 @@ function EditorHistoryUndo( props, ref ) {
  * @param {Object} props - Props.
  * @param {Ref}    ref   - Forwarded ref.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 export default forwardRef( EditorHistoryUndo );

package/src/components/editor-interface/content-slot-fill.js

@@ -1,15 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { createSlotFill } from '@wordpress/components';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { createPrivateSlotFill } = unlock( componentsPrivateApis );
-const SLOT_FILL_NAME = 'EditCanvasContainerSlot';
-const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME );
+const EditorContentSlotFill = createSlotFill(
+	Symbol( 'EditCanvasContainerSlot' )
+);
 
 export default EditorContentSlotFill;

package/src/components/editor-interface/index.js

@@ -10,11 +10,7 @@ import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
 import { useSelect } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	store as blockEditorStore,
-	BlockBreadcrumb,
-	BlockToolbar,
-} from '@wordpress/block-editor';
+import { BlockBreadcrumb, BlockToolbar } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 import { useState, useCallback } from '@wordpress/element';
 
@@ -31,8 +27,6 @@ import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditorContentSlotFill from './content-slot-fill';
 
-import { unlock } from '../../lock-unlock';
-
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
 	header: __( 'Editor top bar' ),
@@ -69,13 +63,11 @@ export default function EditorInterface( {
 		isPreviewMode,
 		showBlockBreadcrumbs,
 		documentLabel,
-		isZoomOut,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
-		const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
 
 		return {
 			mode: select( editorStore ).getEditorMode(),
@@ -88,7 +80,6 @@ export default function EditorInterface( {
 			documentLabel:
 				// translators: Default label for the Document in the Block Breadcrumb.
 				postTypeLabel || _x( 'Document', 'noun, breadcrumb' ),
-			isZoomOut: _isZoomOut(),
 		};
 	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -197,7 +188,6 @@ export default function EditorInterface( {
 				isLargeViewport &&
 				showBlockBreadcrumbs &&
 				isRichEditingEnabled &&
-				! isZoomOut &&
 				mode === 'visual' && (
 					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)

package/src/components/editor-notices/index.js

@@ -18,7 +18,7 @@ import TemplateValidationNotice from '../template-validation-notice';
  * <EditorNotices />
  * ```
  *
- * @return {JSX.Element} The rendered EditorNotices component.
+ * @return {React.ReactNode} The rendered EditorNotices component.
  */
 export function EditorNotices() {
 	const { notices } = useSelect(

package/src/components/editor-snackbars/index.js

@@ -11,7 +11,7 @@ const MAX_VISIBLE_NOTICES = -3;
 /**
  * Renders the editor snackbars component.
  *
- * @return {JSX.Element} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function EditorSnackbars() {
 	const notices = useSelect(