Autogenerate heading anchors

packages/block-library/src/heading/autogenerate-anchors.js

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import { deburr, trim } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Runs a callback over all blocks, including nested blocks.
+ *
+ * @param {Object[]} blocks   The blocks.
+ * @param {Function} callback The callback.
+ *
+ * @return {void}
+ */
+const recurseOverBlocks = ( blocks, callback ) => {
+	for ( const block of blocks ) {
+		// eslint-disable-next-line callback-return
+		callback( block );
+		if ( block.innerBlocks ) {
+			recurseOverBlocks( block.innerBlocks, callback );
+		}
+	}
+};
+
+/**
+ * Returns the text without markup.
+ *
+ * @param {string} text The text.
+ *
+ * @return {string} The text without markup.
+ */
+const getTextWithoutMarkup = ( text ) => {
+	const dummyElement = document.createElement( 'div' );
+	dummyElement.innerHTML = text;
+	return dummyElement.innerText;
+};
+
+/**
+ * Get all heading anchors.
+ *
+ * @param {Object} blockList An object containing all blocks.
+ * @param {string} excludeId A block ID we want to exclude.
+ *
+ * @return {string[]} Return an array of anchors.
+ */
+const getAllHeadingAnchors = ( blockList, excludeId ) => {
+	const anchors = [];
+
+	recurseOverBlocks( blockList, ( block ) => {
+		if (
+			block.name === 'core/heading' &&
+			( ! excludeId || block.clientId !== excludeId ) &&
+			block.attributes.anchor
+		) {
+			anchors.push( block.attributes.anchor );
+		}
+	} );
+
+	return anchors;
+};
+
+/**
+ * Get the slug from the content.
+ *
+ * @param {string} content The block content.
+ *
+ * @return {string} Returns the slug.
+ */
+const getSlug = ( content ) => {
+	// Get the slug.
+	return trim(
+		deburr( getTextWithoutMarkup( content ) )
+			.replace( /[^\p{L}\p{N}]+/gu, '-' )
+			.toLowerCase(),
+		'-'
+	);
+};
+
+/**
+ * Generate the anchor for a heading.
+ *
+ * @param {string}   anchor            The heading anchor.
+ * @param {string}   content           The block content.
+ * @param {string[]} allHeadingAnchors An array containing all headings anchors.
+ *
+ * @return {string|null} Return the heading anchor.
+ */
+const generateAnchor = ( anchor, content, allHeadingAnchors ) => {
+	const slug = getSlug( content );
+	// If slug is empty, then return null.
+	// Returning null instead of an empty string allows us to check again when the content changes.
+	if ( '' === slug ) {
+		return null;
+	}
+
+	const baseAnchor = `wp-${ slug }`;
+	anchor = baseAnchor;
+	let i = 0;
+
+	// If the anchor already exists in another heading, append -i.
+	while ( allHeadingAnchors.includes( anchor ) ) {
+		i += 1;
+		anchor = baseAnchor + '-' + i;
+	}
+
+	return anchor;
+};
+
+/**
+ * Updates the anchor if required.
+ *
+ * @param {string} clientId The block's client-ID.
+ * @param {string} anchor   The heading anchor.
+ * @param {string} content  The block content.
+ *
+ * @return {string} The anchor.
+ */
+export default function useGeneratedAnchor( clientId, anchor, content ) {
+	const allHeadingAnchors = useSelect(
+		( select ) => {
+			const allBlocks = select( blockEditorStore ).getBlocks();
+			return getAllHeadingAnchors( allBlocks, clientId );
+		},
+		[ clientId ]
+	);
+	return ! anchor || anchor.startsWith( 'wp-' )
+		? generateAnchor( anchor, content, allHeadingAnchors )
+		: anchor;
+}

packages/block-library/src/heading/edit.js

@@ -14,11 +14,13 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import HeadingLevelDropdown from './heading-level-dropdown';
+import useGeneratedAnchor from './autogenerate-anchors';
 
 function HeadingEdit( {
 	attributes,
@@ -36,6 +38,32 @@ function HeadingEdit( {
 		} ),
 		style: mergedStyle,
 	} );
+	const generatedAnchor = useGeneratedAnchor(
+		clientId,
+		attributes.anchor,
+		content
+	);
+
+	// Update anchor when the content changes.
+	useEffect( () => {
+		if ( generatedAnchor && generatedAnchor.startsWith( 'wp-' ) ) {
+			setAttributes( { anchor: generatedAnchor } );
+		}
+	}, [ generatedAnchor ] );
+
+	// Make sure manually-edited anchors don't have the `wp-` prefix.
+	// `wp-` marks an anchor as auto-generated.
+	useEffect( () => {
+		if (
+			attributes.anchor &&
+			generatedAnchor !== attributes.anchor &&
+			attributes.anchor.startsWith( 'wp-' )
+		) {
+			setAttributes( {
+				anchor: attributes.anchor.replace( 'wp-', '' ),
+			} );
+		}
+	}, [ attributes.anchor ] );
 
 	return (
 		<>

packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap

@@ -2,25 +2,25 @@
 
 exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
 "<!-- wp:heading {\\"level\\":4} -->
-<h4>4</h4>
+<h4 id=\\"wp-4\\">4</h4>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading can be created by prefixing number sign and a space 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3>3</h3>
+<h3 id=\\"wp-3\\">3</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply custom colors 1`] = `
 "<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#7700ff\\"}}} -->
