Comments block: Try client-side form submission [new store API]

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
 

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"

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.changeReplyTo' );
+	}
+	$comment_reply_link = $p->get_updated_html();
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,

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,

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;

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"
+	}
 }

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>
+		</>
 	);
 }

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,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', '{ "namespace": "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(
+							'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;
@@ -92,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' );
 

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"
 }