Don't show heading ancestor blocks in Document Outline.

WordPress · Sep 24, 2020 · 06c3c45 · 06c3c45
1 parent 73d8a36
commit 06c3c45
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 26 deletions.
diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js
@@ -39,27 +39,23 @@ const multipleH1Headings = [
 
 /**
  * Returns an array of heading blocks enhanced with the following properties:
- * path    - An array of blocks that are ancestors of the heading starting from a top-level node.
- *           Can be an empty array if the heading is a top-level node (is not nested inside another block).
  * level   - An integer with the heading level.
  * isEmpty - Flag indicating if the heading has no content.
  *
  * @param {?Array} blocks An array of blocks.
- * @param {?Array} path   An array of blocks that are ancestors of the blocks passed as blocks.
  *
  * @return {Array} An array of heading blocks enhanced with the properties described above.
  */
-const computeOutlineHeadings = ( blocks = [], path = [] ) => {
+const computeOutlineHeadings = ( blocks = [] ) => {
 	return flatMap( blocks, ( block = {} ) => {
 		if ( block.name === 'core/heading' ) {
 			return {
 				...block,
-				path,
 				level: block.attributes.level,
 				isEmpty: isEmptyHeading( block ),
 			};
 		}
-		return computeOutlineHeadings( block.innerBlocks, [ ...path, block ] );
+		return computeOutlineHeadings( block.innerBlocks );
 	} );
 };
 
@@ -119,7 +115,6 @@ export const DocumentOutline = ( {
 							key={ index }
 							level={ `H${ item.level }` }
 							isValid={ isValid }
-							path={ item.path }
 							isDisabled={ hasOutlineItemsDisabled }
 							href={ `#block-${ item.clientId }` }
 							onSelect={ onSelect }

diff --git a/packages/editor/src/components/document-outline/item.js b/packages/editor/src/components/document-outline/item.js
@@ -3,16 +3,10 @@
  */
 import classnames from 'classnames';
 
-/**
- * WordPress dependencies
- */
-import { BlockTitle } from '@wordpress/block-editor';
-
 const TableOfContentsItem = ( {
 	children,
 	isValid,
 	level,
-	path = [],
 	href,
 	onSelect,
 } ) => (
@@ -34,15 +28,6 @@ const TableOfContentsItem = ( {
 				className="document-outline__emdash"
 				aria-hidden="true"
 			></span>
-			{
-				// path is an array of nodes that are ancestors of the heading starting in the top level node.
-				// This mapping renders each ancestor to make it easier for the user to know where the headings are nested.
-				path.map( ( { clientId }, index ) => (
-					<strong key={ index } className="document-outline__level">
-						<BlockTitle clientId={ clientId } />
-					</strong>
-				) )
-			}
 			<strong className="document-outline__level">{ level }</strong>
 			<span className="document-outline__item-content">{ children }</span>
 		</a>

diff --git a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap
@@ -10,7 +10,6 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = `
       isValid={true}
       key="0"
       level="H2"
-      path={Array []}
     >
       Heading parent
     </TableOfContentsItem>
@@ -19,7 +18,6 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = `
       isValid={true}
       key="1"
       level="H3"
-      path={Array []}
     >
       Heading child
     </TableOfContentsItem>
@@ -37,7 +35,6 @@ exports[`DocumentOutline header blocks present should render warnings for multip
       isValid={false}
       key="0"
       level="H1"
-      path={Array []}
     >
       Heading 1
       <br
@@ -54,7 +51,6 @@ exports[`DocumentOutline header blocks present should render warnings for multip
       isValid={false}
       key="1"
       level="H1"
-      path={Array []}
     >
       Heading 1
       <br