From ae9f0d072b81be6ae832713e42844c5b838dcd87 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 12 Dec 2023 14:26:28 +0100
Subject: [PATCH 1/9] Comments block: Try client-side form submission

---
 docs/reference-guides/core-blocks.md          |   2 +-
 .../src/comment-reply-link/block.json         |   2 +-
 .../src/comment-reply-link/index.php          |  11 +
 .../src/comment-template/block.json           |   2 +-
 .../src/comment-template/index.php            |  11 +-
 .../block-library/src/comments/block.json     |   9 +-
 .../edit/comments-inspector-controls.js       |  58 +++++-
 packages/block-library/src/comments/index.php |  31 ++-
 .../src/post-comments-form/block.json         |   5 +-
 .../src/post-comments-form/index.php          | 166 ++++++++++++++-
 .../src/post-comments-form/style.scss         |  21 ++
 .../src/post-comments-form/view.js            | 189 ++++++++++++++++++
 .../fixtures/blocks/core__comments.json       |   1 +
 .../fixtures/blocks/core__post-comments.json  |   3 +-
 14 files changed, 495 insertions(+), 16 deletions(-)
 create mode 100644 packages/block-library/src/post-comments-form/view.js

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index c68bb419467f3..35073a9bf487e 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -181,7 +181,7 @@ An advanced block that allows displaying post comments using different visual co
 -	**Name:** core/comments
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** legacy, tagName
+-	**Attributes:** enhancedSubmission, legacy, tagName
 
 ## Comments Pagination
 
diff --git a/packages/block-library/src/comment-reply-link/block.json b/packages/block-library/src/comment-reply-link/block.json
index c10129412145c..e7eaea52f9ca3 100644
--- a/packages/block-library/src/comment-reply-link/block.json
+++ b/packages/block-library/src/comment-reply-link/block.json
@@ -7,7 +7,7 @@
 	"ancestor": [ "core/comment-template" ],
 	"description": "Displays a link to reply to a comment.",
 	"textdomain": "default",
-	"usesContext": [ "commentId" ],
+	"usesContext": [ "commentId", "enhancedSubmission" ],
 	"attributes": {
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/comment-reply-link/index.php b/packages/block-library/src/comment-reply-link/index.php
index 3f7b6e48b617c..468ef1900c44c 100644
--- a/packages/block-library/src/comment-reply-link/index.php
+++ b/packages/block-library/src/comment-reply-link/index.php
@@ -61,6 +61,17 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
+	$p = new WP_HTML_Tag_Processor( $comment_reply_link );
+	if ( $p->next_tag(
+		array(
+			'tag_name'   => 'A',
+			'class_name' => 'comment-reply-link',
+		)
+	) ) {
+		$p->set_attribute( 'data-wp-on--click', 'actions.core.comments.changeReplyTo' );
+	}
+	$comment_reply_link = $p->get_updated_html();
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json
index 7b9bfc5e0340f..dcde272998da6 100644
--- a/packages/block-library/src/comment-template/block.json
+++ b/packages/block-library/src/comment-template/block.json
@@ -7,7 +7,7 @@
 	"parent": [ "core/comments" ],
 	"description": "Contains the block elements used to display a comment, like the title, date, author, avatar and more.",
 	"textdomain": "default",
-	"usesContext": [ "postId" ],
+	"usesContext": [ "postId", "enhancedSubmission" ],
 	"supports": {
 		"align": true,
 		"html": false,
diff --git a/packages/block-library/src/comment-template/index.php b/packages/block-library/src/comment-template/index.php
index 915c5880a8f96..43c4d02b8caaf 100644
--- a/packages/block-library/src/comment-template/index.php
+++ b/packages/block-library/src/comment-template/index.php
@@ -20,6 +20,7 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 	global $comment_depth;
 	$thread_comments       = get_option( 'thread_comments' );
 	$thread_comments_depth = get_option( 'thread_comments_depth' );
+	$enhanced_submission   = isset( $block->context['enhancedSubmission'] ) && $block->context['enhancedSubmission'];
 
 	if ( empty( $comment_depth ) ) {
 		$comment_depth = 1;
@@ -83,7 +84,15 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 			}
 		}
 
-		$content .= sprintf( '<li id="comment-%1$s" %2$s>%3$s</li>', $comment->comment_ID, $comment_classes, $block_content );
+		$comment_directives = $enhanced_submission ? ' data-wp-key="comment-' . $comment->comment_ID . '" data-wp-slot=\'{"name":"comment-' . $comment->comment_ID . '","position":"after"}\'' : '';
+
+		$content .= sprintf(
+			'<li id="comment-%1$s" %2$s%3$s>%4$s</li>',
+			$comment->comment_ID,
+			$comment_classes,
+			$comment_directives,
+			$block_content
+		);
 	}
 
 	return $content;
diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json
index b35ea3505c816..222b891d6bf9f 100644
--- a/packages/block-library/src/comments/block.json
+++ b/packages/block-library/src/comments/block.json
@@ -14,6 +14,10 @@
 		"legacy": {
 			"type": "boolean",
 			"default": false
+		},
+		"enhancedSubmission": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {
@@ -48,5 +52,8 @@
 		}
 	},
 	"editorStyle": "wp-block-comments-editor",
-	"usesContext": [ "postId", "postType" ]
+	"usesContext": [ "postId", "postType" ],
+	"providesContext": {
+		"enhancedSubmission": "enhancedSubmission"
+	}
 }
