Add Inline comment experimental flag

lib/collab.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Functions to support collaboration.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'register_post_meta_for_collab_comment' ) ) {
+	/**
+	 * Registers the collab meta field required for comments to work.
+	 *
+	 * @since // TODO: Add version number.
+	 */
+	function register_post_meta_for_collab_comment() {
+		$post_types = get_post_types( array( 'show_in_rest' => true ) );
+
+		foreach ( $post_types as $post_type ) {
+			// Only register the meta field if the post type supports the editor, custom fields, and revisions.
+			if (
+				post_type_supports( $post_type, 'editor' ) &&
+				post_type_supports( $post_type, 'custom-fields' ) &&
+				post_type_supports( $post_type, 'revisions' )
+			) {
+				register_post_meta(
+					$post_type,
+					'collab',
+					array(
+						'show_in_rest'      => true,
+						'single'            => true,
+						'type'              => 'string',
+						'revisions_enabled' => true,
+					)
+				);
+			}
+		}
+	}
+}
+
+/*
+ * Most post types are registered at priority 10, so use priority 20 here in
+ * order to catch them.
+*/
+add_action( 'init', 'register_post_meta_for_collab_comment', 20 );

lib/experimental/editor-settings.php

@@ -31,6 +31,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-patterns-tab', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutPatternsTab = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-comment', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockComment = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -151,6 +151,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-block-comment',
+		__( 'Enable block Comment', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable Block Comment', 'gutenberg' ),
+			'id'    => 'gutenberg-block-comment',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

lib/load.php

@@ -13,6 +13,7 @@
 
 require_once __DIR__ . '/init.php';
 require_once __DIR__ . '/upgrade.php';
+require_once __DIR__ . '/collab.php';
 
 /**
  * Checks whether the Gutenberg experiment is enabled.

packages/editor/README.md

@@ -232,6 +232,10 @@ _Returns_
 
 -   `string`: Processed string
 
+### CollabSidebar
+
+Renders the Collab sidebar.
+
 ### ColorPalette
 
 > **Deprecated** since 5.3, use `wp.blockEditor.ColorPalette` instead.

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

@@ -0,0 +1,184 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	comment as commentIcon,
+	commentAuthorAvatar as userIcon,
+	Icon,
+	check as resolvedIcon,
+} from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { dateI18n, format, getSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import PluginSidebar from '../plugin-sidebar';
+import { store as editorStore } from '../../store';
+
+const isBlockCommentExperimentEnabled =
+	window?.__experimentalEnableBlockComment;
+
+/**
+ * Renders the Collab sidebar.
+ */
+export default function CollabSidebar() {
+	const { threads } = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+
+		return {
+			threads: post?.meta?.collab ? JSON.parse( post.meta.collab ) : [],
+		};
+	}, [] );
+
+	// Check if the experimental flag is enabled and thread count is greater than zero.
+	if (
+		! isBlockCommentExperimentEnabled ||
+		Object.keys( threads ).length === 0
+	) {
+		return null; // or maybe return some message indicating no threads are available.
+	}
+
+	// Get the date time format from WordPress settings.
+	const dateTimeFormat = getSettings().formats.datetime;
+
+	return (
+		<PluginSidebar
+			name="collab-activities"
+			title={ __( 'Collab Activities' ) }
+			icon={ commentIcon }
+		>
+			<div className="editor-collab-sidebar__activities">
+				{ Object.values( threads )
+					.reverse()
+					.map( ( thread, index ) => (
+						<VStack
+							key={ index }
+							className="editor-collab-sidebar__thread"
+							spacing="3"
+						>
+							<HStack
+								alignment="left"
+								spacing="3"
+								justify="flex-start"
+							>
+								<Icon
+									icon={ userIcon }
+									className="editor-collab-sidebar__userIcon"
+									size={ 35 }
+								/>
+								<VStack spacing="1">
+									<span className="editor-collab-sidebar__userName">
+										{ thread.createdBy }
+									</span>
+									<time
+										dateTime={ format(
+											'c',
+											thread.createdAt
+										) }
+									>
+										{ dateI18n(
+											dateTimeFormat,
+											thread.createdAt
+										) }
+									</time>
+								</VStack>
+							</HStack>
+							{ thread.comments.map( ( comment ) => (
+								<VStack
+									key={ comment.commentId }
+									className="editor-collab-sidebar__comment"
+								>
+									<HStack
+										alignment="center"
+										spacing="3"
+										justify="flex-start"
+									>
+										<Icon
+											icon={ userIcon }
+											className="editor-collab-sidebar__userIcon"
+											size={ 35 }
+										/>
+										<VStack spacing="1">
+											<span className="editor-collab-sidebar__userName">
+												{ comment.createdBy }
+											</span>
+											<time
+												dateTime={ format(
+													'c',
+													comment.createdAt
+												) }
+											>
+												{ dateI18n(
+													dateTimeFormat,
+													comment.createdAt
+												) }
+											</time>
+										</VStack>
+									</HStack>
+									<HStack
+										alignment="center"
+										spacing="1"
+										justify="flex-start"
+									>
+										{ comment.comment }
+									</HStack>
+								</VStack>
+							) ) }
+							{ thread.isResolved && (
+								<VStack className="editor-collab-sidebar__resolved">
+									<HStack
+										alignment="center"
+										spacing="3"
+										justify="flex-start"
+									>
+										<Icon
+											icon={ userIcon }
+											className="editor-collab-sidebar__userIcon"
+											size={ 35 }
+										/>
+										<VStack spacing="1">
+											<span className="editor-collab-sidebar__userName">
+												{ thread.resolvedBy }
+											</span>
+											<time
+												dateTime={ format(
+													'c',
+													thread.resolvedAt
+												) }
+											>
+												{ dateI18n(
+													dateTimeFormat,
+													thread.resolvedAt
+												) }
+											</time>
+										</VStack>
+									</HStack>
+									<HStack
+										alignment="center"
+										spacing="1"
+										justify="flex-start"
+									>
+										<Icon
+											icon={ resolvedIcon }
+											size={ 20 }
+											className="editor-collab-sidebar__resolvedIcon"
+										/>
+										<Text className="editor-collab-sidebar__resolvedText">
+											{ __( 'Marked as resolved' ) }
+										</Text>
+									</HStack>
+								</VStack>
+							) }
+						</VStack>
+					) ) }
+			</div>
+		</PluginSidebar>
+	);
+}

