Modifying introductory content markup before form source code is generated

[wilsond-gds]

Problem: We have a separate page called the 'passport escape' that users can reach from the main form in our HMPO app - sample url is here: https://review-p.integration.account.gov.uk/passport/prove-another-way. For our google analytics collection to work correctly, the <h1> on this page needs to have a custom class added to it

Attempted solution: I've tried overriding the {% block mainContent %} for the prove-another-way page to manually build the page content and add the class to the <h1>

Issue: This creates the correct source code for the content, but the form (boxed in pink in the screenshot) under the content disappears. How do we override the html attributes for the source code created from the yaml file for the content while also creating the form markup in the HMPO app?

[HughePaul]

You should be able to set the localisation for the h1/title and the content block and it should render it as above, eg:

pages:
  prove-another-way:
    title: Prove your identity another way
    content:
    - You must have a UK passport to prove etc etc
    - This might take you longer than 10 minutes.

[wilsond-gds]

Ah, I don't think I've explained myself very well. The visible content is fine, it's the markup that I need to be able to modify, and I can’t see an easy way of doing that through overriding nunjucks blocks. Would it be possible to add a class to the hmpo-template.njk file at line 65 - it would be exactly the same apart from the added class="govuk-heading-l" code for the <h1> tag:

{% block hmpoContent %}
        <div class="govuk-grid-row">
            <div class="govuk-grid-column-two-thirds">
                {% block mainContent %}
                    <h1 id="header" class="govuk-heading-l" data-page="{{hmpoPageKey}}">{{ translate("pages." + hmpoPageKey + ".h1", { default: hmpoTitle }) | safe }}</h1>
                    {% from "hmpo-html/macro.njk" import hmpoHtml %}
                    {{ hmpoHtml(translate("pages." + hmpoPageKey + ".content", { default: [] })) }}
                {% endblock %}
            </div>
        </div>
    {% endblock %}

Using the standard design system CSS this produces no change to the visual appearance of the page and also matches a common class attribute for <h1>s elsewhere on gov.uk.

[HughePaul]

There's no way to add it on, other than to replicate the block (and any required surrounding setup) in your own app. I don't want to add styling classes to the h1s in the template as that would interfere with other usage of the template. (some use govuk-heading-xl and some use govuk-heading-l for the H1 tags, as extended on h1 in CSS) Seeing as there MUST only be one H1 on a page, could your GA not be updated to pick this up without the class?

An alternative could be to have an optional local variable that gets set as a class on the H1 as part of the template if set in locals or a view?

[HughePaul]

Something along the lines of this change: https://github.com/HMPO/hmpo-components/pull/128/files

and then specifying in a view:

{% extends "form-template.njk" %}
{% set hmpoH1Class = "govuk-heading-l" %}

or globally for all pages:

app.locals.hmpoH1Class = 'govuk-heading-l';

[wilsond-gds]

@HughePaul thanks for the response, the PR you've mentioned looks very promising - could that be merged in so I can take advantage of that change? Do you know when that would be?

[HughePaul]

that's been merged and released as a new version of hmpo-components