diff --git a/packages/block-library/src/comments/edit/comments-inspector-controls.js b/packages/block-library/src/comments/edit/comments-inspector-controls.js
index 1a33cb68ea38a..d50a3cca3ccca 100644
--- a/packages/block-library/src/comments/edit/comments-inspector-controls.js
+++ b/packages/block-library/src/comments/edit/comments-inspector-controls.js
@@ -1,12 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import {
+	SelectControl,
+	PanelBody,
+	ToggleControl,
+	Notice,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
+import { useEffect, useRef } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
 
 export default function CommentsInspectorControls( {
-	attributes: { tagName },
+	attributes: { tagName, enhancedSubmission },
 	setAttributes,
 } ) {
 	const htmlElementMessages = {
@@ -17,8 +24,21 @@ export default function CommentsInspectorControls( {
 			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
 		),
 	};
+
+	const enhancedSubmissionNotice = __(
+		'Enhanced submission might cause interactive blocks within the Comment Template to stop working. Disable it if you experience any issues.'
+	);
+
+	const isFirstRender = useRef( true ); // Don't speak on first render.
+	useEffect( () => {
+		if ( ! isFirstRender.current && enhancedSubmission ) {
+			speak( enhancedSubmissionNotice );
+		}
+		isFirstRender.current = false;
+	}, [ enhancedSubmission, enhancedSubmissionNotice ] );
+
 	return (
-		<InspectorControls>
+		<>
 			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
@@ -36,6 +56,36 @@ export default function CommentsInspectorControls( {
 					help={ htmlElementMessages[ tagName ] }
 				/>
 			</InspectorControls>
-		</InspectorControls>
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'User Experience' ) }
+					initialOpen={ false }
+				>
+					<ToggleControl
+						label={ __( 'Enhanced form submission' ) }
+						help={ __(
+							'Submitted comments are added without refreshing the page.'
+						) }
+						checked={ !! enhancedSubmission }
+						onChange={ ( value ) =>
+							setAttributes( {
+								enhancedSubmission: !! value,
+							} )
+						}
+					/>
+					{ enhancedSubmission && (
+						<div>
+							<Notice
+								spokenMessage={ null }
+								status="warning"
+								isDismissible={ false }
+							>
+								{ enhancedSubmissionNotice }
+							</Notice>
+						</div>
+					) }
+				</PanelBody>
+			</InspectorControls>
+		</>
 	);
 }
diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index 48aac15af6fbb..2246d065a43c3 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -23,6 +23,7 @@
  */
 function render_block_core_comments( $attributes, $content, $block ) {
 	global $post;
+	static $id = 0;
 
 	$post_id = $block->context['postId'];
 	if ( ! isset( $post_id ) ) {
@@ -37,7 +38,35 @@ function render_block_core_comments( $attributes, $content, $block ) {
 	// If this isn't the legacy block, we need to render the static version of this block.
 	$is_legacy = 'core/post-comments' === $block->name || ! empty( $attributes['legacy'] );
 	if ( ! $is_legacy ) {
-		return $block->render( array( 'dynamic' => false ) );
+		$output = $block->render( array( 'dynamic' => false ) );
+		if ( $attributes['enhancedSubmission'] ) {
+			$p = new WP_HTML_Tag_Processor( $output );
+			if ( $p->next_tag( array( 'class_name' => 'wp-block-comments' ) ) ) {
+				// Add the necessary directives.
+				$p->set_attribute( 'data-wp-interactive', true );
+				$p->set_attribute( 'data-wp-navigation-id', 'comments-' . ++$id );
+				$p->set_attribute( 'data-wp-slot-provider', true );
+				$p->set_attribute(
+					'data-wp-context',
+					wp_json_encode(
+						array(
+							'core' => array(
+								'comments' => (object) array(
+									'fields' => (object) array(
+										'comment_parent' => 0,
+									),
+								),
+							),
+						)
+					)
+				);
+				$output = $p->get_updated_html();
+
+				// Mark the block as interactive.
+				$block->block_type->supports['interactivity'] = true;
+			}
+		}
+		return $output;
 	}
 
 	$post_before = $post;
diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index ff157beb5ced9..198a7a6babfff 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -11,7 +11,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "postId", "postType" ],
+	"usesContext": [ "postId", "postType", "enhancedSubmission" ],
 	"supports": {
 		"html": false,
 		"color": {
@@ -44,5 +44,6 @@
 		"wp-block-post-comments-form",
 		"wp-block-buttons",
 		"wp-block-button"
-	]
+	],
+	"viewScript": "file:./view.min.js"
 }
diff --git a/packages/block-library/src/post-comments-form/index.php b/packages/block-library/src/post-comments-form/index.php
index 644b02ae0f149..a3b7d9c703750 100644
--- a/packages/block-library/src/post-comments-form/index.php
+++ b/packages/block-library/src/post-comments-form/index.php
@@ -29,7 +29,13 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
 		$classes[] = 'has-link-color';
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'class'          => implode( ' ', $classes ),
+			'data-wp-fill'   => 'context.core.comments.formSlot',
+			'data-wp-effect' => 'effects.core.comments.scrollOnReply',
+		)
+	);
 
 	add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
 
@@ -46,9 +52,163 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 	// of the 'Reply' link that the user clicked by Core's `comment-reply.js` script.
 	$form = str_replace( 'class="comment-respond"', $wrapper_attributes, $form );
 
-	// Enqueue the comment-reply script.
-	wp_enqueue_script( 'comment-reply' );
+	$enhanced_submission = $block->context['enhancedSubmission'];
+	$enhanced_form       = false;
+
+	if ( $enhanced_submission ) {
+		$p = new WP_HTML_Tag_Processor( $form );
+
+		// Move to the first tag and add a bookmark. This is supposed to be OK considering
+		// that the first element is not the form element.
+		$p->next_tag();
+		$p->set_bookmark( 'first-tag' );
+
+		// Try to find the form element. This is not optional; if it fails, we don't
+		// enhance the submission.
+		if ( $p->next_tag(
+			array(
+				'tag_name' => 'FORM',
+				'id'       => 'commentform',
+			)
+		) ) {
+			// Add the necessary directives.
+			$p->set_attribute( 'data-wp-on--submit', 'actions.core.comments.submit' );
+
+			while ( $p->next_tag() ) {
+				$tag  = $p->get_tag();
+				$name = $p->get_attribute( 'name' );
+				$type = $p->get_attribute( 'type' );
+
+				// Try to find the different input fields and save their values on the
+				// context so it can be restored when the form is moved around. This is
+				// optional.
+				if ( 'TEXTAREA' === $tag && 'comment' === $name ) {
+					$p->set_attribute( 'data-wp-bind--value', 'context.core.comments.fields.' . $name );
+					$p->set_attribute( 'data-wp-on--change', 'actions.core.comments.updateField' );
+				}
+
+				if (
+					'INPUT' === $tag &&
+					in_array( $name, array( 'author', 'email', 'url' ), true )
+				) {
+					$p->set_attribute( 'data-wp-bind--value', 'context.core.comments.fields.' . $name );
+					$p->set_attribute( 'data-wp-on--input', 'actions.core.comments.updateField' );
+				}
+
+				if ( 'INPUT' === $tag && 'comment_parent' === $name ) {
+					$p->set_attribute( 'data-wp-bind--value', 'context.core.comments.fields.' . $name );
+				}
+
+				// Try to find the submit button and add directives to change its value
+				// on submission. This is optional.
+				if ( 'INPUT' === $tag && 'submit' === $type ) {
+					// Add the necessary directives.
+					$p->set_attribute( 'data-wp-bind--value', 'selectors.core.comments.submitText' );
+					$p->set_attribute( 'data-wp-bind--disabled', 'context.core.comments.isSubmitting' );
 
+					// Add translated strings to the state.
+					$submit_text = $p->get_attribute( 'value' );
+					wp_store(
+						array(
+							'state'     => array(
+								'core' => array(
+									'comments' => array(
+										'submitText'  => $submit_text,
+										'loadingText' => __( 'Submitting…' ),
+									),
+								),
+							),
+							'selectors' => array(
+								'core' => array(
+									'comments' => array(
+										'submitText' => $submit_text,
+									),
+								),
+							),
+						)
+					);
+				}
+			}
+
+			// Start again to add directives to the reply title elements.
+			$p->seek( 'first-tag' );
+			if ( $p->next_tag( array( 'class_name' => 'comment-reply-title' ) ) ) {
+				$p->set_attribute( 'data-wp-effect', 'actions.core.comments.updateReplyTitle' );
+			}
+
+			while ( $p->next_tag( array( 'tag_name' => 'a' ) ) ) {
+				if ( 'cancel-comment-reply-link' === $p->get_attribute( 'id' ) ) {
+					$p->set_attribute( 'data-wp-style--display', 'selectors.core.comments.displayCancelReply' );
+					$p->set_attribute( 'data-wp-on--click', 'actions.core.comments.cancelReply' );
+					break;
+				}
+			}
+
+			// Mark the block as interactive.
+			$block->block_type->supports['interactivity'] = true;
+
+			// Add a div to show error messages below the form and another div to
+			// announce the spoken notices.
+			wp_store(
+				array(
+					'state' => array(
+						'core' => array(
+							'comments' => array(
+								'submittedNotice' => __( 'Comment submitted.' ),
+							),
+						),
+					),
+				)
+			);
+			$enhanced_form     = $p->get_updated_html();
+			$last_div_position = strripos( $enhanced_form, '</form>' );
+			$enhanced_form     = substr_replace(
+				$enhanced_form,
+				'<div
+					class="wp-block-post-comments-form__error"
+					data-wp-style--display="selectors.core.comments.showError"
+					data-wp-effect="effects.core.comments.scrollToError"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+						<path d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"></path>
+					</svg>
+					<span
+						data-wp-text="state.core.comments.error"
+						aria-live="polite"
+					></span>
+				</div>
+				<div
+					style="position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;"
+					aria-live="polite"
+					data-wp-text="context.core.comments.notice"
+				></div>
+				</form>',
+				$last_div_position,
+				0
+			);
+		}
+	}
+
+	$view_asset = 'wp-block-post-comments-form-view';
+	if ( ! wp_script_is( $view_asset ) ) {
+		$script_handles = $block->block_type->view_script_handles;
+		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+		if ( ! $enhanced_submission && in_array( $view_asset, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+		}
+		// If the script is needed, but it was previously removed, add it again.
+		if ( $enhanced_submission && ! in_array( $view_asset, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) );
+		}
+	}
+
+	if ( $enhanced_form ) {
+		return $enhanced_form;
+	}
+
+	// If something failed or there is no enhanced submission, enqueue the regular
+	// comment-reply script and return the HTML without the directives.
+	wp_enqueue_script( 'comment-reply' );
 	return $form;
 }
 
