(WIP) Forms: Update form field support for container block layouts #41805

talldan · 2025-02-14T05:27:57Z

Remaining issues:

Form submission error/validation messages don't look great. I think there should be a block for the main error message so that users can style it and position it where they want (and possibly show multiple).
Button width settings don't work correctly in some (all?) layouts

Description

Makes blocks like Row, Stack, Grid, Group, Columns work within the Form block. Users can add field blocks within them and they should adopt the correct layout.

This allows for achieving layouts that weren't possible before (I guess without custom CSS?):

Two fields and a button in a row and a checkbox underneath. The fields are set to 'Grow', while the button doesn't:

Interesting grids

And probably more

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Go to '..'

…, this was wrappers around blocks added by HOCs are still supported

… children

…ld classname handles this and it should only apply when directly within a form, not within another parent that provides a different layout

…eration

… in block lists

…n constrained layout

talldan · 2025-02-14T05:28:39Z

projects/packages/forms/src/blocks/contact-form/child-blocks.js

@@ -26,6 +26,7 @@ const FieldDefaults = {
 	supports: {
 		reusable: false,
 		html: false,
+		spacing: {},


This seems to be needed to show the sizing controls in the Styles tab. 🤔

github-actions · 2025-02-14T05:29:07Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
🔴 Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for none scheduled (scheduled code freeze on undefined).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

talldan · 2025-02-14T05:30:28Z

projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js

+						}
+						isShownByDefault
+					>
+						<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />


I've moved the width field to the styles tab, so that dimension controls (whether core's or jetpack's) are always in a consistent place.

I guess this might need some discussion, and particularly given all the other style controls are still in the settings tab.

talldan · 2025-02-14T05:31:48Z

projects/packages/forms/changelog/fix-columns-in-form

+Significance: patch
+Type: fixed
+
+Forms: fix column block width when used in the form block.


I need to update this

talldan · 2025-02-14T05:37:03Z

projects/packages/forms/src/contact-form/class-contact-form-plugin.php

+	/**
+	 * Build the CSS for the child layout.
+	 * This replicates part of the `wp_render_layout_support_flag` function from WordPress core.
+	 * That function doesn't work for form fields due to the way they're rendered as shortcodes,
+	 * while the core function will only generate and apply classnames for layout to html.
+	 *
+	 * @param array $layout - the block's `style.layout` attribute.
+	 *
+	 * @return string CSS for the child layout.
+	 */
+	private static function build_child_layout_css( $layout ) {
+		$css = '';
+
+		if ( ! $layout ) {
+			return $css;
+		}
+
+		$self_stretch = isset( $layout['selfStretch'] ) ? $layout['selfStretch'] : null;
+
+		if ( 'fixed' === $self_stretch && isset( $layout['flexSize'] ) ) {
+			$css .= 'flex-basis: ' . $layout['flexSize'] . ';';
+			$css .= 'box-sizing: border-box;';
+		} elseif ( 'fill' === $self_stretch ) {
+			$css .= 'flex-grow: 1;';
+		}
+
+		$column_start = isset( $layout['columnStart'] ) ? $layout['columnStart'] : null;
+		$column_span  = isset( $layout['columnSpan'] ) ? $layout['columnSpan'] : null;
+		if ( $column_start && $column_span ) {
+			$css .= "grid-column: $column_start / span $column_span;";
+		} elseif ( $column_start ) {
+			$css .= "grid-column: $column_start;";
+		} elseif ( $column_span ) {
+			$css .= "grid-column: span $column_span;";
+		}
+
+		$row_start = isset( $layout['rowStart'] ) ? $layout['rowStart'] : null;
+		$row_span  = isset( $layout['rowSpan'] ) ? $layout['rowSpan'] : null;
+		if ( $row_start && $row_span ) {
+			$css .= "grid-row: $row_start / span $row_span;";
+		} elseif ( $row_start ) {
+			$css .= "grid-row: $row_start;";
+		} elseif ( $row_span ) {
+			$css .= "grid-row: span $row_span;";
+		}
+
+		return $css;
+	}


It's a bit unfortunate this is needed, but the positive of doing it this way vs. other things I've tried is that it's very easy to understand and super easy to fix any bugs. It doesn't rely on any tricks and isn't much code.

The other options were all too brittle.

talldan · 2025-02-14T05:37:59Z

projects/packages/forms/src/contact-form/class-contact-form-field.php

@@ -89,7 +89,6 @@ public function __construct( $attributes, $content = null, $form = null ) {
 				'requiredtext'           => null,
 				'options'                => array(),
 				'id'                     => null,
-				'style'                  => null,


I think I accidentally deleted this. I'm not sure if it's used?

enejb · 2025-02-14T17:09:20Z

I tested this and it worked really well, it makes it a lot easier to create the complex form layouts in the editor now. Thank you for tackling this!

talldan added 12 commits February 13, 2025 08:50

Forms: Fix column block width when used within a form

87d28c5

changelog

fca2d9e

Apply to all elements that are direct descendents, not only .wp-block…

5a9c65d

…, this was wrappers around blocks added by HOCs are still supported

Show the Styles tab when in a block with layout that allows sizing on…

43fba69

… children

Prevent Dropdown block from always being 100% width, the .jetpack-fie…

442c3c1

…ld classname handles this and it should only apply when directly within a form, not within another parent that provides a different layout

Add child layout styles to form fields.

dbe579c

Hide Jetpack field width controls when a flex or grid layout is in op…

ca27a6f

…eration

Update styles to work for various layouts

1177db6

Nitpicks

1a69cab

Tentatively remove button margin reset so that it has correct spacing…

8b1294b

… in block lists

Make the styles consistent across frontend and backend, fix margins i…

e8115df

…n constrained layout

Move jetpack field width control to style tab and wrap in ToolsPanelItem

8e67608

talldan added [Block] Contact Form Form block (also see Contact Form label) [Package] Forms [Feature] Forms Blocks Blocks designed to streamline user input and engagement, such as contact, newsletter sign-ups, etc. labels Feb 14, 2025

talldan self-assigned this Feb 14, 2025

talldan commented Feb 14, 2025

View reviewed changes

github-actions bot added [Block] Button [Feature] Contact Form [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] In Progress labels Feb 14, 2025

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Feb 14, 2025

talldan commented Feb 14, 2025

View reviewed changes

talldan mentioned this pull request Feb 14, 2025

Fix column block width when used in a form #41666

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(WIP) Forms: Update form field support for container block layouts #41805

(WIP) Forms: Update form field support for container block layouts #41805

talldan commented Feb 14, 2025 •

edited

Loading

talldan Feb 14, 2025 •

edited

Loading

github-actions bot commented Feb 14, 2025 •

edited

Loading

talldan Feb 14, 2025

talldan Feb 14, 2025

talldan Feb 14, 2025

talldan Feb 14, 2025

enejb commented Feb 14, 2025

(WIP) Forms: Update form field support for container block layouts #41805

Are you sure you want to change the base?

(WIP) Forms: Update form field support for container block layouts #41805

Conversation

talldan commented Feb 14, 2025 • edited Loading

Description

Two fields and a button in a row and a checkbox underneath. The fields are set to 'Grow', while the button doesn't:

Interesting grids

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

talldan Feb 14, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Feb 14, 2025 • edited Loading

talldan Feb 14, 2025

Choose a reason for hiding this comment

talldan Feb 14, 2025

Choose a reason for hiding this comment

talldan Feb 14, 2025

Choose a reason for hiding this comment

talldan Feb 14, 2025

Choose a reason for hiding this comment

enejb commented Feb 14, 2025

talldan commented Feb 14, 2025 •

edited

Loading

talldan Feb 14, 2025 •

edited

Loading

github-actions bot commented Feb 14, 2025 •

edited

Loading