Not able to render html in figcaption for media block

Created on 31 July 2023, over 1 year ago
Updated 3 June 2024, 8 months ago

Hi, I noticed that the figcaption behaves differently on the GB core image block vs. the media block, specifically that while you can add html comtent to the caption in the media block, this will not render.

Here is how the image block looks (adding an image via the media library):

And here is how it looks when using the media block (again adding an image via the media library)

And this is the rendered result:

The article code editors looks like this:

<!-- wp:image {"id":11,"sizeSlug":"large","linkDestination":"none","mediaAttrs":{"data-entity-type":"file","data-entity-uuid":"00627a39-c916-4579-8706-284c06d8ad79","data-image-style":"original"}} -->

<figure class="wp-block-image size-large"><img src="/sites/default/files/styles/large/public/2023-07/CleanShot%202023-07-31%20at%2012.44.26%402x.png?itok=ooE9420p" alt="test" class="wp-image-11" data-entity-type="file" data-entity-uuid="00627a39-c916-4579-8706-284c06d8ad79" data-image-style="original"/>

<figcaption>I can have <strong>html</strong> here </figcaption></figure>
<!-- /wp:image -->

<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["2"],"caption":"I am not able to \u003cem\u003erender\u003c/em\u003e the \u003cstrong\u003ehtml\u003c/strong\u003e here"} /-->

and source code:

There is a UI to add html to the caption, and when editing the article again the caption data in the media block is decoded properly. It's only when you view the article that it is not html anymore.

🐛 Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

🇳🇴Norway vegardjo

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @vegardjo
  • Status changed to Needs review over 1 year ago
  • Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 7.4 & MySQL 5.7
    last update over 1 year ago
    Waiting for branch to pass
  • 🇩🇪Germany szeidler Berlin

    I can confirm the problem. The reason is, that the Media block does not store the caption in the block markup, but in a block attribute. The block attribute is then passed over to gutenberg-block--drupalmedia--drupal-media-entity.html.twig file and rendered in Twig. Twig does not parse HTML in a string, it needs to be formatted markup.

    Here's a patch, that processes the caption as markup and therefore render the simple markup that is available for captions correctly.

    Please review.

  • Status changed to RTBC over 1 year ago
  • 🇳🇴Norway vegardjo

    Thanks Stephan, the patch did indeed fix the problem 🙂

  • First commit to issue fork.
  • Status changed to Fixed 8 months ago
  • 🇵🇹Portugal marcofernandes

    Added fix for 2.x and 3.x

  • Pipeline finished with Success
    8 months ago
    Total: 332s
    #176888
  • Pipeline finished with Success
    8 months ago
    Total: 241s
    #176897
  • Pipeline finished with Success
    8 months ago
    Total: 1028s
    #181185
  • Pipeline finished with Success
    8 months ago
    #181209
  • Pipeline finished with Success
    8 months ago
    Total: 1070s
    #181239
  • Automatically closed - issue fixed for 2 weeks with no activity.

  • Pipeline finished with Success
    7 months ago
    Total: 194s
    #190994
  • Pipeline finished with Skipped
    6 months ago
    #221075
  • Pipeline finished with Failed
    6 months ago
    #239752
  • Pipeline finished with Failed
    6 months ago
    Total: 284s
    #239753
  • Pipeline finished with Failed
    6 months ago
    #240218
  • Pipeline finished with Failed
    6 months ago
    #240481
  • Pipeline finished with Failed
    6 months ago
    Total: 275s
    #240485
  • Pipeline finished with Failed
    5 months ago
    Total: 273s
    #246441
  • Pipeline finished with Failed
    5 months ago
    Total: 292s
    #246443
  • Pipeline finished with Failed
    5 months ago
    Total: 3182s
    #246678
  • Pipeline finished with Failed
    5 months ago
    #246753
  • Pipeline finished with Failed
    5 months ago
    #246806
  • Pipeline finished with Failed
    5 months ago
    #246874
  • Pipeline finished with Failed
    5 months ago
    #246913
  • Pipeline finished with Running
    5 months ago
    #246948
  • Pipeline finished with Success
    5 months ago
    #247609
  • Pipeline finished with Success
    5 months ago
    Total: 276s
    #258313
  • Pipeline finished with Success
    5 months ago
    Total: 131s
    #258324
  • Pipeline finished with Success
    5 months ago
    Total: 127s
    #258332
  • Pipeline finished with Success
    3 months ago
    Total: 169s
    #298975
  • Pipeline finished with Success
    3 months ago
    Total: 183s
    #298979
  • Pipeline finished with Success
    3 months ago
    Total: 657s
    #309685
  • Pipeline finished with Skipped
    3 months ago
    #310698
  • Pipeline finished with Success
    3 months ago
    Total: 3692s
    #318639
  • Pipeline finished with Success
    3 months ago
    Total: 153s
    #319550
  • Pipeline finished with Success
    3 months ago
    Total: 151s
    #319557
  • Pipeline finished with Success
    3 months ago
    Total: 188s
    #319778
  • Pipeline finished with Success
    3 months ago
    Total: 146s
    #319801
  • Pipeline finished with Success
    3 months ago
    Total: 175s
    #320795
  • Pipeline finished with Success
    3 months ago
    Total: 141s
    #320800
  • Pipeline finished with Success
    3 months ago
    Total: 1544s
    #320957
  • Pipeline finished with Success
    3 months ago
    Total: 924s
    #320979
  • Pipeline finished with Skipped
    about 2 months ago
    #348371
  • Pipeline finished with Success
    about 1 month ago
    Total: 142s
    #360534
  • Pipeline finished with Success
    5 days ago
    Total: 242s
    #392080
  • Pipeline finished with Success
    2 days ago
    Total: 256s
    #394171
  • Pipeline finished with Success
    2 days ago
    Total: 183s
    #394174
Production build 0.71.5 2024