diff --git a/packages/block-library/src/post-comments-form/style.scss b/packages/block-library/src/post-comments-form/style.scss
index 52b00a2c4f6ce..2bfb5f3ae1abe 100644
--- a/packages/block-library/src/post-comments-form/style.scss
+++ b/packages/block-library/src/post-comments-form/style.scss
@@ -79,4 +79,25 @@
 			margin-left: 0.5em;
 		}
 	}
+
+	.wp-block-post-comments-form__error {
+		display: none;
+		gap: 12px;
+		align-items: stretch;
+		border: 1px solid #cc1818;
+		border-radius: 4px;
+		color: #2f2f2f;
+		padding: 16px;
+		margin-bottom: 20px;
+		background-color: #fff0f0;
+		& > svg {
+			background-color: #cc1818;
+			transform: rotate(180deg);
+			fill: #fff;
+			border-radius: 50%;
+			padding: 2px;
+			flex-shrink: 0;
+			flex-grow: 0;
+		}
+	}
 }
diff --git a/packages/block-library/src/post-comments-form/view.js b/packages/block-library/src/post-comments-form/view.js
new file mode 100644
index 0000000000000..fa8bea8617b05
--- /dev/null
+++ b/packages/block-library/src/post-comments-form/view.js
@@ -0,0 +1,189 @@
+/**
+ * WordPress dependencies
+ */
+import { store, navigate } from '@wordpress/interactivity';
+
+const focusableSelectors = [
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+store( {
+	state: {
+		core: {
+			comments: {
+				error: '',
+			},
+		},
+	},
+	selectors: {
+		core: {
+			comments: {
+				showError: ( { state } ) =>
+					state.core.comments.error ? 'flex' : 'none',
+				submitText: ( { context, state } ) =>
+					context.core.comments.isSubmitting
+						? state.core.comments.loadingText
+						: state.core.comments.submitText,
+				displayCancelReply: ( { context } ) => {
+					return context.core.comments.formSlot ? undefined : 'none';
+				},
+			},
+		},
+	},
+	actions: {
+		core: {
+			comments: {
+				submit: async ( { event, context, state, ref } ) => {
+					let response;
+					const existingComments = new Set();
+					const comments = ref.closest( '.wp-block-comments' );
+					comments
+						.querySelectorAll( 'li[id^="comment-"]' )
+						.forEach( ( comment ) =>
+							existingComments.add( comment.id )
+						);
+
+					try {
+						event.preventDefault();
+
+						state.core.comments.error = '';
+						context.core.comments.isSubmitting = true;
+
+						response = await window.fetch( ref.action, {
+							method: 'POST',
+							body: new window.FormData( ref ),
+						} );
+					} catch ( e ) {
+						// If something fails at this point, the form hasn't been submitted
+						// and we can submit it again manually to the server. This is using
+						// the prototype because ref.submit() could be overwritten by an
+						// `<input name="submit"> element.
+						window.HTMLFormElement.prototype.submit.bind( ref )();
+					}
+
+					try {
+						const html = await response.text();
+						const dom = new window.DOMParser().parseFromString(
+							html,
+							'text/html'
+						);
+
+						if (
+							response.status !== 200 ||
+							dom.body.id === 'error-page'
+						) {
+							state.core.comments.error =
+								dom.querySelector(
+									'.wp-die-message'
+								).innerText;
+						} else {
+							await navigate( response.url, {
+								html,
+								replace: true,
+								force: true,
+							} );
+
+							let newComment;
+							comments
+								.querySelectorAll( 'li[id^="comment-"]' )
+								.forEach( ( comment ) => {
+									if ( ! existingComments.has( comment.id ) )
+										newComment = comment;
+								} );
+
+							// Scroll the new comment into view.
+							newComment.querySelector( 'a[href]' ).focus();
+
+							// Announce that the comment has been submitted. If the notice is
+							// the same, we use a no-break space similar to the trick used by
+							// the @wordpress/a11y package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
+							context.core.comments.notice =
+								state.core.comments.submittedNotice +
+								( context.core.comments.notice ===
+								state.core.comments.submittedNotice
+									? '\u00A0'
+									: '' );
+
+							// Add hash to the URL.
+							window.history.replaceState(
+								{},
+								'',
+								window.location.pathname +
+									window.location.search +
+									`#${ newComment.id }`
+							);
+
+							// Reset form fields and position.
+							context.core.comments.formSlot = undefined;
+							const { fields } = context.core.comments;
+							for ( const key in fields ) {
+								fields[ key ] =
+									key !== 'comment_parent' ? '' : 0;
+							}
+						}
+
+						context.core.comments.isSubmitting = false;
+					} catch ( e ) {
+						// If something happens at this point, the form has been submitted
+						// but we were not able to show it in the screen, so we can just
+						// refresh the page.
+						window.location.assign(
+							response.url || window.location
+						);
+					}
+				},
+				changeReplyTo: ( { context, ref, event } ) => {
+					event.preventDefault();
+					const { commentid, replyto } = ref.dataset;
+					context.core.comments.replyTitle = replyto;
+					context.core.comments.formSlot = `comment-${ commentid }`;
+					context.core.comments.fields.comment_parent = commentid;
+				},
+				cancelReply: ( { context, event } ) => {
+					event.preventDefault();
+					context.core.comments.formSlot = undefined;
+					context.core.comments.fields.comment_parent = 0;
+				},
+				updateField: ( { context, event } ) => {
+					const { name, value } = event.target;
+					context.core.comments.fields[ name ] = value;
+				},
+				updateReplyTitle: ( { context, ref } ) => {
+					if ( context.core.comments.fields.comment_parent !== 0 ) {
+						ref.firstChild.replaceWith(
+							context.core.comments.replyTitle
+						);
+					}
+				},
+			},
+		},
+	},
+	effects: {
+		core: {
+			comments: {
+				scrollToError: ( st ) => {
+					// Scroll to the error when it's shown.
+					if ( st.state.core.comments.error ) {
+						st.ref.scrollIntoView( {
+							behavior: 'smooth',
+							block: 'end',
+						} );
+					}
+				},
+				scrollOnReply: ( { context, ref } ) => {
+					const { formSlot } = context.core.comments;
+
+					// Focus on the first field in the comment form.
+					if ( formSlot )
+						ref.querySelector( 'form' )
+							.querySelector( focusableSelectors )
+							.focus();
+				},
+			},
+		},
+	},
+} );
diff --git a/test/integration/fixtures/blocks/core__comments.json b/test/integration/fixtures/blocks/core__comments.json
index 1ea7dcae007f6..18ebda05ed7cd 100644
--- a/test/integration/fixtures/blocks/core__comments.json
+++ b/test/integration/fixtures/blocks/core__comments.json
@@ -5,6 +5,7 @@
 		"attributes": {
 			"tagName": "div",
 			"legacy": false,
+			"enhancedSubmission": false,
 			"className": "comments-post-extra"
 		},
 		"innerBlocks": [
diff --git a/test/integration/fixtures/blocks/core__post-comments.json b/test/integration/fixtures/blocks/core__post-comments.json
index 6cea899e1534b..2d1427f6c23bf 100644
--- a/test/integration/fixtures/blocks/core__post-comments.json
+++ b/test/integration/fixtures/blocks/core__post-comments.json
@@ -4,7 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"tagName": "div",
-			"legacy": true
+			"legacy": true,
+			"enhancedSubmission": false
 		},
 		"innerBlocks": []
 	}

