diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index a27de8211c824a..caf6e86fc061f9 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -187,7 +187,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/package.json b/packages/block-library/package.json
index b196e53e5cd0f9..f07662650b8feb 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -30,6 +30,7 @@
 		"./file/view": "./build-module/file/view.js",
 		"./image/view": "./build-module/image/view.js",
 		"./navigation/view": "./build-module/navigation/view.js",
+		"./post-comments-form/view": "./build-module/post-comments-form/view.js",
 		"./query/view": "./build-module/query/view.js",
 		"./search/view": "./build-module/search/view.js"
 	},
diff --git a/packages/block-library/src/comment-reply-link/block.json b/packages/block-library/src/comment-reply-link/block.json
index 68aa93c3c1526a..24c5ef162392d5 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 7121b6f25a195e..8eb997c310b513 100644
--- a/packages/block-library/src/comment-reply-link/index.php
+++ b/packages/block-library/src/comment-reply-link/index.php
@@ -63,6 +63,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.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 08fd591b42409b..abea94d7f8c776 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 ec462e6a050de2..5c430148767dca 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 ceb8f750c3472d..a5a25fec702314 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": {
@@ -60,5 +64,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 1a33cb68ea38a6..d50a3cca3cccaf 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 f61490ab890d9a..3847239e00eb50 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -27,6 +27,7 @@
  */
 function render_block_core_comments( $attributes, $content, $block ) {
 	global $post;
+	static $id = 0;
 
 	$post_id = $block->context['postId'];
 	if ( ! isset( $post_id ) ) {
@@ -41,7 +42,31 @@ 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', 'core/comments' );
+				$p->set_attribute( 'data-wp-router-region', 'comments-' . ++$id );
+				$p->set_attribute( 'data-wp-slot-provider', true );
+				$p->set_attribute(
+					'data-wp-context',
+					wp_json_encode(
+						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;
@@ -98,6 +123,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' );
 
diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index af893ccb67a082..83faa09d78de94 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": {
diff --git a/packages/block-library/src/post-comments-form/index.php b/packages/block-library/src/post-comments-form/index.php
index dfbf4c59f264ad..5deb4aeac8b294 100644
--- a/packages/block-library/src/post-comments-form/index.php
+++ b/packages/block-library/src/post-comments-form/index.php
@@ -31,7 +31,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.formSlot',
+			'data-wp-watch' => 'callbacks.scrollOnReply',
+		)
+	);
 
 	add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
 
@@ -48,9 +54,152 @@ 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.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.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.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.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', 'state.submitButtonText' );
+					$p->set_attribute( 'data-wp-bind--disabled', 'context.isSubmitting' );
 
+					// Add translated strings to the state.
+					$submit_text = $p->get_attribute( 'value' );
+					wp_interactivity_state(
+						'core/comments',
+						array(
+							'submitText'  => $submit_text,
+							'loadingText' => __( 'Submitting…' ),
+						)
+					);
+				}
+			}
+
+			// 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-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', 'state.displayCancelReply' );
+					$p->set_attribute( 'data-wp-on--click', 'actions.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_interactivity_state(
+				'core/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="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.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.notice"
+				></div>
+				</form>',
+				$last_div_position,
+				0
+			);
+		}
+	}
+
+	$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 ) {
+		wp_enqueue_script_module( '@wordpress/block-library/post-comments-form/view' );
+		// 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 ) );
+		}
+		// 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 b400849ba83bdb..823f6ed6517f97 100644
--- a/packages/block-library/src/post-comments-form/style.scss
+++ b/packages/block-library/src/post-comments-form/style.scss
@@ -82,4 +82,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 00000000000000..83ac92663efb1a
--- /dev/null
+++ b/packages/block-library/src/post-comments-form/view.js
@@ -0,0 +1,176 @@
+/**
+ * WordPress dependencies
+ */
+import { getContext, getElement, store } 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^="-"])',
+];
+
+const { state } = store( 'core/comments', {
+	state: {
+		error: '',
+		get showError() {
+			return state.error ? 'flex' : 'none';
+		},
+		get submitButtonText() {
+			const { isSubmitting } = getContext();
+			const { loadingText, submitText } = state;
+			return isSubmitting ? loadingText : submitText;
+		},
+		get displayCancelReply() {
+			const { formSlot } = getContext();
+			return formSlot ? undefined : 'none';
+		},
+	},
+	actions: {
+		*submit( 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 ) );
+
+			try {
+				event.preventDefault();
+
+				state.error = '';
+				context.isSubmitting = true;
+
+				response = yield 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 = yield response.text();
+				const dom = new window.DOMParser().parseFromString(
+					html,
+					'text/html'
+				);
+
+				if ( response.status !== 200 || dom.body.id === 'error-page' ) {
+					state.error =
+						dom.querySelector( '.wp-die-message' ).innerText;
+				} else {
+					const router = yield import(
+						'@wordpress/interactivity-router'
+					);
+					yield router.actions.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.notice =
+						state.submittedNotice +
+						( context.notice === state.submittedNotice
+							? '\u00A0'
+							: '' );
+
+					// Add hash to the URL.
+					window.history.replaceState(
+						{},
+						'',
+						window.location.pathname +
+							window.location.search +
+							`#${ newComment.id }`
+					);
+
+					// Reset form fields and position.
+					context.formSlot = undefined;
+					const { fields } = context;
+					for ( const key in fields ) {
+						fields[ key ] = key !== 'comment_parent' ? '' : 0;
+					}
+				}
+
+				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 );
+			}
+		},
+	},
+	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();
+			}
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/block.json
new file mode 100644
index 00000000000000..6139c4e0620409
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-slots",
+	"title": "E2E Interactivity tests - directive slots",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": "directive-slots-view",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php
new file mode 100644
index 00000000000000..c9a989ccaf0275
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php
@@ -0,0 +1,69 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+gutenberg_enqueue_module( 'directive-slots-view' );
+?>
+
+<div
+	data-wp-interactive='{ "namespace": "directive-slots" }'
+	data-wp-slot-provider
+	data-wp-context='{ "text": "fill" }'
+>
+	<div data-testid="slots" data-wp-context='{ "text": "fill inside slots" }'>
+		<div
+			data-testid="slot-1"
+			data-wp-key="slot-1"
+			data-wp-slot="slot-1"
+			data-wp-context='{ "text": "fill inside slot 1" }'
+		>[1]</div>
+		<div
+			data-testid="slot-2"
+			data-wp-key="slot-2"
+			data-wp-slot='{ "name": "slot-2", "position": "before" }'
+			data-wp-context='{ "text": "[2]" }'
+			data-wp-text='context.text'
+			data-wp-on--click="actions.updateSlotText"
+		>[2]</div>
+		<div
+			data-testid="slot-3"
+			data-wp-key="slot-3"
+			data-wp-slot='{ "name": "slot-3", "position": "after" }'
+			data-wp-context='{ "text": "[3]" }'
+			data-wp-text='context.text'
+			data-wp-on--click="actions.updateSlotText"
+		>[3]</div>
+		<div
+			data-testid="slot-4"
+			data-wp-key="slot-4"
+			data-wp-slot='{ "name": "slot-4", "position": "children" }'
+			data-wp-context='{ "text": "fill inside slot 4" }'
+		>[4]</div>
+		<div
+			data-testid="slot-5"
+			data-wp-key="slot-5"
+			data-wp-slot='{ "name": "slot-5", "position": "replace" }'
+			data-wp-context='{ "text": "fill inside slot 5" }'
+		>[5]</div>
+	</div>
+
+	<div data-testid="fill-container">
+		<span
+			data-testid="fill"
+			data-wp-fill="state.slot"
+			data-wp-text="context.text"
+		>initial</span>
+	</div>
+
+	<div data-wp-on--click="actions.changeSlot">
+		<button data-testid="slot-1-button" data-slot="slot-1">slot-1</button>
+		<button data-testid="slot-2-button" data-slot="slot-2">slot-2</button>
+		<button data-testid="slot-3-button" data-slot="slot-3">slot-3</button>
+		<button data-testid="slot-4-button" data-slot="slot-4">slot-4</button>
+		<button data-testid="slot-5-button" data-slot="slot-5">slot-5</button>
+		<button data-testid="reset" data-slot="">reset</button>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/view.js
new file mode 100644
index 00000000000000..a8673fea9eba92
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/view.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'directive-slots', {
+	state: {
+		slot: '',
+	},
+	actions: {
+		changeSlot( event ) {
+			state.slot = event.target.dataset.slot;
+		},
+		updateSlotText() {
+			const context = getContext();
+			const n = context.text[ 1 ];
+			context.text = `[${ n } updated]`;
+		},
+	},
+} );
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index 31e07d095e0a4c..c3f87b964b37ab 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import { h as createElement, type RefObject } from 'preact';
+import { h as createElement, Fragment, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
 
 /**
@@ -28,6 +28,7 @@ import {
 } from './hooks';
 import { getScope } from './scopes';
 import { proxifyState, proxifyContext, deepMerge } from './proxies';
+import { SlotProvider, Slot, Fill } from './slots';
 
 /**
  * Recursively clone the passed object.
@@ -607,4 +608,66 @@ export default () => {
 	);
 
 	directive( 'each-child', () => null, { priority: 1 } );
+
+	// data-wp-slot
+	directive(
+		'slot',
+		( { directives: { slot }, props: { children }, element } ) => {
+			const entry = slot.find( ( { suffix } ) => suffix === null )!;
+			const value = entry.value as
+				| string
+				| { name: string; position: string };
+
+			const name = typeof value === 'string' ? value : value.name;
+			const position =
+				typeof value === 'string'
+					? 'children'
+					: value.position || 'children';
+
+			if ( position === 'before' ) {
+				return createElement( Fragment, {}, [
+					createElement( Slot, { name } ),
+					children,
+				] );
+			}
+			if ( position === 'after' ) {
+				return createElement( Fragment, {}, [
+					children,
+					createElement( Slot, { name } ),
+				] );
+			}
+			if ( position === 'replace' ) {
+				return createElement( Slot, { name }, children );
+			}
+			if ( position === 'children' ) {
+				element.props.children = createElement(
+					Slot,
+					{ name },
+					element.props.children
+				);
+			}
+
+			return undefined;
+		},
+		{ priority: 4 }
+	);
+
+	// data-wp-fill
+	directive(
+		'fill',
+		( { directives: { fill }, props: { children }, evaluate } ) => {
+			const entry = fill.find( ( { suffix } ) => suffix === null )!;
+			const slot = evaluate( entry );
+			return createElement( Fill, { slot }, children );
+		},
+		{ priority: 4 }
+	);
+
+	// data-wp-slot-provider
+	directive(
+		'slot-provider',
+		( { props: { children } } ) =>
+			createElement( SlotProvider, null, children ),
+		{ priority: 4 }
+	);
 };
diff --git a/packages/interactivity/src/slots.tsx b/packages/interactivity/src/slots.tsx
new file mode 100644
index 00000000000000..c695c399ca90c7
--- /dev/null
+++ b/packages/interactivity/src/slots.tsx
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { h, createContext } from 'preact';
+import { useContext, useEffect } from 'preact/hooks';
+import { signal } from '@preact/signals';
+
+const slotsContext = createContext( { value: {} } );
+
+export const Fill = ( { slot, children = null } ) => {
+	const slots = useContext( slotsContext );
+
+	useEffect( () => {
+		if ( slot ) {
+			slots.value = { ...slots.value, [ slot ]: children };
+			return () => {
+				slots.value = { ...slots.value, [ slot ]: null };
+			};
+		}
+		return undefined;
+	}, [ slots, slot, children ] );
+
+	return !! slot ? null : children;
+};
+
+export const SlotProvider = ( { children } ) => {
+	return (
+		// TODO: We can change this to use deepsignal once this PR is merged.
+		// https://github.com/luisherranz/deepsignal/pull/38
+		h( slotsContext.Provider, { value: signal( {} ) }, children )
+	);
+};
+
+export const Slot = ( { name, children = null } ) => {
+	const slots = useContext( slotsContext );
+	return slots.value[ name ] || children;
+};
diff --git a/test/e2e/specs/interactivity/directive-slots.spec.ts b/test/e2e/specs/interactivity/directive-slots.spec.ts
new file mode 100644
index 00000000000000..195af52fdb1bd2
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-slots.spec.ts
@@ -0,0 +1,186 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-slot', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-slots' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-slots' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should render the fill in its children by default', async ( {
+		page,
+	} ) => {
+		const slot1 = page.getByTestId( 'slot-1' );
+		const slots = page.getByTestId( 'slots' );
+		const fillContainer = page.getByTestId( 'fill-container' );
+
+		await page.getByTestId( 'slot-1-button' ).click();
+
+		await expect( fillContainer ).toBeEmpty();
+		await expect( slot1.getByTestId( 'fill' ) ).toBeVisible();
+		await expect( slot1 ).toHaveText( 'fill inside slot 1' );
+		await expect( slots.locator( 'css= > *' ) ).toHaveText( [
+			'fill inside slot 1',
+			'[2]',
+			'[3]',
+			'[4]',
+			'[5]',
+		] );
+	} );
+
+	test( 'should render the fill before if specified', async ( { page } ) => {
+		const slot2 = page.getByTestId( 'slot-2' );
+		const slots = page.getByTestId( 'slots' );
+		const fillContainer = page.getByTestId( 'fill-container' );
+
+		await page.getByTestId( 'slot-2-button' ).click();
+
+		await expect( fillContainer ).toBeEmpty();
+		await expect( slot2 ).toHaveText( '[2]' );
+		await expect( slots.getByTestId( 'fill' ) ).toBeVisible();
+		await expect( slots.locator( 'css= > *' ) ).toHaveText( [
+			'[1]',
+			'fill inside slots',
+			'[2]',
+			'[3]',
+			'[4]',
+			'[5]',
+		] );
+	} );
+
+	test( 'should render the fill after if specified', async ( { page } ) => {
+		const slot3 = page.getByTestId( 'slot-3' );
+		const slots = page.getByTestId( 'slots' );
+		const fillContainer = page.getByTestId( 'fill-container' );
+
+		await page.getByTestId( 'slot-3-button' ).click();
+
+		await expect( fillContainer ).toBeEmpty();
+		await expect( slot3 ).toHaveText( '[3]' );
+		await expect( slots.getByTestId( 'fill' ) ).toBeVisible();
+		await expect( slots.locator( 'css= > *' ) ).toHaveText( [
+			'[1]',
+			'[2]',
+			'[3]',
+			'fill inside slots',
+			'[4]',
+			'[5]',
+		] );
+	} );
+
+	test( 'should render the fill in its children if specified', async ( {
+		page,
+	} ) => {
+		const slot4 = page.getByTestId( 'slot-4' );
+		const slots = page.getByTestId( 'slots' );
+		const fillContainer = page.getByTestId( 'fill-container' );
+
+		await page.getByTestId( 'slot-4-button' ).click();
+
+		await expect( fillContainer ).toBeEmpty();
+		await expect( slot4.getByTestId( 'fill' ) ).toBeVisible();
+		await expect( slot4 ).toHaveText( 'fill inside slot 4' );
+		await expect( slots.locator( 'css= > *' ) ).toHaveText( [
+			'[1]',
+			'[2]',
+			'[3]',
+			'fill inside slot 4',
+			'[5]',
+		] );
+	} );
+
+	test( 'should be replaced by the fill if specified', async ( { page } ) => {
+		const slot5 = page.getByTestId( 'slot-5' );
+		const slots = page.getByTestId( 'slots' );
+		const fillContainer = page.getByTestId( 'fill-container' );
+
+		await page.getByTestId( 'slot-5-button' ).click();
+
+		await expect( fillContainer ).toBeEmpty();
+		await expect( slot5 ).toBeHidden();
+		await expect( slots.getByTestId( 'fill' ) ).toBeVisible();
+		await expect( slots.locator( 'css= > *' ) ).toHaveText( [
+			'[1]',
+			'[2]',
+			'[3]',
+			'[4]',
+			'fill inside slots',
+		] );
+	} );
+
+	test( 'should keep the fill in its original position if no slot matches', async ( {
+		page,
+	} ) => {
+		const fillContainer = page.getByTestId( 'fill-container' );
+		await expect( fillContainer.getByTestId( 'fill' ) ).toBeVisible();
+
+		await page.getByTestId( 'slot-1-button' ).click();
+
+		await expect( fillContainer ).toBeEmpty();
+
+		await page.getByTestId( 'reset' ).click();
+
+		await expect( fillContainer.getByTestId( 'fill' ) ).toBeVisible();
+	} );
+
+	test( 'should not be re-mounted when adding the fill before', async ( {
+		page,
+	} ) => {
+		const slot2 = page.getByTestId( 'slot-2' );
+		const slots = page.getByTestId( 'slots' );
+
+		await expect( slot2 ).toHaveText( '[2]' );
+
+		await slot2.click();
+
+		await expect( slot2 ).toHaveText( '[2 updated]' );
+
+		await page.getByTestId( 'slot-2-button' ).click();
+
+		await expect( slots.getByTestId( 'fill' ) ).toBeVisible();
+		await expect( slots.locator( 'css= > *' ) ).toHaveText( [
+			'[1]',
+			'fill inside slots',
+			'[2 updated]',
+			'[3]',
+			'[4]',
+			'[5]',
+		] );
+	} );
+
+	test( 'should not be re-mounted when adding the fill after', async ( {
+		page,
+	} ) => {
+		const slot3 = page.getByTestId( 'slot-3' );
+		const slots = page.getByTestId( 'slots' );
+
+		await expect( slot3 ).toHaveText( '[3]' );
+
+		await slot3.click();
+
+		await expect( slot3 ).toHaveText( '[3 updated]' );
+
+		await page.getByTestId( 'slot-3-button' ).click();
+
+		await expect( slots.getByTestId( 'fill' ) ).toBeVisible();
+		await expect( slots.locator( 'css= > *' ) ).toHaveText( [
+			'[1]',
+			'[2]',
+			'[3 updated]',
+			'fill inside slots',
+			'[4]',
+			'[5]',
+		] );
+	} );
+} );
diff --git a/test/integration/fixtures/blocks/core__comments.json b/test/integration/fixtures/blocks/core__comments.json
index 1ea7dcae007f65..18ebda05ed7cdd 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 6cea899e1534b6..2d1427f6c23bf1 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": []
 	}