@wordpress/editor 14.13.1-next.cd6172eb0.0 → 14.15.0

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

@@ -16,7 +16,7 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -29,12 +29,14 @@ import CommentForm from './comment-form';
 /**
  * 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.onCommentResolve - The function to mark a comment as resolved.
+ * @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.onCommentResolve    - The function to mark a comment as resolved.
+ * @param {boolean}  props.showCommentBoard    - Whether to show the comment board.
+ * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
  * @return {React.ReactNode} The rendered Comments component.
  */
 export function Comments( {
@@ -43,129 +45,28 @@ export function Comments( {
 	onAddReply,
 	onCommentDelete,
 	onCommentResolve,
+	showCommentBoard,
+	setShowCommentBoard,
 } ) {
-	const [ actionState, setActionState ] = useState( false );
-	const [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );
-
-	const handleConfirmDelete = () => {
-		onCommentDelete( actionState.id );
-		setActionState( false );
-		setIsConfirmDialogOpen( false );
-	};
-
-	const handleConfirmResolve = () => {
-		onCommentResolve( actionState.id );
-		setActionState( false );
-		setIsConfirmDialogOpen( false );
-	};
+	const { blockCommentId } = useSelect( ( select ) => {
+		const { getBlockAttributes, getSelectedBlockClientId } =
+			select( blockEditorStore );
+		const _clientId = getSelectedBlockClientId();
 
-	const handleCancelDelete = () => {
-		setActionState( false );
-		setIsConfirmDialogOpen( false );
-	};
-
-	const blockCommentId = useSelect( ( select ) => {
-		const clientID = select( blockEditorStore ).getSelectedBlockClientId();
-		return (
-			select( blockEditorStore ).getBlock( clientID )?.attributes
-				?.blockCommentId ?? false
-		);
+		return {
+			blockCommentId: _clientId
+				? getBlockAttributes( _clientId )?.blockCommentId
+				: null,
+		};
 	}, [] );
 
-	const CommentBoard = ( { thread, parentThread } ) => {
-		return (
-			<>
-				<CommentHeader
-					thread={ thread }
-					onResolve={ () => {
-						setActionState( {
-							action: 'resolve',
-							id: parentThread?.id ?? thread.id,
-						} );
-						setIsConfirmDialogOpen( true );
-					} }
-					onEdit={ () =>
-						setActionState( { action: 'edit', id: thread.id } )
-					}
-					onDelete={ () => {
-						setActionState( { action: 'delete', id: thread.id } );
-						setIsConfirmDialogOpen( true );
-					} }
-					onReply={
-						! parentThread
-							? () =>
-									setActionState( {
-										action: 'reply',
-										id: thread.id,
-									} )
-							: undefined
-					}
-					status={ parentThread?.status ?? thread.status }
-				/>
-				<HStack
-					alignment="left"
-					spacing="3"
-					justify="flex-start"
-					className="editor-collab-sidebar-panel__user-comment"
-				>
-					<VStack
-						spacing="3"
-						className="editor-collab-sidebar-panel__comment-field"
-					>
-						{ 'edit' === actionState?.action &&
-							thread.id === actionState?.id && (
-								<CommentForm
-									onSubmit={ ( value ) => {
-										onEditComment( thread.id, value );
-										setActionState( false );
-									} }
-									onCancel={ () => setActionState( false ) }
-									thread={ thread }
-									submitButtonText={ _x( 'Update', 'verb' ) }
-								/>
-							) }
-						{ ( ! actionState ||
-							'edit' !== actionState?.action ) && (
-							<RawHTML>{ thread?.content?.raw }</RawHTML>
-						) }
-					</VStack>
-				</HStack>
-				{ 'resolve' === actionState?.action &&
-					thread.id === actionState?.id && (
-						<ConfirmDialog
-							isOpen={ isConfirmDialogOpen }
-							onConfirm={ handleConfirmResolve }
-							onCancel={ handleCancelDelete }
-							confirmButtonText="Yes"
-							cancelButtonText="No"
-						>
-							{
-								// translators: message displayed when confirming an action
-								__(
-									'Are you sure you want to mark this comment as resolved?'
-								)
-							}
-						</ConfirmDialog>
-					) }
-				{ 'delete' === actionState?.action &&
-					thread.id === actionState?.id && (
-						<ConfirmDialog
-							isOpen={ isConfirmDialogOpen }
-							onConfirm={ handleConfirmDelete }
-							onCancel={ handleCancelDelete }
-							confirmButtonText="Yes"
-							cancelButtonText="No"
-						>
-							{
-								// translators: message displayed when confirming an action
-								__(
-									'Are you sure you want to delete this comment?'
-								)
-							}
-						</ConfirmDialog>
-					) }
-			</>
-		);
+	const [ focusThread, setFocusThread ] = useState(
+		showCommentBoard && blockCommentId ? blockCommentId : null
+	);
+
+	const clearThreadFocus = () => {
+		setFocusThread( null );
+		setShowCommentBoard( false );
 	};
 
 	return (
@@ -186,7 +87,6 @@ export function Comments( {
 					</VStack>
 				)
 			}
-
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
 				threads.map( ( thread ) => (
@@ -198,145 +98,262 @@ export function Comments( {
 								'editor-collab-sidebar-panel__active-thread':
 									blockCommentId &&
 									blockCommentId === thread.id,
+								'editor-collab-sidebar-panel__focus-thread':
+									focusThread && focusThread === thread.id,
 							}
 						) }
 						id={ thread.id }
 						spacing="3"
+						onClick={ () => setFocusThread( thread.id ) }
 					>
-						<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"
-								>
+						<Thread
+							thread={ thread }
+							onAddReply={ onAddReply }
+							onCommentDelete={ onCommentDelete }
+							onCommentResolve={ onCommentResolve }
+							onEditComment={ onEditComment }
+							isFocused={ focusThread === thread.id }
+							clearThreadFocus={ clearThreadFocus }
+						/>
+					</VStack>
+				) ) }
+		</>
+	);
+}
+
+function Thread( {
+	thread,
+	onEditComment,
+	onAddReply,
+	onCommentDelete,
+	onCommentResolve,
+	isFocused,
+	clearThreadFocus,
+} ) {
+	return (
+		<>
+			<CommentBoard
+				thread={ thread }
+				onResolve={ onCommentResolve }
+				onEdit={ onEditComment }
+				onDelete={ onCommentDelete }
+				status={ thread.status }
+			/>
+			{ 0 < thread?.reply?.length && (
+				<>
+					{ ! isFocused && (
+						<VStack className="editor-collab-sidebar-panel__show-more-reply">
+							{ sprintf(
+								// translators: 1: number of replies.
+								_x(
+									'%s more replies..',
+									'Show replies button'
+								),
+								thread?.reply?.length
+							) }
+						</VStack>
+					) }
+
+					{ isFocused &&
+						thread.reply.map( ( reply ) => (
+							<VStack
+								key={ reply.id }
+								className="editor-collab-sidebar-panel__child-thread"
+								id={ reply.id }
+								spacing="2"
+							>
+								{ 'approved' !== thread.status && (
 									<CommentBoard
 										thread={ reply }
-										parentThread={ thread }
+										onEdit={ onEditComment }
+										onDelete={ onCommentDelete }
 									/>
-								</VStack>
-							) ) }
-						{ 'reply' === actionState?.action &&
-							thread.id === actionState?.id && (
-								<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"
-									>
-										<CommentForm
-											onSubmit={ ( inputComment ) => {
-												onAddReply(
-													inputComment,
-													thread.id
-												);
-												setActionState( false );
-											} }
-											onCancel={ () =>
-												setActionState( false )
-											}
-											submitButtonText={ _x(
-												'Reply',
-												'Add reply comment'
-											) }
-										/>
-									</VStack>
-								</VStack>
+								) }
+								{ 'approved' === thread.status && (
+									<CommentBoard thread={ reply } />
+								) }
+							</VStack>
+						) ) }
+				</>
+			) }
+			{ 'approved' !== thread.status && isFocused && (
+				<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"
+					>
+						<CommentForm
+							onSubmit={ ( inputComment ) => {
+								onAddReply( inputComment, thread.id );
+							} }
+							onCancel={ ( event ) => {
+								event.stopPropagation(); // Prevent the parent onClick from being triggered
+								clearThreadFocus();
+							} }
+							submitButtonText={ _x(
+								'Reply',
+								'Add reply comment'
 							) }
+						/>
 					</VStack>
-				) ) }
+				</VStack>
+			) }
 		</>
 	);
 }
 
