Table of Contents / Outline: Treat Cover Images as H2-level headings

editor/components/document-outline/index.js

@@ -59,8 +59,33 @@ const getHeadingLevel = heading => {
 
 const isEmptyHeading = heading => ! heading.attributes.content || heading.attributes.content.length === 0;
 
+/**
+ * Returns a block whose attributes look enough like a heading's attributes.
+ *
+ * This is only meant to support heading and cover image blocks, making
+ * assumptions about cover image blocks so that DocumentOutline can operate on
+ * them, i.e. making sure attributes `nodeName` and `content` are present. It
+ * does not attempt to remove or add other attribues.
+ *
+ * @param   {Object} block A heading or cover image block.
+ * @returns {Object}       A block with heading-like attributes.
+ */
+const castHeading = ( block ) =>
+	block.name !== 'core/cover-image' ?
+		block :
+		{
+			...block,
+			attributes: {
+				...block.attributes,
+				nodeName: 'H2',
+				content: block.attributes.title,
+			},
+		};
+
 export const DocumentOutline = ( { blocks = [], title, onSelect } ) => {
-	const headings = filter( blocks, ( block ) => block.name === 'core/heading' );
+	const headings = filter( blocks, ( { name } ) =>
+		name === 'core/heading' || name === 'core/cover-image'
+	).map( castHeading );
 
 	if ( headings.length < 1 ) {
 		return null;

editor/components/document-outline/test/__snapshots__/index.js.snap

@@ -25,6 +25,31 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = `
 </div>
 `;
 
+exports[`DocumentOutline header blocks present should treat cover images as H2-level headings 1`] = `
+<div
+  className="document-outline"
+>
+  <ul>
+    <TableOfContentsItem
+      isValid={true}
+      key="0"
+      level="H1"
+      onClick={[Function]}
+    >
+      Heading 1
+    </TableOfContentsItem>
+    <TableOfContentsItem
+      isValid={true}
+      key="1"
+      level="H2"
+      onClick={[Function]}
+    >
+      Cover image
+    </TableOfContentsItem>
+  </ul>
+</div>
+`;
+
 exports[`DocumentOutline header blocks present should render warnings for multiple h1 headings 1`] = `
 <div
   className="document-outline"

editor/components/document-outline/test/index.js

@@ -27,6 +27,9 @@ describe( 'DocumentOutline', () => {
 		content: 'Heading child',
 		nodeName: 'H3',
 	} );
+	const coverImage = createBlock( 'core/cover-image', {
+		title: 'Cover image',
+	} );
 
 	describe( 'no header blocks present', () => {
 		it( 'should not render when no blocks provided', () => {
@@ -65,6 +68,14 @@ describe( 'DocumentOutline', () => {
 			expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 2 );
 		} );
 
+		it( 'should treat cover images as H2-level headings', () => {
+			const blocks = [ headingH1, paragraph, coverImage, paragraph ];
+			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
+
+			expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 2 );
+			expect( wrapper ).toMatchSnapshot();
+		} );
+
 		it( 'should render warnings for multiple h1 headings', () => {
 			const blocks = [ headingH1, paragraph, headingH1, paragraph ];
 			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );

editor/components/table-of-contents/index.js

@@ -20,7 +20,8 @@ import { getBlocks } from '../../store/selectors';
 import { selectBlock } from '../../store/actions';
 
 function TableOfContents( { blocks } ) {
-	const headings = filter( blocks, ( block ) => block.name === 'core/heading' );
+	const headings = filter( blocks, ( block ) => block.name === 'core/heading' ||
+		block.name === 'core/cover-image' );
 	const paragraphs = filter( blocks, ( block ) => block.name === 'core/paragraph' );
 
 	return (