Add Inline comment experimental flag

lib/experimental/editor-settings.php

@@ -28,6 +28,9 @@ function gutenberg_enable_experiments() {
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-inline-comment', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableInlineComment = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

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

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

@@ -38,6 +38,7 @@ import Shuffle from './shuffle';
 import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
+import { InlineCommentToolbar } from '../inline-comment';
 /**
  * Renders the block toolbar.
  *
@@ -188,6 +189,9 @@ export function PrivateBlockToolbar( {
 										clientIds={ blockClientIds }
 										hideDragHandle={ hideDragHandle }
 									/>
+									<InlineCommentToolbar
+										clientIds={ blockClientIds }
+									/>
 								</>
 							) }
 						</ToolbarGroup>

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

@@ -161,6 +161,7 @@ export { default as __experimentalBlockPatternsList } from './block-patterns-lis
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
 export { useBlockEditingMode } from './block-editing-mode';
+export { InlineCommentToolbar as __experimentalInlineComment } from './inline-comment';
 
 /*
  * State Related Components

packages/block-editor/src/components/inline-comment/comment.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { comment } from '@wordpress/icons';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { displayShortcut } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
+const isInlineCommentExperimentEnabled =
+	window?.__experimentalEnableInlineComment;
+
+class InlineCommentToolbar extends Component {
+	constructor( props ) {
+		super( props );
+		this.onToggle = this.onToggle.bind( this );
+	}
+	onToggle() {
+		// eslint-disable-next-line no-console
+		console.log( 'comment toggled' );
+	}
+
+	render() {
+		return (
+			<>
+				{ isInlineCommentExperimentEnabled && (
+					<>
+						<ToolbarGroup className="comment-group">
+							<ToolbarButton
+								icon={ comment }
+								label={ __( 'Comment' ) }
+								onClick={ this.onToggle }
+								shortcut={ displayShortcut.primaryAlt( 'm' ) }
+								className={
+									'comment-group-button toolbar-button-with-text'
+								}
+							/>
+						</ToolbarGroup>
+					</>
+				) }
+			</>
+		);
+	}
+}
+export default InlineCommentToolbar;

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

@@ -0,0 +1 @@
+export { default as InlineCommentToolbar } from './comment';