Editor: Add Semantic Headings to the right click menu of Text Elements

[bmattb]

Feature Description

Now that automatic semantic headings are applied to text elements within stories (see #5326), users are requesting a way to be able to view what that value is or will be on publish so adjustments can be made beforehand.

This feature will allow a user to select the text within a page and see and change the text element within the sidebar.

Many thanks to @swissspidy for the implementation idea, and to @aaskedall for the UX guidance.

Acceptance Criteria

• This should be under a new experimental feature flag.
  • The semantic headings experiment flag is on the branch titled: feature/11788-experiment-semantic-headings... Please branch off of this when working on this feature.
  • For an example of how to use it with a feature, see this PR: https://github.com/GoogleForCreators/web-stories-wp/pull/11626/files
• Within the right click menu of a text element on the page, there should be a new item called Heading Level
• This Heading Level item should have a submenu that show the following properties (along with the one currently selected):
  • Automatic (xyz) (stored as auto)
  • Heading 1 (stored as h1)
  • Heading 2 (stored as h2)
  • Heading 3 (stored as h3)
  • Paragraph (stored as p)
• When the menu item is changed to another option in the menu, it should update the text element's tagName property

Developer Notes

Notes from @swissspidy on implementation:
xyz is replaced with whatever getTextElementTagNames() returns for the element.

When changing this option, the text element's tagName property is updated.

getTextElementTagNames() is updated to take this tagName property into account.

Alternatives Considered

In addition to this space, this functionality will also be accomplished within the sidebar of the Editor.

Additional Context

[swissspidy]

Implementation note: this would mean exporting getTextElementTagNames from the output package and then using that in the editor for this indicator.

While this needs UX, we can already implement something behind a feature flag.

Suggestion:

1. Create a new TextAccessibility panel
2. In this panel, add a new dropdown (with dropDownLabel={__('Heading Level', 'web-stories')} to modify the text element's heading level with the following options:
   • Automatic (xyz) (stored as auto)
   • Heading 1 (stored as h1)
   • Heading 2 (stored as h2)
   • Heading 3 (stored as h3)
   • Paragraph (stored as p)

xyz is replaced with whatever getTextElementTagNames() returns for the element.

When changing this option, the text element's tagName property is updated.

getTextElementTagNames() is updated to take this tagName property into account.

Below the dropdown we can add a helper text <a>Learn more</a> about using headings in Web Stories., where we can link to the docs

Mock:

Context:

• Add initial semantic headings logic #10413

[bmattb]

Andrew to provide UX guidance on this one

[sblinde]

Our plan is to include this in the upcoming release, so this story will be pulled in to the sprint once we have UX (which I hope to talk about on Tuesday!)

[sblinde]

As talked about in our design sync meeting, we can approach this as suggested by @swissspidy and also consider adding this to the right click menu dropdown as a submenu item to be changed. Will follow back up with this ticket to get those requests written out appropriately with context.

[sblinde]

For additional context on how this was accomplished for the Editor sidebar, see: #11788

[felipebochehin87]

Issue found. Tested against https://stories-qa-wordpress-amp.pantheonsite.io/wp-admin/, using PR #12062.

1. Create a new story
2. Add two "Title 1" to the canvas
3. Switch their position - the top one is set to H1, the other is set to H2 - OK
4. Right click on the lower "Title 1" and change the heading to anything but H1 or H2
5. Click out of the element
6. Right click again on the same element and set to "Automatic" - see that in the right-click menu, the element is set to Automatic (Heading 1), but on the Style tab it's set to Automatic (Heading 2)

https://images.zenhubusercontent.com/235435637/4bdbcd00-d4fc-4b2a-9723-61925fa5b3a6/2022_08_04_12_28_58.mp4

[timarney]

@felipebochehin87 the code is updated to fix #11402 (comment)

[felipebochehin87]

Looks good. Thanks!

[felipebochehin87]

Looks good. Thanks!