Gallery Block: Use styled scrollbars for image captions #56252
Conversation
t-hamano
added
[Type] Enhancement
|
Size Change: +733 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
This is a great instinct and would be a great use for the more light-weight scrollbars. One of the challenges here is the context, where we can't actually know if the background (image in this case) is very dark or very light. I tried a codepen to see of a halo around the scrollbar track would help, but that won't work for Firefox, so I think the only solution is to provide a semitransparent black background as a track (scrim), at which point it's unclear whether it's a win over the stock scrollbars. I don't really know, to be honest. Maybe some other design ideas will emerge. But an alternative is to offer an option, perhaps even a new default if possible, of showing the captions below the images, even in galleries, just like they are shown for regular images. Thank you for the PR! |
|
Thanks for the idea, @jasmussen. I also tested it in Firefox and found that this mixin style causes some strange behavior even in the Site Editor. However, this may be a Windows OS-only issue. Maybe we should brush up on this mixin style a little more first. 26ba1fc336bc09ff4255636132465140.mp4 |
|
Flaky tests detected in c9cb0b8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6904501187
|
|
I tried adding a 1px border to make the scrollbar more visible. Unfortunately, this style doesn't work in Firefox... If you have any other good ideas, I'd love to hear from you!
|
|
Indeed, that's the challenge, making sure it works in Firefox. Which also to be fair, is using the web-standards-likely spec. One could hope that in this, in the future, the system itself would take care of contrast, but since you can supply a color it isn't clear that's the case. So, zooming out and trying out a quick holistic look at it:
Since overlay captions are useful, and shipping, here's a take on making that work. The idea, basically, would be to embrace the scrim, and leverage that to color the scrollbar same as it colors the text. Essentially we explicitly set the scrim color to a dark color and then apply a light color to text, so we can do the same with the scrollbar, apply a light color to it since we know the scrim will be dark:
In this sketch, the scrim becomes just a solid, it loses the gradient effect, for clarity. Now this works well for a dark website as shown, because the dark overlay feels like it shares DNA with the site design itself. What if it's light? To take the idea further: instead of applying explicit black for the scrim, and white for the text color and scrollbar, how about we apply the theme background color to the scrim, and
Note in those, the scrollbar is I know this is a bit of a larger step forward, but that may be necessary to fully address the current design issues present with captions. So I am in no way suggestion you have to implement this, or implement all of this — maybe we can extract a small step from this idea and ship it. But I find it always useful to look way ahead at a desirable outcome and see what that might look like. In that same vein, looking further ahead I think it might still be valuable to add an option to the gallery block, off by default to maintain back compat with existing captioned galleries, to show captions externally:
Shown here, in most cases captions will likely continue to be short and can work externally. But we might also apply a max-height to those external captions, such as 4x lineheight, and add the same color overlay scrollbars. If you want a uniform look you can editorially strive to have captions on all images, the same amount of lines, but the max-height would avoid too many rivers. Same, shown here in light mode:
|
|
Thank you for the great idea, @jasmussen! In the current Gallery block, the image caption text color is hard-coded to white and the background color is a white/black gradient. So, I tried coloring the scrollbar with the same white as the text color. Although it was not possible to apply opacity to the scrollbar, we can use rgba color. Personally, I felt that 0.6 was a little difficult to see, so I chose 0.8. d3f364af80c266c67fae32a80a82647a.mp4The difference in visibility depending on the transparency is as follows.
|
|
Full opacity scrollbar sounds fine if we know that there will be a dark scrim below. Perhaps we can explore separately, changing that scrim to a background-colored overlay, with It seems like this one could land after a quick code review! |
Does this mean that instead of fixing the caption text color to white, it applies the site's base text color and then applies the opposite color to the caption background to make that text easier to read? Sorry if I didn't understand correctly. |
|
Right, let's say a theme has a light beige background color and black text. Then in the gallery, the scrim would be a transparent version of the theme background color (grabbed from global styles and then with opacity applied), and the text would be |
|
Thank you for letting me know in detail! I certainly think such an approach is technically possible. For example, the Image block Lightbox dynamically applies colors to the close button and scrim that take into account the theme color when the image is clicked.
However, to achieve this I think we would need to load JavaScript on the front end, similar to Lightbox. We'll also want a fallback for the classic theme, where we can't control global styles. Therefore, that approach might be considered in a follow-up issue/PR. |
|
Thanks again for the work. I tried a codepen with color inheritance from the background (though I failed to get the figcaption background to extend under the scrollbar, not sure what I'm doing wrong there). To understand the JS part, though: this is because we cannot know which named CSS variable(s) to apply for the caption colors without it, is that right? |
|
Created a followup issue for galleries, where we can discuss the feasibility there: #56587 |
|
Thank you for your review and issue submission, @jasmussen! Now, I would like to merge this PR.
Yes. However, after thinking about it a little more, I realized that we might be able to solve this problem with PHP without having to load JS on the front end. I'd like to post my idea in #56587 and work on it when I have time. |
|
No rush on any color followups (the idea I shared was mostly to capture it, in case it inspires people), and agree, this PR is a solid enhancement as is. Thank you again for your contribution here, and across the project 👏 |
|
Thank you both for working on this <3 |
* Gallery Block: Use styled scrollbars for image captions * Add 1px border * Apply transparent white color to scrollbar
Fixes: #56201
What?
This PR displays a styled scrollbar on the scrollbar that appears when an image in a gallery block has a long caption.
This will improve the appearance on the front end, especially for users using Windows or users who use browsers that display scrollbars by default.
Note: The screenshot below was taken with Chrome browser on Windows 11 OS.
Before
After
Why?
overflow:autoandmax-height: 60%are applied to the caption area of the image in the Gallery Block. Therefore, if the caption text is long, this caption area will be scrollable.This has a impact on appearance on some OS and browsers. For example, when using Chrome on Windows OS, scroll bars are always displayed.
How?
I applied the
custom-scrollbars-on-hovermixin to this caption, which styles the scrollbar and makes it appear only on hover. This mixin is primarily used in the sidebar of the site editor. Therefore, I'm a little unsure whether this mixin can be used on the front end as well. I would like to hear everyone's opinions.Testing Instructions