How to add class to field--item element generated by paragraphs

Question

I have a paragraph type called "Grid Item".

I've created a file called "paragraph--grid-item--default.html.twig" where I print all my required fields.

It all works as expected, but I need to add classes (from some list fields) to the element "field--item". I can add classes in any other children of this element but on directly on it.

This is the current output I have:

This is the code I'm using in the template:

{% block paragraph %}
    <div class="{{ content.field_block_size.0 }} {{ content.field_block_style.0 }} ">
        <div class="heading"> {{content.field_image.0}}
            {{content.field_block_title.0}}
        </div>
     <div class="card-body"> {{content.field_body.0}}</div>
     <p>
     {{content. field_read_more_link.0}}
     </p>

</div>
{% endblock paragraph %}

The classes content.field_block_size.0 and content.field_block_style.0 are applied as expected but I need them on the parent element...field--item

Answer 1

It depends a little on how your Paragraph is structured. Is it a single paragraph type with multiple generic fields in it or a paragraph with multiple other paragraph types inside of it?

If it's the latter, you have to create two twig files (For the parent and the child) but you can control output for each row and the contents of each row.

Alternatively, if you are just trying to style each item what's wrong with just selecting the field--item elements, eg:

 .field--whatever-parent-is-called .field--item { style here. }