Score:1

What is the correct way to get the rendered fields values in a block view twig template?

in flag

I have a block on the main page of my website that displays most recent news stories from the News page (3 latest entries). This is a view, here is its settings:

enter image description here

I'm trying to make this block look better. As this is a view, I use block--views-block--news-block-1.html.twig template file for my purpose. All I wanted was to get the rendered field values in it to wrap each of them in a <div> with its own css class. I tried many times and through trial and error finally I wrote the following code:

{%
  set classes = [
    'block',
    'block-' ~ configuration.provider|clean_class,
    'block-' ~ plugin_id|clean_class,
  ]
%}
<div class="container">
    <section{{ attributes.addClass(classes) }}>
        {{ title_prefix }}
            <h2 class="article_title">District News</h2>
        {{ title_suffix }}
        {% block content %}
            <ul class="content article_list">
                {% for row in content['#view'].result %}
                    <li class="article_item">
                        <div class="article_item-header">
                            <div class="article_release_date">
                                {{ content['#view'].field['published_at'].value(row)|date("d.m.Y") }}
                            </div> 
                            {{ content['#view'].field['title'].getItems(row) }}
                        </div>
                        <div class="article_description">
                            {{ content['#view'].field['body'].getItems(row) }}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        {% endblock %}
        <div class="article_read_more">
            <a href="/news">View All</a>
        </div>
    </section>
</div>

It works satisfactorily: I see the markup and variables in this block on the main page exactly as I designed them. But I can't say that it works just perfectly because when I go to "Recent log messages", I see errors coming from this .twig template file. The error message is: User error: "raw" is an invalid render array key in Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php). When I delete my twig file, the error doesn't occur anymore. So my question is: What is the correct way to achieve the same markup without such errors? Maybe my approach is totally wrong and I should change it. Or maybe my approach is correct, but there is a little mistake in my code? Anyway, I'd like to know why do I get such error in the log and how can I avoid it. Please, help me.

sonfd avatar
in flag
I'd recommend updating your view to display a view mode of the news node, then you can do all the logic of which fields display and how they display for each news item right in a dedicated template.
Score:0
eg flag

I think trying to theme fields inside the block is not a best practice.

The approach mentioned in the comments by sonfd is a very good one.

Otherwise, you can theme each field in the view by overriding the field template like:

views-view-field--{views machine name}--{page or block machine name}--{field name}.html.twig

This would be a better approach.

Hope this answers your question.

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.