From 3f59b93c8ad08358595813b74f18b774b0e985de Mon Sep 17 00:00:00 2001 From: Zebulan Stanphill Date: Thu, 24 Sep 2020 00:15:13 -0500 Subject: [PATCH 1/2] Don't show heading ancestor blocks in Document Outline. --- .../src/components/document-outline/index.js | 9 ++------- .../src/components/document-outline/item.js | 15 --------------- .../test/__snapshots__/index.js.snap | 4 ---- 3 files changed, 2 insertions(+), 26 deletions(-) diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js index 3609f51c42a63..abd1c853fb8b8 100644 --- 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 index e14bf995060c4..57ad25bfe7439 100644 --- 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" > - { - // 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 ) => ( - - - - ) ) - } { level } { children } 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 index 8f79943b2f5d9..1abe8912e0639 100644 --- 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 @@ -19,7 +18,6 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = ` isValid={true} key="1" level="H3" - path={Array []} > Heading child @@ -37,7 +35,6 @@ exports[`DocumentOutline header blocks present should render warnings for multip isValid={false} key="0" level="H1" - path={Array []} > Heading 1
Heading 1
Date: Thu, 24 Sep 2020 09:31:46 -0500 Subject: [PATCH 2/2] Fix unit test. --- .../test/__snapshots__/index.js.snap | 4 +- .../components/document-outline/test/index.js | 48 ++++++++----------- 2 files changed, 23 insertions(+), 29 deletions(-) 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 index 1abe8912e0639..09fcb9a531666 100644 --- a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap @@ -11,7 +11,7 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = ` key="0" level="H2" > - Heading parent + Heading 2 - Heading child + Heading 3 diff --git a/packages/editor/src/components/document-outline/test/index.js b/packages/editor/src/components/document-outline/test/index.js index fad1694be35fb..b38412b4a258c 100644 --- a/packages/editor/src/components/document-outline/test/index.js +++ b/packages/editor/src/components/document-outline/test/index.js @@ -22,7 +22,7 @@ jest.mock( '@wordpress/block-editor', () => ( { } ) ); describe( 'DocumentOutline', () => { - let paragraph, headingH1, headingParent, headingChild, nestedHeading; + let paragraph, headingH1, headingH2, headingH3, nestedHeading; beforeAll( () => { registerBlockType( 'core/heading', { category: 'text', @@ -59,18 +59,15 @@ describe( 'DocumentOutline', () => { content: 'Heading 1', level: 1, } ); - headingParent = createBlock( 'core/heading', { - content: 'Heading parent', + headingH2 = createBlock( 'core/heading', { + content: 'Heading 2', level: 2, } ); - headingChild = createBlock( 'core/heading', { - content: 'Heading child', + headingH3 = createBlock( 'core/heading', { + content: 'Heading 3', level: 3, } ); - - nestedHeading = createBlock( 'core/columns', undefined, [ - headingChild, - ] ); + nestedHeading = createBlock( 'core/columns', undefined, [ headingH3 ] ); } ); afterAll( () => { @@ -98,19 +95,17 @@ describe( 'DocumentOutline', () => { describe( 'header blocks present', () => { it( 'should match snapshot', () => { - const blocks = [ headingParent, headingChild ].map( - ( block, index ) => { - // Set client IDs to a predictable value. - return { ...block, clientId: `clientId_${ index }` }; - } - ); + const blocks = [ headingH2, headingH3 ].map( ( block, index ) => { + // Set client IDs to a predictable value. + return { ...block, clientId: `clientId_${ index }` }; + } ); const wrapper = shallow( ); expect( wrapper ).toMatchSnapshot(); } ); it( 'should render an item when only one heading provided', () => { - const blocks = [ headingParent ]; + const blocks = [ headingH2 ]; const wrapper = shallow( ); expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 1 ); @@ -119,9 +114,9 @@ describe( 'DocumentOutline', () => { it( 'should render two items when two headings and some paragraphs provided', () => { const blocks = [ paragraph, - headingParent, + headingH2, paragraph, - headingChild, + headingH3, paragraph, ]; const wrapper = shallow( ); @@ -149,16 +144,16 @@ describe( 'DocumentOutline', () => { const outlineItemContentSelector = '.document-outline__item-content'; - const blocks = [ headingParent, nestedHeading ]; + const blocks = [ headingH2, nestedHeading ]; const wrapper = mount( ); - //heading parent and nested heading should appear as items + // Unnested heading and nested heading should appear as items const tableOfContentItems = wrapper.find( tableOfContentItemsSelector ); expect( tableOfContentItems ).toHaveLength( 2 ); - //heading parent test + // Unnested heading test. const firstItemLevels = tableOfContentItems .at( 0 ) .find( outlineLevelsSelector ); @@ -169,21 +164,20 @@ describe( 'DocumentOutline', () => { .at( 0 ) .find( outlineItemContentSelector ) .text() - ).toEqual( 'Heading parent' ); + ).toEqual( 'Heading 2' ); - //nested heading test + // Nested heading test. const secondItemLevels = tableOfContentItems .at( 1 ) .find( outlineLevelsSelector ); - expect( secondItemLevels ).toHaveLength( 2 ); - expect( secondItemLevels.at( 0 ).text() ).toEqual( 'Block Title' ); - expect( secondItemLevels.at( 1 ).text() ).toEqual( 'H3' ); + expect( secondItemLevels ).toHaveLength( 1 ); + expect( secondItemLevels.at( 0 ).text() ).toEqual( 'H3' ); expect( tableOfContentItems .at( 1 ) .find( outlineItemContentSelector ) .text() - ).toEqual( 'Heading child' ); + ).toEqual( 'Heading 3' ); } ); } ); } );