Improve image figure widths, remove inline styles #5973
Conversation
Also fix placeholder.
|
Noting that I'm increasingly leaning towards #5460 being a potential solution. It is not quite as clean, markup wise, but to make it easier to address wide and fullwide styles, perhaps that's okay. We can also look at doing something like is suggested in #5460 (comment), which is to only add that extra markup to floated images if you opt in to wide alignments. Thoughts? CC: @mtias |
|
I pulled this and played with inserting image blocks and setting them to have different alignments. Everything there seems to work great, both in the editor and on the front-end! 🎉 The big regression I'm noticing is when you try to align Cover Images, Galleries, Embeds blocks, etc. Some examples:
|
|
Awesome catch on those blocks, thank you for the review Robert. I will address those. |
Affects CoverImage, Gallery, Embed. This moves those styles to each blocks individual stylesheet.
With the presence of `fit-content` applied to the figure, the explicit inline style is no longer required.
|
Okay I addressed your feedback, I believe this should be good for another review. |
As themes try to accommodate the new image figure syntax in Gutenberg, there are increasingly issues with the
figurebeing a block element whereasimgtraditionally being an inline block. The bigger problem is that when we float things, and an image isn't explicitly resized, we set an inline max-width, which can only be overridden using!important, which you should never ever use.GIF:
As such, this PR removes those inline styles. In a way, it is an almost identical copy to Gary's PR in #5209, which this is meant to replace (apologies, and you should have all the props). My concerns noted in #5209 (comment) are not technically addressed, but in order to move on, these are perhaps best addressed separately.
Notably those issues are specific to floats. Specifically that if we use the float trick in https://codepen.io/joen/pen/oEYVXB to accommodate both floats and wide images in a fairly elegant way (the editor itself uses this also), we essentially need yet another wrapping element. In other words, merging in #5460 would address those concerns — but we have to be okay with adding yet another wrapping element. This is also tracked in #5292
This PR fixes #3945 and #5213. I think it also fixes #5567 by making that core issue moot.
CC: also @aduth and @samikeijonen, as I think you were working on a separate PR that accomplished some of the same as this.
To summarize, what works well with this branch
What sort of regresses in this branch is that if you insert a huge image, bigger than the main column, and float it, well it doesn't really look like it floats. You have to resize it first. This is because I removed the max-width. This is similar to how it's always worked, though perhaps not as elegant.