Gallery block: Fix problem with overflowing captions on new gallery block format #34402
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
glendaviesnz
added
[Type] Bug
|
Thanks for looking into this one @glendaviesnz, I just noticed the overflowing caption container on the refactored gallery in TT1-Blocks theme. I think my personal preference would be to keep the potential caption area fairly high to avoid scrollbars where we can. They look okay on macOS, but on Windows 10 we wind up getting a visual scrollbar which isn't ideal: Also removing the left/right padding means that the caption goes right up against the edges of the image, but I'm not sure how much of an issue that is 🤔: I was wondering if it'd be worth preserving a bit more of the padding, but switch on What do you think? |
|
Also, it might be fun to revisit #8030 (add an option to display captions below the image in galleries) at some stage, for handling longer captions, too? |
|
Thanks @andrewserong, have adjusted height, which should now allow for 3 lines of caption without wrapping, and also added back a bit of padding, which didn't seem to need the box-sizing change, but let me know if you see any issues with it.
Yep, for sure, shouldn't be too hard to do - we already do this if you select the 'rounded' image style:
|
|
Thanks @glendaviesnz, that's rendering nicely in the editor for me, and the height looks good to me visually. On the front end of my test site running TT1-blocks, though, it looks like the padding is still causing the width of the figcaption to overflow. So we might still need the
|
glendaviesnz
force-pushed
the
fix/overflow-of-large-gallery-captions
branch
from
b139d95 to
6a280f3
Compare
|
Doh, my bad @andrewserong, forgot to check front end - should be sorted now. |
|
Size Change: +12 B (0%) Total Size: 1.04 MB
ℹ️ View Unchanged
|
andrewserong
approved these changes
Sep 1, 2021
There was a problem hiding this comment.
Thanks @glendaviesnz that's looking good to me now! Tested across Safari, FF, Chrome, and Edge on desktop and Safari and Chrome on iOS and with TT1-blocks and TwentyTwenty (non-blocks). LGTM!
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.
Description
Currently very long captions cause the the caption to overflow outside the image.
This PR also implements the suggestion here by @mapk to try and give a better indication that the caption is scrollable and also to stop long captions covering the whole image. This could be handled in a different PR if there are differing views on whether this is a good approach to this problem or not.
To test
Screenshots
Before:
After:
