Block Comments is a new experimental plugin from Tom Nowell that replaces WordPress’ default comment form with a trimmed down version of the block editor. Nowell gave a presentation at WordCamp Europe 2019 about using blocks outside the editor, including on the frontend. Block Comments is one example he brought to life using the block list component along with some wrapper components.
The result is a comment form that offers the same UI as the WordPress editor but with a limited set of blocks appropriate for commenting and no block sidebar panel. This includes text-based and embed blocks, along with image upload via URL. It defaults to the paragraph block when the commenter clicks inside the form. Here is an example of using the block editor for a reply on the Twenty Nineteen theme:
For the most part, Block Comments should fit in with the style of the active theme, as shown below with an example using the Astrid theme. Nowell recommends users watch out for occasional clashes between the editor UI CSS and the theme’s CSS, since it is still early beta software.
Incorporating the block editor into commenting could make formatting easier for commenters with more options for expressing themselves. The plugin includes blocks for lists, quotes, code, embeds, headings, pre-formatted text, and other formats, all with Gutenberg’s built in preview. Commenters can immediately see how the comment will appear without having to struggle with using the correct format tags.
“I see it as a much more flexible form of those Tiny MCE visual comment forms,” Nowell said. “Except instead of just putting a toolbar on top and showing you bold and italic in-line, you can do more.”
Nowell said replies and threading work exactly the same with Block Comments enabled. The UI for the comment form is the only thing that changes, but the commenting system remains the same.
Bringing the block editor to comments is not yet on WordPress’ roadmap. The UI is different from the comment forms users have become accustomed to over the years of commenting on the internet. Some commenters may find it confusing if this is their first experience with WordPress’ block editor. For those who have used WordPress 5.0+ previously, the Gutenberg-powered comment form brings a little more unity to the front and backend posting experiences.
“It’s certainly not for every comment form, but I can see it being very useful in some situations, such as P2 blogs,” Nowell said. “As Gutenberg itself improves, it will too.”
Block Comments is currently available on GitHub where users can report any issues or conflicts. It is recommended to be used with the Gutenberg plugin installed for best results. It also doesn’t play well with the Classic Editor plugin, since that plugin removes the block editor hooks and styles.
I would not be surprised to see this experiment further developed for P2-powered blogs or even Jetpack comments , if the idea catches on. These avenues would provide a good testing ground for such a feature before it might be considered for WordPress core.
This is Tom’s talk from WordCamp Europe: https://youtu.be/Y3y74POsDvc?t=10972
What Tom is exploring is pretty interesting indeed. However, I do really really really hope that porting Gutenberg to the front-end is doable from a performance point of view, since now it has to download a huge amount of JavaScript, just for adding comments! Last time I checked (version 6.0), the Gutenberg editor loads 4.2 mb of JS, and Tom’s site is loading 2.2 mb (I don’t know how much from that is due to Gutenberg, but I guess most of it, since his site is otherwise so clean).
Adding Gutenberg to the front-end can certainly make sense for sites which are already very heavy on JS and full of dynamic functionalities. But adding so much load for any typical WordPress site, i.e. for simple blogs, can easily become a disservice to the site: more functionality at the cost of speed (at least for first-time users) will, most likely, not be worth it.
Maybe Gutenberg could ship an extremely bare version of it (eg: no “+” signs, no de-registering blocks from the front-end, i.e. no need to load JS to remove JS, etc), and weigh no more than 300-500 kb? Then I would consider adding it to a simple site, but not before then.