DataForm: set spacing for regular and card layouts #72249

jameskoster · 2025-10-10T14:38:21Z

What?

Introduces independent spacing controls for DataForm layouts:
- Regular layout: spacing between individual fields (default 4).
- Card layout: spacing between consecutive cards (default 6).
Added spacing to RegularLayout, CardLayout, and their normalized types.
Applied layout-specific wrappers so each layout’s spacing is respected.
Updated LayoutMixed story to use layout: { type: 'card', spacing: 6 }.

Why?

Previously, one spacing setting controlled both field spacing and card spacing, preventing independent tuning.
Enables tighter spacing inside cards while keeping larger gaps between cards (or vice versa) per design needs.

How?

Types
- Updated packages/dataviews/src/types/dataform.ts to add spacing to RegularLayout and CardLayout, and to normalized variants.
Normalization
- Updated packages/dataviews/src/dataform-layouts/normalize-form-fields.ts to:
  - Default regular spacing to 4.
  - Default card spacing to 6.
  - Preserve user-supplied spacing.
Rendering
- packages/dataviews/src/dataform-layouts/index.tsx: Added wrappers for regular and card that render a VStack with layout.spacing.
- packages/dataviews/src/dataform-layouts/data-form-layout.tsx: Default wrapper now respects layout.spacing.
Stories
- packages/dataviews/src/stories/dataform.story.tsx: LayoutMixedComponent now sets layout: { type: 'card', spacing: 6 }.

Testing

npm run storybook.
Compare http://localhost:50240/?path=/story/dataviews-dataform--layout-card with https://wordpress.github.io/gutenberg/?path=/story/dataviews-dataform--layout-card.
In the former the gap between cards should be 24px compared to 16px in the latter.

Note

I had assistance from AI preparing this PR. Apologies if anything was butchered, but hopefully it communicates the idea and can serve as a starting point.

github-actions · 2025-10-10T14:38:32Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: dinhtungdu <dinhtungdu@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2025-10-10T15:07:34Z

Flaky tests detected in 6615830.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18741236975
📝 Reported issues:

[Flaky Test] ensures List View global shortcut works properly #51533 in /test/e2e/specs/editor/various/list-view.spec.js
[Flaky Test] should refresh the page when stylesheet loading fails #71722 in /test/e2e/specs/interactivity/router-styles.spec.ts

dinhtungdu

Codewises, it looks good to me. I can confirm the change in the updated story, too. Can you please update the DataViews readme file to mention the new spacing prop we're adding here?

oandregal · 2025-10-16T17:34:45Z

packages/dataviews/src/types/dataform.ts

+	 * Spacing between individual fields when using the regular layout.
+	 * Defaults to 4.
+	 */
+	spacing?: number;


In addition to have different spacing per layout, do we also want the consumer to be able to change this setting? It's fine if we want, just checking because I thought we didn't.

I don't think it hurts so long as we have smart defaults. I could see this being a foundation for a density option in the future. For example in the Block inspector we might want fields to be closer together than in admin settings pages because the container sizes are so different. It would be neat to have a system for handling that. Not a strong feeling though if we prefer to leave it out for now...

The use cases you mention make sense, but it could also be automatic based on viewport size or some other trick? I worry that if we expose this setting, every screen that uses DataForm would use a different spacing. It's not a strong opinion, and I'll defer to you. If it's not something we immediately need, we can add it later for consumers to use (it's more difficult to remove it, even if we have breaking changes).

jameskoster · 2025-10-17T12:29:36Z

@oandregal I updated the spacing values but removed the ability for consumers to customise. Please feel free to push any changes in case anything is wrong.

oandregal · 2025-10-20T15:46:23Z

