@wordpress/editor 14.33.3-next.36001005c.0 → 14.33.3

package/src/bindings/term-data.js

@@ -195,30 +195,15 @@ export default {
 		return false;
 	},
 	getFieldsList( { select, context } ) {
-		// Deprecated, will be removed after 6.9.
-		return getTermDataFields( select, context );
-	},
-	editorUI( { select, context } ) {
-		const selectedBlock = select( blockEditorStore ).getSelectedBlock();
-		// Exit early for navigation blocks (read-only)
-		if ( NAVIGATION_BLOCK_TYPES.includes( selectedBlock?.name ) ) {
-			return {};
+		const clientId = select( blockEditorStore ).getSelectedBlockClientId();
+		const termDataFields = getTermDataFields( select, context, clientId );
+		if ( ! termDataFields ) {
+			return [];
 		}
-		const termDataFields = Object.entries(
-			getTermDataFields( select, context ) || {}
-		).map( ( [ key, field ] ) => ( {
+		return Object.entries( termDataFields ).map( ( [ key, field ] ) => ( {
 			label: field.label,
 			type: field.type,
-			args: {
-				field: key,
-			},
+			args: { field: key },
 		} ) );
-		/*
-		 * We need to define the data as [{ label: string, value: any, type: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation }]
-		 */
-		return {
-			mode: 'dropdown',
-			data: termDataFields,
-		};
 	},
 };

package/src/components/block-settings-menu/content-only-settings-menu.js

@@ -0,0 +1,185 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockSettingsMenuControls,
+	__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalText as Text, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import usePostContentBlocks from '../provider/use-post-content-blocks';
+
+function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+	const postContentBlocks = usePostContentBlocks();
+	const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect(
+		( select ) => {
+			const {
+				getBlockParentsByBlockName,
+				getSettings,
+				getBlockAttributes,
+				getBlockParents,
+			} = select( blockEditorStore );
+			const { getCurrentTemplateId, getRenderingMode } =
+				select( editorStore );
+			const patternParent = getBlockParentsByBlockName(
+				clientId,
+				'core/block',
+				true
+			)[ 0 ];
+
+			let record;
+			if ( patternParent ) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					getBlockAttributes( patternParent ).ref
+				);
+			} else if (
+				getRenderingMode() === 'template-locked' &&
+				! getBlockParents( clientId ).some( ( parent ) =>
+					postContentBlocks.includes( parent )
+				)
+			) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_template',
+					getCurrentTemplateId()
+				);
+			}
+			if ( ! record ) {
+				return {};
+			}
+			const _canEditTemplates = select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} );
+			return {
+				canEditTemplates: _canEditTemplates,
+				entity: record,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId, postContentBlocks ]
+	);
+
+	if ( ! entity ) {
+		return (
+			<TemplateLockContentOnlyMenuItems
+				clientId={ clientId }
+				onClose={ onClose }
+			/>
+		);
+	}
+
+	const isPattern = entity.type === 'wp_block';
+	let helpText = isPattern
+		? __(
+				'Edit the pattern to move, delete, or make further changes to this block.'
+		  )
+		: __(
+				'Edit the template to move, delete, or make further changes to this block.'
+		  );
+
+	if ( ! canEditTemplates ) {
+		helpText = __(
+			'Only users with permissions to edit the template can move or delete this block'
+		);
+	}
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						onNavigateToEntityRecord( {
+							postId: entity.id,
+							postType: entity.type,
+						} );
+					} }
+					disabled={ ! canEditTemplates }
+				>
+					{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ helpText }
+			</Text>
+		</>
+	);
+}
+
+function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {
+	const { contentLockingParent } = useSelect(
+		( select ) => {
+			const { getContentLockingParent } = unlock(
+				select( blockEditorStore )
+			);
+			return {
+				contentLockingParent: getContentLockingParent( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const blockDisplayInformation =
+		useBlockDisplayInformation( contentLockingParent );
+	const blockEditorActions = useDispatch( blockEditorStore );
+	if ( ! blockDisplayInformation?.title ) {
+		return null;
+	}
+
+	const { modifyContentLockBlock } = unlock( blockEditorActions );
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						modifyContentLockBlock( contentLockingParent );
+						onClose();
+					} }
+				>
+					{ _x( 'Unlock', 'Unlock content locked blocks' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ __(
+					'Temporarily unlock the parent block to edit, delete or make further changes to this block.'
+				) }
+			</Text>
+		</>
+	);
+}
+
+export default function ContentOnlySettingsMenu() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) =>
+				selectedClientIds.length === 1 && (
+					<ContentOnlySettingsMenuItems
+						clientId={ selectedClientIds[ 0 ] }
+						onClose={ onClose }
+					/>
+				)
+			}
+		</BlockSettingsMenuControls>
+	);
+}

