Document outline: Use links not buttons

packages/editor/src/components/document-outline/index.js

@@ -8,7 +8,7 @@ import { countBy, flatMap, get } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { withSelect } from '@wordpress/data';
 import {
 	create,
 	getTextContent,
@@ -64,7 +64,7 @@ const computeOutlineHeadings = ( blocks = [], path = [] ) => {
 
 const isEmptyHeading = ( heading ) => ! heading.attributes.content || heading.attributes.content.length === 0;
 
-export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupported } ) => {
+export const DocumentOutline = ( { blocks = [], title, close, isTitleSupported } ) => {
 	const headings = computeOutlineHeadings( blocks );
 
 	if ( headings.length < 1 ) {
@@ -73,17 +73,8 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 
 	let prevHeadingLevel = 1;
 
-	// Select the corresponding block in the main editor
-	// when clicking on a heading item from the list.
-	const onSelectHeading = ( clientId ) => onSelect( clientId );
-	const focusTitle = () => {
-		// Not great but it's the simplest way to focus the title right now.
-		const titleNode = document.querySelector( '.editor-post-title__input' );
-		if ( titleNode ) {
-			titleNode.focus();
-		}
-	};
-
+	// Not great but it's the simplest way to locate the title right now.
+	const titleNode = document.querySelector( '.editor-post-title__input' );
 	const hasTitle = isTitleSupported && title;
 	const countByLevel = countBy( headings, 'level' );
 	const hasMultipleH1 = countByLevel[ 1 ] > 1;
@@ -95,7 +86,8 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 					<DocumentOutlineItem
 						level={ __( 'Title' ) }
 						isValid
-						onClick={ focusTitle }
+						close={ close }
+						target={ `#${ titleNode.id }` }
 					>
 						{ title }
 					</DocumentOutlineItem>
@@ -118,8 +110,9 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 							key={ index }
 							level={ `H${ item.level }` }
 							isValid={ isValid }
-							onClick={ () => onSelectHeading( item.clientId ) }
 							path={ item.path }
+							close={ close }
+							target={ `'#block-${ item.clientId }` }
 						>
 							{ item.isEmpty ?
 								emptyHeadingContent :
@@ -149,11 +142,5 @@ export default compose(
 			blocks: getBlocks(),
 			isTitleSupported: get( postType, [ 'supports', 'title' ], false ),
 		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { selectBlock } = dispatch( 'core/editor' );
-		return {
-			onSelect: selectBlock,
-		};
 	} )
 )( DocumentOutline );

packages/editor/src/components/document-outline/item.js

@@ -3,11 +3,6 @@
  */
 import classnames from 'classnames';
 
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
@@ -17,8 +12,9 @@ const TableOfContentsItem = ( {
 	children,
 	isValid,
 	level,
-	onClick,
 	path = [],
+	target,
+	close,
 } ) => (
 	<li
 		className={ classnames(
@@ -29,9 +25,10 @@ const TableOfContentsItem = ( {
 			}
 		) }
 	>
-		<button
+		<a
+			href={ target }
 			className="document-outline__button"
-			onClick={ onClick }
+			onClick={ close }
 		>
 			<span className="document-outline__emdash" aria-hidden="true"></span>
 			{
@@ -49,8 +46,7 @@ const TableOfContentsItem = ( {
 			<span className="document-outline__item-content">
 				{ children }
 			</span>
-			<span className="screen-reader-text">{ __( '(Click to focus this heading)' ) }</span>
-		</button>
+		</a>
 	</li>
 );
 

packages/editor/src/components/document-outline/style.scss

@@ -11,6 +11,10 @@
 	display: flex;
 	margin: 4px 0;
 
+	a {
+		text-decoration: none;
+	}
+
 	.document-outline__emdash::before {
 		color: $light-gray-500;
 		margin-right: 4px;

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

@@ -9,17 +9,17 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = `
       isValid={true}
       key="0"
       level="H2"
-      onClick={[Function]}
       path={Array []}
+      target="'#block-clientId_0"
     >
       Heading parent
     </TableOfContentsItem>
     <TableOfContentsItem
       isValid={true}
       key="1"
       level="H3"
-      onClick={[Function]}
       path={Array []}
+      target="'#block-clientId_1"
     >
       Heading child
     </TableOfContentsItem>
@@ -36,8 +36,8 @@ exports[`DocumentOutline header blocks present should render warnings for multip
       isValid={false}
       key="0"
       level="H1"
-      onClick={[Function]}
       path={Array []}
+      target="'#block-clientId_0"
     >
       Heading 1
       <br
@@ -53,8 +53,8 @@ exports[`DocumentOutline header blocks present should render warnings for multip
       isValid={false}
       key="1"
       level="H1"
-      onClick={[Function]}
       path={Array []}
+      target="'#block-clientId_2"
     >
       Heading 1
       <br

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

@@ -78,7 +78,10 @@ describe( 'DocumentOutline', () => {
 		} );
 
 		it( 'should not render when no heading blocks provided', () => {
-			const blocks = [ paragraph ];
+			const blocks = [ paragraph ].map( ( block, index ) => {
+				// Set client IDs to a predictable value.
+				return { ...block, clientId: `clientId_${ index }` };
+			} );
 			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
 
 			expect( wrapper.html() ).toBe( null );
@@ -87,7 +90,10 @@ describe( 'DocumentOutline', () => {
 
 	describe( 'header blocks present', () => {
 		it( 'should match snapshot', () => {
-			const blocks = [ headingParent, headingChild ];
+			const blocks = [ headingParent, headingChild ].map( ( block, index ) => {
+				// Set client IDs to a predictable value.
+				return { ...block, clientId: `clientId_${ index }` };
+			} );
 			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
 
 			expect( wrapper ).toMatchSnapshot();
@@ -108,7 +114,10 @@ describe( 'DocumentOutline', () => {
 		} );
 
 		it( 'should render warnings for multiple h1 headings', () => {
-			const blocks = [ headingH1, paragraph, headingH1, paragraph ];
+			const blocks = [ headingH1, paragraph, headingH1, paragraph ].map( ( block, index ) => {
+				// Set client IDs to a predictable value.
+				return { ...block, clientId: `clientId_${ index }` };
+			} );
 			const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
 
 			expect( wrapper ).toMatchSnapshot();

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

@@ -26,7 +26,7 @@ function TableOfContents( { hasBlocks } ) {
 					aria-disabled={ ! hasBlocks }
 				/>
 			) }
-			renderContent={ () => <TableOfContentsPanel /> }
+			renderContent={ ( { onClose } ) => <TableOfContentsPanel close={ onClose } /> }
 		/>
 	);
 }

packages/editor/src/components/table-of-contents/panel.js

@@ -11,7 +11,7 @@ import { withSelect } from '@wordpress/data';
 import WordCount from '../word-count';
 import DocumentOutline from '../document-outline';
 
-function TableOfContentsPanel( { headingCount, paragraphCount, numberOfBlocks } ) {
+function TableOfContentsPanel( { headingCount, paragraphCount, numberOfBlocks, close } ) {
 	return (
 		<Fragment>
 			<div
@@ -49,7 +49,7 @@ function TableOfContentsPanel( { headingCount, paragraphCount, numberOfBlocks }
 					<span className="table-of-contents__title">
 						{ __( 'Document Outline' ) }
 					</span>
-					<DocumentOutline />
+					<DocumentOutline close={ close } />
 				</Fragment>
 			) }
 		</Fragment>