Try/inline block commenting

lib/compat/wordpress-6.6/rest-api.php

@@ -193,11 +193,6 @@ function gutenberg_block_editor_preload_paths_6_6( $paths, $context ) {
  */
 if ( ! function_exists( 'update_comment_meta_from_rest_request' ) ) {
 	function update_comment_meta_from_rest_request( $response, $comment, $request ) {
-		if ( isset( $request['meta'] ) && is_array( $request['meta'] ) ) {
-			foreach ( $request['meta'] as $key => $value ) { //phpcs:ignore
-				update_comment_meta( $comment->comment_ID, 'block_comment', $value );
-			}
-		}
 
 		if ( isset( $request['comment_type'] ) && ! empty( $request['comment_type'] ) ) {
 			$comment_data = array(

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -68,7 +68,7 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
-		blockClassName,
+		blockCommentID,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -89,10 +89,10 @@ export function BlockSettingsDropdown( {
 			const parentBlockName =
 				_firstParentClientId && getBlockName( _firstParentClientId );
 
-			const className =
+			const commentID =
 				// eslint-disable-next-line @wordpress/data-no-store-string-literals
 				select( 'core/block-editor' ).getBlock( firstBlockClientId )
-					?.attributes?.className;
+					?.attributes?.blockCommentId;
 
 			return {
 				firstParentClientId: _firstParentClientId,
@@ -110,7 +110,7 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
-				blockClassName: className,
+					blockCommentID: commentID,
 			};
 		},
 		[ firstBlockClientId ]
@@ -290,12 +290,12 @@ export function BlockSettingsDropdown( {
 									</>
 								) }
 								{ isBlockCommentExperimentEnabled &&
-									! blockClassName && (
-										<BlockCommentMenuItem
-											clientId={ clientIds }
-											onClose={ onClose }
-										/>
-									) }
+								! blockCommentID && (
+									<BlockCommentMenuItem
+										clientId={ clientIds }
+										onClose={ onClose }
+									/>
+								) }
 							</MenuGroup>
 							{ canCopyStyles && ! isContentOnly && (
 								<MenuGroup>

packages/block-editor/src/components/block-toolbar/index.js

@@ -66,7 +66,7 @@ export function PrivateBlockToolbar( {
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
-		blockClassName,
+		blockCommentID,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -99,10 +99,10 @@ export function PrivateBlockToolbar( {
 				!! getBlockAttributes( clientId )?.metadata?.bindings
 		);
 
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		const className = select( 'core/block-editor' ).getBlock(
-			selectedBlockClientId
-		)?.attributes?.className;
+		const commentID =
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			select( 'core/block-editor' ).getBlock( selectedBlockClientId )
+				?.attributes?.blockCommentId || null;
 
 		return {
 			blockClientId: selectedBlockClientId,
@@ -123,7 +123,7 @@ export function PrivateBlockToolbar( {
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
 			isUsingBindings: _isUsingBindings,
-			blockClassName: className,
+			blockCommentID: commentID,
 		};
 	}, [] );
 
@@ -202,10 +202,10 @@ export function PrivateBlockToolbar( {
 									</>
 								) }
 
-								{ blockClassName && (
+								{ blockCommentID && (
 									<BlockCommentToolbar
 										clientId={ blockClientId }
-										blockClassName={ blockClassName }
+										blockClassName={ blockCommentID }
 									/>
 								) }
 							</ToolbarGroup>

packages/block-editor/src/components/collab/block-comment-menu-item.js

@@ -6,7 +6,8 @@ import { MenuItem } from '@wordpress/components';
 import { collabComment } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
 
-export default function BlockCommentMenuItem( { clientId, onClose } ) {
+export default function BlockCommentMenuItem( { onClose } ) {
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
 	const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
 
 	const openCollabBoard = () => {

packages/block-editor/src/components/collab/toolbar.js

@@ -8,7 +8,7 @@ import { collabComment } from '@wordpress/icons';
 export default function BlockCommentToolbar( {} ) {
 	return (
 		<>
-			<ToolbarGroup className="block-editor-block-lock-toolbar">
+			<ToolbarGroup className="block-editor-block-comment-toolbar">
 				<ToolbarButton
 					accessibleWhenDisabled
 					icon={ collabComment }

packages/editor/src/components/collab-sidebar/add-comment.js

@@ -25,10 +25,9 @@ import {
  * Renders the new comment form.
  *
  * @param {Object}   root0                   The component props.
- * @param {Object}   root0.threads           Comments.
  * @param {Function} root0.setReloadComments Function to reload comments.
  */
-export function AddComment( { threads, setReloadComments } ) {
+export function AddComment( { setReloadComments } ) {
 	const generateNewComment = () => ( {
 		commentId: Date.now(),
 		createdBy: currentUser,
@@ -42,7 +41,6 @@ export function AddComment( { threads, setReloadComments } ) {
 	// State to manage the comment thread.
 	const [ inputComment, setInputComment ] = useState( '' );
 	const [ isEditing, setIsEditing ] = useState( null );
-	const [ showConfirmation, setShowConfirmation ] = useState( false );
 
 	const curruntUserData = useSelect( ( select ) => {
 		// eslint-disable-next-line @wordpress/data-no-store-string-literals
@@ -78,11 +76,13 @@ export function AddComment( { threads, setReloadComments } ) {
 		return getSelectedBlockClientId();
 	}, [] );
 
-	const blockClassName = useSelect( ( select ) => {
+	const blockCommentId = useSelect( ( select ) => {
+		const clientID =
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			select( 'core/block-editor' ).getSelectedBlockClientId();
 		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		return select( 'core/block-editor' ).getBlock(
-			select( 'core/block-editor' ).getSelectedBlockClientId()
-		)?.attributes?.className;
+		return select( 'core/block-editor' ).getBlock( clientID )?.attributes
+			?.blockCommentId;
 	}, [] );
 
 	// Get the dispatch functions to save the comment and update the block attributes.
@@ -160,14 +160,11 @@ export function AddComment( { threads, setReloadComments } ) {
 		}
 	};
 
-	// Function to show the confirmation overlay.
-	const showConfirmationOverlay = () => setShowConfirmation( true );
-
 	const handleCancel = () => {};
 
 	return (
 		<>
-			{ null !== clientId && undefined === blockClassName && (
+			{ null !== clientId && 0 === blockCommentId && (
 				<VStack spacing="3">
 					{ 0 < commentsCount && ! isCurrentThreadResolved && (
 						<>
@@ -308,12 +305,6 @@ export function AddComment( { threads, setReloadComments } ) {
 																) }
 															>
 																<CheckboxControl
-																	checked={
-																		isResolved
-																	}
-																	onChange={ () =>
-																		showConfirmationOverlay()
-																	}
 																	label={ __(
 																		'Resolve'
 																	) }

packages/editor/src/components/collab-sidebar/comments.js

@@ -112,20 +112,6 @@ export function Comments( { threads } ) {
 		}
 	};
 
-	// Helper function to get updated comments structure
-	const getUpdatedComments = ( newComment, threadKey ) => ( {
-		...threads,
-		[ threadKey ]: {
-			isResolved: false,
-			createdAt:
-				threads?.threadKey?.createdAt || new Date().toISOString(),
-			createdBy: currentUser,
-			comments: {
-				0: newComment,
-			},
-		},
-	} );
-
 	const generateReplyComment = ( comment ) => ( {
 		commentId: Date.now(),
 		createdBy: currentUser,
@@ -136,8 +122,6 @@ export function Comments( { threads } ) {
 	const confirmReplyComment = ( threadID ) => {
 		if ( threadID ) {
 			const newComment = generateReplyComment( commentReply );
-			const commentId = newComment?.commentId;
-
 			apiFetch( {
 				path: '/wp/v2/comments/',
 				method: 'POST',

packages/editor/src/components/collab-sidebar/index.js

@@ -8,6 +8,8 @@ import { useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { comment as commentIcon } from '@wordpress/icons';
 
+import { addFilter } from '@wordpress/hooks';
+
 /**
  * Internal dependencies
  */
@@ -19,18 +21,42 @@ import { AddComment } from './add-comment';
 const isBlockCommentExperimentEnabled =
 	window?.__experimentalEnableBlockComment;
 
+const modifyBlockCommentAttributes = ( settings, name ) => {
+	if ( name && name?.includes( 'core/' ) ) {
+		if (
+			undefined === settings.attributes.blockCommentId ||
+			null === settings.attributes.blockCommentId
+		) {
+			settings.attributes = {
+				...settings.attributes,
+				blockCommentId: {
+					type: 'number',
+					default: 0,
+				},
+			};
+		}
+	}
+	return settings;
+};
+
+// Apply the filter to all core blocks
+addFilter(
+	'blocks.registerBlockType',
+	'block-comment/modify-core-block-attributes',
+	modifyBlockCommentAttributes
+);
+
 /**
  * Renders the Collab sidebar.
  */
 export default function CollabSidebar() {
+	const [ threads, setThreads ] = useState( [] );
+	const [ reloadComments, setReloadComments ] = useState( false );
 	const postId = useSelect( ( select ) => {
 		// eslint-disable-next-line @wordpress/data-no-store-string-literals
 		return select( 'core/editor' ).getCurrentPostId();
 	}, [] );
 
-	const [ threads, setThreads ] = useState( [] );
-	const [ reloadComments, setReloadComments ] = useState( false );
-
 	useEffect( () => {
 		if ( postId ) {
 			apiFetch( {