@wordpress/editor 14.33.3 → 14.33.4

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

@@ -1,8 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	ToolbarButton,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -49,10 +53,16 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 		return null;
 	}
 
-	// Show up to 3 avatars, with overflow indicator.
+	// If there are more than 3 participants, show 2 avatars and a "+n" number.
 	const maxAvatars = 3;
-	const visibleParticipants = threadParticipants.slice( 0, maxAvatars );
-	const overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );
+	const isOverflow = threadParticipants.length > maxAvatars;
+	const visibleParticipants = isOverflow
+		? threadParticipants.slice( 0, maxAvatars - 1 )
+		: threadParticipants;
+	const overflowCount = Math.max(
+		0,
+		threadParticipants.length - visibleParticipants.length
+	);
 	const threadHasMoreParticipants = threadParticipants.length > 100;
 
 	// If we hit the comment limit, show "100+" instead of exact overflow count.
@@ -65,19 +75,6 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 					overflowCount
 			  );
 
-	const overflowTitle =
-		threadHasMoreParticipants && overflowCount > 0
-			? __( '100+ participants' )
-			: sprintf(
-					// translators: %s: Number of participants.
-					_n(
-						'+%s more participant',
-						'+%s more participants',
-						overflowCount
-					),
-					overflowCount
-			  );
-
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
@@ -86,15 +83,14 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 				onClick={ onClick }
 				showTooltip
 			>
