Rendering item_list in story break components library

Created on 9 June 2025, about 2 months ago
Updated 17 June 2025, about 2 months ago

Problem/Motivation

Since v2.0.4, we have error on components library if stories use theme: item_list in slots

<!--break-->

Error in the navigator :

Le site Web a rencontré une erreur inattendue.

InvalidArgumentException: "type" is an invalid render array key. Value should be an array but got a string. in Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php).

template_preprocess_item_list()
call_user_func_array() (Line: 261)
Drupal\Core\Theme\ThemeManager->render() (Line: 491)
Drupal\Core\Render\Renderer->doRender() (Line: 504)
Drupal\Core\Render\Renderer->doRender() (Line: 248)
Drupal\Core\Render\Renderer->render() (Line: 484)
Drupal\Core\Template\TwigExtension->escapeFilter() (Line: 150)
__TwigTemplate_41d3604099f154c0e6341b63440d4563->doDisplay() (Line: 402)
Twig\Template->yield() (Line: 358)
Twig\Template->display() (Line: 373)
Twig\Template->render() (Line: 51)
Twig\TemplateWrapper->render() (Line: 1520)
Twig\Extension\CoreExtension::include() (Line: 50)
__TwigTemplate_b902fea1f050b54add1f8ee51323e00b->doDisplay() (Line: 402)
Twig\Template->yield() (Line: 141)
__TwigTemplate_6f5ea93c11b10e81d5186d1765b7bc8a___412906545->doDisplay() (Line: 402)
Twig\Template->yield() (Line: 44)
__TwigTemplate_6f5ea93c11b10e81d5186d1765b7bc8a->doDisplay() (Line: 402)
Twig\Template->yield() (Line: 358)
Twig\Template->display() (Line: 373)
Twig\Template->render() (Line: 51)
Twig\TemplateWrapper->render() (Line: 234)
Drupal\Core\Template\TwigEnvironment->renderInline() (Line: 54)
Drupal\Core\Render\Element\InlineTemplate::preRenderInlineTemplate()
[...]

Steps to reproduce

  1. Use theme: item_list in the content of a slot in component story
    Example :
        name: Preview
        slots:
          content:
            - theme: item_list
              list_type: ul
              items:
            - type: html_tag
              tag: p
              value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ...'
        
  2. Open your components library in navigator (/admin/appearance/ui/components)

Proposed resolution

Looking at the content of 2.1.4 release ( https://www.drupal.org/project/ui_patterns/releases/2.0.4 ) it seem to be related to https://www.drupal.org/project/ui_patterns/issues/3515500 🐛 Prevent prop s keys to be transformed in render array keys with # in StoriesSyntaxConverter Active

The bug also concerns UI examples V1.0.2

Our temporary solution is to prefix items content with #

For example :

- type: html_tag
  tag: p
  value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ...'

became :

- '#type': html_tag
  '#tag': p
  '#value': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ...'
🐛 Bug report
Status

Postponed: needs info

Version

2.0

Component

Code

Created by

🇫🇷France malikah

Live updates comments and jobs are added and updated live.
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.

  • 🇫🇷France pdureau Paris

    your example is an incorrect YAML snippet:

        name: Preview
        slots:
          content:
            - theme: item_list
              list_type: ul
              items:
            - type: html_tag
              tag: p
              value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ...'
    

    I guess you meant this:

    name: Preview
    slots:
      content:
         theme: item_list
         list_type: ul
         items:
            - type: html_tag
              tag: p
              value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ...'
    

    item_list is not a render child but a render property. Each item expects:

    • attributes: HTML attributes to be applied to each list item.
    • value: The content of the list element.

    Source: https://api.drupal.org/api/drupal/core%21modules%21system%21templates%21...

    So, i guess you need to do this:

    name: Preview
    slots:
      content:
         theme: item_list
         list_type: ul
         items:
            - value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ...'
    

    Is it OK like that?

Production build 0.71.5 2024