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

Form block field layout #12200

Merged
merged 27 commits into from
Nov 6, 2023
Merged

Form block field layout #12200

merged 27 commits into from
Nov 6, 2023

Conversation

aptkingston
Copy link
Member

@aptkingston aptkingston commented Oct 27, 2023

Description

This PR allows customisation of fields within a form block. This allows custom layouts, with a mix of 1, 2 or 3 fields per column.

image

Quick video of changing layout:

Screen.Recording.2023-10-27.at.15.21.25.mov

Field layout is controlled by a new setting inside the field settings modal:
image
image

The form block will automatically slot fields together, making the best possible use of space.

On mobile, all fields will stretch to take up the full width:
image

This new setting is only available when using a form block. The field components themselves do not expose it, as it will not work with a normal form.

Removal of left-aligned labels

The one downside of this feature is that it is incompatible with left aligned labels, so that setting is no longer available on form blocks. All form blocks will use labels above the fields.

It's not impossible in future that we could support this, but it would require a significant rewrite of the current field layout structure, as well as reverting all the recent field group component work which now provides layout settings.

Addresses:

Feature branch env

Feature Branch Link

Copy link
Contributor

@deanhannigan deanhannigan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Copy link
Member

@shogunpurple shogunpurple left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@shogunpurple shogunpurple merged commit 3bbf6a2 into master Nov 6, 2023
10 checks passed
@shogunpurple shogunpurple deleted the form-block-field-layout branch November 6, 2023 18:18
@github-actions github-actions bot locked and limited conversation to collaborators Nov 6, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants