Render first heading inside Statamic Page Builder as `h1`

Say you have a headline field on various Page Builder elements, and one as a set of in a Bard field. Both should visually look the same. Semantically, the first occurrence of any of these headlines on a given page should render as h1, every following as h2, without an editor having to set anything manually.

We start by passing the count of the current Page Puilder as page_builder_count down to each Page Builder component. This solves the problem that count will take another value further down the bubble, e.g. inside a Bard field.

{{ page_builder scope="block" }}
    {{ partial src="page_builder/{type}" :page_builder_count="count" }}
{{ /page_builder }}

Now any Page Builder block can check if it’s the first item, and if so, render as h1, else as h2. (We’re using Peak’s h2 partial here, that allows to pass the semantic heading level via the as attribute):

{{ partial:typography/h2 as="{ page_builder_count == 1  ? 'h1' : 'h2'}" :content="heading" }}

But I have another heading field inside a Bard set, which is also part of the Page Builder. (sometimes it makes more sense to have dedicated fields vs Bard formatted fields). In this case, checking the headings position in page_builder_count is not enough, because there might be multiple headings inside the Bard field, all of which would be in the first Page Builder block. So we check whether we’re in the first Page Builder block and if count equals 1. In this case, count refers to the count of the sets inside the Bard field.

{{ partial:typography/h2 as="{ (page_builder_count == 1 && count == 1)  ? 'h1' : 'h2'}" :content="heading" }}

Note that I assume that this bard field always starts with a heading, otherwise we’d have to make sure to be in the first field of this type.

Render first heading inside Statamic Page Builder as h1

Render first heading inside Statamic Page Builder as `h1`