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

[Post Template] Gutenberg 18.2 .alignfull fix breaks existing spacing solution #10

Closed
justintadlock opened this issue May 11, 2024 · 4 comments
Assignees
Labels
🐛 Bug I installed this, and now my website is broken. WordPress Issue Whatcha doin' to me WordPress/Gutenberg?

Comments

@justintadlock
Copy link
Contributor

A fix in Gutenberg 18.2 breaks the nested Post Template full alignment fix that we had in place. See:

The theme previously fixed this by overruling the margins in the editor so that they matched the front end:

///
/// The editor gives a negative margin here but not on the front end. Just
/// making sure these match.
///
.editor-styles-wrapper .wp-block-query.is-layout-constrained > .wp-block-post-template.alignfull {
margin-left: auto;
margin-right: auto;
}

The Core/Gutenberg fix takes this in the opposite direction by making the front end match the editor. Unfortunately, this presents a problem with how the theme lays out pretty much most of its Query Loop / Post Template patterns.

The most obvious fix would be to re-add a wrapping Group block inside the Query Loop that wraps Post Template. But that solution results in the divitis that I worked so hard to get rid of.

Another solution might be to update the theme's CSS to work on both the front end and editor, but do I really want to spend my time fighting Core/Gutenberg?

🤔

@justintadlock justintadlock added 🐛 Bug I installed this, and now my website is broken. WordPress Issue Whatcha doin' to me WordPress/Gutenberg? labels May 11, 2024
@justintadlock justintadlock self-assigned this May 11, 2024
@justintadlock
Copy link
Contributor Author

It's worth noting the biggest problem has always been that there's no way to add padding to the Post Template block itself by default, so it may be worth exploring adding that.

@justintadlock
Copy link
Contributor Author

Some further investigation reveals that the .has-global-padding handling is inconsistent if I remove left/right padding from the outer Query Loop block in this situation.

  • Editor: adds global padding to the outer Query Loop.
  • Front End: zeroes out global padding on the outer Query Loop.

Almost thought this would be an easy fix.

justintadlock added a commit that referenced this issue May 11, 2024
Temporary fix for #10.

Also adds padding support to the Post Template block.
@justintadlock justintadlock changed the title [Post Template] Gutenberg .alignfull fix breaks existing spacing solution [Post Template] Gutenberg 18.2 .alignfull fix breaks existing spacing solution May 13, 2024
@webmandesign
Copy link

@justintadlock
Copy link
Contributor Author

The last remnants of this should've been addressed with this change to the Query List Cover pattern: a0b5b8d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug I installed this, and now my website is broken. WordPress Issue Whatcha doin' to me WordPress/Gutenberg?
Projects
None yet
Development

No branches or pull requests

2 participants