Fix floats #40
Merged
Fix floats #40
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Starts work at #39. This PR makes floats work in Gutenberg Starter Theme, right alongside wide and fullwide images. Captions work too. However due to the addition of the inline max-width style added by Gutenberg, this PR features an !important modifier. We should strive to make changes to Gutenberg upstream, so that this is not necesary. While potentially we could find a different way to combine floats with wide and fullwide images (see https://themeshaper.com/2018/02/15/styling-themes-for-gutenberg/), the method used in this PR (based on https://codepen.io/joen/pen/oEYVXB?editors=1100) is fairly elegant in that (aside from captions) reduces complexity and the need to hide horizontal scrollbars occurring from the vw unit.
|
Thanks for this every step helps with this issue! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Starts work at #39.
This PR makes floats work in Gutenberg Starter Theme, right alongside wide and fullwide images. Captions work too. Before:
After:
However due to the addition of the inline max-width style added by Gutenberg, this PR features an !important modifier. We should strive to make changes to Gutenberg upstream, so that this is not necesary. While potentially we could find a different way to combine floats with wide and fullwide images (see https://themeshaper.com/2018/02/15/styling-themes-for-gutenberg/), the method used in this PR (based on https://codepen.io/joen/pen/oEYVXB?editors=1100) is fairly elegant in that (aside from captions) reduces complexity and the need to hide horizontal scrollbars occurring from the
vwunit.There are two issues at the core of it.
The first is that the
figureelement, which is a semantic element for wrapping images and captions, has no intrinsic width like theimghas. That means unless we explicitly set a width on this element, it will default to filling the full available space. This is why Gutenberg adds amax-widthto a floatedfigure, to essentially take some burden off of theme devs.You could potentially make the
figureelement beinline, but then you wouldn't be able to center captions below the image. You also wouldn't be able to use this method for having wide images and floats coexist, you'd have to use something like thevwapproach.Upstream, this is tracked in WordPress/gutenberg#5292, and is also discussed in depth in this PR: WordPress/gutenberg#5209 (comment)
Unless we rethink how floats behave in a gutenberg/wide images world, I feel like the best approach is what is taken in this PR: WordPress/gutenberg#5460 — it basically adds additional markup to floated images (essentially fixing WordPress/gutenberg#5292). It's not as pretty, it's not semantic, and if a better idea surfaced I'd probably prefer that. But as it stands that's my best bet at how to proceed.