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.

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

Introduce experimental form & inputs blocks to allow building basic forms #44214

Merged
merged 133 commits into from
Oct 5, 2023

Conversation

aristath
Copy link
Member

@aristath aristath commented Sep 16, 2022

What?

Introduces new core/form and core/form-input blocks to allow building forms in the editor.
More background on #44186 (please read that ticket for background on the concept)

Screenshots or screencast

I updated the screencast with the latest implementation (Dec.7 2022). The original screencast from the POC is no longer relevant, but can still be found here)

forms-demo.mov

NOTE: These blocks are experimental. Please go from your dashboard to Gutenberg > Experiments, and enable the "Form and input blocks" experiment. Once you do, the blocks will be available.

@github-actions
Copy link

github-actions bot commented Sep 16, 2022

Size Change: +22.4 kB (+1%)

Total Size: 1.65 MB

Filename Size Change
build/block-editor/index.min.js 218 kB +138 B (0%)
build/block-editor/style-rtl.css 15.6 kB -6 B (0%)
build/block-editor/style.css 15.6 kB -7 B (0%)
build/block-library/blocks/post-featured-image/style-rtl.css 345 B +23 B (+7%) 🔍
build/block-library/blocks/post-featured-image/style.css 345 B +23 B (+7%) 🔍
build/block-library/blocks/post-template/style-rtl.css 409 B +95 B (+30%) 🚨
build/block-library/blocks/post-template/style.css 408 B +94 B (+30%) 🚨
build/block-library/editor-rtl.css 12.4 kB +225 B (+2%)
build/block-library/editor.css 12.4 kB +226 B (+2%)
build/block-library/index.min.js 211 kB +4.06 kB (+2%)
build/block-library/style-rtl.css 14.3 kB +281 B (+2%)
build/block-library/style.css 14.3 kB +273 B (+2%)
build/components/index.min.js 248 kB +23 B (0%)
build/core-data/index.min.js 70.5 kB +47 B (0%)
build/edit-post/index.min.js 35.6 kB -30 B (0%)
build/edit-post/style-rtl.css 7.89 kB -34 B (0%)
build/edit-post/style.css 7.88 kB -34 B (0%)
build/edit-site/index.min.js 203 kB +16.8 kB (+9%) 🔍
build/edit-site/style-rtl.css 14.1 kB +111 B (+1%)
build/edit-site/style.css 14.1 kB +113 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 461 B
build/block-directory/index.min.js 7.07 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.28 kB
build/block-editor/content.css 4.27 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 311 B
build/block-library/blocks/file/style.css 312 B
build/block-library/blocks/file/view.min.js 321 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 228 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.4 kB
build/block-library/blocks/image/style.css 1.39 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.83 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.01 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 401 B
build/block-library/blocks/page-list/editor.css 401 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/style-rtl.css 375 B
build/block-library/blocks/query/style.css 372 B
build/block-library/blocks/query/view.min.js 609 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 613 B
build/block-library/blocks/search/style.css 613 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 471 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.45 kB
build/block-library/blocks/social-links/style.css 1.45 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 432 B
build/block-library/blocks/table/editor.css 432 B
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 191 B
build/block-library/blocks/video/style.css 191 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.5 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/style-rtl.css 11.9 kB
build/components/style.css 11.9 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.72 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.51 kB
build/customize-widgets/style.css 1.5 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.78 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-widgets/index.min.js 17 kB
build/edit-widgets/style-rtl.css 4.84 kB
build/edit-widgets/style.css 4.84 kB
build/editor/index.min.js 45.9 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.79 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/index.min.js 11.4 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.9 kB
build/list-reusable-blocks/index.min.js 2.21 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 3.57 kB
build/patterns/style-rtl.css 325 B
build/patterns/style.css 325 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 1.85 kB
build/preferences/index.min.js 1.26 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 972 B
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.73 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.2 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 1.98 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.84 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 967 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.18 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@aristath aristath force-pushed the form-fields branch 2 times, most recently from 5d66ed0 to 13279f8 Compare September 20, 2022 10:15
@aristath aristath linked an issue Sep 20, 2022 that may be closed by this pull request
@aristath aristath force-pushed the form-fields branch 2 times, most recently from 69a9987 to 7a2325c Compare September 23, 2022 11:03
@aristath aristath force-pushed the form-fields branch 4 times, most recently from 0cbb1bf to c2dcd04 Compare October 4, 2022 09:17
@aristath aristath force-pushed the form-fields branch 2 times, most recently from bbeb087 to 9aa3e3f Compare October 13, 2022 10:36
@aristath aristath force-pushed the form-fields branch 2 times, most recently from d6187d2 to 12936f3 Compare October 17, 2022 10:21
@aristath
Copy link
Member Author

