Page Layouts: Heading levels are skipped

[AtrumGeost]

Steps to reproduce

1. Create a new page
2. Select one of the following Page Layouts with a red border:

3. Click on the "Content Structure" button (if one of the red-bordered pages doesn't display a warning, then it was marked because it has a paragraph block that's styled as a heading)

What I expected

For the heading levels to be respected: H1 (page title) > H2 > H3 > H4 > H5 > H6

What happened instead

Many heading levels are skipped

Browser / OS version

Firefox 78.0.1 (64-bit)

Screenshot / Video

Context / Source

#dogfooding

[jeyip]

I was able to reproduce this issue easily with the provided instructions. I didn't check every page, but I did confirm issues with skipped heading ranks on a sample from the About Page templates, Blog Page templates, Contact Page templates, and Menu Page templates.

It looks like the only reason we skipped heading ranks was to modify font size. I see the easiest solution being to refactor the rendered content for page templates. Rather than using heading ranks to change font size, we can use the correct heading ranks with customized font sizes (from block settings).

Ex. In the one offending Menu Page Template, there is a h4 header used. We can, alternatively, use an h2 with a font size of 20px.

There's a relevant discussion in #43892, an issue that also deals with skipped heading levels, but for Block Patterns instead of Page Templates.

[davipontesblog]

I am moving this to the triaging board to see if it's still an issue with the new layout picker on simple sites. If so, we can close it.

[synora]

Keeping open due to the ongoing conversation at #43892.

[kwight]

@ianstewart Would you call this a dupe of #43892, meaning the fix for that issue would fix this at the same time – or are they separate mechanisms?

[ianstewart]

This is a duplicate. I'll close it for now in favour of that issue.