Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experiment: Comments block: client-side form submission #53737

Draft
wants to merge 15 commits into
base: trunk
Choose a base branch
from
Draft

Experiment: Comments block: client-side form submission #53737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b542f35
Comments block: Try client-side form submission
ockham Dec 16, 2023
ffc93df
Try updating to new store API
ockham Dec 12, 2023
f3eeb01
Update action in Comment Reply Link block
ockham Dec 12, 2023
26d13fb
Move module registration to correct filter
ockham Dec 12, 2023
a5f1a58
Fix more state
ockham Dec 12, 2023
e43b0d2
Move namespace inside JSON
DAreRodz Dec 12, 2023
03cdf09
Register and enqueue comments form module
DAreRodz Dec 12, 2023
3e20de5
Update state definition
DAreRodz Dec 12, 2023
202771c
Use generator syntax for submit action
DAreRodz Nov 13, 2024
d5012cb
Update module registration logic
DAreRodz Nov 13, 2024
3968364
Specify post-comments-form/view as module
DAreRodz Nov 13, 2024
feadb8c
Update PHP files
DAreRodz Nov 13, 2024
7b92a5e
Remove unused viewScript
DAreRodz Nov 13, 2024
204fa39
Dynamically import iAPI router
DAreRodz Nov 13, 2024
e57bc5f
Revert "Interactivity API: Remove `data-wp-slot` and `data-wp-fill` …
DAreRodz Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions packages/block-library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/comment-reply-link/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
11 changes: 11 additions & 0 deletions packages/block-library/src/comment-reply-link/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/comment-template/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 10 additions & 1 deletion packages/block-library/src/comment-template/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/comments/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
"legacy": {
"type": "boolean",
"default": false
},
"enhancedSubmission": {
"type": "boolean",
"default": false
}
},
"supports": {
Expand Down Expand Up @@ -60,5 +64,8 @@
}
},
"editorStyle": "wp-block-comments-editor",
"usesContext": [ "postId", "postType" ]
"usesContext": [ "postId", "postType" ],
"providesContext": {
"enhancedSubmission": "enhancedSubmission"
}
}
58 changes: 54 additions & 4 deletions packages/block-library/src/comments/edit/comments-inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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.'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where and how do they disable it? Having more specific actionable error messages will be helpful. Also, what kinds of interactive blocks might stop working? I'm not sure what kinds of things to look out for.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what kinds of interactive blocks might stop working?

This is tricky because the correct answer is "interactive blocks that are not using the Interactivity API", which is too technical and doesn't make sense to put in the UI. We're still trying to come up with ways to auto-detect those blocks, but we haven't come up with a 100% reliable technique yet. Once we do, we can remove that message.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we haven't come up with a 100% reliable technique yet

I had an idea to make this 100% reliable and remove the warning. I'll open a discussion to talk about it. It also applies to the Query block pagination.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There you go:

Any input would be highly appreciated 🙂

);

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
Expand All @@ -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' ) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will there be other enhancements as well? Otherwise, I'm wondering if there's a more specific name for this feature that tells you what it does. However, I'm trying to think of an improvement and not coming up with anything short and accurate 😅

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>
</>
);
}
36 changes: 35 additions & 1 deletion packages/block-library/src/comments/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) ) {
Expand All @@ -41,7 +42,31 @@
// 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;
Expand Down Expand Up @@ -98,6 +123,15 @@
'skip_inner_blocks' => true,
)
);

// if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
// gutenberg_register_module(

Check failure on line 128 in packages/block-library/src/comments/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed
// '@wordpress/block-library/comments',

Check failure on line 129 in packages/block-library/src/comments/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed
// gutenberg_url( '/build/interactivity/comments.min.js' ),

Check failure on line 130 in packages/block-library/src/comments/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed
// array( '@wordpress/interactivity' ),

Check failure on line 131 in packages/block-library/src/comments/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed
// defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )

Check failure on line 132 in packages/block-library/src/comments/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed
// );

Check failure on line 133 in packages/block-library/src/comments/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Spaces must be used for mid-line alignment; tabs are not allowed
// }
}
add_action( 'init', 'register_block_core_comments' );

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/post-comments-form/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"type": "string"
}
},
"usesContext": [ "postId", "postType" ],
"usesContext": [ "postId", "postType", "enhancedSubmission" ],
"supports": {
"html": false,
"color": {
Expand Down
Loading
Loading