NO BUG: Something about the figcaption

[Mezzy]

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hey, I’m using figure and I didn’t like its default style, as the picture shown here:

So I wrote CSS to change it.

Here’s the issue: when I inspect the tag on the frontend, I found that the <figcaption> is not included in the <figure> area**. Instead, in DevTools it appears visually placed in the <li> area:

However, if I manually create a <figure> by dragging an Image element and a Basic Text element, then changing their HTML tags to <figure> and <figcaption> in the editor, it works fine — the <figcaption> is contained inside <figure> as expected:

I wonder whether this is a bug

[aslotta]

Hey @Mezzy,

I am confused. In all of your screenshots I see the figcaption being a child of the figure. Am I misunderstanding something here? Maybe it’s just too early…

Best,

André

[timmse]

Hi mezzy,
Thanks so much for your report!

I see it exactly the same way as Andre - the markup is exactly the same, on every single screenshot.

Best regards,
timmse

[Mezzy]

Hi @timmse ,

I hope this new picture could make it more clear, I rebuild a grid using other pictures with gap: 0;

I have Cssed the figcaption position static!important, and the figcaption should have normally occupied space in the normal document flow cause its displayed block.

But the thing is, it seems like an absolute-positioned tag.

[Mezzy]

Thanks for your replay Aslotta,

I have remade a screenshot, I hope this could make this issue more clear. Please check my reply to Timmse

[aslotta]

Hey @Mezzy,

the explanation still confuses me. But I think I know what your issue is. It’s not about the figcaptions placement but an “issue” regarding the new layering system.

To statically position the captions use the following CSS:

@layer bricks.reset {
  .bricks-image-caption {
    position: initial !important;
  }
}

Best,

André

[timmse]

Yes, somewhat misleadingly expressed. However, this is also a potential solution:

NO BUG: Issues with Bricks Image Element default behaviour

Hi Pranav, Thank you for your report. However, I don’t know where exactly the bug is supposed to be. The caption styling is a default style that has been around for ages. It is correct that there are still no theme style settings for it, but your feature request thread from back then shows little demand for it (5 likes and one comment). You can override the default styling in the Bricks Settings.» Custom CSS globally and customize it however you want. The !important statement for the position…

We know that changing the figcaptions is currently (despite layer - thanks to important :D) very complicated and already have a task to improve this in the future.

[Mezzy]

for now I could make figure and figcaption manually, but seems I have few options to choose for the style of the figcaption in the img