Skip to content

Forms: Fix field widths and spacing in the editor #41415

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.

Sign up for GitHub

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

Merged
talldan merged 4 commits into from
Jan 30, 2025
Merged

Forms: Fix field widths and spacing in the editor #41415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0bbcd8c
Fix form field widths
talldan Jan 30, 2025
d8c9be7
Update preview classname to target block element correctly
talldan Jan 30, 2025
2587aed
Remove block preview styles
talldan Jan 30, 2025
80aee7e
changelog
talldan Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/fix-form-field-widths
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

Forms: Fix field spacing and widths.
13 changes: 1 addition & 12 deletions projects/packages/forms/src/blocks/contact-form/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
}
}

.block-editor-inner-blocks > .block-editor-block-list__layout {
.block-editor-block-list__layout {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
Expand Down Expand Up @@ -577,17 +577,6 @@
}
}

// Overrides to make the preview look good
.block-editor-inserter__preview {
.jetpack-contact-form {
padding: 16px;

.block-editor-inner-blocks .block-editor-block-list__layout {
margin: 0;
}
}
}

Comment on lines -580 to -590

@talldan talldan Jan 30, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I'm not sure what this does, so I removed it (I like deleting stuff). The preview styles look ok to me, and I couldn't see how this has any effect (even after fixing the classnames).

I did try checking the git blame, but the change isn't in the history of this repo. It looks like the code was moved across from someplace else at some point.

@simison simison Jan 30, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Might be from times when preview was a small inline preview in sidebar, while now they are buttons with preview on hover.

@aaronrobertshaw aaronrobertshaw Jan 30, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Comparing older commits to trunk and this branch I couldn't spot any spacing difference either. I think it's fine to remove.

I did notice another recent minor regression around preview styles unrelated to this PR.

// Make sure form settings dropdown looks good on older Gutenberg versions
.jetpack-contact-form__popover .components-popover__content {
min-width: 260px;
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/fix-form-field-widths
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: bugfix

Forms: Fix field spacing and widths.