Add options to Comments and Comment Forms to allow submission (#1498)

## Overview

This makes some changes to our components to allow the Wordpress site to properly set up comment form submission.

I'm like 90% sure this will be all we need. There's a chance we'll need to do a follow-up PR if things don't work as expected in WP land.

### Comment Form

The comment form got a new `hidden_inputs` block which allows you to pass in `<input type="hidden">` elements, which Wordpress requires for comment submission. (We technically could have done this already with the `prompt` block, but that felt kinda gross and I had to make other changes.)

### Comment

This component required more changes so that it can configure its nested Comment Form:

#### Properties

- `reply_form_action`: the action for the reply form
- `reply_form_method`: the method for the reply form

#### Blocks

- `reply_form_hidden_inputs`: This allows you to pass in content to the form's new `hidden_inputs` block
- `reply_form`: This allows you to replace the whole reply form. We shouldn't currently need this but it seemed like a useful escape hatch.

Author: Paul-Hebert

.changeset/mean-spies-glow.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add new options to Comment and Comment Form components to support comment submission

src/components/comment-form/comment-form.stories.mdx

@@ -129,7 +129,11 @@ There is also a reply version of this component (`is_reply: true`), used to repl
 
 - `log_out_url`: URL used for log out link.
 - `is_reply`: Whether the comment is a reply to another comment.
-- `prompt` (block): The text that is displayed above the messge box.
+
+## Template blocks
+
+- `prompt`: The text that is displayed above the message box.
+- `hidden_inputs`: Can be used to include `<input type="hidden">` elements, which systems like Wordpress use to provide additional context during form submission.
 
 ## JavaScript
 

src/components/comment-form/comment-form.twig

@@ -25,6 +25,13 @@
       {% endblock %}
     {% endembed %}
   {% endblock %}
+
+  {#
+    Can be used to include `<input type="hidden">` elements, which systems like
+    Wordpress use to provide additional context during form submission.
+  #}
+  {% block hidden_inputs %}{% endblock %}
+
   {% embed '@cloudfour/objects/form-group/form-group.twig' with { label: main_label|default('Message') } %}
     {% block control %}
       {% include '@cloudfour/components/input/input.twig' with {

src/components/comment/comment.stories.mdx

@@ -299,13 +299,17 @@ While it is theoretically possible to infinitely nest `children`, it's recommend
   ```
 - `log_out_url`: URL used for log out link.
 - `source`: An optional object containing a `url` and `name` for the comment source.
+- `reply_form_action`: A form action for the comment reply form
+- `reply_form_method`: A form method for the comment reply form
 
 ## Template Blocks
 
 - `header_content`: Use to over-write the content of the comment header
 - `heading_content`: Use to over-write the content of the comment heading
 - `author_title`: Use to over-write a portion of the comment heading content. Will be followed by a visually hidden span reading either `replied` or `said`. (Valid values could be `John Doe` or `John Doe (Post Author)`.)
 - `replies`: Use to pass in your own replies markup. This is useful if you need to modify other blocks within replies.
+- `reply_form`: Can be used to replace the entire reply form
+- `reply_form_hidden_inputs`: Can be used to add hidden inputs to the comment reply form. This can be useful for integrating with systems like Wordpress which use these provide additional context during form submission.
 
 ## JavaScript Instructions
 

src/components/comment/comment.twig

@@ -94,18 +94,35 @@
     {% set _section_heading_depth = min(_heading_depth + 1, 6) %}
 
     {% if allow_replies %}
+      {#
+        This is defined here, so we can pass it into the block of a nested embed.
+        @see https://benfurfie.co.uk/articles/how-to-nest-a-block-in-another-block-in-an-embed-in-twig
+      #}
+      {% set reply_form_hidden_inputs_content %}
+        {% block reply_form_hidden_inputs %}{% endblock %}
+      {% endset %}
+
       <div class="c-comment__reply-form js-comment-reply-form">
-        {% include '@cloudfour/components/comment-form/comment-form.twig' with {
-          is_reply: true,
-          logged_in_user: logged_in_user,
-          log_out_url: log_out_url,
-          heading_id: "reply-to-comment-#{comment.ID}",
-          help_text_id: "reply-to-comment-#{comment.ID}-help-text",
-          heading_tag: "h#{_section_heading_depth}",
-          heading_text: "Reply to #{comment.author.name}",
-          heading_class: 'u-hidden-visually',
-          main_label: 'Reply',
-        } only %}
+        {% block reply_form %}
+          {% embed '@cloudfour/components/comment-form/comment-form.twig' with {
+            is_reply: true,
+            logged_in_user: logged_in_user,
+            log_out_url: log_out_url,
+            heading_id: "reply-to-comment-#{comment.ID}",
+            help_text_id: "reply-to-comment-#{comment.ID}-help-text",
+            heading_tag: "h#{_section_heading_depth}",
+            heading_text: "Reply to #{comment.author.name}",
+            heading_class: 'u-hidden-visually',
+            main_label: 'Reply',
+            action: reply_form_action,
+            method: reply_form_method,
+            reply_form_hidden_inputs_content: reply_form_hidden_inputs_content
+          } only %}
+            {% block hidden_inputs %}
+              {{reply_form_hidden_inputs_content}}
+            {% endblock %}
+          {% endembed %}
+        {% endblock %}
       </div>
     {% endif %}
     {% if comment.children is not empty %}