Replace old CustomSelectControl select control with the V2 legacy adapter and fix selectedItem handling onChange

Author: fullofcaffeine

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

@@ -203,6 +203,8 @@ export default function FontAppearanceControl( props ) {
 		);
 	};
 
+	console.debug( 'selectOptions: ', selectOptions );
+
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
@@ -212,9 +214,11 @@ export default function FontAppearanceControl( props ) {
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
 				value={ currentSelection }
-				onChange={ ( { selectedItem } ) =>
-					onChange( selectedItem.style )
-				}
+				onChange={ ( { selectedItem } ) => {
+					console.debug( 'selectedItem:' );
+					console.debug( selectedItem );
+					onChange( selectedItem.style );
+				} }
 			/>
 		)
 	);

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

@@ -223,6 +223,8 @@ export default function TypographyPanel( {
 		fontStyle: newFontStyle,
 		fontWeight: newFontWeight,
 	} ) => {
+		console.debug(fontStyle);
+		console.debug(fontWeight);
 		onChange( {
 			...value,
 			typography: {

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

@@ -30,25 +30,22 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	// Forward props + store from v2 implementation
 	const store = Ariakit.useSelectStore( {
 		async setValue( nextValue ) {
-			if ( ! onChange ) {
-				return;
-			}
+			if ( ! onChange ) return;
 
 			// 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();
 			const state = store.getState();
 
+			const option = options.find( ( item ) => item.name === nextValue );
+
 			const changeObject = {
 				highlightedIndex: state.renderedItems.findIndex(
 					( item ) => item.value === nextValue
 				),
 				inputValue: '',
 				isOpen: state.open,
-				selectedItem: {
-					name: nextValue as string,
-					key: nextValue as string,
-				},
+				selectedItem: option!,
 				type: '',
 			};
 			onChange( changeObject );
@@ -131,3 +128,14 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 }
 
 export default CustomSelectControl;
+
+// for backwards compatibility
+export function ClassicCustomSelectControl( props: LegacyCustomSelectProps ) {
+	console.debug( props );
+	return (
+		<CustomSelectControl
+			{ ...props }
+			__experimentalShowSelectedHint={ false }
+		/>
+	);
+}

packages/components/src/index.ts

@@ -63,7 +63,8 @@ export {
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
-export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
+export { ClassicCustomSelectControl as CustomSelectControl } from './custom-select-control-v2/legacy-component';
+export { default as CustomSelectControlV2 } from './custom-select-control-v2';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as __experimentalDimensionControl } from './dimension-control';