-/**
- * Renders the header of a comment in the collaboration sidebar.
- *
- * @param {Object}   props           - The component props.
- * @param {Object}   props.thread    - The comment thread object.
- * @param {Function} props.onResolve - The function to resolve the comment.
- * @param {Function} props.onEdit    - The function to edit the comment.
- * @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 {React.ReactNode} The rendered comment header.
- */
-function CommentHeader( {
-	thread,
-	onResolve,
-	onEdit,
-	onDelete,
-	onReply,
-	status,
-} ) {
+const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
+	const [ actionState, setActionState ] = useState( false );
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
+
+	const handleConfirmDelete = () => {
+		onDelete( thread.id );
+		setActionState( false );
+		setShowConfirmDialog( false );
+	};
+
+	const handleConfirmResolve = () => {
+		onResolve( thread.id );
+		setActionState( false );
+		setShowConfirmDialog( false );
+	};
+
+	const handleCancel = () => {
+		setActionState( false );
+		setShowConfirmDialog( false );
+	};
+
 	const actions = [
-		{
+		onEdit && {
 			title: _x( 'Edit', 'Edit comment' ),
-			onClick: onEdit,
+			onClick: () => {
+				setActionState( 'edit' );
+			},
 		},
-		{
+		onDelete && {
 			title: _x( 'Delete', 'Delete comment' ),
-			onClick: onDelete,
-		},
-		{
-			title: _x( 'Reply', 'Reply on a comment' ),
-			onClick: onReply,
+			onClick: () => {
+				setActionState( 'delete' );
+				setShowConfirmDialog( true );
+			},
 		},
 	];
 
-	const moreActions = actions.filter( ( item ) => item.onClick );
+	const moreActions = actions.filter( ( item ) => item?.onClick );
 
 	return (
-		<HStack alignment="left" spacing="3" justify="flex-start">
-			<CommentAuthorInfo
-				avatar={ thread?.author_avatar_urls?.[ 48 ] }
-				name={ thread?.author_name }
-				date={ thread?.date }
-			/>
-			<span className="editor-collab-sidebar-panel__comment-status">
-				{ status !== 'approved' && (
-					<HStack alignment="right" justify="flex-end" spacing="0">
-						{ 0 === thread?.parent && onResolve && (
-							<Button
-								label={ _x(
-									'Resolve',
-									'Mark comment as resolved'
-								) }
-								__next40pxDefaultSize
-								icon={ published }
-								onClick={ onResolve }
-								showTooltip
-							/>
-						) }
-						<DropdownMenu
-							icon={ moreVertical }
-							label={ _x(
-								'Select an action',
-								'Select comment action'
+		<>
+			<HStack alignment="left" spacing="3" justify="flex-start">
+				<CommentAuthorInfo
+					avatar={ thread?.author_avatar_urls?.[ 48 ] }
+					name={ thread?.author_name }
+					date={ thread?.date }
+				/>
+				<span className="editor-collab-sidebar-panel__comment-status">
+					{ status !== 'approved' && (
+						<HStack
+							alignment="right"
+							justify="flex-end"
+							spacing="0"
+						>
+							{ 0 === thread?.parent && onResolve && (
+								<Button
+									label={ _x(
+										'Resolve',
+										'Mark comment as resolved'
+									) }
+									__next40pxDefaultSize
+									icon={ published }
+									onClick={ () => {
+										setActionState( 'resolve' );
+										setShowConfirmDialog( true );
+									} }
+									showTooltip
+								/>
+							) }
+							{ 0 < moreActions.length && (
+								<DropdownMenu
+									icon={ moreVertical }
+									label={ _x(
+										'Select an action',
+										'Select comment action'
+									) }
+									className="editor-collab-sidebar-panel__comment-dropdown-menu"
+									controls={ moreActions }
+								/>
 							) }
-							className="editor-collab-sidebar-panel__comment-dropdown-menu"
-							controls={ moreActions }
+						</HStack>
+					) }
+					{ status === 'approved' && (
+						// translators: tooltip for resolved comment
+						<Tooltip text={ __( 'Resolved' ) }>
+							<Icon icon={ check } />
+						</Tooltip>
+					) }
+				</span>
+			</HStack>
+			<HStack
+				alignment="left"
+				spacing="3"
+				justify="flex-start"
+				className="editor-collab-sidebar-panel__user-comment"
+			>
+				<VStack
+					spacing="3"
+					className="editor-collab-sidebar-panel__comment-field"
+				>
+					{ 'edit' === actionState && (
+						<CommentForm
+							onSubmit={ ( value ) => {
+								onEdit( thread.id, value );
+								setActionState( false );
+							} }
+							onCancel={ () => handleCancel() }
+							thread={ thread }
+							submitButtonText={ _x( 'Update', 'verb' ) }
 						/>
-					</HStack>
-				) }
-				{ status === 'approved' && (
-					// translators: tooltip for resolved comment
-					<Tooltip text={ __( 'Resolved' ) }>
-						<Icon icon={ check } />
-					</Tooltip>
-				) }
-			</span>
-		</HStack>
+					) }
+					{ 'edit' !== actionState && (
+						<RawHTML>{ thread?.content?.raw }</RawHTML>
+					) }
+				</VStack>
+			</HStack>
+			{ 'resolve' === actionState && (
+				<ConfirmDialog
+					isOpen={ showConfirmDialog }
+					onConfirm={ handleConfirmResolve }
+					onCancel={ handleCancel }
+					confirmButtonText="Yes"
+					cancelButtonText="No"
+				>
+					{
+						// translators: message displayed when confirming an action
+						__(
+							'Are you sure you want to mark this comment as resolved?'
+						)
+					}
+				</ConfirmDialog>
+			) }
+			{ 'delete' === actionState && (
+				<ConfirmDialog
+					isOpen={ showConfirmDialog }
+					onConfirm={ handleConfirmDelete }
+					onCancel={ handleCancel }
+					confirmButtonText="Yes"
+					cancelButtonText="No"
+				>
+					{
+						// translators: message displayed when confirming an action
+						__( 'Are you sure you want to delete this comment?' )
+					}
+				</ConfirmDialog>
+			) }
+		</>
 	);
-}
+};

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

@@ -203,11 +203,14 @@ function CollabSidebarContent( {
 				setShowCommentBoard={ setShowCommentBoard }
 			/>
 			<Comments
+				key={ getSelectedBlockClientId() }
 				threads={ comments }
 				onEditComment={ onEditComment }
 				onAddReply={ addNewComment }
 				onCommentDelete={ onCommentDelete }
 				onCommentResolve={ onCommentResolve }
+				showCommentBoard={ showCommentBoard }
+				setShowCommentBoard={ setShowCommentBoard }
 			/>
 		</div>
 	);
@@ -293,17 +296,22 @@ export default function CollabSidebar() {
 			return { resultComments: [], sortedThreads: [] };
 		}
 
+		const updatedResult = result.map( ( item ) => ( {
+			...item,
+			reply: [ ...item.reply ].reverse(),
+		} ) );
+
 		const blockCommentIds = getCommentIdsFromBlocks( blocks );
 
 		const threadIdMap = new Map(
-			result.map( ( thread ) => [ thread.id, thread ] )
+			updatedResult.map( ( thread ) => [ thread.id, thread ] )
 		);
 
 		const sortedComments = blockCommentIds
 			.map( ( id ) => threadIdMap.get( id ) )
 			.filter( ( thread ) => thread !== undefined );
 
-		return { resultComments: result, sortedThreads: sortedComments };
+		return { resultComments: updatedResult, sortedThreads: sortedComments };
 	}, [ threads, blocks ] );
 
 	// Get the global styles to set the background color of the sidebar.

package/src/components/collab-sidebar/style.scss

@@ -18,13 +18,17 @@
 		position: relative;
 		padding: $grid-unit-20;
 		border-radius: $radius-large;
-		border: 1px solid $gray-300;
+		border: 1.5px solid $gray-300;
 		background-color: $gray-100;
 		margin-bottom: $grid-unit-20;
 	}
 
 	&__active-thread {
 		border: 1.5px solid #3858e9;
+	}
+
+	&__focus-thread {
+		border: 1.5px solid #3858e9;
 		background-color: $white;
 		box-shadow: 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.102);
 	}