From 6b16cad01e257fddf560b7736107f506e48f0298 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 12 Dec 2023 15:34:00 +0100
Subject: [PATCH 2/9] Try updating to new store API

---
 packages/block-library/src/comments/index.php |  10 +-
 .../src/post-comments-form/index.php          |  53 ++--
 .../src/post-comments-form/view.js            | 296 +++++++++---------
 3 files changed, 165 insertions(+), 194 deletions(-)

diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index 2246d065a43c3..41abf86c38624 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -43,19 +43,15 @@ function render_block_core_comments( $attributes, $content, $block ) {
 			$p = new WP_HTML_Tag_Processor( $output );
 			if ( $p->next_tag( array( 'class_name' => 'wp-block-comments' ) ) ) {
 				// Add the necessary directives.
-				$p->set_attribute( 'data-wp-interactive', true );
+				$p->set_attribute( 'data-wp-interactive', 'core/comments' );
 				$p->set_attribute( 'data-wp-navigation-id', 'comments-' . ++$id );
 				$p->set_attribute( 'data-wp-slot-provider', true );
 				$p->set_attribute(
 					'data-wp-context',
 					wp_json_encode(
 						array(
-							'core' => array(
-								'comments' => (object) array(
-									'fields' => (object) array(
-										'comment_parent' => 0,
-									),
-								),
+							'fields' => (object) array(
+								'comment_parent' => 0,
 							),
 						)
 					)
diff --git a/packages/block-library/src/post-comments-form/index.php b/packages/block-library/src/post-comments-form/index.php
index a3b7d9c703750..666cb272ec35b 100644
--- a/packages/block-library/src/post-comments-form/index.php
+++ b/packages/block-library/src/post-comments-form/index.php
@@ -31,9 +31,9 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 	}
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class'          => implode( ' ', $classes ),
-			'data-wp-fill'   => 'context.core.comments.formSlot',
-			'data-wp-effect' => 'effects.core.comments.scrollOnReply',
+			'class'         => implode( ' ', $classes ),
+			'data-wp-fill'  => 'context.formSlot',
+			'data-wp-watch' => 'callbacks.scrollOnReply',
 		)
 	);
 
@@ -72,7 +72,7 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 			)
 		) ) {
 			// Add the necessary directives.
-			$p->set_attribute( 'data-wp-on--submit', 'actions.core.comments.submit' );
+			$p->set_attribute( 'data-wp-on--submit', 'actions.submit' );
 
 			while ( $p->next_tag() ) {
 				$tag  = $p->get_tag();
@@ -83,47 +83,36 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 				// context so it can be restored when the form is moved around. This is
 				// optional.
 				if ( 'TEXTAREA' === $tag && 'comment' === $name ) {
-					$p->set_attribute( 'data-wp-bind--value', 'context.core.comments.fields.' . $name );
-					$p->set_attribute( 'data-wp-on--change', 'actions.core.comments.updateField' );
+					$p->set_attribute( 'data-wp-bind--value', 'context.fields.' . $name );
+					$p->set_attribute( 'data-wp-on--change', 'actions.updateField' );
 				}
 
 				if (
 					'INPUT' === $tag &&
 					in_array( $name, array( 'author', 'email', 'url' ), true )
 				) {
-					$p->set_attribute( 'data-wp-bind--value', 'context.core.comments.fields.' . $name );
-					$p->set_attribute( 'data-wp-on--input', 'actions.core.comments.updateField' );
+					$p->set_attribute( 'data-wp-bind--value', 'context.fields.' . $name );
+					$p->set_attribute( 'data-wp-on--input', 'actions.updateField' );
 				}
 
 				if ( 'INPUT' === $tag && 'comment_parent' === $name ) {
-					$p->set_attribute( 'data-wp-bind--value', 'context.core.comments.fields.' . $name );
+					$p->set_attribute( 'data-wp-bind--value', 'context.fields.' . $name );
 				}
 
 				// Try to find the submit button and add directives to change its value
 				// on submission. This is optional.
 				if ( 'INPUT' === $tag && 'submit' === $type ) {
 					// Add the necessary directives.
-					$p->set_attribute( 'data-wp-bind--value', 'selectors.core.comments.submitText' );
-					$p->set_attribute( 'data-wp-bind--disabled', 'context.core.comments.isSubmitting' );
+					$p->set_attribute( 'data-wp-bind--value', 'state.submitText' );
+					$p->set_attribute( 'data-wp-bind--disabled', 'context.isSubmitting' );
 
 					// Add translated strings to the state.
 					$submit_text = $p->get_attribute( 'value' );
 					wp_store(
 						array(
-							'state'     => array(
-								'core' => array(
-									'comments' => array(
-										'submitText'  => $submit_text,
-										'loadingText' => __( 'Submitting…' ),
-									),
-								),
-							),
-							'selectors' => array(
-								'core' => array(
-									'comments' => array(
-										'submitText' => $submit_text,
-									),
-								),
+							'core/comments' => array(
+								'submitText'  => $submit_text,
+								'loadingText' => __( 'Submitting…' ),
 							),
 						)
 					);
@@ -133,13 +122,13 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 			// Start again to add directives to the reply title elements.
 			$p->seek( 'first-tag' );
 			if ( $p->next_tag( array( 'class_name' => 'comment-reply-title' ) ) ) {
-				$p->set_attribute( 'data-wp-effect', 'actions.core.comments.updateReplyTitle' );
+				$p->set_attribute( 'data-wp-watch', 'actions.updateReplyTitle' );
 			}
 
 			while ( $p->next_tag( array( 'tag_name' => 'a' ) ) ) {
 				if ( 'cancel-comment-reply-link' === $p->get_attribute( 'id' ) ) {
-					$p->set_attribute( 'data-wp-style--display', 'selectors.core.comments.displayCancelReply' );
-					$p->set_attribute( 'data-wp-on--click', 'actions.core.comments.cancelReply' );
+					$p->set_attribute( 'data-wp-style--display', 'state.displayCancelReply' );
+					$p->set_attribute( 'data-wp-on--click', 'actions.cancelReply' );
 					break;
 				}
 			}
@@ -166,21 +155,21 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 				$enhanced_form,
 				'<div
 					class="wp-block-post-comments-form__error"
-					data-wp-style--display="selectors.core.comments.showError"
-					data-wp-effect="effects.core.comments.scrollToError"
+					data-wp-style--display="state.showError"
+					data-wp-watch="callbacks.scrollToError"
 				>
 					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
 						<path d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"></path>
 					</svg>
 					<span
-						data-wp-text="state.core.comments.error"
+						data-wp-text="state.error"
 						aria-live="polite"
 					></span>
 				</div>
 				<div
 					style="position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;"
 					aria-live="polite"
-					data-wp-text="context.core.comments.notice"
+					data-wp-text="context.notice"
 				></div>
 				</form>',
 				$last_div_position,
diff --git a/packages/block-library/src/post-comments-form/view.js b/packages/block-library/src/post-comments-form/view.js
index fa8bea8617b05..500239fb39667 100644
--- a/packages/block-library/src/post-comments-form/view.js
+++ b/packages/block-library/src/post-comments-form/view.js
@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate } from '@wordpress/interactivity';
+import {
+	getContext,
+	getElement,
+	store,
+	navigate,
+} from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
@@ -11,179 +16,160 @@ const focusableSelectors = [
 	'[tabindex]:not([tabindex^="-"])',
 ];
 
-store( {
+const { state } = store( 'core/comments', {
 	state: {
-		core: {
-			comments: {
-				error: '',
-			},
+		error: '',
+		get showError() {
+			return state.error ? 'flex' : 'none';
 		},
-	},
-	selectors: {
-		core: {
-			comments: {
-				showError: ( { state } ) =>
-					state.core.comments.error ? 'flex' : 'none',
-				submitText: ( { context, state } ) =>
-					context.core.comments.isSubmitting
-						? state.core.comments.loadingText
-						: state.core.comments.submitText,
-				displayCancelReply: ( { context } ) => {
-					return context.core.comments.formSlot ? undefined : 'none';
-				},
-			},
+		get submitText() {
+			const { isSubmitting, loadingText, submitText } = getContext();
+			return isSubmitting ? loadingText : submitText;
+		},
+		get displayCancelReply() {
+			const { formSlot } = getContext();
+			return formSlot ? undefined : 'none';
 		},
 	},
 	actions: {
-		core: {
-			comments: {
-				submit: async ( { event, context, state, ref } ) => {
-					let response;
-					const existingComments = new Set();
-					const comments = ref.closest( '.wp-block-comments' );
-					comments
-						.querySelectorAll( 'li[id^="comment-"]' )
-						.forEach( ( comment ) =>
-							existingComments.add( comment.id )
-						);
-
-					try {
-						event.preventDefault();
+		submit: async ( event ) => {
+			let response;
+			const context = getContext();
+			const { ref } = getElement();
+			const existingComments = new Set();
+			const comments = ref.closest( '.wp-block-comments' );
+			comments
+				.querySelectorAll( 'li[id^="comment-"]' )
+				.forEach( ( comment ) => existingComments.add( comment.id ) );
 
-						state.core.comments.error = '';
-						context.core.comments.isSubmitting = true;
+			try {
+				event.preventDefault();
 
-						response = await window.fetch( ref.action, {
-							method: 'POST',
-							body: new window.FormData( ref ),
-						} );
-					} catch ( e ) {
-						// If something fails at this point, the form hasn't been submitted
-						// and we can submit it again manually to the server. This is using
-						// the prototype because ref.submit() could be overwritten by an
-						// `<input name="submit"> element.
-						window.HTMLFormElement.prototype.submit.bind( ref )();
-					}
+				state.error = '';
+				context.isSubmitting = true;
 
-					try {
-						const html = await response.text();
-						const dom = new window.DOMParser().parseFromString(
-							html,
-							'text/html'
-						);
+				response = await window.fetch( ref.action, {
+					method: 'POST',
+					body: new window.FormData( ref ),
+				} );
+			} catch ( e ) {
+				// If something fails at this point, the form hasn't been submitted
+				// and we can submit it again manually to the server. This is using
+				// the prototype because ref.submit() could be overwritten by an
+				// `<input name="submit"> element.
+				window.HTMLFormElement.prototype.submit.bind( ref )();
+			}
 
-						if (
-							response.status !== 200 ||
-							dom.body.id === 'error-page'
-						) {
-							state.core.comments.error =
-								dom.querySelector(
-									'.wp-die-message'
-								).innerText;
-						} else {
-							await navigate( response.url, {
-								html,
-								replace: true,
-								force: true,
-							} );
+			try {
+				const html = await response.text();
+				const dom = new window.DOMParser().parseFromString(
+					html,
+					'text/html'
+				);
 
-							let newComment;
-							comments
-								.querySelectorAll( 'li[id^="comment-"]' )
-								.forEach( ( comment ) => {
-									if ( ! existingComments.has( comment.id ) )
-										newComment = comment;
-								} );
+				if ( response.status !== 200 || dom.body.id === 'error-page' ) {
+					state.error =
+						dom.querySelector( '.wp-die-message' ).innerText;
+				} else {
+					await navigate( response.url, {
+						html,
+						replace: true,
+						force: true,
+					} );
 
-							// Scroll the new comment into view.
-							newComment.querySelector( 'a[href]' ).focus();
+					let newComment;
+					comments
+						.querySelectorAll( 'li[id^="comment-"]' )
+						.forEach( ( comment ) => {
+							if ( ! existingComments.has( comment.id ) )
+								newComment = comment;
+						} );
 
-							// Announce that the comment has been submitted. If the notice is
-							// the same, we use a no-break space similar to the trick used by
-							// the @wordpress/a11y package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
-							context.core.comments.notice =
-								state.core.comments.submittedNotice +
-								( context.core.comments.notice ===
-								state.core.comments.submittedNotice
-									? '\u00A0'
-									: '' );
+					// Scroll the new comment into view.
+					newComment.querySelector( 'a[href]' ).focus();
 
-							// Add hash to the URL.
-							window.history.replaceState(
-								{},
-								'',
-								window.location.pathname +
-									window.location.search +
-									`#${ newComment.id }`
-							);
+					// Announce that the comment has been submitted. If the notice is
+					// the same, we use a no-break space similar to the trick used by
+					// the @wordpress/a11y package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
+					context.notice =
+						state.submittedNotice +
+						( context.notice === state.submittedNotice
+							? '\u00A0'
+							: '' );
 
-							// Reset form fields and position.
-							context.core.comments.formSlot = undefined;
-							const { fields } = context.core.comments;
-							for ( const key in fields ) {
-								fields[ key ] =
-									key !== 'comment_parent' ? '' : 0;
-							}
-						}
+					// Add hash to the URL.
+					window.history.replaceState(
+						{},
+						'',
+						window.location.pathname +
+							window.location.search +
+							`#${ newComment.id }`
+					);
 
-						context.core.comments.isSubmitting = false;
-					} catch ( e ) {
-						// If something happens at this point, the form has been submitted
-						// but we were not able to show it in the screen, so we can just
-						// refresh the page.
-						window.location.assign(
-							response.url || window.location
-						);
+					// Reset form fields and position.
+					context.formSlot = undefined;
+					const { fields } = context;
+					for ( const key in fields ) {
+						fields[ key ] = key !== 'comment_parent' ? '' : 0;
 					}
-				},
-				changeReplyTo: ( { context, ref, event } ) => {
-					event.preventDefault();
-					const { commentid, replyto } = ref.dataset;
-					context.core.comments.replyTitle = replyto;
-					context.core.comments.formSlot = `comment-${ commentid }`;
-					context.core.comments.fields.comment_parent = commentid;
-				},
-				cancelReply: ( { context, event } ) => {
-					event.preventDefault();
-					context.core.comments.formSlot = undefined;
-					context.core.comments.fields.comment_parent = 0;
-				},
-				updateField: ( { context, event } ) => {
-					const { name, value } = event.target;
-					context.core.comments.fields[ name ] = value;
-				},
-				updateReplyTitle: ( { context, ref } ) => {
-					if ( context.core.comments.fields.comment_parent !== 0 ) {
-						ref.firstChild.replaceWith(
-							context.core.comments.replyTitle
-						);
-					}
-				},
-			},
+				}
+
+				context.isSubmitting = false;
+			} catch ( e ) {
+				// If something happens at this point, the form has been submitted
+				// but we were not able to show it in the screen, so we can just
+				// refresh the page.
+				window.location.assign( response.url || window.location );
+			}
+		},
+		changeReplyTo: ( event ) => {
+			event.preventDefault();
+			const context = getContext();
+			const { ref } = getElement();
+			const { commentid, replyto } = ref.dataset;
+			context.replyTitle = replyto;
+			context.formSlot = `comment-${ commentid }`;
+			context.fields.comment_parent = commentid;
+		},
+		cancelReply: ( event ) => {
+			event.preventDefault();
+			const context = getContext();
+			context.formSlot = undefined;
+			context.fields.comment_parent = 0;
+		},
+		updateField: ( event ) => {
+			const { name, value } = event.target;
+			const context = getContext();
+			context.fields[ name ] = value;
+		},
+		updateReplyTitle: () => {
+			const context = getContext();
+			const { ref } = getElement();
+			if ( context.fields.comment_parent !== 0 ) {
+				ref.firstChild.replaceWith( context.replyTitle );
+			}
 		},
 	},
-	effects: {
-		core: {
-			comments: {
-				scrollToError: ( st ) => {
-					// Scroll to the error when it's shown.
-					if ( st.state.core.comments.error ) {
-						st.ref.scrollIntoView( {
-							behavior: 'smooth',
-							block: 'end',
-						} );
-					}
-				},
-				scrollOnReply: ( { context, ref } ) => {
-					const { formSlot } = context.core.comments;
+	callbacks: {
+		scrollToError: () => {
+			// Scroll to the error when it's shown.
+			if ( state.error ) {
+				const { ref } = getElement();
+				ref.scrollIntoView( {
+					behavior: 'smooth',
+					block: 'end',
+				} );
+			}
+		},
+		scrollOnReply: () => {
+			const { formSlot } = getContext();
+			const { ref } = getElement();
 
-					// Focus on the first field in the comment form.
-					if ( formSlot )
-						ref.querySelector( 'form' )
-							.querySelector( focusableSelectors )
-							.focus();
-				},
-			},
+			// Focus on the first field in the comment form.
+			if ( formSlot )
+				ref.querySelector( 'form' )
+					.querySelector( focusableSelectors )
+					.focus();
 		},
 	},
 } );

From 2537fcf6d63d350eeda591bd3c75f5e27e99a2dc Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 12 Dec 2023 16:10:33 +0100
Subject: [PATCH 3/9] Try loading module

---
 packages/block-library/src/comments/index.php | 9 +++++++++
 tools/webpack/interactivity.js                | 1 +
 2 files changed, 10 insertions(+)

diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index 41abf86c38624..e3243af80705a 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -236,5 +236,14 @@ function register_legacy_post_comments_block() {
 	$metadata = apply_filters( 'block_type_metadata', $metadata );
 
 	register_block_type( 'core/post-comments', $metadata );
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/comments',
+			gutenberg_url( '/build/interactivity/comments.min.js' ),
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 add_action( 'init', 'register_legacy_post_comments_block', 21 );
diff --git a/tools/webpack/interactivity.js b/tools/webpack/interactivity.js
index 03bb1f576cb78..a9556984d7f89 100644
--- a/tools/webpack/interactivity.js
+++ b/tools/webpack/interactivity.js
@@ -19,6 +19,7 @@ module.exports = {
 		image: './packages/block-library/src/image/view.js',
 		file: './packages/block-library/src/file/view.js',
 		search: './packages/block-library/src/search/view.js',
+		comments: './packages/block-library/src/post-comments-form/view.js',
 	},
 	experiments: {
 		outputModule: true,

From 2d806dc58b2749850867e227cb0549631a40777e Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 12 Dec 2023 17:00:50 +0100
Subject: [PATCH 4/9] Update action in Comment Reply Link block

---
 packages/block-library/src/comment-reply-link/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/comment-reply-link/index.php b/packages/block-library/src/comment-reply-link/index.php
index 468ef1900c44c..d338af41c9e3c 100644
--- a/packages/block-library/src/comment-reply-link/index.php
+++ b/packages/block-library/src/comment-reply-link/index.php
@@ -68,7 +68,7 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 			'class_name' => 'comment-reply-link',
 		)
 	) ) {
-		$p->set_attribute( 'data-wp-on--click', 'actions.core.comments.changeReplyTo' );
+		$p->set_attribute( 'data-wp-on--click', 'actions.changeReplyTo' );
 	}
 	$comment_reply_link = $p->get_updated_html();
 

From 85868c2019e7a66a02e9ed835f80a20186f6dc16 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 12 Dec 2023 17:04:21 +0100
Subject: [PATCH 5/9] Move module registration to correct filter

---
 packages/block-library/src/comments/index.php | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index e3243af80705a..9c5fc556c36b0 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -117,6 +117,15 @@ function register_block_core_comments() {
 			'skip_inner_blocks' => true,
 		)
 	);
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/comments',
+			gutenberg_url( '/build/interactivity/comments.min.js' ),
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 add_action( 'init', 'register_block_core_comments' );
 
@@ -236,14 +245,5 @@ function register_legacy_post_comments_block() {
 	$metadata = apply_filters( 'block_type_metadata', $metadata );
 
 	register_block_type( 'core/post-comments', $metadata );
-
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		gutenberg_register_module(
-			'@wordpress/block-library/comments',
-			gutenberg_url( '/build/interactivity/comments.min.js' ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-	}
 }
 add_action( 'init', 'register_legacy_post_comments_block', 21 );

From 836818e979496c13415b6b1c0bd4597ec6ea6a50 Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Tue, 12 Dec 2023 17:24:35 +0100
Subject: [PATCH 6/9] Fix more state

---
 packages/block-library/src/post-comments-form/index.php | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/post-comments-form/index.php b/packages/block-library/src/post-comments-form/index.php
index 666cb272ec35b..da6dc23d9aeae 100644
--- a/packages/block-library/src/post-comments-form/index.php
+++ b/packages/block-library/src/post-comments-form/index.php
@@ -140,12 +140,8 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 			// announce the spoken notices.
 			wp_store(
 				array(
-					'state' => array(
-						'core' => array(
-							'comments' => array(
-								'submittedNotice' => __( 'Comment submitted.' ),
-							),
-						),
+					'core/comments' => array(
+						'submittedNotice' => __( 'Comment submitted.' ),
 					),
 				)
 			);

From 7c3ca023f51398af770fc5cb6099c166e6cda262 Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Tue, 12 Dec 2023 17:30:25 +0100
Subject: [PATCH 7/9] Move namespace inside JSON

---
 packages/block-library/src/comments/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index 9c5fc556c36b0..af82858755b52 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -43,7 +43,7 @@ function render_block_core_comments( $attributes, $content, $block ) {
 			$p = new WP_HTML_Tag_Processor( $output );
 			if ( $p->next_tag( array( 'class_name' => 'wp-block-comments' ) ) ) {
 				// Add the necessary directives.
-				$p->set_attribute( 'data-wp-interactive', 'core/comments' );
+				$p->set_attribute( 'data-wp-interactive', '{ "namespace": "core/comments" }' );
 				$p->set_attribute( 'data-wp-navigation-id', 'comments-' . ++$id );
 				$p->set_attribute( 'data-wp-slot-provider', true );
 				$p->set_attribute(

From da4d6dd7cc4953acd750f1e8dca27c57c3074c81 Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Tue, 12 Dec 2023 17:30:25 +0100
Subject: [PATCH 8/9] Register and enqueue comments form module

---
 .../src/post-comments-form/index.php          | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/post-comments-form/index.php b/packages/block-library/src/post-comments-form/index.php
index da6dc23d9aeae..fa8c8c1f7d915 100644
--- a/packages/block-library/src/post-comments-form/index.php
+++ b/packages/block-library/src/post-comments-form/index.php
@@ -174,9 +174,15 @@ class="wp-block-post-comments-form__error"
 		}
 	}
 
-	$view_asset = 'wp-block-post-comments-form-view';
-	if ( ! wp_script_is( $view_asset ) ) {
-		$script_handles = $block->block_type->view_script_handles;
+	$is_gutenberg_plugin = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
+	$view_asset          = 'wp-block-post-comments-form-view';
+	$script_handles      = $block->block_type->view_script_handles;
+
+	if ( $is_gutenberg_plugin ) {
+		gutenberg_enqueue_module( '@wordpress/block-library/post-comments-form' );
+		// Remove the view script because we are using the module.
+		$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+	} elseif ( ! wp_script_is( $view_asset ) ) {
 		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
 		if ( ! $enhanced_submission && in_array( $view_asset, $script_handles, true ) ) {
 			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
@@ -207,6 +213,15 @@ function register_block_core_post_comments_form() {
 			'render_callback' => 'render_block_core_post_comments_form',
 		)
 	);
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/post-comments-form',
+			'/wp-content/plugins/gutenberg/build/interactivity/comments.min.js',
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 add_action( 'init', 'register_block_core_post_comments_form' );
 

From 35aa650b8339de297ba59c3c5d82809ab0350d6e Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Tue, 12 Dec 2023 17:30:25 +0100
Subject: [PATCH 9/9] Update state definition

---
 packages/block-library/src/post-comments-form/index.php | 2 +-
 packages/block-library/src/post-comments-form/view.js   | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/post-comments-form/index.php b/packages/block-library/src/post-comments-form/index.php
index fa8c8c1f7d915..dd19f952cae15 100644
--- a/packages/block-library/src/post-comments-form/index.php
+++ b/packages/block-library/src/post-comments-form/index.php
@@ -103,7 +103,7 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 				// on submission. This is optional.
 				if ( 'INPUT' === $tag && 'submit' === $type ) {
 					// Add the necessary directives.
-					$p->set_attribute( 'data-wp-bind--value', 'state.submitText' );
+					$p->set_attribute( 'data-wp-bind--value', 'state.submitButtonText' );
 					$p->set_attribute( 'data-wp-bind--disabled', 'context.isSubmitting' );
 
 					// Add translated strings to the state.
diff --git a/packages/block-library/src/post-comments-form/view.js b/packages/block-library/src/post-comments-form/view.js
index 500239fb39667..7c1084d8f6652 100644
--- a/packages/block-library/src/post-comments-form/view.js
+++ b/packages/block-library/src/post-comments-form/view.js
@@ -22,8 +22,9 @@ const { state } = store( 'core/comments', {
 		get showError() {
 			return state.error ? 'flex' : 'none';
 		},
-		get submitText() {
-			const { isSubmitting, loadingText, submitText } = getContext();
+		get submitButtonText() {
+			const { isSubmitting } = getContext();
+			const { loadingText, submitText } = state;
 			return isSubmitting ? loadingText : submitText;
 		},
 		get displayCancelReply() {