packages/editor/src/components/collab-sidebar/style.scss

@@ -0,0 +1,46 @@
+.editor-collab-sidebar {
+	&__activities {
+		background-color: #f3f5f6;
+	}
+
+	&__thread {
+		padding: 20px;
+		&:not(:last-child) {
+			border-bottom: 1px solid $gray-300;
+		}
+	}
+
+	&__comment,
+	&__resolved {
+		border: 1px solid $gray-300;
+		border-radius: 5px;
+		padding: 10px 15px;
+		background-color: #fff;
+	}
+
+	&__userName {
+		font-size: 14px;
+		text-transform: capitalize;
+	}
+
+	&__userIcon {
+		border: 1px solid #c5c5c5;
+	}
+
+	&__resolvedIcon {
+		fill: #008000;
+		border-radius: 50%;
+		width: 18px;
+		height: 18px;
+		border: 1px solid #008000;
+		margin-right: 2px;
+		margin-top: 5px;
+	}
+
+	&__resolvedText {
+		font-style: italic;
+		font-weight: 500 !important;
+		color: #808080 !important;
+		margin-top: 5px !important;
+	}
+}

packages/editor/src/components/header/index.js

@@ -17,6 +17,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
+import CollabSidebar from '../collab-sidebar';
 import BackButton from './back-button';
 import CollapsableBlockToolbar from '../collapsible-block-toolbar';
 import DocumentBar from '../document-bar';
@@ -149,6 +150,7 @@ function Header( {
 						}
 					/>
 				) }
+				<CollabSidebar />
 				{ customSaveButton }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />

packages/editor/src/components/index.js

@@ -100,6 +100,7 @@ export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
 export { default as TimeToRead } from './time-to-read';
 export { default as CharacterCount } from './character-count';
+export { default as CollabSidebar } from './collab-sidebar';
 
 // State Related Components.
 export { default as EditorProvider } from './provider';

packages/editor/src/style.scss

@@ -2,6 +2,7 @@
 
 @import "./components/autocompleters/style.scss";
 @import "./components/block-manager/style.scss";
+@import "./components/collab-sidebar/style.scss";
 @import "./components/collapsible-block-toolbar/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/block-settings-menu/style.scss";

packages/format-library/package.json

@@ -31,6 +31,7 @@
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
+		"@wordpress/core-data": "^7.0.0",
 		"@wordpress/data": "file:../data",
 		"@wordpress/element": "file:../element",
 		"@wordpress/html-entities": "file:../html-entities",