@@ -121,4 +125,9 @@
 		}
 	}
 
+	&__show-more-reply {
+		font-weight: 500;
+		font-style: italic;
+		padding: 0;
+	}
 }

package/src/components/commands/index.js

@@ -25,6 +25,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
 import { store as interfaceStore } from '@wordpress/interface';
+import { getPath } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -90,6 +91,19 @@ const getEditorCommandLoader = () =>
 		const { openModal, enableComplementaryArea, disableComplementaryArea } =
 			useDispatch( interfaceStore );
 		const { getCurrentPostId } = useSelect( editorStore );
+		const { isBlockBasedTheme, canCreateTemplate } = useSelect(
+			( select ) => {
+				return {
+					isBlockBasedTheme:
+						select( coreStore ).getCurrentTheme()?.is_block_theme,
+					canCreateTemplate: select( coreStore ).canUser( 'create', {
+						kind: 'postType',
+						name: 'wp_template',
+					} ),
+				};
+			},
+			[]
+		);
 		const allowSwitchEditorMode =
 			isCodeEditingEnabled && isRichEditingEnabled;
 
@@ -271,6 +285,21 @@ const getEditorCommandLoader = () =>
 				},
 			} );
 		}
+		if ( canCreateTemplate && isBlockBasedTheme ) {
+			const isSiteEditor = getPath( window.location.href )?.includes(
+				'site-editor.php'
+			);
+			if ( ! isSiteEditor ) {
+				commands.push( {
+					name: 'core/go-to-site-editor',
+					label: __( 'Open Site Editor' ),
+					callback: ( { close } ) => {
+						close();
+						document.location = 'site-editor.php';
+					},
+				} );
+			}
+		}
 
 		return {
 			commands,