Use grid row components in page.html.twig

Created on 5 January 2025, 3 months 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_daisyui:navbar
but some hardcoded duplication fo grid row markup

Snippet:

  <main role="main" class="grid grid-cols-12">
    {% if page.sidebar %}
    <div class="col-span-9">
      {{ page.content }}
    </div>
    <aside class="col-span-3" role="complementary">
      {{ page.sidebar }}
    </aside>
    {% else %}
    <div class="col-span-12">
      {{ page.content }}
    </div>
    {% endif %}
  </main>

It was not an issue before, 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
And DSFR theme: 📌 [1.1.x] Use grid row components in page.html.twig Active