Image blocks: add pattern background

[distantnative]

Description

Summary of changes

• Image and gallery block now feature a little background color selector dropdown (selection gets stored in localStorage)
• k-block-figure: New back option to set the background (pass pure CSS value)
• New k-block-figure-caption that adapts its color based on the background (to also work on dark backgrounds)
• New k-block-background-dropdown
• k-color-frame can now also handle patterns as pseudo-color

Changelog

Enhancements

• Image/Gallery blocks: added selector to change background

Screen.Recording.2024-07-25.at.15.33.03.mov

For review team

• Add changes & docs to release notes draft in Notion

[tobimori]

Maybe it'd be possible to toggle this via a blueprint option? I think it's a good thing, especially with the dark mode coming up, but most of my blocks don't need it as you figured.

[bastianallgeier]

I also think that this could/should be a toggle. Maybe to even toggle between white/black/pattern.

[distantnative]

@bastianallgeier like an actual toggle field? The issue right now is that I wanted to rather add it as a fieldset blueprint option. However, I realized that fieldsets do no allow passing any custom options: https://github.com/getkirby/kirby/blob/main/src/Cms/Fieldset.php#L204-L219

[bastianallgeier]

@distantnative I was thinking of a toggle in the block preview component. I would not connect it to the blueprint

[distantnative]

@bastianallgeier but if it's not a fixed state, one would have to change the toggle e.g. for a white transparent graphic to pattern each time loading the view. Or would we try to store that in localStorage?

[bastianallgeier]

Do you think it's going to get too messy to put it in localStorage? I think that would be quite nice as a solution.

[distantnative]

I think the localStorage part could work. Just thinking of the UI of this toggle, won't be so easy as it would have to float on top of the image, or what do you have in mind?

Screen.Recording.2024-05-12.at.12.43.38.mov

[bastianallgeier]

I think it really looks good already. I wonder if we should use the background on the entire width or really only for the image. We could maybe reuse https://lab.getkirby.com/public/lab/components/frames/4_color to create a little square button in the bottom right corner instead of the text button. Maybe together with a dropdown arrow.

[tobimori]

I would go with the entire width. Looks better.

[distantnative]

@bastianallgeier Implemented a visual selector as suggested.

Also coloring now the full block which I think looks best.

[bastianallgeier]

I've pushed a suggestion for a slight design change for the button …

[bastianallgeier]

It's ready to go in my opinion.