Size Change: +22.4 kB (+1%)

Total Size: 1.65 MB

_{compressed-size-action}

Just a quick update on the current status of the forms/fields blocks:

• The core/form block now accepts these children: paragraph, heading, form-input, columns, group
• Users can mark an input fields as required
• Users can edit the labels in-place
• Users can choose to inline labels
• Form-submissions send an email to the site-admin. Plugin-developers can override that by removing the submit_core_form_block hook from wp, and add their own.
• Added variations for the input fields.
• Added a default template to make building initial forms easier.
• Added block-supports for styling the forms
• Marked the feature as an experiment. Users will have to enable it from the experiments page for the blocks to become available

cc @draganescu

There are a few UX issues that need to be tweaked (for example selecting the form parent vs the input fields), but it is now in a working state, marked as an experiment. As an MVP I believe this can serve us well, and allow us to tweak it and improve the implementation while it's an experiment.

Sorry for the misunderstanding. @spencerfinnell

Thanks for your feedback here @spencerfinnell -- let's see what we can do to iterate. Would love your feedback here: #55174

I've just tested this, and hitting submit doesn't seem to do anything? I've added an email in the form settings panel.

@jamiemarsland Thank you for testing this!
I was able to replicate the issue, and submitted 2 PRs to fix it: #55690, and #55691 👍

Adding to the comments about giving feedback: I wanted to go back to this block, read more about it and test it. Unfortunately there is no label for this experiment/block yet and searching the 5k+ issues for "forms" is pretty overwhelming and it took me a little while to find this PR😅
Would it be possible to create a label for the form blocks experiment and group all related issue under there? Especially when testers will create new issues/bugs or give feedback. Or create an overview issue. Adding more comments to this merged PR seems not ideal.

Would it be possible to create a label for the form blocks experiment and group all related issue under there?

Done 👍

I am just about to create a video showing my experience of this new form block.
I believe it would be helpful to perhaps create a discussion thread here: https://github.com/WordPress/gutenberg/discussions to where we can discuss feedback and adjustments etc and from there create issues. I say this as I do not know where to share my video feedback which is likely a more general walk through to which I test it out the Form block for the first time.

I will pretend that this is the discussion thread as there are likely things here that are nice to discuss somewhere and add in my initial video test of the Form block. I got to say I really like what I see. I see this as a very good beginning of a helpful core Form block!
https://youtu.be/nzpalsqpFhg

Thank you for testing this @paaljoachim!

The button was not working but that is already fixed in PRs #55690 and #55691 (both pending a review, so this will be fixed on trunk once these get merged).
I also saw in your video that the styles were not properly applied, so PR #55755 fixes that as well.

Now, regarding some other things you brought up:

• It is not currently possible to group controls (or add a group block, columns etc inside a form, because of a quirk in Gutenberg: We can define a parent for a block, so that a checkbox for example can only live inside a form. However, that check goes only one level up... So if we allow adding group blocks, then we won't be able to add any inputs inside them - unless we allow inputs to be added regardless of their parent element (which would be semantically and logically horrible). We need to find a solution to that and allow parent definitions to check more than 1 levels
• Regarding radio buttons and other more complex controls, for v1 of the experiment I thought it best to start with some basic controls, and then we can add more as we see fit. So for now, multiple-choice controls were not implemented (but they can easily be added once we fix some of the more "urgent" logic and UX issues with forms - because they are undoubtedly a very complex issue in the ecosystem.
• Regarding conditional logic: I added some conditional logic (for logged-in/logged-out) because that was required for comment forms, however they are not exposed in the UI. They are simply in the code markup and can be edited manually. Designing a UI/UX to properly do conditional logic (if input A is checked then show input B etc) will be extremely difficult from a UX perspective, and perhaps it would be better if logic like that is done in a plugin instead of Core. We'll see how it goes...
• I saw you also tried a bit the custom action instead of "send an email"... That can allow users/developers/plugin-implementers to do more complex things, like for example submit something to an internal PHP script, or even make use of 3rd-party APIs and endpoints. An example of that is the experimental comment form, which submits a POST request to wp-comments-post.php - just like the default WP-Core form does.
• I have no idea why the default form is shown as a "comment form"... I'm currently investigating that. I guess it's because both a comment form and a contact form have basically the same blocks - and so Gutenberg (erroneously) thinks that you have selected the variation 🤔

@aristath

• It is not currently possible to group controls (or add a group block, columns etc inside a form, because of a quirk in Gutenberg: We can define a parent for a block, so that a checkbox for example can only live inside a form. However, that check goes only one level up... So if we allow adding group blocks, then we won't be able to add any inputs inside them - unless we allow inputs to be added regardless of their parent element (which would be semantically and logically horrible). We need to find a solution to that and allow parent definitions to check more than 1 levels

Isn't that what the ancestor property is for?

@gaambo oh my... I completely missed this. Thank you!!
Submitted a PR in #55758 👍

Exploring the form.

I am using the default included form.

From the visual it looks like the font in the comment field is different compared to name and email fields.
There is also less space above the inserted text in the comment field related to the other fields.

Clicking Submit nothing happens. I thought that was fixed and added to the Gutenberg plugin....

I am leaving it up on this page. Just another web site....not used for much at all. Kinda like a dev site.
https://romdahl.com/contact/

I updated to Gutenberg plugin 17.2.
It does not look like the form is working yet. I just tried it here: https://bluewinddesign.com/contact/
I am also still seeing the tightness of the text to the top edge of the Comment box.
Thanks.

EDIT:
This is the PR that needs to be reviewed and merged before I believe the form works.
Fix missing data in email submissions
#55691

@youknowriad These blocks are experimental and as @aristath said

Should not be backported, these blocks are still experimental and will remain that way for a while 👍

Do you know whether the packages sync process will omit the experimental blocks from block-library?

✅ I updated the PHP Sync Tracking Issue for WP 6.5 to note this PR does not require a backport for WP 6.5.