Block Editor: Validate options for the 'HeadingLevelDropdown' compone…

…nt (WordPress#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>

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 } />,