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

Feature Description

Now that automatic semantic headings are applied to text elements within stories (see https://github.com/googleforcreators/web-stories-wp/issues/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

[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

[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.