Blockbase: Remove alignment styles #4454
Conversation
|
I tried this one with the same demo content I pasted over at #4448 and this is what I get:
|
There was a problem hiding this comment.
Gutenberg has changed so that now all group blocks have the wp-container-* class. This means that we can no longer rely on this class to target elements that are meant to "inherit layout".
Especially given this ^, I am generally in favor of removing alignment styles from Blockbase.
That said, I don't think the width approach will work because of the comment I made below. I tested with this content: https://theamdemo.wordpress.com/2021/08/23/gutenberg-alignment/
| // An alternative to padding. | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| width: calc( 100vw - var(--wp--custom--post-content--padding--left) - var(--wp--custom--post-content--padding--right) ); |
There was a problem hiding this comment.
Setting a width here causes paragraphs to sometime overflow out of their containers:
There was a problem hiding this comment.
yeah that makes sense. i think we should just remove it all
|
Closing in lieu of #4459 |
This is an alternate approach to #4448
Gutenberg has changed so that now all group blocks have the
wp-container-*class. This means that we can no longer rely on this class to target elements that are meant to "inherit layout".This PR removes all the alignment styles that are trying to change the way that Gutenberg handles alignments. It has become very difficult to modify the default behaviour in the theme.
The one case that I think we should try to handle is this: #3747
The problem with adding padding to paragraph blocks inside
alignfullelements is that you can addalignfullto elements that "inherit layout", which means that they no longer align to the edge of the layout container.So instead of setting padding on these elements we can set a max width on this. However the problem with this approach is that elements inside "inherit layout" containers also use
max-widthto constrain them to the correct column size.So instead this PR proposes that we use
widthto constrain all paragraphs. This will allow "inherit layout" to continue behaving as before, but it will ensure that paragraph blocks don't ever touch the edge of the screen.To test you can use the markup in #4448 and #4412.