aristath commented Oct 17, 2022

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.

Screen.Recording.2022-10-18.at.10.14.59.AM.mov

@aristath aristath changed the title Experiment: POC for forms/inputs blocks Introduce form & inputs blocks to allow building basic forms Oct 18, 2022
@aristath aristath changed the title Introduce form & inputs blocks to allow building basic forms Introduce experimental form & inputs blocks to allow building basic forms Oct 18, 2022
@aristath aristath added the Needs Accessibility Feedback Need input from accessibility label Oct 18, 2022
@aristath aristath added New Block Suggestion for a new block [Type] Experimental Experimental feature or API. labels Oct 19, 2022
@MaggieCabrera
Copy link
Contributor

MaggieCabrera commented Oct 9, 2023

@youknowriad I wouldn't exactly call 133 out of 180 total commits over the course of just under 13 months is simply an experiment. Especially when it involves something like this. Seems a bit beyond that.

It is an experiment because it's still under an experimental flag. The only difference now is that now it's merged and ready for testing and feedback widely, specially for those folks who missed the start of the dev process. There has been multiple experiments that never made it to the final release because during that process the feedback received reflected that the feature was not ready or not in the right state to become part of core.

Just because it's merged doesn't mean that it's done.

@spencerfinnell
Copy link

spencerfinnell commented Oct 9, 2023

I've been following this PR since its inception because I am very interested in having these capabilities in the editor. While I'm happy it's merged, it did seem abrupt to me as well.

A similar sentiment about how difficult is to track and contribute to rather large undertakings like this when they happen in single GitHub issues/PRs can be found here: #53788 (comment)

It is an experiment because it's still under an experimental flag. The only difference now is that now it's merged and ready for testing and feedback widely, specially for those folks who missed the start of the dev process.

The "Experiments" screen has no indication that the features listed are available for further feedback, or where the best place to leave that feedback is.

Screenshot 2023-10-09 at 12 24 54 PM

@bph
Copy link
Contributor

bph commented Oct 9, 2023

Ah, I understand. This PR was merged for the 16.9 milestone, meaning it will be available in the Gutenberg plugin release 16.9.that is slated for October 25th with a RC on 10/18.

If you are eager to start testing you can use the Gutenberg Nightly

@spencerfinnell
Copy link

spencerfinnell commented Oct 9, 2023

@bph my screenshot was a general reference to the Experiments page lacking any sort of way to provide feedback for any of the listed experiments that have already been merged -- I realize my screenshot is of a version that does not yet include this additional experiment.

Related

#30922 (comment)
#30922 (comment)

@bph
Copy link
Contributor

bph commented Oct 9, 2023

Sorry for the misunderstanding. @spencerfinnell

@annezazu
Copy link
Contributor

annezazu commented Oct 9, 2023

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

@jamiemarsland
Copy link

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

@aristath
Copy link
Member Author

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

@gaambo
Copy link
Contributor

gaambo commented Oct 31, 2023

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.

@aristath aristath added the [Block] Form (experimental) Affects the form block label Oct 31, 2023
@aristath
Copy link
Member Author

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

Done 👍

@paaljoachim
Copy link
Contributor

paaljoachim commented Oct 31, 2023

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.

@paaljoachim
Copy link
Contributor

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

@aristath
Copy link
Member Author

aristath commented Nov 1, 2023

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 🤔

@gaambo
Copy link
Contributor

gaambo commented Nov 1, 2023

@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?

@aristath
Copy link
Member Author

aristath commented Nov 1, 2023

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

@paaljoachim
Copy link
Contributor

paaljoachim commented Nov 21, 2023

Exploring the form.

I am using the default included form.

Screenshot 2023-11-21 at 10 10 17

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/

@paaljoachim
Copy link
Contributor

paaljoachim commented Dec 9, 2023

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

@getdave
Copy link
Contributor

getdave commented Jan 22, 2024

@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?

@getdave
Copy link
Contributor

getdave commented Jan 22, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Form (experimental) Affects the form block Needs Design Needs design efforts. New Block Suggestion for a new block [Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature suggestion: Form & input blocks