Block Patterns: Heading levels are skipped

[AtrumGeost]

Steps to reproduce

1. Create a new page or post
2. Select one of the following Block Patterns:

Text:

• Two columns of text
• Food menu

Gallery:

• Portraits and text

Blog:

• Recent posts # 2

Contact:

• Contact # 1
• Contact # 2
• Contact # 4

Images:

• Three columns

List:

• Portraits and text
• Numbered list

3. Click on the "Content Structure" button (if one of the listed patterns 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

[noahtallen]

Many heading levels are skipped

Do you mean that the heading levels in the block patterns themselves are incorrect? cc @ianstewart @iamtakashi I'm not sure it is possible for block patterns to dynamically change, as they're just static bits of content. Could you clarify the issue a bit?

[ianstewart]

I'm not sure it is possible for block patterns to dynamically change, as they're just static bits of content.

Not possible — today. It might be an interesting Gutenberg enhancement to dynamically transform headings to keep a neat outline while maintaining the defined style of a pattern.

Just to clarify, at least in this pattern …

Food menu

The headings are paragraph blocks — was it triggering the document outline warning?

@iamtakashi we may want to audit some of our headings in our patterns.

[AtrumGeost]

Could you clarify the issue a bit?

Hey @noahtallen ! Yup, basically if you add a specific block pattern as the first content on a page or post it will directly jump to a heading 4 (H4) for instance. Skipping H2 and H3. I'm not sure how critical this would be. I'm Cc'ing @enriquesanchez since he has more accessibility experience and would be able to tell for sure the level of impact.

At the same time, a solution would indeed be tricky. Using H2 levels (instead of H4 or H3) for patterns might also cause conflict. The idea to dynamically transform headings would be so awesome, not possible at the moment but wonderful for the future.

The headings are paragraph blocks — was it triggering the document outline warning?

Hey @ianstewart ! Nope, paragraph blocks with heading styles wouldn't trigger a document outline warning. But it is bad for accessibility. Tools like Wave would show a warning. Here's an example:

[ianstewart]

Text appears to be a heading but is not a heading element.

This seems like a fun one where a11y, SEO, Patterns, and Themes all get to connect. :) I wonder if there's a long-term potential solution here for a good practice.

cc @iamtakashi @mtias

For example …

• Use styled headings in patterns with tight control over line-height and size to make the Pattern "work".
• While also updating styled headings automatically to the correct semantic element relative to other headings in the document outline.

[enriquesanchez]

Because we can't be 100% certain of how and where in a document these patterns will be used, the best we can do is optimize for the most common use, which is patterns being added on a first level.

This means the first heading of a pattern should be an ´h2´, and then go from there without skipping any levels.

Authors can then modify them depending on their document structure and rely on the a11y warnings in the editor after the fact.

[iamtakashi]

Text appears to be a heading but is not a heading element.

The issue like that was a repercussion of workaround we needed to take when each pattern was built. Heading block didn't have the line-height option as it does now. Not being able to use un-bold headings in many themes is another example of issues that we needed to use paragraph block instead of heading block in some other patterns.

More design tools available in blocks allow patterns to provide better structure and semantics. We don't want to keep using paragraph block for quotes and lists, for example. Ref: WordPress/gutenberg#8171

[andrewserong]

Moving this issue to Blocked / Fixed Elsewhere in the Create board, as it sounds like the solution will be for View folks to update patterns when the appropriate design tools are available in Gutenberg, and there doesn't seem to be a clear action for us to take (from the Create focus perspective) in the short term.

[apeatling]

@ianstewart Could you manage this one? Added to view design backlog.

[ianstewart]

Yeah, I think we can go through now and clean this up some way.

Rough plan.

• Quick audit of themes and levels using h2 in patterns.
• Do a pass on heading consistency in patterns.

[youbrokesomething]

@ianstewart or @autumnfjeld, has this been picked up by a team?

[autumnfjeld]

@youbrokesomething We've added this to the Marvel project board and will get started on in it in the next week-ish. We have some other pattern editing to do and @alaczek will come this work into that project.
😄

[youbrokesomething]

@autumnfjeld Excellent. Thank you!

[alaczek]

I just wanted to note that I'm going through the patterns to fix this, starting with our basic patterns (done!).
I'll report back when I'm finished.

[autumnfjeld]

@alaczek Can we close this issue? I think it is either done or irrelevant due to Assembler v2 patterns.

[annezazu]

With no further updates from @alaczek and the above note from @autumnfjeld, I'm going to close this out. Let's reopen a new issue for any additional work that's needed and remember to follow up when work is started.