-				<div className="comment-avatar-stack">
-					{ visibleParticipants.map( ( participant, index ) => (
+				<HStack spacing="1">
+					{ visibleParticipants.map( ( participant ) => (
 						<img
 							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"
 							style={ {
-								zIndex: maxAvatars - index,
 								borderColor: getAvatarBorderColor(
 									participant.id
 								),
@@ -102,15 +98,9 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 						/>
 					) ) }
 					{ overflowCount > 0 && (
-						<div
-							className="comment-avatar-overflow"
-							style={ { zIndex: 0 } }
-							title={ overflowTitle }
-						>
-							{ overflowText }
-						</div>
+						<Text weight={ 500 }>{ overflowText }</Text>
 					) }
-				</div>
+				</HStack>
 			</ToolbarButton>
 		</CommentIconToolbarSlotFill.Fill>
 	);

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

@@ -12,6 +12,7 @@ import {
 	useEffect,
 	useCallback,
 	useMemo,
+	useRef,
 } from '@wordpress/element';
 import {
 	__experimentalText as Text,
@@ -42,6 +43,7 @@ import CommentForm from './comment-form';
 import { focusCommentThread, getCommentExcerpt } from './utils';
 import { useFloatingThread } from './hooks';
 import { AddComment } from './add-comment';
+import { store as editorStore } from '../../store';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
@@ -63,6 +65,7 @@ export function Comments( {
 	const [ boardOffsets, setBoardOffsets ] = useState( {} );
 	const [ blockRefs, setBlockRefs ] = useState( {} );
 
+	const { setCanvasMinHeight } = unlock( useDispatch( editorStore ) );
 	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
 		useSelect( ( select ) => {
 			const { getBlockAttributes, getSelectedBlockClientId } =
@@ -149,8 +152,10 @@ export function Comments( {
 
 	// Auto-select the related comment thread when a block is selected.
 	useEffect( () => {
-		setSelectedThread( blockCommentId ?? undefined );
-	}, [ blockCommentId ] );
+		// Fallback to 'new-note-thread' when showing the comment board for a new note.
+		const fallback = showCommentBoard ? 'new-note-thread' : null;
+		setSelectedThread( blockCommentId ?? fallback );
+	}, [ blockCommentId, showCommentBoard ] );
 
 	const setBlockRef = useCallback( ( id, blockRef ) => {
 		setBlockRefs( ( prev ) => ( { ...prev, [ id ]: blockRef } ) );
@@ -166,7 +171,7 @@ export function Comments( {
 			const offsets = {};
 
 			if ( ! isFloating ) {
-				return offsets;
+				return { offsets, minHeight: 0 };
 			}
 
 			// Find the index of the selected thread.
@@ -184,7 +189,7 @@ export function Comments( {
 				! selectedThreadData ||
 				! blockRefs[ selectedThreadData.id ]
 			) {
-				return offsets;
+				return { offsets, minHeight: 0 };
 			}
 
 			let blockElement = blockRefs[ selectedThreadData.id ];
@@ -271,13 +276,36 @@ export function Comments( {
 					threadTop: threadTop + additionalOffset,
 				};
 			}
-			return offsets;
+
+			let editorMinHeight = 0;
+			// Take the calculated top of the final note plus its height as the editor min height.
+			const lastThread = threads[ threads.length - 1 ];
+			if ( blockRefs[ lastThread.id ] ) {
+				const lastBlockElement = blockRefs[ lastThread.id ];
+				const lastBlockRect = lastBlockElement?.getBoundingClientRect();
+				const lastThreadTop = lastBlockRect?.top || 0;
+				const lastThreadHeight = heights[ lastThread.id ] || 0;
+				const lastThreadOffset = offsets[ lastThread.id ] || 0;
+				editorMinHeight =
+					lastThreadTop + lastThreadHeight + lastThreadOffset + 32;
+			}
+
+			return { offsets, minHeight: editorMinHeight };
 		};
-		const newOffsets = calculateAllOffsets();
+		const { offsets: newOffsets, minHeight } = calculateAllOffsets();
 		if ( Object.keys( newOffsets ).length > 0 ) {
 			setBoardOffsets( newOffsets );
 		}
-	}, [ heights, blockRefs, isFloating, threads, selectedThread ] );
+		// Ensure the editor has enough height to scroll to all notes.
+		setCanvasMinHeight( minHeight );
+	}, [
+		heights,
+		blockRefs,
+		isFloating,
+		threads,
+		selectedThread,
+		setCanvasMinHeight,
+	] );
 
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
 	if ( ! hasThreads && ! isFloating ) {
@@ -633,7 +661,7 @@ const CommentBoard = ( {
 } ) => {
 	const [ actionState, setActionState ] = useState( false );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
-
+	const actionButtonRef = useRef( null );
 	const handleConfirmDelete = () => {
 		onDelete( thread );
 		setActionState( false );
@@ -643,6 +671,7 @@ const CommentBoard = ( {
 	const handleCancel = () => {
 		setActionState( false );
 		setShowConfirmDialog( false );
+		actionButtonRef.current?.focus();
 	};
 
 	// Check if this is a resolution comment by checking metadata.
@@ -728,6 +757,7 @@ const CommentBoard = ( {
 								<Menu.TriggerButton
 									render={
 										<Button
+											ref={ actionButtonRef }
 											size="small"
 											icon={ moreVertical }
 											label={ __( 'Actions' ) }
@@ -761,6 +791,7 @@ const CommentBoard = ( {
 							content: value,
 						} );
 						setActionState( false );
+						actionButtonRef.current?.focus();
 					} }
 					onCancel={ () => handleCancel() }
 					thread={ thread }

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

@@ -70,6 +70,10 @@ export function useBlockComments( postId ) {
 
 	// Process comments to build the tree structure.
 	const { resultComments, unresolvedSortedThreads } = useMemo( () => {
+		if ( ! threads || threads.length === 0 ) {
+			return { resultComments: [], unresolvedSortedThreads: [] };
+		}
+
 		const blocksWithComments = clientIds.reduce( ( results, clientId ) => {
 			const commentId = getBlockAttributes( clientId )?.metadata?.noteId;
 			if ( commentId ) {
@@ -82,10 +86,8 @@ export function useBlockComments( postId ) {
 		const compare = {};
 		const result = [];
 
-		const allComments = threads ?? [];
-
 		// Initialize each object with an empty `reply` array and map blockClientId.
-		allComments.forEach( ( item ) => {
+		threads.forEach( ( item ) => {
 			const itemBlock = Object.keys( blocksWithComments ).find(
 				( key ) => blocksWithComments[ key ] === item.id
 			);
@@ -98,7 +100,7 @@ export function useBlockComments( postId ) {
 		} );
 
 		// Iterate over the data to build the tree structure.
-		allComments.forEach( ( item ) => {
+		threads.forEach( ( item ) => {
 			if ( item.parent === 0 ) {
 				// If parent is 0, it's a root item, push it to the result array.
 				result.push( compare[ item.id ] );

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

@@ -31,6 +31,7 @@ import {
 } from './hooks';
 import { focusCommentThread } from './utils';
 import PostTypeSupportCheck from '../post-type-support-check';
+import { unlock } from '../../lock-unlock';
 
 function NotesSidebarContent( {
 	showCommentBoard,
@@ -80,18 +81,22 @@ function NotesSidebar( { postId, mode } ) {
 	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const commentSidebarRef = useRef( null );
 
 	const showFloatingSidebar = isLargeViewport && mode === 'post-only';
 
-	const blockCommentId = useSelect( ( select ) => {
+	const { clientId, blockCommentId } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
 			select( blockEditorStore );
-		const clientId = getSelectedBlockClientId();
-		return clientId
-			? getBlockAttributes( clientId )?.metadata?.noteId
-			: null;
+		const _clientId = getSelectedBlockClientId();
+		return {
+			clientId: _clientId,
+			blockCommentId: _clientId
+				? getBlockAttributes( _clientId )?.metadata?.noteId
+				: null,
+		};
 	}, [] );
 
 	const {
@@ -142,6 +147,7 @@ function NotesSidebar( { postId, mode } ) {
 			// Focus a comment thread when there's a selected block with a comment.
 			! blockCommentId ? 'textarea' : undefined
 		);
+		toggleBlockSpotlight( clientId, true );
 	}
 
 	return (
@@ -156,7 +162,12 @@ function NotesSidebar( { postId, mode } ) {
 			<PluginSidebar
 				identifier={ collabHistorySidebarName }
 				name={ collabHistorySidebarName }
-				title={ __( 'Notes' ) }
+				title={ __( 'All notes' ) }
+				header={
+					<h2 className="interface-complementary-area-header__title">
+						{ __( 'All notes' ) }
+					</h2>
+				}
 				icon={ commentIcon }
 				closeLabel={ __( 'Close Notes' ) }
 			>
@@ -197,11 +208,13 @@ function NotesSidebar( { postId, mode } ) {
 }
 
 export default function NotesSidebarContainer() {
-	const { postId, mode } = useSelect( ( select ) => {
-		const { getCurrentPostId, getRenderingMode } = select( editorStore );
+	const { postId, mode, editorMode } = useSelect( ( select ) => {
+		const { getCurrentPostId, getRenderingMode, getEditorMode } =
+			select( editorStore );
 		return {
 			postId: getCurrentPostId(),
 			mode: getRenderingMode(),
+			editorMode: getEditorMode(),
 		};
 	}, [] );
 
@@ -209,6 +222,11 @@ export default function NotesSidebarContainer() {
 		return null;
 	}
 
+	// Hide Notes sidebar in Code Editor mode since block-level commenting.
+	if ( editorMode === 'text' ) {
+		return null;
+	}
+
 	return (
 		<PostTypeSupportCheck supportKeys="editor.notes">
 			<NotesSidebar postId={ postId } mode={ mode } />

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

@@ -78,6 +78,7 @@
 	border-width: var(--wp-admin-border-width-focus);
 	border-style: solid;
 	padding: var(--wp-admin-border-width-focus);
+	background: $white;
 }
 
 .editor-collab-sidebar-panel__comment-status {
@@ -154,57 +155,16 @@
 	bottom: $grid-unit-10;
 }
 
-// Comment avatar indicators.
-.comment-avatar-indicator {
-	position: relative;
-	padding: 4px;
-	min-width: auto;
-	background: transparent;
-	border: none;
-}
-
-.comment-avatar-stack {
-	display: flex;
-	align-items: center;
-	position: relative;
-	height: $icon-size;
-}
-
 .comment-avatar {
 	width: $icon-size;
-	height: $icon-size;
 	border-radius: $radius-round;
-	border: 2px solid $white;
-	margin-left: -6px;
-	flex-shrink: 0;
+	margin-left: -12px;
+	border-width: var(--wp-admin-border-width-focus);
+	border-style: solid;
+	padding: var(--wp-admin-border-width-focus);
+	background: $white;
 
 	&:first-child {
 		margin-left: 0;
-		border-color: #de6e55;
-	}
-
-	&:nth-child(2) {
-		border-color: #599637;
-	}
-
-	&:nth-child(3) {
-		border-color: #3858e9;
 	}
 }
-
-.comment-avatar-overflow {
-	width: fit-content;
-	height: $icon-size;
-	border-radius: 4rem;
-	padding: 0 4px;
-	background: #757575;
-	color: $white;
-	border: 2px solid $white;
-	margin-left: -6px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 10px;
-	font-weight: 600;
-	flex-shrink: 0;
-}

package/src/components/more-menu/index.js

@@ -112,7 +112,7 @@ export default function MoreMenu() {
 						<ModeSwitcher />
 						<ActionItem.Slot
 							name="core/plugin-more-menu"
-							label={ __( 'Plugins' ) }
+							label={ __( 'Panels' ) }
 							fillProps={ { onClick: onClose } }
 						/>
 						<MenuGroup label={ __( 'Tools' ) }>

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

@@ -114,6 +114,7 @@ function VisualEditor( {
 		isDesignPostType,
 		postType,
 		isPreview,
+		canvasMinHeight,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -122,7 +123,8 @@ function VisualEditor( {
 			getEditorSettings,
 			getRenderingMode,
 			getDeviceType,
-		} = select( editorStore );
+			getCanvasMinHeight,
+		} = unlock( select( editorStore ) );
 		const { getPostType, getEditedEntityRecord } = select( coreStore );
 		const postTypeSlug = getCurrentPostType();
 		const _renderingMode = getRenderingMode();
@@ -162,6 +164,7 @@ function VisualEditor( {
 			isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord,
 			postType: postTypeSlug,
 			isPreview: editorSettings.isPreviewMode,
+			canvasMinHeight: getCanvasMinHeight(),
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -185,6 +188,7 @@ function VisualEditor( {
 		};
 	}, [] );
 
+	const localRef = useRef();
 	const deviceStyles = useResizeCanvas( deviceType );
 	const [ globalLayoutSettings ] = useSettings( 'layout' );
 
@@ -331,30 +335,47 @@ function VisualEditor( {
 		// Disable resizing in zoomed-out mode.
 		! isZoomedOut;
 
+	// Calculate the minimum height including scroll offset to fit all notes.
+	const calculatedMinHeight = useMemo( () => {
+		if ( ! localRef.current ) {
+			return canvasMinHeight;
+		}
+
+		const { ownerDocument } = localRef.current;
+		const scrollTop =
+			ownerDocument.documentElement.scrollTop ||
+			ownerDocument.body.scrollTop;
+
+		return canvasMinHeight + scrollTop;
+	}, [ canvasMinHeight ] );
+
 	const iframeStyles = useMemo( () => {
 		return [
 			...( styles ?? [] ),
 			{
 				// Ensures margins of children are contained so that the body background paints behind them.
-				// Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s
+				// Otherwise, the background of html (when zoomed out) would show there and appear broken. It's
 				// important mostly for post-only views yet conceivably an issue in templated views too.
-				css: `:where(.block-editor-iframe__body){display:flow-root;}.is-root-container{display:flow-root;${
+				css: `:where(.block-editor-iframe__body){display:flow-root;${
+					calculatedMinHeight
+						? `min-height:${ calculatedMinHeight }px;`
+						: ''
+				}}.is-root-container{display:flow-root;${
 					// Some themes will have `min-height: 100vh` for the root container,
 					// which isn't a requirement in auto resize mode.
 					enableResizing ? 'min-height:0!important;' : ''
 				}}
 				${
 					enableResizing
-						? '.block-editor-iframe__html{background:var(--wp-editor-canvas-background);display:flex;align-items:center;justify-content:center;min-height:100vh;}.block-editor-iframe__body{width:100%;}'
+						? `.block-editor-iframe__html{background:var(--wp-editor-canvas-background);display:flex;align-items:center;justify-content:center;min-height:100vh;}.block-editor-iframe__body{width:100%;}`
 						: ''
 				}`,
 				// The CSS above centers the body content vertically when resizing is enabled and applies a background
 				// color to the iframe HTML element to match the background color of the editor canvas.
 			},
 		];
-	}, [ styles, enableResizing ] );
+	}, [ styles, enableResizing, calculatedMinHeight ] );
 
-	const localRef = useRef();
 	const typewriterRef = useTypewriter();
 	contentRef = useMergeRefs( [
 		localRef,

package/src/store/private-actions.js

@@ -526,3 +526,16 @@ export const setDefaultRenderingMode =
 			.dispatch( preferencesStore )
 			.set( 'core', 'renderingModes', newModes );
 	};
+
+/**
+ * Set the minimum height of the canvas.
+ *
+ * @param {number} minHeight
+ * @return {Object} Action object.
+ */
+export function setCanvasMinHeight( minHeight ) {
+	return {
+		type: 'SET_CANVAS_MIN_HEIGHT',
+		minHeight,
+	};
+}

package/src/store/private-selectors.js

@@ -270,3 +270,13 @@ export const getDefaultRenderingMode = createRegistrySelector(
 		return defaultMode;
 	}
 );
+
+/**
+ * Get the canvas minimum height.
+ *
+ * @param {Object} state Global application state.
+ * @return {number} The canvas minimum height.
+ */
+export function getCanvasMinHeight( state ) {
+	return state.canvasMinHeight;
+}

package/src/store/reducer.js

@@ -384,6 +384,21 @@ export function publishSidebarActive( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer for the canvas minimum height.
+ *
+ * @param {number} state  Current state.
+ * @param {Object} action Dispatched action.
+ * @return {number} Updated state.
+ */
+export function canvasMinHeight( state = 0, action ) {
+	switch ( action.type ) {
+		case 'SET_CANVAS_MIN_HEIGHT':
+			return action.minHeight;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
@@ -403,5 +418,6 @@ export default combineReducers( {
 	listViewPanel,
 	listViewToggleRef,
 	publishSidebarActive,
+	canvasMinHeight,
 	dataviews: dataviewsReducer,
 } );