Create a details/summary FieldFormatter plugin for text fields.

Created on 16 June 2019, over 5 years ago
Updated 7 August 2024, 5 months ago

Problem/Motivation

Add a new FieldFormatter plugin to output text fields as a <details> / <summary> group.

Initial use case for Standard profile: in 🌱 Provide authors with tools to manage transcripts and captions/subtitles for local video and audio Active there is a plan to add a transcript field to some media bundles. A details element is a compact, unintrusive way to present the transcript close to the video. See a demonstration in comment #4.

Aside from that, it's a general purpose formatter to help authors make good use of a standard HTML element. A few other potential uses:

  • Events - a "venue address" field.
  • Commerce products - a "size info" field.
  • User profiles - a "contact details" field.
  • A long-text-with-summary could populate the <summary> using token replacement from the sub-field.
  • Paragraphs - a question-and-answer paragragh type, with two fields for the question and answer. The answer field would use the details/summary formatter, configured to show the question as the <summary> via token replacement. (See comment #10 for a demo.)
  • Long accessible descriptions for complex images. A flowchart accompanied by a rich text alternative in a collapsed details element. Comment #5 elaborates.

Proposed resolution

The FieldFormatter plugin will have some relevant settings:

  1. A checkbox setting controls whether it is should be open or closed initially, i.e. the <details open> attribute.
  2. Text of the <summary> element. will follow this order:
    • Custom text specified by the site-builder.
    • The field label if no custom text specified
    • Maybe could be follow-up
  3. As a highly desirable bonus, the summary text can support token replacements from the parent entity. Patch #3 included this, and there is a demo in comment #10. Deferred, needs follow-up issue.

Remaining tasks

  • Implement the formatter.
  • Needs follow-up issue to add token support (and tests) for the summary text.
  • Tests.

User interface changes

TODO place screenshots

API changes

None.

Data model changes

Just the necessary addition to config schema for the new formatter settings.

Feature request
Status

Needs work

Version

11.0 🔥

Component
Text 

Last updated 14 days ago

Created by

🇬🇧United Kingdom andrewmacpherson

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

  • Needs usability review

    Used to alert the usability topic maintainer(s) that an issue significantly affects (or has the potential to affect) the usability of Drupal, and their signoff is needed. When adding this tag, make it easy to review the issue. Make sure the issue summary describes the problem and the proposed solution. Screenshots usually help a lot! To get sign-off on issues with the "Needs usability review" tag, post about them in the #ux channel on Drupal Slack, and/or attend a UX meeting to demo the patch and get direct feedback from designers/UX folks/product management on next steps. If an issue represents a significant new feature, UI change, or change to the general "user experience" of Drupal, use Needs product manager review instead. See the scope of responsibilities for product managers.

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.

  • Status changed to Needs work almost 2 years ago
  • 🇳🇿New Zealand quietone

    This time I looked at the code in conjunction with testing the patch and running the tests.

    1. +++ b/core/modules/text/src/Plugin/Field/FieldFormatter/TextDetailsFormatter.php
      @@ -0,0 +1,118 @@
      +use Drupal\Component\Utility\Xss;
      

      This should be sorted to ease readability.

    2. +++ b/core/modules/text/src/Plugin/Field/FieldFormatter/TextDetailsFormatter.php
      @@ -0,0 +1,118 @@
      + *   label = @Translation("Details with Summary tag"),
      

      The ux folks will give feedback but this should be sentence case.

    3. +++ b/core/modules/text/src/Plugin/Field/FieldFormatter/TextDetailsFormatter.php
      @@ -0,0 +1,118 @@
      +    if ($this->getSetting('open')) {
      

      Why is this shown only when open? As a user I need to click to find the state. Would it not be better to inform the user of the state?

    4. +++ b/core/modules/text/src/Plugin/Field/FieldFormatter/TextDetailsFormatter.php
      @@ -0,0 +1,118 @@
      +    $bubbleable_metadata->applyTo($elements);
      

      In \Drupal\text\Plugin\Field\FieldFormatter\TextDefaultFormatter::viewElements there is a comment that the ProcessedText elements handles the cache. So, I think this is not necessary.

    5. +++ b/core/modules/text/config/schema/text.schema.yml
      @@ -116,6 +116,17 @@ field.formatter.settings.text_trimmed:
      +      label: 'Open details group by default.'
      

      Labels do not have full stops.

    6. +++ b/core/modules/text/src/Plugin/Field/FieldFormatter/TextDetailsFormatter.php
      @@ -0,0 +1,118 @@
      +      // Compute the text to use for the <summary> element.
      

      Let's make this something helpful. Something along the lines of 'Use the user text for the summary. If not supplied then use the field label." This block is in two methods, so both should be changed.

    7. +++ b/core/modules/text/src/Plugin/Field/FieldFormatter/TextDetailsFormatter.php
      @@ -0,0 +1,118 @@
      +      // Use the field label as a fallback.
      ...
      +        // Use the field label as a fallback.
      

      Can be removed when the comment is changed.

    8. +++ b/core/modules/text/tests/src/Kernel/TextDetailsFormatterTest.php
      @@ -0,0 +1,147 @@
      +use Drupal\field\Entity\FieldConfig;
      

      Sort the use statements.

    9. +++ b/core/modules/text/tests/src/Kernel/TextDetailsFormatterTest.php
      @@ -0,0 +1,147 @@
      + * Tests the text formatters functionality.
      

      As I read this, this tests is testing multiple text formatters. Let's update the comment to reflect that this is testing a specific text formatter.

    10. +++ b/core/modules/text/tests/src/Kernel/TextDetailsFormatterTest.php
      @@ -0,0 +1,147 @@
      +class TextDetailsFormatterTest extends EntityKernelTestBase {
      

      This test has the same setup as TextFormatterTest, does it make sense to extend from that?

    11. +++ b/core/modules/text/tests/src/Kernel/TextDetailsFormatterTest.php
      @@ -0,0 +1,147 @@
      +  /**
      +   * Modules to enable.
      +   *
      +   * @var array
      +   */
      

      This can be inheritdoc.

    12. +++ b/core/modules/text/tests/src/Kernel/TextDetailsFormatterTest.php
      @@ -0,0 +1,147 @@
      +   *   Sets of arguments to pass to the formatter.
      

      Let's be more descriptive. Use an item list to describe the array values.

    13. +++ b/core/modules/text/tests/src/Kernel/TextDetailsFormatterTest.php
      @@ -0,0 +1,147 @@
      +    return [
      

      Why is there no case with 'open' set to TRUE?

    14. +++ b/core/modules/text/text.module
      @@ -32,6 +32,8 @@ function text_help($route_name, RouteMatchInterface $route_match) {
      +      $output .= '<dt>' . t('Displaying the text inside a details group.') . '</dt>';
      

      This is a heading and does not need a full stop.

    Finally, I think that this new formatter should be added to the list being tested in \Drupal\Tests\text\Kernel\TextFormatterTest.

    I want to take another look at TextDetailsFormatterTest.

  • 🇮🇹Italy kopeboy Milan

    I would also consider allowing the end user to input the summary text, and even supporting the existing "Text with summary" field type when the summary is required (in this case, check current bug at 🐛 After enabling Require Summary on a field can't save the field Needs review ).

  • 🇮🇹Italy kopeboy Milan

    We can take inspiration from the details_summary_field_formatter module.

Production build 0.71.5 2024