@wordpress/editor 14.32.0 → 14.32.1-next.ff1cebbba.0

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

@@ -2,16 +2,13 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch, subscribe } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { comment as commentIcon } from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -21,170 +18,61 @@ import { collabHistorySidebarName, collabSidebarName } from './constants';
 import { Comments } from './comments';
 import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
-import AddCommentButton from './comment-button';
+import AddCommentMenuItem from './comment-menu-item';
 import CommentAvatarIndicator from './comment-indicator-toolbar';
 import { useGlobalStylesContext } from '../global-styles-provider';
-import { useBlockComments } from './hooks';
+import {
+	useBlockComments,
+	useBlockCommentsActions,
+	useEnableFloatingSidebar,
+} from './hooks';
+import { focusCommentThread } from './utils';
 
 function CollabSidebarContent( {
 	showCommentBoard,
 	setShowCommentBoard,
 	styles,
 	comments,
+	commentSidebarRef,
+	reflowComments,
+	commentLastUpdated,
+	isFloating = false,
 } ) {
-	const { createNotice } = useDispatch( noticesStore );
-	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { currentPostId, getSelectedBlockClientId, getBlockAttributes } =
-		useSelect( ( select ) => {
-			const { getCurrentPostId } = select( editorStore );
-			return {
-				getSelectedBlockClientId:
-					select( blockEditorStore ).getSelectedBlockClientId,
-				getBlockAttributes:
-					select( blockEditorStore ).getBlockAttributes,
-				currentPostId: getCurrentPostId(),
-			};
-		}, [] );
-
-	const onError = ( error ) => {
-		const errorMessage =
-			error.message && error.code !== 'unknown_error'
-				? decodeEntities( error.message )
-				: __( 'An error occurred while performing an update.' );
-		createNotice( 'error', errorMessage, {
-			type: 'snackbar',
-			isDismissible: true,
-		} );
-	};
-
-	const addNewComment = async ( { content, parent } ) => {
-		try {
-			const savedRecord = await saveEntityRecord(
-				'root',
-				'comment',
-				{
-					post: currentPostId,
-					content,
-					comment_type: 'block_comment',
-					comment_approved: 0,
-					parent: parent || 0,
-				},
-				{ throwOnError: true }
-			);
-
-			// If it's a main comment, update the block attributes with the comment id.
-			if ( ! parent && savedRecord?.id ) {
-				const metadata = getBlockAttributes(
-					getSelectedBlockClientId()
-				)?.metadata;
-				updateBlockAttributes( getSelectedBlockClientId(), {
-					metadata: {
-						...metadata,
-						commentId: savedRecord.id,
-					},
-				} );
-			}
-
-			createNotice(
-				'snackbar',
-				parent
-					? __( 'Reply added successfully.' )
-					: __( 'Comment added successfully.' ),
-				{
-					type: 'snackbar',
-					isDismissible: true,
-				}
-			);
-		} catch ( error ) {
-			onError( error );
-		}
-	};
-
-	const onEditComment = async ( { id, content, status } ) => {
-		const messageType = status ? status : 'updated';
-		const messages = {
-			approved: __( 'Comment marked as resolved.' ),
-			hold: __( 'Comment reopened.' ),
-			updated: __( 'Comment updated.' ),
-		};
-
-		try {
-			await saveEntityRecord(
-				'root',
-				'comment',
-				{
-					id,
-					content,
-					status,
-				},
-				{ throwOnError: true }
-			);
-			createNotice(
-				'snackbar',
-				messages[ messageType ] ?? __( 'Comment updated.' ),
-				{
-					type: 'snackbar',
-					isDismissible: true,
-				}
-			);
-		} catch ( error ) {
-			onError( error );
-		}
-	};
-
-	const onCommentDelete = async ( comment ) => {
-		try {
-			await deleteEntityRecord(
-				'root',
-				'comment',
-				comment.id,
-				undefined,
-				{
-					throwOnError: true,
-				}
-			);
-
-			if ( ! comment.parent ) {
-				const metadata = getBlockAttributes(
-					getSelectedBlockClientId()
-				)?.metadata;
-				updateBlockAttributes( getSelectedBlockClientId(), {
-					metadata: {
-						...metadata,
-						commentId: undefined,
-					},
-				} );
-			}
-
-			createNotice( 'snackbar', __( 'Comment deleted successfully.' ), {
-				type: 'snackbar',
-				isDismissible: true,
-			} );
-		} catch ( error ) {
-			onError( error );
-		}
-	};
+	const { onCreate, onEdit, onDelete } =
+		useBlockCommentsActions( reflowComments );
 
 	return (
-		<div className="editor-collab-sidebar-panel" style={ styles }>
-			<VStack role="list" spacing="3">
+		<VStack
+			className="editor-collab-sidebar-panel"
+			style={ styles }
+			role="list"
+			spacing="3"
+			ref={ ( node ) => {
+				// Keeps the ref fresh when switching between floating and pinned sidebar.
+				commentSidebarRef.current = node;
+			} }
+		>
+			{ ! isFloating && (
 				<AddComment
-					onSubmit={ addNewComment }
-					showCommentBoard={ showCommentBoard }
-					setShowCommentBoard={ setShowCommentBoard }
-				/>
-				<Comments
-					key={ getSelectedBlockClientId() }
-					threads={ comments }
-					onEditComment={ onEditComment }
-					onAddReply={ addNewComment }
-					onCommentDelete={ onCommentDelete }
+					onSubmit={ onCreate }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
+					commentSidebarRef={ commentSidebarRef }
 				/>
-			</VStack>
-		</div>
+			) }
+			<Comments
+				threads={ comments }
+				onEditComment={ onEdit }
+				onAddReply={ onCreate }
+				onCommentDelete={ onDelete }
+				showCommentBoard={ showCommentBoard }
+				setShowCommentBoard={ setShowCommentBoard }
+				commentSidebarRef={ commentSidebarRef }
+				reflowComments={ reflowComments }
+				commentLastUpdated={ commentLastUpdated }
+				isFloating={ isFloating }
+			/>
+		</VStack>
 	);
 }
 
