Experiment: use the Interactivity API to do client-side form submissions #49305
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
luisherranz
changed the title
23 tasks
|
Size Change: +1.02 kB (0%) Total Size: 1.35 MB
ℹ️ View Unchanged
|
Co-authored-by: Luis Herranz <luisherranz@users.noreply.github.com>
Co-authored with @michalczaplinski
|
Michal and I have finished the basic functionality, and it seems to work pretty well so far. I made a video to explain how it works: 
https://www.loom.com/share/a8ee7ae872f3485d89c8f6c49988e693 Oh, after recording the video, I realized this should also use the new |
In AMP, all POST form submissions are required to be done via fetch. There may be some prior art which is useful here in terms of loading states, success/failure messages, and so on: https://amp.dev/documentation/components/amp-form |
westonruter
reviewed
Mar 28, 2023
| const formData = new FormData( event.target ); | ||
|
|
||
| const res = await fetch( | ||
| 'http://localhost:8888/wp-comments-post.php', |
There was a problem hiding this comment.
This will allow the action to not be hard-coded:
Suggested change
| 'http://localhost:8888/wp-comments-post.php', | |
| event.target.action, |
westonruter
reviewed
Mar 28, 2023
| state.core.commentsFormError = | ||
| dom.querySelector( 'p' ).innerHTML; | ||
| } else { | ||
| navigate( res.url, { |
There was a problem hiding this comment.
Normally when leaving a comment, the submission will take you to the permalink for the comment. For example, https://localhost:8888/?p=1#comment-2. But here it seems navigate doesn't include the URL fragment. I think this should be retained as it is normal WP behavior and it facilitates linking/bookmarking. With that URL fragment in place, it would also be a nice touch if there was a yellow fade highlight applied to the comment via the .comment:target CSS selector to make it abundantly clear where there newly-added comment is showing up.
There was a problem hiding this comment.
But here it seems navigate doesn't include the URL fragment. I think this should be retained as it is normal WP behavior and it facilitates linking/bookmarking.
The client router doesn't support hashes yet, but I've opened an issue to track it. Thanks 🙂
it would also be a nice touch if there was a yellow fade highlight applied to the comment via the .comment:target CSS selector to make it abundantly clear where there newly-added comment is showing up
That would be a very nice touch indeed.
westonruter
reviewed
Mar 28, 2023
| 'text/html' | ||
| ); | ||
| state.core.commentsFormError = | ||
| dom.querySelector( 'p' ).innerHTML; |
There was a problem hiding this comment.
This might be a bit more robust:
Suggested change
| dom.querySelector( 'p' ).innerHTML; | |
| dom.querySelector( '.wp-die-message' ).innerHTML; |
Not only would it preserve the paragraph in the response (instead of rendering the text in a bare div), but it would also account for there possibly being additional paragraphs or other elements rendered on the comment error screen.
gziolo
added
the
[Feature] Interactivity API
This is awesome. Thank you for sharing the video presenting how it works. I was surprised to learn how advanced the implementation is with so little custom code. By the way, I created a new label in the repository: |
ockham
reviewed
Mar 29, 2023
| @@ -45,11 +45,17 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) { | |||
| // to the block is carried along when the comment form is moved to the location | |||
| // of the 'Reply' link that the user clicked by Core's `comment-reply.js` script. | |||
| $form = str_replace( 'class="comment-respond"', $wrapper_attributes, $form ); | |||
| $form = str_replace( '</form>', '<div style="color: red;" data-wp-text="state.core.commentsFormError"></div></form>', $form ); | |||
There was a problem hiding this comment.
FWIW, there's a comment_form_after action that can be used to render stuff here. (Though I'm not sure it's worth using it here as it'd require adding the action before the comment_form() call and removing it after.)
There was a problem hiding this comment.
On second thought -- if we're not married to this exact location (i.e. right before the </form>, which means after the 'Submit' button), we might also use one of the (many) options to the comment_form function. There is e.g. comment_notes_after which is rendered after the textarea (before the 'Submit' button), and which defaults to the empty string.
There was a problem hiding this comment.
This brings to mind something important: it could be that when the user submits the form, the button could be positioned at the bottom of the viewport. In such a case, the injected error message container may not be visible when it gets populated. The user could then be very frustrated and rage tap the submit button confounded as to why nothing is happening. Perhaps the error message should get displayed as a snackbar with position:fixed or else scrolled into view if not visible.
There was a problem hiding this comment.
The snackbar seems like a great idea. The message would also have to get announced when using assistive technologies. In both cases when it’s successful, or it fails.
There was a problem hiding this comment.
I like the snackbar idea! We can try it to see how it feels and to see how easy it would be to create one with the Interactivity API 🙂
6 tasks
20 tasks
|
Superseded by #53737. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Co-authored with @DAreRodz and @michalczaplinski.
What?
Experiment using the Interactivity API to do client-side form submissions.
The Interactivity API is an experimental API to add frontend interactivity to blocks. More info here
Why?
To see what API would be needed for
navigate(or a new API for this use case).How?
data-wp-on.submitto the form using the HTML Tag Processor.fetch.Next steps
navigateAPI to accept an HTML string. Maybe use a different API.Replybuttons. Maybe using client-sidewp-slotandwp-fill.Testing Instructions
It's not working yet.