Fix: Document Outline: Exception caused by headings with formatting

[jorgefilipecosta]

To display the RichText content that comes from the headings content attribute we should use the RichText.Content instead of rendering it directly.

Fixes: #8160

How has this been tested?

I added a heading to a post.
I made it bold.
I checked the heading appears correctly on the document outline.

[noisysocks]

Fixes the issue for me. Thanks Jorge!

[mcsf]

Should we strip the formatting rather than just pass it along?

Case in point: a post converted from classic to blocks (I used the post provided by @nosolosw in #12029) includes a Heading block with some inline styles:

Source	Output

In itself this could be considered a conversion issue, or not. Regardless, this is what Document Outline then looks like:

Locally, this is the change I needed to strip the formatting using create and getTextContent from @wordpress/rich-text:

diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js
index ad2ca5c2b..1f884c8d2 100644
--- a/packages/editor/src/components/document-outline/index.js
+++ b/packages/editor/src/components/document-outline/index.js
@@ -122,7 +123,7 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 								emptyHeadingContent :
 								<RichText.Content
 									tagName="span"
-									value={ item.attributes.content }
+									value={ getTextContent( create( { html: item.attributes.content } ) ) }
 								/>
 							}
 							{ isIncorrectLevel && incorrectLevelContent }