Merge pull request #18 from rishishah-multidots/try/inline-block-comm…

…enting

Block-Level Comments: All comments are now block-level, with no inline commenting. This is completed.
Comment Button Relocation: The button to add a comment has been moved to the ellipsis menu (three vertical dots), and the rich text format option has been removed. This is also done.
Custom Comment Type: Comments are now stored as a custom comment type rather than post meta. This is completed as well.
Comment API Integration: We have successfully implemented the ability to add and resolve comments using the Comment API

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

@@ -157,3 +157,44 @@ function gutenberg_register_wp_rest_themes_template_directory_uri_field() {
 	}
 }
 add_action( 'rest_api_init', 'gutenberg_register_wp_rest_themes_template_directory_uri_field' );
+
+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 ) {
+				update_comment_meta( $comment->comment_ID, 'block_comment', $value );
+			}
+		}
+
+		if ( isset( $request['comment_type'] ) && ! empty( $request['comment_type'] ) ) {
+			$comment_data = array(
+				'comment_ID' => $comment->comment_ID,
+				'comment_type' => $request['comment_type'],
+				'comment_approved' => isset( $request['comment_approved'] ) ? $request['comment_approved'] : 0,
+			);
+
+			wp_update_comment( $comment_data );
+		}
+
+		$author = get_user_by( 'login', $response->data['author_name'] );
+		if ($author) {
+			$avatar_url = get_avatar_url( $author->ID );
+			$response->data['author_avatar_urls'] = array(
+				'default' => $avatar_url,
+				'48'      => add_query_arg( 's', 48, $avatar_url ),
+				'96'      => add_query_arg( 's', 96, $avatar_url ),
+			);
+		}
+
+		$comment_id = $comment->comment_ID;
+		$meta_key = 'block_comment';
+		$meta_value = get_comment_meta( $comment_id, $meta_key, true );
+
+		if ( !empty( $meta_value ) ) {
+			$response->data['meta'] = $meta_value;
+		}
+
+		return $response;
+	}
+}
+add_filter( 'rest_prepare_comment', 'update_comment_meta_from_rest_request', 10, 3 );

packages/block-editor/package.json

@@ -43,6 +43,7 @@
 		"@wordpress/commands": "file:../commands",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
+		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/date": "file:../date",
 		"@wordpress/deprecated": "file:../deprecated",

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

@@ -19,13 +19,17 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import BlockCommentMenuItem from '../collab/block-comment-menu-item';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+const isBlockCommentExperimentEnabled =
+	window?.__experimentalEnableBlockComment;
+
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
@@ -217,6 +221,13 @@ export function BlockSettingsDropdown( {
 				>
 					{ ( { onClose } ) => (
 						<>
+							{ isBlockCommentExperimentEnabled && (
+								<MenuGroup>
+									<BlockCommentMenuItem
+										clientId={ clientIds }
+									/>
+								</MenuGroup>
+							) }
 							<MenuGroup>
 								<__unstableBlockSettingsMenuFirstItem.Slot
 									fillProps={ { onClose } }

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useReducer } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { collabComment } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockCommentModal from './collab-board';
+
+export default function BlockCommentMenuItem( { clientId } ) {
+	const [ isModalOpen, toggleModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
+	return (
+		<>
+			<MenuItem
+				icon={ collabComment }
+				onClick={ toggleModal }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
+			>
+				{ __( 'Comment' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<BlockCommentModal
+					clientId={ clientId }
+					onClose={ toggleModal }
+				/>
+			) }
+		</>
+	);
+}