Meaningful wrappers for fields in layout builder?

Question

With standard field layout each field in a views row gets a class, such that you can create a flex box or grid around the row and position by name.

This enables placement by name. e.g.

 > div:nth-child(3) {
      display: grid;
      gap: 2rem;
      grid-template-columns: 1fr 1fr;

      .field--name-field-article-pubdate {
        grid-column: 1;
      }

The fragile 'nth-child' is already creeping in here.

Now, I would like to add a block using layout builder. Each field is wrapped with a un-labelled div.

The only way to put the image on the right, is by targeting the 4th child. How can either the wrappging div be removed or given a class relating to the field it is wrapping?

Answer 1

Overrode the theme block.html.twig template.

Simplest implementation from stable9/templates/block/block.html.twig. The classes part is the only changed part. Add to templates/block/ in a custom theme and reset caches.

{% set classes = classes ?? [
  'block-' ~ plugin_id|clean_class,
  ] %}
{% set attributes = attributes.addClass(classes) %}
<div{{ attributes }}>
  {{ title_prefix }}
  {% if label %}
  <h2{{ title_attributes }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
  {{ content }}
{% endblock %}
</div>

Gives the following markup