[1.1.x] Use grid row components in page.html.twig

Created on 5 January 2025, 16 days ago

Problem/Motivation

Presenter templates must not have markup, only calls to components

page.html.twig is a presenter template with:

calls to ui_suite_dsfr:skiplinks, ui_suite_dsfr:header and ui_suite_dsfr:footer
but some hardcoded duplication fo grid row markup

Snippet:

   <main role="main" class="{{ container }} fr-mb-4w fr-mt-4w">
    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
    <div class="fr-grid-row fr-grid-row--gutters">
      <div class="fr-col" style="order: 2">
        {{ page.content }}
      </div>
      {% if page.sidebar_first %}
        <aside class="fr-col" role="complementary" style="order: 1">
          {{ page.sidebar_first }}
        </aside>
      {% endif %}
      {% if page.sidebar_second %}
        <aside class="fr-col" role="complementary" style="order: 3">
          {{ page.sidebar_second }}
        </aside>
      {% endif %}
    </div>
  </main>

It was not an issue before the 1.1.x branch, but we have grid row components now.

Proposed resolution

Calling grid row component(s) in page template will have those benefits:

check if our grid components work well in this real life scenario, and maybe improve or fix them
be ready when page displays will be buildable (thanks to page manager, experience builder, or other...)

You may be interested by what was done in https://git.drupalcode.org/project/ui_suite_material/-/blob/2.0.x/templa...

And what will be done in Bootstrap theme: 📌 [5.1.x] Use grid row components in page.html.twig Active

API changes

Maybe some additional props or mechanisms to grid SDC components, but nothing breaking.

📌 Task

Status

Active

Version

1.1

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.

Merge Requests

!138[1.1.x] Use grid row components in page.html.twig
Open
🇫🇷France just_like_good_vibes
updated 15 days ago

Comments & Activities

Issue created by @pdureau
Comment 15 days ago →
🇫🇷France just_like_good_vibes PARIS
i will do this
Comment 15 days ago →
🇫🇷France pdureau Paris
It will also be the opportunity of:

add an attributes prop by region like what UI suite Bootstrap is doing? It may be interesting to add the role="complementary" style="order: XXX" (let's not care about aside element because not like that in DSFR)

changing the ratio from 4/4/4 to 3/6/3 (visually, so 6/3/3 in markup)

adding a theme settings to manage the ratio? Because the page layout display builders are not ready yet.
Merge request !138Issue #3497463 by pdureau, just_like_good_vibes: Use grid row components in page.html.twig → (Open) created by just_like_good_vibes
Comment 15 days ago →
🇫🇷France just_like_good_vibes PARIS

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024