-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Inconsistent treatment around reusable blocks #20687
Comments
I am glad you brought this up. There is a pretty interesting visual treatment on the reusable block that raises some questions for me.
|
This feels profound and a point that needs deeper debate. |
Might also be related to #20558. |
That spacing does seem to be related to #20558 at an initial glance, good catch Chris. Definitely feels like that's worth addressing first. As a very quick primer (forgive me for repeating myself and with things I know you already know, but I find it helpful at times): an unselected block should be a preview of the block contents, and the selected block can show additional controls. That was also the reason for the header/action-bar, to answer your questions Michael: it did not feel appropriate to have that be part of the block toolbar itself — though a convincing mockup can overturn that thought of course! Just need to be able to accommodate a good long label. However a reusable block is not meant to be a template part, and serves a separate, much more light-weight purpose. @mtias wrote a comment in Slack the other day, which deserves surfacing outside of that as well, so I'll quote it in its entirety: There are some considerable differences between the two, even if their internal architecture is mostly the same:
Given this differentiation, it feels appropriate to me that the visual treatment of a reusable block is more light-weight than that of a template part. |
I just checked this in master and it appears that reusable blocks now have padding that prevents the content butting up against the border: I couldn't find the work that introduced those changes, does anyone know which issue/PR that was? Maybe there's additional context there. Also, @karmatosed - Just to clarify the issue that you're raising, is it that reusable blocks appear different than normal blocks? If that's the case, I feel like there should be some visual difference(s) to indicate that they're different types of blocks with different properties, no? If that's not the issue, and this is just a discussion about the lack of padding between the content and the border, I agree, that needed to be addressed. The current solution isn't perfect - it does mean that there's a difference between the editor view and how it looks on your site - but it might be a step forward. All of which is to say, does this still need work, or can we close this one? |
@dwolfe There are a few things going on here.
This is a regression, seems to be as a result of a recent refactor to how block margins are treated. I think this is to blame: https://github.com/WordPress/gutenberg/pull/21099/files#diff-ee2ed3adbe2578628039530c717a9a93R640
It is my understanding that it's the fact that margins are different. Observe what happens before and after these paragraphs are turned into a reusable block: Note that the margin doubles. This is because a sequence of paragraphs rely on margins collapsing. But as soon as the block becomes "reusable", it becomes its own block area which divs that prevent this margin collapsing, therefore doubling the margin. One idea for how a PR could fix this would be to write CSS to hook into the reusable block itself, then nullify the top and bottom margin on the first and last blocks respectively. However this is hacky, and I wish there was a way to simply allow the margin collapsing to happen organically, but without It's worth noting that this margin behavior is unchanged. Here's the 5.4 gutenberg UI: Here's the G2 UI: |
PR with fix for horizontal padding here: #21312 |
As there is a padding PR in, let's close this up for now and loop back in iterations. |
This was on the latest build, the spacing feels out of balance on the reusable block:
My suggestion would be to not highlight the block or use the background shade as in paragraph block. This gif shows the variations in treatment.
@jasmussen looping you in as feels like something comes from the latest iteration styling and I don't want to break a pattern here.
The text was updated successfully, but these errors were encountered: