Rendering a nested Paragraph's field using Twig

Question

We are using the Drupal 8 Paragraphs module and are have a Paragraph which contains a Paragraph type field, called "Steps" (machine name fs_steps), allowing editors to add a number of "Step" Paragraphs (machine name fss_steps) to the parent paragraph for rendering.

Within the twig file, we loop through the entities of the parent's Steps fields, but when we try to render a field of the nested Step paragraph field "Heading" using either (this code is within the context of a for loop):

{{ content.field_fs_step[key]['#paragraph'].field_fss_heading }}

or

{% set step = content.field_fs_steps[key]['#paragraph'] %}
{{ step.field_fss_heading }}

It fails with the following error:

Exception: Object of type Drupal\Core\Field\FieldItemList cannot be printed. in Drupal\Core\Template\TwigExtension->escapeFilter() (line 476 of core/lib/Drupal/Core/Template/TwigExtension.php).

Here is our current code that successfully retrieving the "values" of the bested paragraphs' fields, but does not end up using the renderer (which would respect the field's formatting types) as we need (this is a rudimentary example retrieving text values, but in other cases we want to render more complex data such as links and images):

        {% for key, item in content.field_fs_steps if key|first != '#'%}
                    {% set step = content.field_fs_steps[key]['#paragraph'] %}
                    <div class="step step{{ loop.index }}">
                        <div class="step-number">{{ step.field_fss_step_marker.0.value|raw }}</div>
                        <div class="step-info">
                            <h3>{{ step.field_fss_heading.0.value|raw }}</h3>
                            {{ step.field_fss_description.0.value|raw }}
                        </div>
                    </div>
                {% endfor %}

We're looking for help in understanding the following:

1. Why is it that the renderer triggers when calling a top level field against our parent Paragraph, such as {{ content.field_fs_heading }}, but attempting to render a subproperty of the "content" object or rendering a field of a referenced entity, generates an error?

2. If we are taking the wrong approach to "nested paragraphs", and/or how to render sub-entity fields properly from within the context of a Twig file? Do we need to (as a guess) create a separate template for the nested paragraph template? If so, how would we then pass in the contextual content data to that "partial" and have it properly render there?

Answer 1

For nested / referenced paragraph rendering, it's probably best to use a separate template as you theorized above by stating "Do we need to (as a guess) create a separate template for the nested paragraph template?"

A general rule of thumb for Twig rendering is, if you are starting to dig that far down in a render array in a given template, best to use the next template inline in the chain.

in addition, In Drupal 8 Paragraphs, there is a nice API function for referenced paragraphs called getParentEntity().

/**
 * Gets the parent entity of the paragraph.
 *
 * Preserves language context with translated entities.
 *
 * @return ContentEntityInterface
 *   The parent entity.
 */
public function getParentEntity();

I wrote a blog post dedicated to that here: https://www.dannyenglander.com/blog/drupal-8-architecture-how-to-get-a-value-from-a-paragraphs-parent-entity/

The bottom line is, you will look at Twig template debugging and see the referenced paragraph template suggestion in the output. Then you can use that template with some preprocessing to pull any data you need from the parent paragraph entity. A common use case for this might be some kind of setting like a boolean in the parent entity that you need to pass to the referenced paragraph entity / template.

Answer 2

You can use the twig_tweak module, which provides the drupal_field() fucntion in twig to do this.

{% block content %}
  {% for key, field_fs_steps_item in content.field_fs_steps %}
    {% if key|first != '#' %}
      {% set paragraph_id = content.field_fs_steps[key]['#paragraph'].id.value %}
      {% set field_fs_steps = drupal_field('field_fs_steps', 'paragraph', paragraph_id) %}