-<h3 class=\\"has-text-color\\" style=\\"color:#7700ff\\">Heading</h3>
+<h3 class=\\"has-text-color\\" id=\\"wp-heading\\" style=\\"color:#7700ff\\">Heading</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply named colors 1`] = `
 "<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
+<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\" id=\\"wp-heading\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -30,13 +30,13 @@ exports[`Heading should create a paragraph block above when pressing enter at th
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>a</h2>
+<h2 id=\\"wp-a\\">a</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
 "<!-- wp:heading -->
-<h2>a</h2>
+<h2 id=\\"wp-a\\">a</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -46,12 +46,12 @@ exports[`Heading should create a paragraph block below when pressing enter at th
 
 exports[`Heading should not work with the list input rule 1`] = `
 "<!-- wp:heading -->
-<h2>1. H</h2>
+<h2 id=\\"wp-1-h\\">1. H</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should work with the format input rules 1`] = `
 "<!-- wp:heading -->
-<h2><code>code</code></h2>
+<h2 id=\\"wp-code\\"><code>code</code></h2>
 <!-- /wp:heading -->"
 `;

packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap

@@ -40,7 +40,7 @@ exports[`Quote can be converted to paragraphs and renders only one paragraph for
 
 exports[`Quote can be created by converting a heading 1`] = `
 "<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>test</p></blockquote>
+<blockquote class=\\"wp-block-quote\\" id=\\"wp-test\\"><p>test</p></blockquote>
 <!-- /wp:quote -->"
 `;
 
@@ -144,7 +144,7 @@ exports[`Quote can be split in the middle and merged back 4`] = `
 
 exports[`Quote is transformed to a heading and a quote if the quote contains a citation 1`] = `
 "<!-- wp:heading -->
-<h2>one</h2>
+<h2 id=\\"wp-one\\">one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -154,7 +154,7 @@ exports[`Quote is transformed to a heading and a quote if the quote contains a c
 
 exports[`Quote is transformed to a heading and a quote if the quote contains multiple paragraphs 1`] = `
 "<!-- wp:heading -->
-<h2>one</h2>
+<h2 id=\\"wp-one\\">one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -164,7 +164,7 @@ exports[`Quote is transformed to a heading and a quote if the quote contains mul
 
 exports[`Quote is transformed to a heading if the quote just contains one paragraph 1`] = `
 "<!-- wp:heading -->
-<h2>one</h2>
+<h2 id=\\"wp-one\\">one</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -176,7 +176,7 @@ exports[`Quote is transformed to an empty heading if the quote is empty 1`] = `
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 1`] = `
 "<!-- wp:heading -->
-<h2>one</h2>
+<h2 id=\\"wp-one\\">one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -186,11 +186,11 @@ exports[`Quote the resuling quote after transforming to a heading can be transfo
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 2`] = `
 "<!-- wp:heading -->
-<h2>one</h2>
+<h2 id=\\"wp-one\\">one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2>two</h2>
+<h2 id=\\"wp-two\\">two</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -200,14 +200,14 @@ exports[`Quote the resuling quote after transforming to a heading can be transfo
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 3`] = `
 "<!-- wp:heading -->
-<h2>one</h2>
+<h2 id=\\"wp-one\\">one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2>two</h2>
+<h2 id=\\"wp-two\\">two</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2>cite</h2>
+<h2 id=\\"wp-cite\\">cite</h2>
 <!-- /wp:heading -->"
 `;

packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
 "<!-- wp:group -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 id=\\"wp-group-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -51,7 +51,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = `
 "<!-- wp:group -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 id=\\"wp-group-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -66,7 +66,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 2`] = `
 "<!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 id=\\"wp-group-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -81,7 +81,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
 "<!-- wp:group {\\"align\\":\\"full\\"} -->
 <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 id=\\"wp-group-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image {\\"align\\":\\"full\\"} -->

packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap

@@ -71,7 +71,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 id=\\"wp-heading\\">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -93,7 +93,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:cover -->
 
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 id=\\"wp-heading\\">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

packages/e2e-tests/specs/widgets/adding-widgets.test.js

@@ -347,7 +347,7 @@ describe( 'Widgets screen', () => {
 		<p>First Paragraph</p>
 		</div></div>
 		<div class=\\"widget widget_block\\"><div class=\\"widget-content\\">
-		<h2>My Heading</h2>
+		<h2 id=\\"wp-my-heading\\">My Heading</h2>
 		</div></div>
 		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
 		<p>Second Paragraph</p>