Debug why selectedItem is not selected on mount

packages/block-editor/src/components/font-appearance-control/index.js

@@ -97,6 +97,7 @@ export default function FontAppearanceControl( props ) {
 		name: __( 'Default' ),
 		style: { fontStyle: undefined, fontWeight: undefined },
 	};
+	debugger;
 
 	// Combines both font style and weight options into a single dropdown.
 	const combineOptions = () => {
@@ -167,6 +168,7 @@ export default function FontAppearanceControl( props ) {
 
 	// Find current selection by comparing font style & weight against options,
 	// and fall back to the Default option if there is no matching option.
+	debugger;
 	const currentSelection =
 		selectOptions.find(
 			( option ) =>
@@ -212,9 +214,10 @@ export default function FontAppearanceControl( props ) {
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
 				value={ currentSelection }
-				onChange={ ( { selectedItem } ) =>
-					onChange( selectedItem.style )
-				}
+				onChange={ ( { selectedItem } ) => {
+					debugger;
+					onChange( selectedItem.style );
+				} }
 			/>
 		)
 	);

packages/block-editor/src/components/global-styles/typography-panel.js

@@ -182,6 +182,7 @@ export default function TypographyPanel( {
 		const slug = mergedFontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
+		debugger;
 		onChange(
 			setImmutably(
 				value,
@@ -220,6 +221,7 @@ export default function TypographyPanel( {
 	// Appearance
 	const hasAppearanceControl = useHasAppearanceControl( settings );
 	const appearanceControlLabel = useAppearanceControlLabel( settings );
+	debugger;
 	const hasFontStyles = settings?.typography?.fontStyle;
 	const hasFontWeights = settings?.typography?.fontWeight;
 	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
@@ -228,6 +230,7 @@ export default function TypographyPanel( {
 		fontStyle: newFontStyle,
 		fontWeight: newFontWeight,
 	} ) => {
+		debugger;
 		onChange( {
 			...value,
 			typography: {
@@ -398,6 +401,9 @@ export default function TypographyPanel( {
 					isShownByDefault={ defaultControls.fontAppearance }
 					panelId={ panelId }
 				>
+					{ ( () => {
+						debugger;
+					} )() }
 					<FontAppearanceControl
 						value={ {
 							fontStyle,

packages/block-editor/src/hooks/typography.js

@@ -50,6 +50,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 ];
 
 function styleToAttributes( style ) {
+	debugger;
 	const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };
 	const fontSizeValue = style?.typography?.fontSize;
 	const fontFamilyValue = style?.typography?.fontFamily;
@@ -117,6 +118,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 		return { style, fontFamily, fontSize };
 	}
 	const { style, fontFamily, fontSize } = useSelect( selector, [ clientId ] );
+	debugger;
 	const isEnabled = useHasTypographyPanel( settings );
 	const value = useMemo(
 		() => attributesToStyle( { style, fontFamily, fontSize } ),

packages/components/src/custom-select-control-v2/legacy-component/index.tsx

@@ -34,6 +34,8 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				return;
 			}
 
+			console.debug( nextValue );
+
 			// Executes the logic in a microtask after the popup is closed.
 			// This is simply to ensure the isOpen state matches that in Downshift.
 			await Promise.resolve();