Restore floated image margins. #21500
Conversation
jasmussen
requested review from
ajitbohra,
jorgefilipecosta,
Soean and
talldan
as code owners
jasmussen
added
[Block] Image
|
@ellatrix if you have time, I would love your input, thank you! |
|
Size Change: +74 B (0%) Total Size: 904 kB
ℹ️ View Unchanged
|
| @@ -21,6 +21,19 @@ | |||
| margin-top: -9px; | |||
| margin-left: -9px; | |||
| } | |||
|
|
|||
| // These need specificity to override an inherited left/right block margin in the editor. | |||
| &.wp-block-image.alignleft { | |||
There was a problem hiding this comment.
Can it be generally applied to any block?
There was a problem hiding this comment.
Yes, probably. There's a generic float rule, as mentioned, that looks like this:
.block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] > .is-block-content {
float: left;
margin-right: 2em;
}
But of course that only applies to blocks that have the "is-block-content" container. I can't recall the heuristic for when such a container.
|
Would also love @youknowriad's feedback since we've both worked on this. :) |
|
So this is just for the editor as these styles are already present on the frontend right? I don't mind the change but I'm looking forward the alignments refactoring where we'd remove all these hacks. |
This is if the theme doesn't provide an editor style, yes. And this is the CSS it overrides:
Will the alignments refactoring let us get rid of that rule? |
I believe so yes, this rule shouldn't apply to floated blocks |
|
Cool. So should this PR land as is, or get design/themer feedback, or does it need to be refactored to be more generic to every floated block? |
|
I don't have a strong opinion, I'm fine with it landing, It's definitely better if it's applied to every floated blocks but I also think that if we find a good path forward for the alignments refactoring, everyone would gain from it (themes won't have to write specific styles, all blocks work similarly..., frontend and backend work similarly), the downside is that I don't see a path forward with a minimum of breaking changes. |
|
I'm happy to have this refactored away, and work as a band-aid in the mean time, if someone gives the thumbs up. Themes increasingly provide these margins themselves, and I have verified that themes that do provide this still override this baseline. Here's from TwentyTwenty which provides that margin in rems:
So this PR should be safe. |
The image block regressed in a recent refactor of left/right block margins. The margins for floated images were removed:
This PR restores them. Editor:
Frontend:
Additionally, it adds a top and bottom margin, which was also present in the classic editor:
But what about the Cover block, and other blocks that have alignments?
Those receive margins through this CSS:
I'm open to advice on a more generic approach to this, but it seems worth fixing.