Problem/Motivation

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

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

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 ...'

Issue fork ui_patterns-3529153

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

malikah created an issue. See original summary.

malikah’s picture

malikah commented
Issue summary: View changes
pdureau’s picture

pdureau commented
Status: Active » Postponed (maintainer needs more info)

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?

malikah’s picture

malikah commented
Status: Postponed (maintainer needs more info) » Active

Thank you pdureau for your feedback and I apologize for this late answer.

You're right, I actually made an indentation mistake in my previous example.
As you suggested, I've try with :

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 ...'

But the error in the navigator is similar :

InvalidArgumentException: "value" 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).
smovs’s picture

smovs commented
Assigned: Unassigned » smovs
pdureau’s picture

pdureau commented

If we have fix, let's also port it to "UI Examples" module (which share some logic with "UI Patterns Library")

grimreaper made their first commit to this issue’s fork.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Version: 2.0.4 » 2.0.x-dev
Related issues: +#3529189: Using item_list in examples break rendering

Fixed provided on ui_examples #3529189: Using item_list in examples break rendering.

Please port the fix here.

anmolgoyal74 made their first commit to this issue’s fork.

anmolgoyal74 opened merge request !453

anmolgoyal74’s picture

anmolgoyal74 commented
Status: Active » Needs review
pdureau’s picture

pdureau commented
Assigned: smovs » just_like_good_vibes
Status: Needs review » Reviewed & tested by the community

just_like_good_vibes made their first commit to this issue’s fork.

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Assigned: just_like_good_vibes » Unassigned

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.