Most themes: Gutenberg: Image caption styling not applied with Block Editor

[formosattic]

Edit by @arunsathiya: As discussed here p1574159858171000-slack-triage, I am moving the issue from Calypso repository to themes repository. This issue is reproducible with a lot of themes on https://wordpress.com/themes. @thehenrybyrd has a particular helpful comment https://github.com/Automattic/themes/issues/1673#issuecomment-555453912

---

Steps to reproduce

Create two posts with an image with caption, one post with the Block Editor, and the other with the Classic Editor.

What I expected

Caption should display the same styling from the theme, regardless of the editor used.

What happened instead

Tested with different themes (Twenty Nineteen, Karuna, Libretto).

The Classic Editor, will apply the theme styling:

The Block Editor applies a different styling:

Context / Source

Ticket: 1678324-zen

[arunsathiya]

Noting that I am able to reproduce this as well. I tested with Libretto theme and Twenty Nineteen.

Libretto:

Composed using the WordPress Editor

Composed using the Calypso editor

Twenty Nineteen:

There is not much difference between how it looks on Twenty Nineteen, but the caption text color seems to be different when composed using WordPress Editor and Calypso editor.

Composed using the WordPress Editor

Composed using the Calypso editor

[gwwar]

@arunsathiya if you recall was this the same result on both wp-admin and Gutenlypso?

[gwwar]

cc'ing @laurelfulford in case this is related to other CSS specificity from gutenberg vs theme rules.

[laurelfulford]

At a glance this all looks theme-related to me. In Libretto's case, for the initial report, it looks like we may have missed styling the captions in some cases.

In the classic vs block editor for Libretto, the markup is different for things like an image with a caption vs an image block with a caption, so adding things like the white background to the image block wasn't possible. So that's not exactly a bug, but an unfortunate side effect of updating a theme that already had styles for the classic editor that we couldn't recreate in the block :)

Not sure of the cause of the slightly different colours for Twenty Nineteen, but that would be coming from the theme, too.

[arunsathiya]

Just tested again. To quickly followup on this, the Calypsoified Gutenberg and Gutenlypso output seems to be the same, while Calypso editor-composed output is different.

[gwwar]

I believe this looks correct now? Please reopen, if folks are still seeing this!

[KokkieH]

We've had a report of this in https://en.forums.wordpress.com/topic/image-captions-style-not-showing-correctly/

@laurelfulford would it be best to open issues for individual themes as this come up so styling for block captions can be added in the themes, or is this something we're unlikely to fix?

Edited to add: The user in this case is using the Plane theme.

[chiape]

I was able to replicate the figcaption issue on a test site:

Themes: Tortuga & Hemingway Rewritten

[carinapilar]

Reported on 15846870-hc with the Adaline theme. Fixed with a CSS workaround.

[thehenrybyrd]

Ran into this in 16756564-hc. The user is using the Photo Blog theme, and the CSS classes missing are: wp-caption-text and gallery-caption (though wp-caption-text is the important one) We worked around the issue by adding wp-caption-text and gallery-caption in the "Additional CSS classes" box in advanced block settings for each block where the user wanted a caption.

However, I did some more testing to try to figure out what was up and found that the same CSS classes are not appearing in posts created in Gutenberg in a lot of our themes. In particular I looked at Titan, Edin, Chalkboard, Anemone, Lovecraft, Goran, Able, and Independent Publisher. All of these themes miss caption styling when posts are created in Gutenberg, and adding the CSS class wp-caption-text fixes the captions in all of them.

I got the same result with Edin on a jurassic.ninja site.

As an example, here’s how caption text should look in Edin:

Here’s how caption text looks in Edin if you create a new post using Gutenberg:

The same is happening with many of our themes.

[kaitohm]

Another report: 23976514-hc As user is on Personal plan, CSS workaround won't work.

[tbradsha]

3653977-zen, using Hemingway Rewritten.

Provided a simple CSS workaround:

figure figcaption {
  text-align: center;
}

[kisabelle]

I'm noticing today that on the Gutenberg editor the Gallery block caption appears to receive completely different styles than on the front end.

Gutenberg editor:

Front-end styles:

Some consistency here would be much appreciated.

[KokkieH]

Another report for Hemingway Rewritten in https://wordpress.com/forums/topic/image-caption-not-aligning-center/?view=all

[Robertght]

I'm no longer able to replicate this issue with the themes mentioned as we have styling options for the captions:

I'm going to close this one for now, but please open it in case it needs more work.