Add device visibility and responsive navigation for 1.10.0

templates/blocks/block.html.twig

@@ -1,7 +1,7 @@
 {% set type = block.type %}
 {% set props = block.props|default({}) %}
 {% set layout = block.layout|default({}) %}
-{% set designClasses = '' %}
+{% set designClasses = layout.visibility|default('all') != 'all' ? ' visibility-' ~ layout.visibility : '' %}
 {% for device, settings in layout.design|default({}) %}
     {% for key, value in settings %}{% set designClasses = designClasses ~ ' d-' ~ device ~ '-' ~ key ~ '-' ~ value %}{% endfor %}
 {% endfor %}
@@ -68,7 +68,7 @@
     </figure>
 {% elseif type == 'logos' %}
     <ul id="{{ block.id }}" class="block-logos{{ designClasses }}">
-        {% for child in block.children|default([]) %}<li>{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}</li>{% endfor %}
+        {% for child in block.children|default([]) %}<li class="visibility-{{ child.layout.visibility|default('all') }}">{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}</li>{% endfor %}
     </ul>
 {% elseif type == 'cta' %}
     <div id="{{ block.id }}" class="block-cta{{ designClasses }}">
@@ -93,14 +93,17 @@
     {% if links is not empty %}
     {# The layout is a class, and the burger variant is a details element: a menu that needs a
        script to open would be a menu that does not open on a page without one. #}
-    <nav id="{{ block.id }}" class="block-menu menu-{{ props.layout|default('horizontal') }}{{ designClasses }}"
+    {% set menuLayout = props.layout|default('horizontal') %}
+    {% set collapse = menuLayout == 'horizontal' ? props.collapse|default('tablet') : 'never' %}
+    <nav id="{{ block.id }}" class="block-menu menu-{{ menuLayout }} menu-collapse-{{ collapse }}{{ designClasses }}"
          aria-label="{{ {header: 'Hauptnavigation', secondary: 'Zweite Navigation', footer: 'Fußzeile', legal: 'Rechtliches'}[props.slot]|default('Navigation') }}">
-        {% if props.layout|default('horizontal') == 'burger' %}
+        {% if menuLayout == 'burger' or collapse != 'never' %}
         <details class="menu-burger">
-            <summary aria-label="Menü öffnen"><span class="burger-lines" aria-hidden="true"></span><span class="burger-text">Menü</span></summary>
+            <summary><span class="burger-lines" aria-hidden="true"></span><span class="burger-text">Menü</span></summary>
             <div class="menu-burger-body">{% include 'nav.html.twig' with {links: links} only %}</div>
         </details>
-        {% else %}
+        {% endif %}
+        {% if menuLayout != 'burger' %}
         {% include 'nav.html.twig' with {links: links} only %}
         {% endif %}
     </nav>
@@ -114,7 +117,7 @@
             {% for child in section.blocks %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
         </div>
     {% elseif editing|default(false) %}
-        <p id="{{ block.id }}" class="block-unavailable" role="note">Die verknüpfte Sektion „{{ props.partial }}“ gibt es nicht mehr. Der Verweis bleibt gespeichert.</p>
+        <p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Die verknüpfte Sektion „{{ props.partial }}“ gibt es nicht mehr. Der Verweis bleibt gespeichert.</p>
     {% else %}
         <!-- Verknüpfte Sektion {{ props.partial }} ist nicht vorhanden. -->
     {% endif %}
@@ -138,7 +141,7 @@
        tabs.js turns it into a tab widget; it only changes presentation, never content. #}
     <div id="{{ block.id }}" class="block-tabs{{ designClasses }}" data-tabs>
         <ul class="tabs-nav">
-            {% for child in block.children|default([]) %}<li><a href="#{{ child.id }}">{{ child.props.title }}</a></li>{% endfor %}
+            {% for child in block.children|default([]) %}<li class="visibility-{{ child.layout.visibility|default('all') }}"><a href="#{{ child.id }}">{{ child.props.title }}</a></li>{% endfor %}
         </ul>
         {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
     </div>
@@ -184,7 +187,7 @@
     <div id="{{ block.id }}" class="block-slider{{ designClasses }} slide-desktop-{{ props.desktopVisible }} slide-tablet-{{ props.tabletVisible }} slide-mobile-{{ props.mobileVisible }}{{ props.snap ? ' slider-snap' : '' }}{{ props.dots ?? false ? ' slider-dots' : '' }}"{% if props.autoplay|default(0) >= 3 %} data-autoplay="{{ props.autoplay }}"{% endif %}
          tabindex="0" role="group" aria-label="Zum Blättern seitwärts scrollen">
         {% for child in block.children|default([]) %}
-        <div class="slider-slide">{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}</div>
+        <div class="slider-slide visibility-{{ child.layout.visibility|default('all') }}">{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}</div>
         {% endfor %}
     </div>
 {% elseif type == 'embed' %}
@@ -246,5 +249,5 @@
        editor preview shows a placeholder so the block can still be found and moved.
     #}
     <!-- Block {{ block.id }} ({{ type }}) wird von dieser Installation nicht dargestellt. -->
-    {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable" role="note">Baustein „{{ type }}“ ist in dieser Installation nicht verfügbar. Der Inhalt bleibt gespeichert.</p>{% endif %}
+    {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Baustein „{{ type }}“ ist in dieser Installation nicht verfügbar. Der Inhalt bleibt gespeichert.</p>{% endif %}
 {% endif %}