From f624423d1dde5249b6899c4d2f4b1ecc944a207e Mon Sep 17 00:00:00 2001
From: Phil Webster <pwebster33@gmail.com>
Date: Thu, 26 Sep 2024 08:53:28 -0400
Subject: [PATCH] Block Editor: Validate options for the 'HeadingLevelDropdown'
 component (#65425)

Co-authored-by: philwp <philwebs@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
---
 .../src/components/block-heading-level-dropdown/index.js  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.js
index 71cb2ede989b5b..6b9bad09978a50 100644
--- a/packages/block-editor/src/components/block-heading-level-dropdown/index.js
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js
@@ -40,12 +40,18 @@ export default function HeadingLevelDropdown( {
 	value,
 	onChange,
 } ) {
+	const validOptions = options
+		.filter(
+			( option ) => option === 0 || HEADING_LEVELS.includes( option )
+		)
+		.sort( ( a, b ) => a - b ); // Sorts numerically in ascending order;
+
 	return (
 		<ToolbarDropdownMenu
 			popoverProps={ POPOVER_PROPS }
 			icon={ <HeadingLevelIcon level={ value } /> }
 			label={ __( 'Change level' ) }
-			controls={ options.map( ( targetLevel ) => {
+			controls={ validOptions.map( ( targetLevel ) => {
 				const isActive = targetLevel === value;
 				return {
 					icon: <HeadingLevelIcon level={ targetLevel } />,