Add Inline comment experimental flag

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

@@ -114,3 +114,62 @@ function gutenberg_override_default_rest_server() {
 	return 'Gutenberg_REST_Server';
 }
 add_filter( 'wp_rest_server_class', 'gutenberg_override_default_rest_server', 1 );
+
+/**
+ * Updates the comment type in the REST API for WordPress version 6.7.
+ *
+ * This function is used as a filter callback for the 'rest_pre_insert_comment' hook.
+ * It checks if the 'comment_type' parameter is set to 'block_comment' in the REST API request,
+ * and if so, updates the 'comment_type' and 'comment_approved' properties of the prepared comment.
+ *
+ * @param array $prepared_comment The prepared comment data.
+ * @param WP_REST_Request $request The REST API request object.
+ * @return array The updated prepared comment data.
+ */
+if ( ! function_exists( 'update_comment_type_in_rest_api_6_7' ) && gutenberg_is_experiment_enabled( 'gutenberg-block-comment' ) ) {
+	function update_comment_type_in_rest_api_6_7( $prepared_comment, $request ) {
+		if ( ! empty( $request['comment_type'] ) && 'block_comment' === $request['comment_type'] ) {
+			$prepared_comment['comment_type']     = $request['comment_type'];
+			$prepared_comment['comment_approved'] = $request['comment_approved'];
+		}
+
+		return $prepared_comment;
+	}
+	add_filter( 'rest_pre_insert_comment', 'update_comment_type_in_rest_api_6_7', 10, 2 );
+}
+
+/**
+ * Updates the comment type for avatars in the WordPress REST API.
+ *
+ * This function adds the 'block_comment' type to the list of comment types
+ * for which avatars should be retrieved in the WordPress REST API.
+ *
+ * @param array $comment_type The array of comment types.
+ * @return array The updated array of comment types.
+ */
+if ( ! function_exists( 'update_get_avatar_comment_type' ) && gutenberg_is_experiment_enabled( 'gutenberg-block-comment' ) ) {
+	function update_get_avatar_comment_type( $comment_type ) {
+		$comment_type[] = 'block_comment';
+		return $comment_type;
+	}
+	add_filter( 'get_avatar_comment_types', 'update_get_avatar_comment_type', 10, 1 );
+}
+
+/**
+ * Updates the comment type filter dropdown options.
+ *
+ * This function is only defined if the 'gutenberg-block-comment' experiment is enabled and the 'update_comment_type_filter_dropdown' function does not already exist.
+ * It returns an array of comment type options for the comment type filter dropdown in the admin area.
+ *
+ * @return array An associative array of comment type options.
+ * The keys are the comment type slugs and the values are the translated names of the comment types.
+ */
+if ( ! function_exists( 'update_comment_type_filter_dropdown' ) && gutenberg_is_experiment_enabled( 'gutenberg-block-comment' ) ) {
+	function update_comment_type_filter_dropdown() {
+		return array(
+			'comment'       => __( 'Comments' ),
+			'block_comment' => __( 'Block Comments' ),
+		);
+	}
+	add_filter( 'admin_comment_types_dropdown', 'update_comment_type_filter_dropdown' );
+}

lib/experimental/editor-settings.php

@@ -28,6 +28,9 @@ function gutenberg_enable_experiments() {
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalFullPageClientSideNavigation = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-comment', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockComment = true', 'before' );
+	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' );
 	}

lib/experiments-page.php

@@ -163,6 +163,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-block-comment',
+		__( 'Block Comments', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable multi-user commenting on blocks', 'gutenberg' ),
+			'id'    => 'gutenberg-block-comment',
+		)
+	);
+
 	add_settings_field(
 		'gutenberg-media-processing',
 		__( 'Client-side media processing', 'gutenberg' ),

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

@@ -19,6 +19,7 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import __unstableCommentIconFill from '../collab/block-comment-icon-slot';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
@@ -278,6 +279,11 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</>
 								) }