package/src/components/block-settings-menu/content-only-settings-menu.native.js

@@ -0,0 +1,4 @@
+// Render nothing in native for now.
+export default function ContentOnlySettingsMenu() {
+	return null;
+}

package/src/components/block-settings-menu/style.scss

@@ -0,0 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-content-only-settings-menu__description {
+	padding: $grid-unit;
+	min-width: 235px;
+}

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

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -18,7 +22,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
-import { focusCommentThread } from './utils';
+import { focusCommentThread, noop } from './utils';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 
@@ -27,6 +31,10 @@ export function AddComment( {
 	showCommentBoard,
 	setShowCommentBoard,
 	commentSidebarRef,
+	reflowComments = noop,
+	isFloating = false,
+	y,
+	refs,
 } ) {
 	const { clientId, blockCommentId } = useSelect( ( select ) => {
 		const { getSelectedBlock } = select( blockEditorStore );
@@ -44,10 +52,29 @@ export function AddComment( {
 
 	return (
 		<VStack
-			className="editor-collab-sidebar-panel__thread is-selected"
+			className={ clsx(
+				'editor-collab-sidebar-panel__thread is-selected',
+				{
+					'is-floating': isFloating,
+				}
+			) }
 			spacing="3"
 			tabIndex={ 0 }
+			aria-label={ __( 'New note' ) }
 			role="listitem"
+			ref={ isFloating ? refs.setFloating : undefined }
+			style={
+				isFloating
+					? // Delay showing the floating note box until a Y position is known to prevent blink.
+					  { top: y, opacity: ! y ? 0 : undefined }
+					: undefined
+			}
+			onBlur={ ( event ) => {
+				if ( event.currentTarget.contains( event.relatedTarget ) ) {
+					return;
+				}
+				setShowCommentBoard( false );
+			} }
 		>
 			<HStack alignment="left" spacing="3">
 				<CommentAuthorInfo />
@@ -62,8 +89,9 @@ export function AddComment( {
 					setShowCommentBoard( false );
 					blockElement?.focus();
 				} }
+				reflowComments={ reflowComments }
 				submitButtonText={ __( 'Add note' ) }
-				labelText={ __( 'New Note' ) }
+				labelText={ __( 'New note' ) }
 			/>
 		</VStack>
 	);

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

@@ -6,11 +6,6 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * Internal dependencies
  */
@@ -19,7 +14,7 @@ import { getAvatarBorderColor } from './utils';
 
 const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
-const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
+const CommentAvatarIndicator = ( { onClick, thread } ) => {
 	const threadParticipants = useMemo( () => {
 		if ( ! thread ) {
 			return [];
@@ -34,15 +29,13 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		allComments.forEach( ( comment ) => {
 			// Track thread participants (original commenter + repliers).
 			if ( comment.author_name && comment.author_avatar_urls ) {
-				const authorKey = `${ comment.author }-${ comment.author_name }`;
-				if ( ! participantsMap.has( authorKey ) ) {
-					participantsMap.set( authorKey, {
+				if ( ! participantsMap.has( comment.author ) ) {
+					participantsMap.set( comment.author, {
 						name: comment.author_name,
 						avatar:
 							comment.author_avatar_urls?.[ '48' ] ||
 							comment.author_avatar_urls?.[ '96' ],
 						id: comment.author,
-						isOriginalCommenter: comment.id === thread.id,
 						date: comment.date,
 					} );
 				}
@@ -52,14 +45,6 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		return Array.from( participantsMap.values() );
 	}, [ thread ] );
 
-	const hasUnresolved = thread?.status !== 'approved';
-
-	// Check if this specific thread has more participants due to pagination.
-	// If we have pagination AND this thread + its replies equals or exceeds the API limit,
-	// then this thread likely has more participants that weren't loaded.
-	const threadHasMoreParticipants =
-		hasMoreComments && thread?.reply && 1 + thread.reply.length >= 100;
-
 	if ( ! threadParticipants.length ) {
 		return null;
 	}
@@ -68,6 +53,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 	const maxAvatars = 3;
 	const visibleParticipants = threadParticipants.slice( 0, maxAvatars );
 	const overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );
+	const threadHasMoreParticipants = threadParticipants.length > 100;
 
 	// If we hit the comment limit, show "100+" instead of exact overflow count.
 	const overflowText =
@@ -95,9 +81,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
-				className={ clsx( 'comment-avatar-indicator', {
-					'has-unresolved': hasUnresolved,
-				} ) }
+				className="comment-avatar-indicator"
 				label={ __( 'View notes' ) }
 				onClick={ onClick }
 				showTooltip
@@ -105,7 +89,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 				<div className="comment-avatar-stack">
 					{ visibleParticipants.map( ( participant, index ) => (
 						<img
-							key={ participant.name + index }
+							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"

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

@@ -6,7 +6,13 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	RawHTML,
+	useEffect,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
@@ -33,32 +39,19 @@ import {
 import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
-import { getCommentExcerpt, focusCommentThread } from './utils';
+import { focusCommentThread, getCommentExcerpt } from './utils';
 import { useFloatingThread } from './hooks';
+import { AddComment } from './add-comment';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
 
-/**
- * Renders the Comments component.
- *
- * @param {Object}   props                     - The component props.
- * @param {Array}    props.threads             - The array of comment threads.
- * @param {Function} props.onEditComment       - The function to handle comment editing.
- * @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.setShowCommentBoard - The function to set the comment board visibility.
- * @param {Ref}      props.commentSidebarRef   - The ref to the comment sidebar.
- * @param {Function} props.reflowComments      - The function to call indicating a comment is updated.
- * @param {boolean}  props.isFloating          - Whether the comment thread is floating.
- * @param {number}   props.commentLastUpdated  - Timestamp of the last comment update.
- * @return {React.ReactNode} The rendered Comments component.
- */
 export function Comments( {
-	threads,
+	threads: noteThreads,
 	onEditComment,
 	onAddReply,
 	onCommentDelete,
+	showCommentBoard,
 	setShowCommentBoard,
 	commentSidebarRef,
 	reflowComments,
@@ -70,20 +63,62 @@ export function Comments( {
 	const [ boardOffsets, setBoardOffsets ] = useState( {} );
 	const [ blockRefs, setBlockRefs ] = useState( {} );
 
-	const { blockCommentId, selectedBlockClientId } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const clientId = getSelectedBlockClientId();
-		return {
-			blockCommentId: clientId
-				? getBlockAttributes( clientId )?.metadata?.noteId
-				: null,
-			selectedBlockClientId: clientId,
-		};
-	}, [] );
+	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
+		useSelect( ( select ) => {
+			const { getBlockAttributes, getSelectedBlockClientId } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				blockCommentId: clientId
+					? getBlockAttributes( clientId )?.metadata?.noteId
+					: null,
+				selectedBlockClientId: clientId,
+				orderedBlockIds: select( blockEditorStore ).getBlockOrder(),
+			};
+		}, [] );
 
 	const relatedBlockElement = useBlockElement( selectedBlockClientId );
 
+	const threads = useMemo( () => {
+		const t = [ ...noteThreads ];
+		const orderedThreads = [];
+		// In floating mode, when the note board is shown, and as long
+		// as the selected block doesn't have an existing note attached -
+		// add a "new note" entry to the threads. This special thread type
+		// gets sorted and floated like regular threads, but shows an AddComment
+		// component instead of a regular comment thread.
+		if ( isFloating && showCommentBoard && undefined === blockCommentId ) {
+			// Insert the new note entry at the correct location for its blockId.
+			const newNoteThread = {
+				id: 'new-note-thread',
+				blockClientId: selectedBlockClientId,
+				content: { rendered: '' },
+			};
+			// Insert the new comment block at the right order within the threads.
+			orderedBlockIds.forEach( ( blockId ) => {
+				if ( blockId === selectedBlockClientId ) {
+					orderedThreads.push( newNoteThread );
+				} else {
+					const threadForBlock = t.find(
+						( thread ) => thread.blockClientId === blockId
+					);
+					if ( threadForBlock ) {
+						orderedThreads.push( threadForBlock );
+					}
+				}
+			} );
+			return orderedThreads;
+		}
+		return t;
+	}, [
+		noteThreads,
+		isFloating,
+		showCommentBoard,
+		blockCommentId,
+		selectedBlockClientId,
+		orderedBlockIds,
+	] );
+
 	const handleDelete = async ( comment ) => {
 		const currentIndex = threads.findIndex( ( t ) => t.id === comment.id );
 		const nextThread = threads[ currentIndex + 1 ];
@@ -247,17 +282,33 @@ export function Comments( {
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
 	if ( ! hasThreads && ! isFloating ) {
 		return (
-			<VStack alignment="left" justify="flex-start" spacing="2">
+			<>
+				<AddComment
+					onSubmit={ onAddReply }
+					showCommentBoard={ showCommentBoard }
+					setShowCommentBoard={ setShowCommentBoard }
+					commentSidebarRef={ commentSidebarRef }
+				/>
 				<Text as="p">{ __( 'No notes available.' ) }</Text>
 				<Text as="p" variant="muted">
 					{ __( 'Only logged in users can see Notes.' ) }
 				</Text>
-			</VStack>
+			</>
 		);
 	}
 
 	return (
-		<VStack spacing="3">
+		<>
+			{ ! isFloating &&
+				showCommentBoard &&
+				undefined === blockCommentId && (
+					<AddComment
+						onSubmit={ onAddReply }
+						showCommentBoard={ showCommentBoard }
+						setShowCommentBoard={ setShowCommentBoard }
+						commentSidebarRef={ commentSidebarRef }
+					/>
+				) }
 			{ threads.map( ( thread ) => (
 				<Thread
 					key={ thread.id }
@@ -276,9 +327,10 @@ export function Comments( {
 					setBlockRef={ setBlockRef }
 					selectedThread={ selectedThread }
 					commentLastUpdated={ commentLastUpdated }
+					showCommentBoard={ showCommentBoard }
 				/>
 			) ) }
-		</VStack>
+		</>
 	);
 }
 
@@ -298,6 +350,7 @@ function Thread( {
 	setSelectedThread,
 	selectedThread,
 	commentLastUpdated,
+	showCommentBoard,
 } ) {
 	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
@@ -347,7 +400,7 @@ function Thread( {
 	const restReplies = allReplies.length > 0 ? allReplies.slice( 0, -1 ) : [];
 
 	const commentExcerpt = getCommentExcerpt(
-		stripHTML( thread.content.rendered ),
+		stripHTML( thread.content?.rendered ),
 		10
 	);
 	const ariaLabel = !! thread.blockClientId
@@ -362,6 +415,21 @@ function Thread( {
 				commentExcerpt
 		  );
 
+	if ( 'new-note-thread' === thread.id && showCommentBoard && isFloating ) {
+		return (
+			<AddComment
+				onSubmit={ onAddReply }
+				showCommentBoard={ showCommentBoard }
+				setShowCommentBoard={ setShowCommentBoard }
+				commentSidebarRef={ commentSidebarRef }
+				reflowComments={ reflowComments }
+				isFloating={ isFloating }
+				y={ y }
+				refs={ refs }
+			/>
+		);
+	}
+
 	return (
 		// Disable reason: role="listitem" does in fact support aria-expanded.
 		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
@@ -378,6 +446,9 @@ function Thread( {
 			onFocus={ onMouseEnter }
 			onBlur={ onMouseLeave }
 			onKeyDown={ ( event ) => {
+				if ( event.defaultPrevented ) {
+					return;
+				}
 				// Expand or Collapse thread.
 				if (
 					event.key === 'Enter' &&
@@ -745,7 +816,9 @@ const CommentBoard = ( {
 					onCancel={ handleCancel }
 					confirmButtonText={ __( 'Delete' ) }
 				>
-					{ __( 'Are you sure you want to delete this note?' ) }
+					{ __(
+						"Are you sure you want to delete this note? This will also delete all of this note's replies."
+					) }
 				</ConfirmDialog>
 			) }
 		</VStack>

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

@@ -50,10 +50,10 @@ export function useBlockComments( postId ) {
 		post: postId,
 		type: 'note',
 		status: 'all',
-		per_page: 100,
+		per_page: -1,
 	};
 
-	const { records: threads, totalPages } = useEntityRecords(
+	const { records: threads } = useEntityRecords(
 		'root',
 		'comment',
 		queryArgs,
@@ -160,7 +160,6 @@ export function useBlockComments( postId ) {
 	return {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	};
@@ -399,7 +398,7 @@ export function useFloatingThread( {
 		if ( blockRef.current ) {
 			refs.setReference( blockRef.current );
 		}
-	}, [ blockRef, refs ] );
+	}, [ blockRef, refs, commentLastUpdated ] );
 
 	// Track thread heights.
 	useEffect( () => {