Add heading hierarchy checker notice

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

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import HeadingToolbar from './heading-toolbar';
+import HeadingLevelChecker from './level-checker';
 
 /**
  * WordPress dependencies
@@ -24,6 +25,7 @@ export default function HeadingEdit( {
 	insertBlocksAfter,
 	onReplace,
 	className,
+	clientId,
 } ) {
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
@@ -37,6 +39,7 @@ export default function HeadingEdit( {
 				<PanelBody title={ __( 'Heading Settings' ) }>
 					<p>{ __( 'Level' ) }</p>
 					<HeadingToolbar minLevel={ 1 } maxLevel={ 7 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
+					<HeadingLevelChecker selectedHeadingId={ clientId } />
 					<p>{ __( 'Text Alignment' ) }</p>
 					<AlignmentToolbar
 						value={ align }

packages/block-library/src/heading/level-checker.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { flatMap } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+import { __ } from '@wordpress/i18n';
+import { Notice } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+
+// copy from packages/editor/src/components/document-outline/index.js
+/**
+ * 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.
+ */
+export const computeOutlineHeadings = ( blocks = [], path = [] ) => {
+	return flatMap( blocks, ( block = {} ) => {
+		if ( block.name === 'core/heading' ) {
+			return {
+				...block,
+				path,
+				level: block.attributes.level,
+			};
+		}
+		return computeOutlineHeadings( block.innerBlocks, [ ...path, block ] );
+	} );
+};
+
+export const HeadingLevelChecker = ( { blocks = [], selectedHeadingId } ) => {
+	const headings = computeOutlineHeadings( blocks );
+
+	// Iterate headings to find prevHeadingLevel and selectedLevel
+	let prevHeadingLevel = 1;
+	let selectedLevel = 1;
+	let i = 0;
+	for ( i = 0; i < headings.length; i++ ) {
+		if ( headings[ i ].clientId === selectedHeadingId ) {
+			selectedLevel = headings[ i ].level;
+			if ( i >= 1 ) {
+				prevHeadingLevel = headings[ i - 1 ].level;
+			}
+		}
+	}
+
+	const isIncorrectLevel = ( selectedLevel === 1 || selectedLevel > prevHeadingLevel + 1 );
+
+	if ( ! isIncorrectLevel ) {
+		return null;
+	}
+
+	const msg = __( 'This heading level is incorrect. ' );
+
+	// For accessibility
+	useEffect( () => {
+		speak( __( 'This heading level is incorrect' ) );
+	}, [ selectedLevel ] );
+
+	return (
+		<div className="block-library-heading__heading-level-checker">
+			<Notice status="warning" isDismissible={ false }>
+				{ msg }
+			</Notice>
+		</div>
+	);
+};
+
+export default compose(
+	withSelect( ( select ) => {
+		const { getBlocks } = select( 'core/block-editor' );
+
+		return {
+			blocks: getBlocks(),
+		};
+	} )
+)( HeadingLevelChecker );

packages/block-library/src/heading/style.native.scss

@@ -2,3 +2,6 @@
 .blockText {
 	min-height: $min-height-heading;
 }
+.block-library-heading__heading-level-checker {
+	margin: 0;
+}

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

@@ -48,7 +48,7 @@ const multipleH1Headings = [
  *
  * @return {Array} An array of heading blocks enhanced with the properties described above.
  */
-const computeOutlineHeadings = ( blocks = [], path = [] ) => {
+export const computeOutlineHeadings = ( blocks = [], path = [] ) => {
 	return flatMap( blocks, ( block = {} ) => {
 		if ( block.name === 'core/heading' ) {
 			return {