+
+								<__unstableCommentIconFill.Slot
+									fillProps={ { onClose } }
+								/>
+
 							</MenuGroup>
 							{ canCopyStyles && ! isContentOnly && (
 								<MenuGroup>

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

@@ -7,10 +7,14 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
+import __unstableCommentIconToolbarFill from '../collab/block-comment-icon-toolbar-slot';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
 		<ToolbarGroup>
+
+			<__unstableCommentIconToolbarFill.Slot />
+
 			<ToolbarItem>
 				{ ( toggleProps ) => (
 					<BlockSettingsDropdown

packages/block-editor/src/components/collab/block-comment-icon-slot.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableCommentIconFill, Slot } = createSlotFill(
+	'__unstableCommentIconFill'
+);
+
+__unstableCommentIconFill.Slot = Slot;
+
+export default __unstableCommentIconFill;

packages/block-editor/src/components/collab/block-comment-icon-toolbar-slot.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableCommentIconToolbarFill, Slot } = createSlotFill(
+	'__unstableCommentIconToolbarFill'
+);
+
+__unstableCommentIconToolbarFill.Slot = Slot;
+
+export default __unstableCommentIconToolbarFill;

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

@@ -104,6 +104,9 @@ export {
  */
 
 export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as __unstableCommentIconFill } from './collab/block-comment-icon-slot';
+export { default as __unstableCommentIconToolbarFill } from './collab/block-comment-icon-toolbar-slot';
+
 export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';
 export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';
 export { default as __unstableInserterMenuExtension } from './inserter-menu-extension';

packages/editor/package.json

@@ -34,6 +34,7 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
+		"@wordpress/autop": "^4.7.0",
 		"@wordpress/blob": "file:../blob",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/blocks": "file:../blocks",

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

@@ -0,0 +1,120 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+} from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { sanitizeCommentString } from './utils';
+
+/**
+ * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
+ *
+ * @param {Object}   props                     - The component props.
+ * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.
+ * @param {boolean}  props.showCommentBoard    - The function to edit the comment.
+ * @param {Function} props.setShowCommentBoard - The function to delete the comment.
+ * @return {JSX.Element} The rendered comment input UI.
+ */
+export function AddComment( {
+	onSubmit,
+	showCommentBoard,
+	setShowCommentBoard,
+} ) {
+	// State to manage the comment thread.
+	const [ inputComment, setInputComment ] = useState( '' );
+
+	const {
+		defaultAvatar,
+		clientId,
+		blockCommentId,
+		showAddCommentBoard,
+		currentUser,
+	} = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		const selectedBlock = select( blockEditorStore ).getSelectedBlock();
+		const userData = select( coreStore ).getCurrentUser();
+		return {
+			defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
+			clientId: selectedBlock?.clientId,
+			blockCommentId: selectedBlock?.attributes?.blockCommentId,
+			showAddCommentBoard: showCommentBoard,
+			currentUser: userData,
+		};
+	} );
+
+	const userAvatar = currentUser?.avatar_urls[ 48 ] ?? defaultAvatar;
+
+	useEffect( () => {
+		setInputComment( '' );
+	}, [ clientId ] );
+
+	const handleCancel = () => {
+		setShowCommentBoard( false );
+		setInputComment( '' );
+	};
+
+	if ( ! showAddCommentBoard || ! clientId || 0 !== blockCommentId ) {
+		return null;
+	}
+
+	return (
+		<VStack
+			spacing="3"
+			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread"
+		>
+			<HStack alignment="left" spacing="3">
+				<img
+					src={ userAvatar }
+					// translators: alt text for user avatar image
+					alt={ __( 'User Avatar' ) }
+					className="editor-collab-sidebar-panel__user-avatar"
+					width={ 32 }
+					height={ 32 }
+				/>
+				<span className="editor-collab-sidebar-panel__user-name">
+					{ currentUser?.name ?? '' }
+				</span>
+			</HStack>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				value={ inputComment }
+				onChange={ setInputComment }
+				placeholder={ _x( 'Comment', 'noun' ) }
+			/>
+			<HStack alignment="right" spacing="3">
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					text={ _x( 'Cancel', 'Cancel comment button' ) }
+					onClick={ handleCancel }
+					size="compact"
+				/>
+				<Button
+					__next40pxDefaultSize
+					accessibleWhenDisabled
+					variant="primary"
+					text={ _x( 'Comment', 'Add comment button' ) }
+					disabled={
+						0 === sanitizeCommentString( inputComment ).length
+					}
+					onClick={ () => onSubmit( inputComment ) }
+					size="compact"
+				/>
+			</HStack>
+		</VStack>
+	);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { comment as commentIcon } from '@wordpress/icons';
+import { __unstableCommentIconFill as CommentIconFill } from '@wordpress/block-editor';
+
+const AddCommentButton = ( { onClick } ) => {
+	return (
+		<CommentIconFill>
+			<MenuItem
+				icon={ commentIcon }
+				onClick={ onClick }
+				aria-haspopup="dialog"
+			>
+				{ _x( 'Comment', 'Add comment button' ) }
+			</MenuItem>
+		</CommentIconFill>
+	);
+};
+
+export default AddCommentButton;

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

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { comment as commentIcon } from '@wordpress/icons';
+import { __unstableCommentIconToolbarFill as CommentIconToolbarFill } from '@wordpress/block-editor';
+
+const AddCommentToolbarButton = ( { onClick } ) => {
+	return (
+		<CommentIconToolbarFill>
+			<ToolbarButton
+				accessibleWhenDisabled
+				icon={ commentIcon }
+				label={ _x( 'Comment', 'Open comment button' ) }
+				onClick={ onClick }
+			/>
+		</CommentIconToolbarFill>
+	);
+};
+
+export default AddCommentToolbarButton;