Manually loop through blocks in a region.html.twig


UPDATE 2: It turns out that the elements array is not reliable available. So i've decided to put the .row wrapper in the region.html.twig and add the cell classes per region in the .theme file. This kinda sucks, but i currently see no other way to ensure the cell / column classes are added in a specific region.

$variables['block_region'] = $block->getRegion();
// Define block wrappers per region
if($variables['block_region'] == 'header'){
    $variables['attributes']['class'][] = 'cell';
    $variables['attributes']['class'][] = 'shrink';
}

You can also archive this manually by using fences for blocks. But if you or someone else forget to add the class, it will rseult in layout issues.


UPDATE: Don't do this. This causes an error, blocks randomly not printed out till you clear the drupal cache again. I will do further research on this later.


Since the great ability to modify blocks based on it's region is gone (https://www.drupal.org/project/drupal/issues/1968360), we were forced to use custom css instead of simple grid system classes to order blocks inside regions.

I don't want to bloat my CSS code with those repeatative stuff. This is not how grid systems work. If i want to write custom css i don't need a grid system. Sure, we can solve this with SCSS mixins easily, but the result will stay the same: bloated CSS code.

Also we don't have something like an #items array available that we can cleanly loop through inside a region.html.twig. So we need to use the elements array:

  
    {% for element in elements if element['#printed'] %}
  • {{ element|render }}
  • {% endfor %}

We probably can solve this better inside the .theme file with PHP, but.. i am frontend developer and i rarely use PHP. So i stay with this quick Twig solution.

Tags 

Neuen Kommentar schreiben

Plain text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
CAPTCHA
Diese Abfrage dient dem Schutz der Seite gegen automatisiertem Spam.