templates/home_page: add anchor links for blocks according to Mozilla…

… docs with helptext and required migration

apps/gruenbuch/templates/gruenbuch_detail_page.html

@@ -8,7 +8,7 @@ <h1>{{ page.page_title }}</h1>
   <p>{{ page.subtitle }}</p>
   {% endif %}
   {% for block in self.body %}
-      {{ block }}
+    {% include_block block with block_id=block.id %}
   {% endfor %}
 </div>
 {% endblock %}

apps/gruenbuch/templates/gruenbuch_overview_page.html

@@ -31,7 +31,7 @@ <h1>{{ page.page_title }}</h1>
         </div>
     </section>
     {% for block in self.body %}
-        {{ block }}
+        {% include_block block with block_id=block.id %}
     {% endfor %}
     {% if settings.apps_settings.Downloads.gruenbuch %}
         {% with download=settings.apps_settings.Downloads.gruenbuch %}

apps/home/blocks.py

@@ -1,12 +1,19 @@
+from django.utils.safestring import mark_safe
 from django.utils.translation import gettext_lazy as _
 from wagtail import blocks
 from wagtail.embeds import blocks as embed_blocks
 from wagtail.images.blocks import ImageChooserBlock
 
-HELPTEXT_RICHTEXT_A11Y = _('For accessibility please make sure that you do not'
-                           ' leave out levels when using the headlines. That'
-                           ' means, that there should always be an h2 before'
-                           ' using an h3.')
+HELPTEXT_RICHTEXT_A11Y = mark_safe(
+    _('For accessibility please make sure that you do not'
+      ' leave out levels when using the headlines. That'
+      ' means, that there should always be an h2 before'
+      ' using an h3.<br>'
+      ' To get the anchor tag for any block: click the'
+      ' chain link symbol at the to left of the block icon and'
+      ' then copy the id from the browser url bar'
+      ' (example: block-1e495692-5fad-4133-86c5-0c42e19b4ad2-section)')
+)
 NEWSLETTER_EMAIL_DEFAULT = _('Your email address')
 NEWSLETTER_DSGVO_DEFAULT = _(
     'Ich willige in die Speicherung und Nutzung meiner E-Mail-Adresse für '

apps/home/templates/apps_home/blocks/faq_block.html

@@ -3,7 +3,7 @@
 {% get_identifier value as identifier %}
 
 
-<section class="modul-teaser-marketing fullwidth ds-block--base {% if self.background_color %}ds-block--fullwidth ds-block--{{ self.background_color }}{% endif %}">
+<section class="modul-teaser-marketing fullwidth ds-block--base {% if self.background_color %}ds-block--fullwidth ds-block--{{ self.background_color }}{% endif %}" id="block-{{ block_id }}-section">
     <div class="content-container fullwidth__inner">
         {% if self.faq_title %}
         <h2 class="title">

apps/home/templates/apps_home/blocks/image_swiper_block.html

@@ -1,6 +1,6 @@
 {% load wagtailcore_tags wagtailimages_tags i18n %}
 
-<div class="modul-buehne ds-block--base">
+<section class="modul-buehne ds-block--base" id="block-{{ block_id }}-section">
     <div class="swiper-container swiper">
         <div class="swiper-controls">
             <div class="swiper-button-prev" title="{% trans 'Previous picture' %}"></div>
@@ -68,4 +68,4 @@ <h2 class="title">{{ value.title }}</h2>
 
         </ul>
     </div>
-</div>
+</section>

apps/home/templates/apps_home/blocks/newsletter_block.html

@@ -1,6 +1,6 @@
 {% load static i18n widget_tweaks form_field_tags %}
 
-<section class="modul-teaser-marketing fullwidth ds-block--base {% if self.background_color %}ds-block--fullwidth ds-block--{{ self.background_color }}{% endif %}">
+<section class="modul-teaser-marketing fullwidth ds-block--base {% if self.background_color %}ds-block--fullwidth ds-block--{{ self.background_color }}{% endif %}" id="block-{{ block_id }}-section">
     <div class="content-container fullwidth__inner">
         {% if self.title %}
         <h2 class="title">

apps/home/templates/apps_home/blocks/paragraph_block.html

@@ -1,6 +1,6 @@
 {% load block_tags %}
 
-<section class="modul-text_bild ds-block--base">
+<section class="modul-text_bild ds-block--base" id="block-{{ block_id }}-section">
     <div class="text textile">
         {{ self.body }}
     </div>

apps/home/templates/apps_home/blocks/quote_block.html

@@ -1,6 +1,6 @@
 {% load i18n wagtailcore_tags %}
 
-<blockquote class="modul-testimonial ds-block--base">
+<blockquote class="modul-testimonial ds-block--base" id="block-{{ block_id }}-section">
     <div class="textbox">
         <i class="fas fa-quote-left quote" aria-hidden="true"></i>
         <div class="text">

apps/home/templates/apps_home/blocks/teaser_block_centered.html

@@ -4,6 +4,7 @@
 <!-- colours are needed for text colour styling -->
 <article class="modul-teaser-marketing boxed fullwidth ds-block--base
   {% if self.background_color %} ds-block--{{ self.background_color }}{% endif %}"
+  id="block-{{ block_id }}-section"
 >
     <div class="background-image {% if self.background_color %}ds-block--{{ self.background_color }}{% else %}pink{% endif %}" aria-hidden="true">
     </div>

apps/home/templates/apps_home/blocks/teaser_block_columns.html

@@ -1,6 +1,6 @@
 {% load i18n wagtailcore_tags wagtailimages_tags %}
 
-<section class="modul-multiteaser ds-block--base">
+<section class="modul-multiteaser ds-block--base" id="block-{{ block_id }}-section">
     <h2 class="title">{{ value.title }}</h2>
     <ul class="flexgrid grid--{{self.column_count}}">
       {% for value in self.column %}

apps/home/templates/apps_home/blocks/teaser_block_image.html

@@ -1,7 +1,7 @@
 {% load i18n wagtailcore_tags wagtailimages_tags %}
 {% image value.image fill-800x600 as image %}
 
-<article class="modul-teaser-marketing imageteaser fullwidth ds-block--base ds-block--fullwidth {% if self.background_color %}ds-block--{{ self.background_color }}{% else %}pink{% endif %}" >
+<article class="modul-teaser-marketing imageteaser fullwidth ds-block--base ds-block--fullwidth {% if self.background_color %}ds-block--{{ self.background_color }}{% else %}pink{% endif %}" id="block-{{ block_id }}-section">
     <div class="background-image {% if self.background_color %}ds-block--{{ self.background_color }}{% endif %}" aria-hidden="true">
     </div>
     <div class="content-container fullwidth__inner">

apps/home/templates/apps_home/blocks/teaser_block_single.html

@@ -1,7 +1,7 @@
 {% load i18n wagtailcore_tags wagtailimages_tags %}
 {% image value.image fill-800x600 as image %}
 
-<article class="modul-teaser ds-block--base" data-add-clickable-area="smart">
+<article class="modul-teaser ds-block--base" data-add-clickable-area="smart" id="block-{{ block_id }}-section">
     <div class="image">
         <div class="image__image">
             {% image value.image fill-800x600 as image %}

apps/home/templates/apps_home/blocks/teaser_block_tiles.html

@@ -1,6 +1,6 @@
 {% load i18n wagtailcore_tags wagtailimages_tags %}
 
-<section class="modul-icontiles ds-modul-icontiles">
+<section class="modul-icontiles ds-modul-icontiles" id="block-{{ block_id }}-section">
     <h2 class="title">{{ value.title }}</h2>
     <div class=icontiles__inner>
         <ul>

apps/home/templates/apps_home/blocks/text_with_image_block.html

@@ -1,7 +1,7 @@
 {% load i18n wagtailcore_tags wagtailimages_tags %}
 {% image value.image fill-800x600 as image %}
 
-<section class="modul-text_bild ds-block--base ds-block--fullwidth imagealign{% if self.image_alignment == 'left' %}left{% else %}right{% endif %} fifty">
+<section class="modul-text_bild ds-block--base ds-block--fullwidth imagealign{% if self.image_alignment == 'left' %}left{% else %}right{% endif %} fifty" id="block-{{ block_id }}-section">
     <div class="image">
         <div class="image__image">
             <img src="{{ image.url }}" alt="{{ image.alt }}">

apps/home/templates/apps_home/blocks/thesis_list_block.html

@@ -1,6 +1,6 @@
 {% load block_tags i18n wagtailcore_tags %}
 
-<section class="modul-teaser-marketing fullwidth ds-block--base {% if self.background_color %}ds-block--fullwidth ds-block--{{ self.background_color }}{% endif %}">
+<section class="modul-teaser-marketing fullwidth ds-block--base {% if self.background_color %}ds-block--fullwidth ds-block--{{ self.background_color }}{% endif %}" id="block-{{ block_id }}-section">
     <div class="content-container fullwidth__inner">
         <div class="ds-block__maincontent--small">
             <h2 class="title thesis-ds-block__title">{{ value.title }}</h2>

apps/home/templates/apps_home/blocks/video_block.html

@@ -3,7 +3,7 @@
 {% get_identifier value as identifier %}
 {% get_video_provider value.video.url as video_provider %}
 
-<section class="modul-video ds-block--base">
+<section class="modul-video ds-block--base" id="block-{{ block_id }}-section">
     {% if value.title %}
       <h2 class="title">{{ value.title }}</h2>
     {% endif %}

apps/home/templates/apps_home/detail_page.html

@@ -4,8 +4,8 @@
 {% block content %}
 <div id="layout-grid__area--maincontent">
     <h1>{{ page.page_title }}</h1>
-    {% for block in page.body %}
-        {% include_block block %}
+    {% for block in self.body %}
+        {% include_block block with block_id=block.id %}
     {% endfor %}
 </div>
 {% endblock %}

apps/home/templates/apps_home/home_page.html

@@ -60,7 +60,7 @@ <h1 class="title">{{ page.page_title }}</h1>
 </section>
 <div id="layout-grid__area--maincontent">
     {% for block in self.body %}
-    {{ block }}
+      {% include_block block with block_id=block.id %}
     {% endfor %}
 </div>
 

apps/home/templates/apps_home/overview_page.html

@@ -31,7 +31,7 @@ <h1>{{ page.page_title }}</h1>
         {{ self.page_intro|richtext }}
     </section>
     {% for block in self.body %}
-        {{ block }}
+        {% include_block block with block_id=block.id %}
     {% endfor %}
 </div>
 {% endblock %}

apps/home/templates/apps_home/simple_page.html

@@ -5,8 +5,8 @@
 {% block content %}
 <div id="layout-grid__area--maincontent">
     <h1>{{ page.page_title }}</h1>
-    {% for block in page.body %}
-    {% include_block block %}
-{% endfor %}
+    {% for block in self.body %}
+        {% include_block block with block_id=block.id %}
+    {% endfor %}
 </div>
 {% endblock %}