@@ -193,9 +81,10 @@ function CollabSidebarContent( {
  */
 export default function CollabSidebar() {
 	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const commentSidebarRef = useRef( null );
 
 	const { postId } = useSelect( ( select ) => {
 		const { getCurrentPostId } = select( editorStore );
@@ -207,20 +96,20 @@ export default function CollabSidebar() {
 	const blockCommentId = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
 			select( blockEditorStore );
-		const _clientId = getSelectedBlockClientId();
-
-		return _clientId
-			? getBlockAttributes( _clientId )?.metadata?.commentId
+		const clientId = getSelectedBlockClientId();
+		return clientId
+			? getBlockAttributes( clientId )?.metadata?.commentId
 			: null;
 	}, [] );
 
-	const openCollabBoard = () => {
-		setShowCommentBoard( true );
-		enableComplementaryArea( 'core', collabHistorySidebarName );
-	};
-
-	const { resultComments, unresolvedSortedThreads, totalPages } =
-		useBlockComments( postId );
+	const {
+		resultComments,
+		unresolvedSortedThreads,
+		totalPages,
+		reflowComments,
+		commentLastUpdated,
+	} = useBlockComments( postId );
+	useEnableFloatingSidebar( resultComments.length > 0 );
 
 	const hasMoreComments = totalPages && totalPages > 1;
 
@@ -228,21 +117,6 @@ export default function CollabSidebar() {
 	const { merged: GlobalStyles } = useGlobalStylesContext();
 	const backgroundColor = GlobalStyles?.styles?.color?.background;
 
-	if ( 0 < resultComments.length ) {
-		const unsubscribe = subscribe( () => {
-			const activeSidebar = getActiveComplementaryArea( 'core' );
-
-			if ( ! activeSidebar ) {
-				enableComplementaryArea( 'core', collabSidebarName );
-				unsubscribe();
-			}
-		} );
-	}
-
-	const AddCommentComponent = blockCommentId
-		? CommentAvatarIndicator
-		: AddCommentButton;
-
 	// Find the current thread for the selected block.
 	const currentThread = blockCommentId
 		? resultComments.find( ( thread ) => thread.id === blockCommentId )
@@ -253,41 +127,71 @@ export default function CollabSidebar() {
 		return null;
 	}
 
+	async function openTheSidebar() {
+		enableComplementaryArea( 'core', collabHistorySidebarName );
+		const activeArea = await getActiveComplementaryArea( 'core' );
+
+		// Move focus to the target element after the sidebar has opened.
+		if (
+			[ collabHistorySidebarName, collabSidebarName ].includes(
+				activeArea
+			)
+		) {
+			setShowCommentBoard( ! blockCommentId );
+			focusCommentThread(
+				blockCommentId,
+				commentSidebarRef.current,
+				// Focus a comment thread when there's a selected block with a comment.
+				! blockCommentId ? 'textarea' : undefined
+			);
+		}
+	}
+
 	return (
 		<>
-			<AddCommentComponent
-				onClick={ openCollabBoard }
-				thread={ currentThread }
-				hasMoreComments={ hasMoreComments }
-			/>
+			{ blockCommentId && (
+				<CommentAvatarIndicator
+					thread={ currentThread }
+					hasMoreComments={ hasMoreComments }
+					onClick={ openTheSidebar }
+				/>
+			) }
+			<AddCommentMenuItem onClick={ openTheSidebar } />
 			<PluginSidebar
 				identifier={ collabHistorySidebarName }
-				// translators: Comments sidebar title
-				title={ __( 'Comments' ) }
+				title={ __( 'Notes' ) }
 				icon={ commentIcon }
-				closeLabel={ __( 'Close Comments' ) }
+				closeLabel={ __( 'Close Notes' ) }
 			>
 				<CollabSidebarContent
 					comments={ resultComments }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
+					commentSidebarRef={ commentSidebarRef }
+					reflowComments={ reflowComments }
+					commentLastUpdated={ commentLastUpdated }
 				/>
 			</PluginSidebar>
-			{ isLargeViewport && (
+			{ isLargeViewport && unresolvedSortedThreads.length > 0 && (
 				<PluginSidebar
 					isPinnable={ false }
 					header={ false }
 					identifier={ collabSidebarName }
 					className="editor-collab-sidebar"
 					headerClassName="editor-collab-sidebar__header"
+					backgroundColor={ backgroundColor }
 				>
 					<CollabSidebarContent
 						comments={ unresolvedSortedThreads }
 						showCommentBoard={ showCommentBoard }
 						setShowCommentBoard={ setShowCommentBoard }
+						commentSidebarRef={ commentSidebarRef }
+						reflowComments={ reflowComments }
+						commentLastUpdated={ commentLastUpdated }
 						styles={ {
 							backgroundColor,
 						} }
+						isFloating
 					/>
 				</PluginSidebar>
 			) }

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

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) {
 	box-shadow: none;
 
@@ -8,11 +12,13 @@
 
 .editor-collab-sidebar {
 	height: 100%;
+	overflow: hidden;
 }
 
 .editor-collab-sidebar-panel {
 	padding: $grid-unit-20;
 	height: 100%;
+	overflow: hidden;
 }
 
 .editor-collab-sidebar-panel__thread {
@@ -21,6 +27,8 @@
 	border-radius: $radius-large;
 	border: $border-width solid $gray-300;
 	background-color: $gray-100;
+	overflow: hidden;
+	width: auto;
 
 	&.is-selected {
 		background-color: $white;
@@ -31,10 +39,13 @@
 		outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
 		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
 	}
-}
 
-.editor-collab-sidebar-panel__child-thread {
-	margin-top: 15px;
+	&.is-floating {
+		left: $grid-unit-20;
+		right: $grid-unit-20;
+		position: absolute;
+		margin-top: $grid-unit-20;
+	}
 }
 
 .editor-collab-sidebar-panel__user-name {
@@ -68,29 +79,6 @@
 	padding: var(--wp-admin-border-width-focus);
 }
 
-.editor-collab-sidebar-panel__thread-overlay {
-	background-color: rgba(0, 0, 0, 0.7);
-	width: 100%;
-	height: 100%;
-	text-align: center;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 1;
-	padding: 15px;
-	border-radius: $radius-large;
-	color: $white;
-
-	p {
-		margin-bottom: 15px;
-	}
-
-	button {
-		padding: 4px 10px;
-		color: $white;
-	}
-}
-
 .editor-collab-sidebar-panel__comment-status {
 	margin-left: auto;
 
@@ -125,6 +113,10 @@
 	font-weight: 500;
 }
 
+.editor-collab-sidebar-panel__resolution-text {
+	font-style: italic;
+}
+
 .editor-collab-sidebar-panel__comment-form textarea {
 	@include input-control;
 	// Vertical padding is to match the standard 40px control height when rows=1,
@@ -135,6 +127,32 @@
 	display: block;
 }
 
+// Visually hidden until focused (skip link pattern)
+.editor-collab-sidebar-panel__skip-to-comment,
+.editor-collab-sidebar-panel__skip-to-block {
+	position: absolute;
+	top: -9999px;
+	right: -9999px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	background: $white !important;
+	z-index: -1;
+
+	&:focus {
+		overflow: visible;
+		clip-path: none;
+		z-index: 1;
+		right: $grid-unit-10;
+	}
+}
+.editor-collab-sidebar-panel__skip-to-comment:focus {
+	top: $grid-unit-10;
+}
+.editor-collab-sidebar-panel__skip-to-block:focus {
+	top: auto;
+	bottom: $grid-unit-10;
+}
+
 // Comment avatar indicators.
 .comment-avatar-indicator {
 	position: relative;

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

@@ -13,6 +13,11 @@ export function sanitizeCommentString( str ) {
 	return str.trim();
 }
 
+/**
+ * A no-operation function that does nothing.
+ */
+export function noop() {}
+
 /**
  * These colors are picked from the WordPress.org design library.
  * @see https://www.figma.com/design/HOJTpCFfa3tR0EccUlu0CM/WordPress.org-Design-Library?node-id=1-2193&t=M6WdRvTpt0mh8n6T-1
@@ -86,3 +91,53 @@ export function getCommentExcerpt( text, excerptLength = 10 ) {
 	const isTrimmed = trimmedExcerpt !== rawText;
 	return isTrimmed ? trimmedExcerpt + '…' : trimmedExcerpt;
 }
+
+/**
+ * Shift focus to the comment thread associated with a particular comment ID.
+ * If an additional selector is provided, the focus will be shifted to the element matching the selector.
+ *
+ * @typedef {import('@wordpress/element').RefObject} RefObject
+ *
+ * @param {string}       commentId          The ID of the comment thread to focus.
+ * @param {?HTMLElement} container          The container element to search within.
+ * @param {string}       additionalSelector The additional selector to focus on.
+ */
+export function focusCommentThread( commentId, container, additionalSelector ) {
+	if ( ! container ) {
+		return;
+	}
+
+	// A thread without a commentId is a new comment thread.
+	const threadSelector = commentId
+		? `[role=listitem][id="comment-thread-${ commentId }"]`
+		: '[role=listitem]:not([id])';
+	const selector = additionalSelector
+		? `${ threadSelector } ${ additionalSelector }`
+		: threadSelector;
+
+	return new Promise( ( resolve ) => {
+		if ( container.querySelector( selector ) ) {
+			return resolve( container.querySelector( selector ) );
+		}
+
+		let timer = null;
+		// Wait for the element to be added to the DOM.
+		const observer = new window.MutationObserver( () => {
+			if ( container.querySelector( selector ) ) {
+				clearTimeout( timer );
+				observer.disconnect();
+				resolve( container.querySelector( selector ) );
+			}
+		} );
+		observer.observe( container, {
+			childList: true,
+			subtree: true,
+		} );
+
+		// Stop trying after 3 seconds.
+		timer = setTimeout( () => {
+			observer.disconnect();
+			resolve( null );
+		}, 3000 );
+	} ).then( ( element ) => element?.focus() );
+}

package/src/components/collapsible-block-toolbar/style.scss

@@ -1,3 +1,8 @@
+@use "sass:math";
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .editor-collapsible-block-toolbar {
 	overflow: hidden;
 	display: flex;
@@ -77,4 +82,3 @@
 		display: none;
 	}
 }
-

package/src/components/commands/index.js

@@ -8,7 +8,7 @@ import {
 	code,
 	drawerLeft,
 	drawerRight,
-	edit,
+	pencil,
 	formatListBullets,
 	listView,
 	external,
@@ -293,7 +293,7 @@ const getEditedEntityContextualCommands = () =>
 			commands.push( {
 				name: 'core/rename-pattern',
 				label: __( 'Rename pattern' ),
-				icon: edit,
+				icon: pencil,
 				callback: ( { close } ) => {
 					openModal( patternRenameModalName );
 					close();

package/src/components/document-bar/style.scss

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/breakpoints" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .editor-document-bar {
 	display: flex;
 	align-items: center;

package/src/components/document-outline/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .document-outline {
 	margin: 20px 0;
 

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

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
-import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor';
+import { NavigableToolbar } from '@wordpress/block-editor';
 import { ToolbarButton, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useCallback } from '@wordpress/element';
@@ -35,7 +35,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		inserterSidebarToggleRef,
 		listViewToggleRef,
 		showIconLabels,
-		showTools,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const {
@@ -43,8 +42,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			getEditorMode,
 			getInserterSidebarToggleRef,
 			getListViewToggleRef,
-			getRenderingMode,
-			getCurrentPostType,
 		} = unlock( select( editorStore ) );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
@@ -59,10 +56,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
-			showTools:
-				!! window?.__experimentalEditorWriteMode &&
-				( getRenderingMode() !== 'post-only' ||
-					getCurrentPostType() === 'wp_template' ),
 		};
 	}, [] );
 
@@ -79,7 +72,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		}
 	};
 
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
 
 	/* translators: accessibility text for the editor toolbar */
@@ -134,17 +126,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ showTools && isLargeViewport && (
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ disableBlockTools }
-								size="compact"
-							/>
-						) }
 						<ToolbarItem
 							as={ EditorHistoryUndo }
 							showTooltip={ ! showIconLabels }

package/src/components/document-tools/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .editor-document-tools {
 	display: inline-flex;
 	align-items: center;

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .button {
 	margin: $grid-unit-10 $grid-unit-05;
 	align-items: center;

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

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .editor-editor-interface .entities-saved-states__panel-header {
 	height: $header-height + $border-width;
 }