diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js index 915375606b10c3..30101fe9419b9f 100644 --- a/packages/block-library/src/table-of-contents/edit.js +++ b/packages/block-library/src/table-of-contents/edit.js @@ -19,6 +19,8 @@ import { import { useDispatch, useSelect } from '@wordpress/data'; import { renderToString } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +import { useInstanceId } from '@wordpress/compose'; +import { store as noticeStore } from '@wordpress/notices'; /** * Internal dependencies @@ -50,6 +52,24 @@ export default function TableOfContentsEdit( { useObserveHeadings( clientId ); const blockProps = useBlockProps(); + const instanceId = useInstanceId( + TableOfContentsEdit, + 'table-of-contents' + ); + + // If a user clicks to a link prevent redirection and show a warning. + const { createWarningNotice, removeNotice } = useDispatch( noticeStore ); + let noticeId; + const showRedirectionPreventedNotice = ( event ) => { + event.preventDefault(); + // Remove previous warning if any, to show one at a time per block. + removeNotice( noticeId ); + noticeId = `block-library/core/table-of-contents/redirection-prevented/${ instanceId }`; + createWarningNotice( __( 'Links are disabled in the editor.' ), { + id: noticeId, + type: 'snackbar', + } ); + }; const canInsertList = useSelect( ( select ) => { @@ -137,8 +157,12 @@ export default function TableOfContentsEdit( { return ( <> { toolbarControls } diff --git a/packages/block-library/src/table-of-contents/list.tsx b/packages/block-library/src/table-of-contents/list.tsx index e327f8dfe2e86b..c5a5192b9e4f1c 100644 --- a/packages/block-library/src/table-of-contents/list.tsx +++ b/packages/block-library/src/table-of-contents/list.tsx @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { MouseEvent } from 'react'; + /** * WordPress dependencies */ @@ -12,8 +17,12 @@ const ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry'; export default function TableOfContentsList( { nestedHeadingList, + disableLinkActivation, + onClick, }: { nestedHeadingList: NestedHeadingData[]; + disableLinkActivation?: boolean; + onClick?: ( event: MouseEvent< HTMLAnchorElement > ) => void; } ): WPElement { return ( <> @@ -21,7 +30,17 @@ export default function TableOfContentsList( { const { content, link } = node.heading; const entry = link ? ( - + { content } ) : ( @@ -35,6 +54,15 @@ export default function TableOfContentsList( {
) : null }