1

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.

1
  • 2
    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.
    – sonfd
    Apr 29, 2022 at 13:47

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.