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.

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

Fix Buttons inside Form blocks to not be full width on the front end #41236

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

Fix Buttons inside Form blocks to not be full width on the front end #41236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
01417fb
Fix Buttons inside Form blocks to not be full width on the front end.
tellthemachines Jan 22, 2025
2ed95b7
changelog
tellthemachines Jan 22, 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/plugins/jetpack/changelog/fix-form-button-width
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: bugfix

Form block: ensure consistent width of form buttons.
3 changes: 3 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/button/view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,7 @@
&:not(.is-style-outline) button {
border: none;
}
.wp-block-button__link {
width: inherit;
}
Comment on lines +9 to +11
Copy link
Contributor

Choose a reason for hiding this comment

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

This does fix the issue, but I'm unsure about it. The Jetpack button block seems to want to use the styles of the core button block, but this change takes it further away from that.

I noticed there's an unusual <div> wrapped around the button in the editor, which is the thing that makes it not full width there (it doesn't adopt the flex styling like the other form elements do). I feel like it's this markup disparity that's the core of the problem. Once that's gotten rid of, the frontend and the editor are working similarly, and then it's a question of how to constrain the width of the button to make it not full-width in the right way.

Probably the right thing would be wrapping it in a group or buttons block, but that's probably hard to achieve in a back compat way.

I'd be curious for your thoughts though, as you've probably looked at it and noticed similar things and maybe tried other fixes that didn't work, which is how you settled on this one. 😅

Copy link
Contributor

Choose a reason for hiding this comment

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

This does fix the issue

Works on the surface for me too.

I noticed there's an unusual <div> wrapped around the button in the editor

This does seem to be the root cause and is introduced by withFallbackStyles.

Once that's gotten rid of, the frontend and the editor are working similarly, and then it's a question of how to constrain the width of the button to make it not full-width in the right way.

Yep, fixing that wrapper would appear to then give us the reverse problem than we have now.

There seems to have been a trend of not passing a ref to the fallback styles and ThemeProvider that leads to excessive wrapping elements in the editor across the board. A concerted effort might be needed in that area to help smooth out a lot of Jetpack block kinks.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So for context, I went for this patch because I realised the bug was caused by a recent code change in gutenberg and I wanted to minimise the impact of this fix by just counteracting that specific change.

The div wrapper is a nuisance because it introduces a difference between the editor and front end so yes, ideally we'd do away with it and have parity of styles between editor and front end.

If we did end up replacing this button with a core one, we'd then have a wrapper on both sides, because the core Button block only accepts a Buttons block as a parent. We could do a similar thing to what the experimental gutenberg forms do, which is lock the parent Buttons to prevent adding more children. Or not 🤷

}
Loading