Contrib.social

Entities that output own figcaption element confuse drupalentity plugin.js

Open on Drupal.org →
Created on 4 August 2019, over 5 years ago
Updated 6 September 2023, over 1 year ago

Problem/Motivation

Entities that output their own figcaption element hijack entity embed's editable figcaption element.

Steps to reproduce:

  1. Add hello world to an embedded entity's twig template
    {#
/**
 * @file
 * Theme override to display a media item.
 *
 * Available variables:
 * - name: Name of the media.
 * - content: Media content.
 *
 * @see template_preprocess_media()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'media',
    'media--type-' ~ media.bundle()|clean_class,
    not media.isPublished() ? 'media--unpublished',
    view_mode ? 'media--view-mode-' ~ view_mode|clean_class,
  ]
%}
<article{{ attributes.addClass(classes) }}>
  <figcaption>hello world</figcaption>
  {{ title_suffix.contextual_links }}
  {% if content %}
    {{ content }}
  {% endif %}
</article>
  2. Enable filter_caption
  3. Go to the host's edit form

Expected:
The editable figcaption is the one provided by drupalentity plugin.js

Actual:
The editable caption is the one added to the twig template and returned from the preview route.

This was discovered while investigating #3072339: Upgrade to 8.7.5 breaks fielded media entities embedded via CKE →

Out of the box (if the filter-caption.html.twig isn't overridden to change the order), due to the order of the preview markup (that is wrapped in the figure tag) returned from the preview route, the drupalmedia plugin.js will alway use the figcaption within the embed, since it comes first:

<figure role="group" class="caption caption-drupal-entity">

 <!-- embed with extra figcaption is rendered here -->

<figcaption>testing caption added with dialog</figcaption></figure>

Proposed resolution

Add a class to the correct figcaption element to target that one and not any that might be within the embed.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

1.0

Component

Code

Created by

🇺🇸United States oknate Greater New York City Area

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    🇬🇧United Kingdom james.williams

    Here's an updated patch that ensures the tests also only look for the adjusted figcaption element. Still need to add new test coverage and merge the new class with any existing ones rather than just replacing the class attribute. On the latter - I noticed there's an xpath selector in the test, which for now I could just update to //figcaption[@class="drupal-entity--editable"]//em, but that wouldn't work if there are multiple classes.

    For what it's worth, for anyone else running into this - do make sure you have a <figure> element surrounding your <figcaption>, otherwise CKEditor produces some really confusing output.

  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 7.3 & MySQL 5.7
    last update over 1 year ago
    88 pass, 2 fail
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024