From 8567c2afe97eeb0d33910c66e2f08b1b943758ef Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Fri, 19 Sep 2025 13:36:15 -0300 Subject: [PATCH 1/3] changelog --- .../forms-use-gutenberg-layout-api-for-horizontal-variation | 4 ++++ .../forms-use-gutenberg-layout-api-for-horizontal-variation | 5 +++++ 2 files changed, 9 insertions(+) create mode 100644 projects/packages/forms/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation create mode 100644 projects/plugins/jetpack/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation diff --git a/projects/packages/forms/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation b/projects/packages/forms/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation new file mode 100644 index 0000000000000..b9ccde2c38dbe --- /dev/null +++ b/projects/packages/forms/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Forms: Add horizontal layout diff --git a/projects/plugins/jetpack/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation b/projects/plugins/jetpack/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation new file mode 100644 index 0000000000000..b0b991cd83f23 --- /dev/null +++ b/projects/plugins/jetpack/changelog/forms-use-gutenberg-layout-api-for-horizontal-variation @@ -0,0 +1,5 @@ +Significance: patch +Type: enhancement +Comment: test + + From 6f84a92dd7c537df16bb09791ab3fee24c1b76d4 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Thu, 18 Sep 2025 21:57:49 -0300 Subject: [PATCH 2/3] Forms: Add Gutenberg layout support to enable horizontal forms Instead of creating a custom horizontal variation with CSS, this change leverages Gutenberg's native layout API by adding layout support to the Form block. This approach: - Follows Gutenberg patterns used in core blocks like Buttons and Group - Allows users to toggle between vertical/horizontal layouts via block toolbar - Provides better responsive behavior through native layout system - Simplifies implementation by removing need for custom CSS Changes: - Add 'layout: true' to block.json supports - Remove custom horizontal variation approach This aligns with how WordPress core blocks handle layout options. --- projects/packages/forms/src/blocks/contact-form/block.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/block.json b/projects/packages/forms/src/blocks/contact-form/block.json index 6b0acad514f13..cb4d4fdd2cabc 100644 --- a/projects/packages/forms/src/blocks/contact-form/block.json +++ b/projects/packages/forms/src/blocks/contact-form/block.json @@ -19,7 +19,8 @@ "padding": true, "margin": true }, - "align": [ "wide", "full" ] + "align": [ "wide", "full" ], + "layout": true }, "attributes": {}, "editorScript": "file:./editor.js" From e4de865144f8b2b57afbc02ff3eb37e09d6cb724 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Fri, 19 Sep 2025 13:27:12 -0300 Subject: [PATCH 3/3] stash --- .../forms/src/blocks/contact-form/block.json | 14 +++++- .../forms/src/blocks/contact-form/edit.js | 2 +- .../forms/src/blocks/contact-form/editor.scss | 40 ++++++++++++++++- .../forms/src/blocks/contact-form/index.js | 11 +++++ .../forms/src/contact-form/css/grunion.scss | 45 ++++++++++++++++++- 5 files changed, 106 insertions(+), 6 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/block.json b/projects/packages/forms/src/blocks/contact-form/block.json index cb4d4fdd2cabc..73978b4fb2a7a 100644 --- a/projects/packages/forms/src/blocks/contact-form/block.json +++ b/projects/packages/forms/src/blocks/contact-form/block.json @@ -3,7 +3,7 @@ "apiVersion": 3, "name": "jetpack/contact-form", "title": "Form", - "description": "Create forms to collect data from site visitors and manage their responses.", + "description": "Create forms with layout support to collect data from site visitors and manage their responses.", "keywords": [ "email", "feedback", "contact form" ], "version": "12.5.0", "textdomain": "jetpack-forms", @@ -20,7 +20,17 @@ "margin": true }, "align": [ "wide", "full" ], - "layout": true + "layout": { + "default": { + "type": "flex", + "flexWrap": "wrap" + }, + "allowSwitching": false, + "allowEditing": true, + "allowOrientation": true, + "allowVerticalAlignment": false, + "allowJustification": false + } }, "attributes": {}, "editorScript": "file:./editor.js" diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index ef6e0d484adce..aae9de7276b35 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -192,7 +192,7 @@ function JetpackContactFormEdit( { name, attributes, setAttributes, clientId, cl const innerBlocksProps = useInnerBlocksProps( { ref: innerRef, - className: formClassnames, + className: clsx( formClassnames, blockProps?.className ), style: window.jetpackForms.generateStyleVariables( innerRef.current ), }, { diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 7fd31d6d9f459..c45840a85abac 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -47,7 +47,6 @@ display: flex; flex-wrap: wrap; justify-content: flex-start; - flex-direction: row; gap: var(--wp--style--block-gap, 1.5rem); > div { @@ -157,6 +156,44 @@ margin: unset; } } + + /* Horizontal layout: fields flow side by side */ + &.is-layout-flex { + + .jetpack-contact-form { + flex-direction: row; + + .wp-block { + flex: 1 1 auto; + min-width: 200px; + max-width: none; + + &.wp-block-jetpack-button { + flex: 0 0 auto; + min-width: auto; + } + + /* Responsive: stack on mobile */ + @media (max-width: #{ (gb.$break-mobile) }) { + flex: 1 1 100%; + max-width: 100%; + } + } + } + } + + /* Vertical layout: fields stack vertically */ + &.is-layout-flow { + + .jetpack-contact-form { + flex-direction: column; + + .wp-block { + flex: 1 1 100%; + max-width: 100%; + } + } + } } .jetpack-contact-form .components-placeholder { @@ -1208,3 +1245,4 @@ } } } + diff --git a/projects/packages/forms/src/blocks/contact-form/index.js b/projects/packages/forms/src/blocks/contact-form/index.js index 42a515b67d377..074a0a24b25a8 100644 --- a/projects/packages/forms/src/blocks/contact-form/index.js +++ b/projects/packages/forms/src/blocks/contact-form/index.js @@ -58,6 +58,17 @@ export const settings = { margin: true, }, align: [ 'wide', 'full' ], + layout: { + default: { + type: 'flex', + flexWrap: 'wrap', + }, + allowSwitching: false, + allowEditing: true, + allowOrientation: true, + allowVerticalAlignment: false, + allowJustification: false, + }, }, attributes: defaultAttributes, providesContext: { diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index 1f1a00e82a2c6..d7b5382a5aeef 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -304,7 +304,6 @@ that needs to mimic the input element styles */ display: flex; flex-wrap: wrap; justify-content: flex-start; - flex-direction: row; flex-grow: 1; gap: var(--wp--style--block-gap, 1.5rem); } @@ -318,9 +317,50 @@ that needs to mimic the input element styles */ display: flex; flex-wrap: wrap; justify-content: flex-start; - flex-direction: row; flex-grow: 1; gap: var(--wp--style--block-gap, 1.5rem); + + /* Horizontal layout: fields flow side by side */ + &.is-layout-flex { + + .contact-form { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--wp--style--block-gap, 1.5rem); + + > .grunion-field-wrap { + flex: 1 1 auto; + min-width: 200px; + + /* Responsive: stack on mobile */ + @media (max-width: 600px) { + flex: 1 1 100%; + max-width: 100%; + } + } + + .contact-submit { + flex: 0 0 auto; + min-width: auto; + } + } + } + + /* Vertical layout: fields stack vertically (default) */ + &.is-layout-flow { + + .contact-form { + display: flex; + flex-direction: column; + gap: var(--wp--style--block-gap, 1.5rem); + + > .grunion-field-wrap { + flex: 1 1 100%; + max-width: 100%; + } + } + } } .wp-block-jetpack-contact-form > *:not(.wp-block-jetpack-button) { @@ -1243,3 +1283,4 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form-ajax-submission:not(.submission-success) { display: none; } +