Add Inline comment experimental flag

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

@@ -33,7 +33,7 @@ function wp_api_template_access_controller( $args, $post_type ) {
 /**
  * Adds the post classes to the REST API response.
  *
- * @param  array  $post  The response object data.
+ * @param  array $post  The response object data.
  *
  * @return array
  */
@@ -157,3 +157,72 @@ function gutenberg_register_wp_rest_themes_template_directory_uri_field() {
 	}
 }
 add_action( 'rest_api_init', 'gutenberg_register_wp_rest_themes_template_directory_uri_field' );
+
+/**
+ * Preload theme and global styles paths to avoid flash of variation styles in post editor.
+ *
+ * @param array                   $paths REST API paths to preload.
+ * @param WP_Block_Editor_Context $context Current block editor context.
+ * @return array Filtered preload paths.
+ */
+function gutenberg_block_editor_preload_paths_6_6( $paths, $context ) {
+	if ( 'core/edit-post' === $context->name ) {
+		$paths[] = '/wp/v2/global-styles/themes/' . get_stylesheet();
+		$paths[] = '/wp/v2/themes?context=edit&status=active';
+		$paths[] = '/wp/v2/global-styles/' . WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id() . '?context=edit';
+	}
+	return $paths;
+}
+add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_6', 10, 2 );
+
+/**
+ * Updates comment metadata from a REST API request.
+ *
+ * This function is hooked to the `rest_prepare_comment` filter and is responsible for updating the comment metadata based on the data provided in the REST API request.
+ *
+ * It performs the following tasks:
+ * - Updates the `block_comment` metadata for the comment based on the `meta` field in the request.
+ * - Updates the `comment_type` and `comment_approved` fields for the comment based on the corresponding fields in the request.
+ * - Retrieves the author's avatar URLs and adds them to the response data.
+ * - Retrieves the `block_comment` metadata for the comment and adds it to the response data.
+ *
+ * @param WP_REST_Response $response The response object.
+ * @param WP_Comment       $comment  The comment object.
+ * @param WP_REST_Request  $request  The request object.
+ * @return WP_REST_Response The updated response object.
+ */
+if ( ! function_exists( 'update_comment_meta_from_rest_request' ) ) {
+	function update_comment_meta_from_rest_request( $response, $comment, $request ) {
+
+		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 );

lib/experimental/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,15 @@ 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' );
+	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' );
+	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-bindings-ui', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalBlockBindingsUI = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -151,6 +151,42 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-quick-edit-dataviews',
+		__( 'Quick Edit in DataViews', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Allow access to a quick edit panel in the pages data views.', 'gutenberg' ),
+			'id'    => 'gutenberg-quick-edit-dataviews',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-block-comment',
+		__( '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-block-bindings-ui',
+		__( 'UI to create block bindings', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Add UI to create and update block bindings in block inspector controls.', 'gutenberg' ),
+			'id'    => 'gutenberg-block-bindings-ui',
+		)
+	);
+
 	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__ . '/experimental/collab.php';
 
 /**
  * Checks whether the Gutenberg experiment is enabled.

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',
@@ -64,6 +68,7 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
+		blockCommentID,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -84,6 +89,11 @@ export function BlockSettingsDropdown( {
 			const parentBlockName =
 				_firstParentClientId && getBlockName( _firstParentClientId );
 
+			const commentID =
+				// eslint-disable-next-line @wordpress/data-no-store-string-literals
+				select( 'core/block-editor' ).getBlock( firstBlockClientId )
+					?.attributes?.blockCommentId;
+
 			return {
 				firstParentClientId: _firstParentClientId,
 				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
@@ -100,6 +110,7 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
+					blockCommentID: commentID,
 			};
 		},
 		[ firstBlockClientId ]
@@ -278,6 +289,13 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</>
 								) }
+								{ isBlockCommentExperimentEnabled &&
+								! blockCommentID && (
+									<BlockCommentMenuItem
+										clientId={ clientIds }
+										onClose={ onClose }
+									/>
+								) }
 							</MenuGroup>
 							{ canCopyStyles && ! isContentOnly && (
 								<MenuGroup>

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

@@ -28,6 +28,7 @@ import BlockControls from '../block-controls';
 import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
+import BlockCommentToolbar from '../collab/toolbar';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
@@ -65,6 +66,7 @@ export function PrivateBlockToolbar( {
 		shouldShowVisualToolbar,
 		showParentSelector,
 		isUsingBindings,
+		blockCommentID,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -96,6 +98,12 @@ export function PrivateBlockToolbar( {
 			( clientId ) =>
 				!! getBlockAttributes( clientId )?.metadata?.bindings
 		);
+
+		const commentID =
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			select( 'core/block-editor' ).getBlock( selectedBlockClientId )
+				?.attributes?.blockCommentId || null;
+
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -115,6 +123,7 @@ export function PrivateBlockToolbar( {
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
 			isUsingBindings: _isUsingBindings,
+			blockCommentID: commentID,
 		};
 	}, [] );
 
@@ -192,6 +201,13 @@ export function PrivateBlockToolbar( {
 										/>
 									</>
 								) }
+
+								{ blockCommentID && (
+									<BlockCommentToolbar
+										clientId={ blockClientId }
+										blockClassName={ blockCommentID }
+									/>
+								) }
 							</ToolbarGroup>
 						</div>
 					) }

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+import { collabComment } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+export default function BlockCommentMenuItem( { onClose } ) {
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
+
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+
+	const clientId = useSelect( ( select ) => {
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const { getSelectedBlockClientId } = select( 'core/block-editor' );
+		return getSelectedBlockClientId();
+	}, [] );
+
+	const openCollabBoard = () => {
+		onClose();
+		updateBlockAttributes( clientId, {
+			showCommentBoard: true,
+		} );
+		openGeneralSidebar( 'edit-post/collab-sidebar' );
+	};
+
+	return (
+		<MenuItem
+			icon={ collabComment }
+			onClick={ openCollabBoard }
+			aria-haspopup="dialog"
+		>
+			{ __( 'Add Comment' ) }
+		</MenuItem>
+	);
+}