Use grid row components in page.html.twig

Created on 5 January 2025, 4 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_uswds:banner, ui_suite_uswds:search, ui_suite_uswds:header....
  • but some hardcoded duplication fo grid row markup

Snippet:

    <div class="grid-container">
      {% if page.breadcrumb or page.highlighted or page.help %}
        {% block breadcrumb %}
          <div class="grid-row">
            {{ page.breadcrumb }}
          </div>
        {% endblock %}

        {% block highlighted %}
          <div class="grid-row">
            {{ page.highlighted }}
          </div>
        {% endblock %}

        {% block help %}
          <div class="grid-row ">
            {{ page.help }}
          </div>
        {% endblock %}
      {% endif %}

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

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
And Daisy UI theme: πŸ“Œ 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

4.0

Component

Code

Created by

πŸ‡«πŸ‡·France pdureau Paris

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024