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';
 
 /**
  * Internal dependencies
@@ -61,7 +61,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, isTitleSupported } ) => {
 	const headings = computeOutlineHeadings( blocks );
 
 	if ( headings.length < 1 ) {
@@ -70,9 +70,6 @@ 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' );
@@ -115,8 +112,8 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 							key={ index }
 							level={ `H${ item.level }` }
 							isValid={ isValid }
-							onClick={ () => onSelectHeading( item.clientId ) }
 							path={ item.path }
+							target={ item.clientId }
 						>
 							{ item.isEmpty ?
 								emptyHeadingContent :
@@ -147,11 +144,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

@@ -17,8 +17,8 @@ const TableOfContentsItem = ( {
 	children,
 	isValid,
 	level,
-	onClick,
 	path = [],
+	target,
 } ) => (
 	<li
 		className={ classnames(
@@ -29,9 +29,9 @@ const TableOfContentsItem = ( {
 			}
 		) }
 	>
-		<button
+		<a
+			href={ target ? '#block-' + target : '#post-title-1' }
 			className="document-outline__button"
-			onClick={ onClick }
 		>
 			<span className="document-outline__emdash" aria-hidden="true"></span>
 			{
@@ -50,7 +50,7 @@ const TableOfContentsItem = ( {
 				{ 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,8 +9,8 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = `
       isValid={true}
       key="0"
       level="H2"
-      onClick={[Function]}
       path={Array []}
+      target="3fc15d2e-5d52-40b0-9f54-9b9562adeac0"
     >
       <Component
         format="string"
@@ -22,8 +22,8 @@ exports[`DocumentOutline header blocks present should match snapshot 1`] = `
       isValid={true}
       key="1"
       level="H3"
-      onClick={[Function]}
       path={Array []}
+      target="6eab6ae4-a33a-4e68-a218-2832860095a2"
     >
       <Component
         format="string"
@@ -44,8 +44,8 @@ exports[`DocumentOutline header blocks present should render warnings for multip
       isValid={false}
       key="0"
       level="H1"
-      onClick={[Function]}
       path={Array []}
+      target="34f77241-c57a-4610-a4a7-f0568d999e07"
     >
       <Component
         format="string"
@@ -65,8 +65,8 @@ exports[`DocumentOutline header blocks present should render warnings for multip
       isValid={false}
       key="1"
       level="H1"
-      onClick={[Function]}
       path={Array []}
+      target="34f77241-c57a-4610-a4a7-f0568d999e07"
     >
       <Component
         format="string"