packages/dataviews/src/dataform-layouts/index.tsx

 		} ) => (
-			<VStack
-				className="dataforms-layouts__wrapper"
-				spacing={ ( layout as any )?.spacing ?? 4 }


Apparently, https://github.com/WordPress/gutenberg/pull/72284/files#diff-1d824e9459e5eecc174c60bb790d3f6c5eb5bb4f83fb01ffe5e737bb91facb71R24 introduced some spacing prop already. It didn't work because the normalizedLayout didn't have them, so it's fine to remove them from here without considering a breaking change. cc @dinhtungdu for awareness.

oandregal

I'm unable to test the storybook right now because there's an issue with it. Though the code respects the intent (setting custom spacing per layout).

jameskoster · 2025-10-21T13:20:58Z

Thank you for taking this over @oandregal ❤️

github-actions · 2025-10-23T10:37:58Z

There was a conflict while trying to cherry-pick the commit to the wp/6.9 branch. Please resolve the conflict manually and create a PR to the wp/6.9 branch.

PRs to wp/6.9 are similar to PRs to trunk, but you should base your PR on the wp/6.9 branch instead of trunk.

# Checkout the wp/6.9 branch instead of trunk.
git checkout wp/6.9
# Create a new branch for your PR.
git checkout -b my-branch
# Cherry-pick the commit.
git cherry-pick 8696b081078b15c330a45fb54f0ac0d556da21fc
# Check which files have conflicts.
git status
# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue
# Push the branch to the repository
git push origin my-branch
# Create a PR and set the base to the wp/6.9 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

t-hamano · 2025-10-23T11:44:34Z

There was a conflict, and it couldn't be backported to the wp/6.9 branch. If this PR is needed for the 6.9 release, could you submit a PR for manual backport?

oandregal · 2025-10-24T10:29:42Z

Prepared the backport at #72656

Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

t-hamano · 2025-10-27T01:49:30Z

This pull request was manually backported to the wp/6.9 branch: #72656

jameskoster requested a review from oandregal as a code owner October 10, 2025 14:38

jameskoster added [Type] Enhancement A suggestion for improvement. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Oct 10, 2025

jameskoster requested review from gigitux and oandregal and removed request for oandregal October 10, 2025 14:38

jameskoster requested a review from dinhtungdu October 14, 2025 09:36

dinhtungdu reviewed Oct 15, 2025

View reviewed changes

jameskoster requested a review from dinhtungdu October 16, 2025 13:12

oandregal reviewed Oct 16, 2025

View reviewed changes

oandregal force-pushed the update/dataform-spacing branch from e5b4bf9 to 97c0e0b Compare October 20, 2025 15:39

oandregal reviewed Oct 20, 2025

View reviewed changes

oandregal approved these changes Oct 20, 2025

View reviewed changes

oandregal changed the title ~~Make DataFormLayout spacing customisable~~ DataForm: set specific spacing per layout Oct 20, 2025

oandregal changed the title ~~DataForm: set specific spacing per layout~~ DataForm: set spacing for regular and card layouts Oct 20, 2025

oandregal force-pushed the update/dataform-spacing branch 2 times, most recently from 76bc622 to f657511 Compare October 21, 2025 08:01

jameskoster and others added 7 commits October 23, 2025 09:40

Make DataFormLayout spacing customisable

090d6b3

Update changelog

7b680b3

Update test

c19cc33

Remove customisability

4ce27b5

Fix rebasing issues

2da16b3

Update changelog

2143733

Remove spacing from the normalized layouts

4c50413

oandregal force-pushed the update/dataform-spacing branch from f657511 to 4c50413 Compare October 23, 2025 07:41

oandregal enabled auto-merge (squash) October 23, 2025 07:41

Move changelog to the unreleased section

6615830

oandregal merged commit 8696b08 into trunk Oct 23, 2025
41 of 43 checks passed

oandregal deleted the update/dataform-spacing branch October 23, 2025 10:11

github-actions bot added this to the Gutenberg 22.0 milestone Oct 23, 2025

jameskoster added the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 23, 2025

oandregal added a commit that referenced this pull request Oct 24, 2025

DataForm: set spacing for regular and card layouts (#72249)

525a472

oandregal mentioned this pull request Oct 24, 2025

DataForm: set spacing for regular and card layouts (#72249) #72656

Merged

oandregal added a commit that referenced this pull request Oct 24, 2025

DataForm: set spacing for regular and card layouts (#72249) (#72656)

46798a3

Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

t-hamano removed the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 27, 2025

DataForm: set spacing for regular and card layouts #72249

DataForm: set spacing for regular and card layouts #72249

Conversation

jameskoster commented Oct 10, 2025

What?

Why?

How?

Testing

Uh oh!

github-actions bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dinhtungdu left a comment

Choose a reason for hiding this comment

Uh oh!

oandregal Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

jameskoster Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

oandregal Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

jameskoster commented Oct 17, 2025

Uh oh!

oandregal Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

oandregal left a comment

Choose a reason for hiding this comment

Uh oh!

jameskoster commented Oct 21, 2025

Uh oh!

Uh oh!

github-actions bot commented Oct 23, 2025

Uh oh!

t-hamano commented Oct 23, 2025

Uh oh!

oandregal commented Oct 24, 2025

Uh oh!

t-hamano commented Oct 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

github-actions bot commented Oct 10, 2025 •

edited

Loading

github-actions bot commented Oct 10, 2025 •

edited

Loading