Contrib.social

[beta1]⚠️ Avoid manually injected HTML in footer component

Open on Drupal.org →
Created on 11 February 2023, over 1 year ago
Updated 14 March 2023, over 1 year ago

Problem/Motivation

Footer component description has 4 fields where the markup is missing from the template and injected from the context:

Content field

    content:
      type: render
      label: Content
      description: Content render. Optional.
      preview:
        - type: html_tag
          tag: p
          attributes:
            class:
              - fr-footer__content-desc
          value: 'Lorem ipsum dolor sit amet, consectetur adipiscing, <strong>incididunt</strong>, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est.'
        - type: html_tag
          tag: ul
          attributes:
            class:
              - fr-footer__content-list
          value: '<li class="fr-footer__content-item">
                   <a class="fr-footer__content-link" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                   </li>
                   <li class="fr-footer__content-item">
                   <a class="fr-footer__content-link" href="https://gouvernement.fr">gouvernement.fr</a>
                   </li>
                   <li class="fr-footer__content-item">
                   <a class="fr-footer__content-link" href="https://service-public.fr">service-public.fr</a>
                   </li>
                   <li class="fr-footer__content-item">
                   <a class="fr-footer__content-link" href="https://data.gouv.fr">data.gouv.fr</a>
                   </li>'

It would be better to spli the field and:

  • for desc: do the job directly in the pattern
  • for list: use a Drupal menu structure and to do the job directly in the pattern

Bottom field

    bottom:
      type: render
      label: Bottom content
      description: Bottom content render.
      preview:
        - type: html_tag
          tag: ul
          attributes:
            class:
              - fr-footer__bottom-list
          value: '<li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Sitemap</a>
                </li>Cotnent
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Accessibility</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Legal Notice</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Personal data</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Cookie management</a>
                </li>'
      - type: html_tag
          tag: div
          attributes:
            class:
              - fr-footer__bottom-copy
          value: 'Unless otherwise stated, all content

So, menu--footer.html.twig have this markup instead of being a plain presenter template::

{% if items %}
  <ul class="fr-footer__bottom-list">
    {% for item in items %}
      <li class="fr-footer__bottom-item">
        {{ link(item.title, item.url, item.attributes.addClass('fr-footer__bottom-link')) }}
      </li>
    {% endfor %}
  </ul>
{% endif %}

It would be better to split the field and:

  • for list: use a Drupal menu structure and to do the job directly in the pattern
  • for copy: do the job directly in the pattern

Partners field

Partners is as similar situation, even if it is less obvious because preview key is missing from the definition.

However, we will manage this issue as a new feature, in its own ticket: ✨ [beta7] Add footer partners Active

Top field

Top is in a similar situation, even if it is less obvious because preview key is missing from the definition:

    top:
      type: render
      label: Top content
      description: Top content render. Optional.

Example of markup;

<div class="fr-footer__top">
  <div class="fr-container">
      <div class="fr-grid-row fr-grid-row--start fr-grid-row--gutters">
          <div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
              <h3 class="fr-footer__top-cat">Nom de la catégorie</h3>
              <ul class="fr-footer__top-list">
                  <li>
                      <a class="fr-footer__top-link" href="#">Lien de navigation</a>
                  </li>
                  <li>
                      <a class="fr-footer__top-link" href="#">Lien de navigation</a>
                  </li>
                  <li>
                      <a class="fr-footer__top-link" href="#">Lien de navigation</a>
                  </li>
              </ul>
          </div>
          <div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
              <h3 class="fr-footer__top-cat">Nom de la catégorie</h3>
              <ul class="fr-footer__top-list">
                  <li>
                      <a class="fr-footer__top-link" href="#">Lien de navigation</a>
                  </li>
                  <li>
                      <a class="fr-footer__top-link" href="#">Lien de navigation</a>
                  </li>
              </ul>
        </div>          
      </div>      
    </div>
  </div>
</div>

Logo field

Logo doesn't inject HTML but its array structure is too complicated, so let's fix that too.

    logo:
      type: array
      label: Logo text and title. Optional.

Proposed resolution

Because of early menu rendering, it may be necessary to add new patterns. Let's try without this addition first.

API changes

Yes, big ones, that's why ⚠️ is in the issue title.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024