From 07c74687a5269f0c42c745a72a9d01617512c6a9 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Tue, 27 Jun 2023 23:20:48 -0400
Subject: [PATCH 1/2] fix: Heading level dropdown displays active selection

A recent refactor for web was only partially applied to the sibling
native files. This finishes the application so that the active selection
is displayed, passed through via the `value` prop.
---
 .../index.native.js                            | 12 ++++++++----
 .../src/heading/test/index.native.js           | 18 ++++++++++++++++++
 .../src/mobile/bottom-sheet/cell.native.js     |  1 +
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js
index 1ba451ff54b8f..fecb608e692e2 100644
--- a/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js
@@ -30,7 +30,11 @@ const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
  *
  * @return {WPComponent} The toolbar.
  */
-export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
+export default function HeadingLevelDropdown( {
+	options = HEADING_LEVELS,
+	value,
+	onChange,
+} ) {
 	const createLevelControl = (
 		targetLevel,
 		currentLevel,
@@ -53,9 +57,9 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 
 	return (
 		<DropdownMenu
-			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
-			controls={ HEADING_LEVELS.map( ( index ) =>
-				createLevelControl( index, selectedLevel, onChange )
+			icon={ <HeadingLevelIcon level={ value } /> }
+			controls={ options.map( ( index ) =>
+				createLevelControl( index, value, onChange )
 			) }
 			label={ __( 'Change level' ) }
 		/>
diff --git a/packages/block-library/src/heading/test/index.native.js b/packages/block-library/src/heading/test/index.native.js
index 34fdc00c032ed..493ef7f84a79d 100644
--- a/packages/block-library/src/heading/test/index.native.js
+++ b/packages/block-library/src/heading/test/index.native.js
@@ -112,4 +112,22 @@ describe( 'Heading block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'change level dropdown displays active selection', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Heading' );
+		const headingBlock = await getBlock( screen, 'Heading' );
+
+		// Act
+		fireEvent.press( headingBlock );
+		fireEvent.press( screen.getByLabelText( 'Change level' ) );
+
+		// Assert
+		expect(
+			within( screen.getByLabelText( 'Heading 2' ) ).getByTestId(
+				'bottom-sheet-cell-selected-icon'
+			)
+		).toBeVisible();
+	} );
 } );
diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
index c29025e81d79b..30f061dc5c14b 100644
--- a/packages/components/src/mobile/bottom-sheet/cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -431,6 +431,7 @@ class BottomSheetCell extends Component {
 						<Icon
 							icon={ check }
 							fill={ platformStyles.isSelected.color }
+							testID="bottom-sheet-cell-selected-icon"
 						/>
 					) }
 					{ showValue && getValueComponent() }

From d79e92b1491c175f5bf6b9c4e7f90e6310fda55d Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Tue, 27 Jun 2023 23:22:13 -0400
Subject: [PATCH 2/2] fix: Heading level dropdown leverages Icon

Without using Icon, the SVG elements rendered without a width, causing
layout issues and invisible icons.
---
 .../block-heading-level-dropdown/heading-level-icon.js     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js
index 7b161d9c01700..dfdc7f824dfbc 100644
--- a/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js
@@ -10,6 +10,7 @@ import {
 	headingLevel6,
 	paragraph,
 } from '@wordpress/icons';
+import { Icon } from '@wordpress/components';
 
 /** @typedef {import('@wordpress/element').WPComponent} WPComponent */
 
@@ -39,5 +40,9 @@ const LEVEL_TO_PATH = {
  * @return {?WPComponent} The icon.
  */
 export default function HeadingLevelIcon( { level } ) {
-	return LEVEL_TO_PATH[ level ] ?? null;
+	if ( LEVEL_TO_PATH[ level ] ) {
+		return <Icon icon={ LEVEL_TO_PATH[ level ] } />;
+	}
+
+	return null;
 }