How can I get an empty region not to render in a field_layout template?

Question

I've got a layout_discovery template set up like this, for use in a field layout:

{% if content %}
<div{{ attributes.addClass(classes) }}>
  <div class="layout-region layout-region--main col-sm-8">
    {{ content.main }}
  </div>

  {% if content.sidebar %}
  <div class="layout-region layout-region--sidebar col-sm-4">
    {{ content.sidebar }}
  </div>
  {% endif %}
</div>
{% endif %}

(I have also tried {% if content.sidebar|trim|length > 0 %} with no change in the result.)

A content type using this layout puts a single, optional field into the sidebar region. If that field is empty, I would expect content.sidebar to be empty, so that the sidebar div won't be output and the main div can expand to fill the space. However, instead I get an empty sidebar div:

<div class="layout-region layout-region--sidebar col-sm-4">
</div>

Is there any way to accomplish this in a field layout, or do I need to build a custom node template instead?

Answer 1

Use this syntax:

{% if content.sidebar %}
  <div class="layout-region layout-region--sidebar col-sm-4">
    {{ content.sidebar }}
 </div>
{% endif %}

It will remove all HTML (such as the s that appear even if the section is empty and then only display if there is some non-HTML present.

NOTE: This will not work properly if a region contains only HTML tags, such as Search Facets that are completely made up of options. The striptags call will remove everything from these regions, making them appear to be empty and preventing your facets from showing

See also the discussion here: [meta] Themes improperly check renderable arrays when determining visibility.