Remove "experimental" designation for CustomSelectControl[V2] and export the legacy adapter as the classic one (WIP)

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,8 +214,11 @@ export default function FontAppearanceControl( props ) {
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
 				value={ currentSelection }
-				onChange={ ( { selectedItem } ) =>
-					onChange( selectedItem.style )
+				onChange={ ( { selectedItem } ) => {
+						console.debug( selectedItem );
+						// @todo style is missing from the object
+						onChange( selectedItem.style );
+					}
 				}
 			/>
 		)

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

@@ -219,6 +219,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,13 +30,16 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	// Forward props + store from v2 implementation
 	const store = Ariakit.useSelectStore( {
 		async setValue( nextValue ) {
+			console.debug('nextValue: ', nextValue);
 			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();
 
+			console.debug(state);
+
 			const changeObject = {
 				highlightedIndex: state.renderedItems.findIndex(
 					( item ) => item.value === nextValue
@@ -45,7 +48,9 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				isOpen: state.open,
 				selectedItem: {
 					name: nextValue as string,
-					key: nextValue as string,
+					key: nextValue as string, // @todo Why key and name have the same value?
+					// @todo this structure is not compatible with the one from FontAppearanceControl, which
+					// expects an `style` attribute. Probably something to be fixed in FontAppearanceControl? Or am I missing something here?
 				},
 				type: '',
 			};
@@ -129,3 +134,14 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 }
 
 export default CustomSelectControl;
+
+// for backwards compatibility
+export function StableCustomSelectControl( props: LegacyCustomSelectProps ) {
+	console.debug(props);
+	return (
+		<CustomSelectControl
+			{ ...props }
+			__experimentalShowSelectedHint={ false }
+		/>
+	);
+}

packages/components/src/custom-select-control-v2/stories/default.story.tsx

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Default',
+	title: 'Components/CustomSelectControl v2/Default',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

packages/components/src/custom-select-control-v2/stories/legacy.story.tsx

@@ -15,7 +15,7 @@ import CustomSelectControl from '../legacy-component';
 import * as V1Story from '../../custom-select-control/stories/index.story';
 
 const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
+	title: 'Components/CustomSelectControl v2/Legacy',
 	component: CustomSelectControl,
 	argTypes: {
 		onChange: { control: { type: null } },

packages/components/src/index.ts

@@ -78,7 +78,8 @@ export {
 	ConfirmDialog as __experimentalConfirmDialog,
 	ConfirmDialog,
 } from './confirm-dialog';
-export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
+export { StableCustomSelectControl 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';

storybook/manager-head.html

@@ -7,6 +7,7 @@
 			'bordercontrol',
 			'boxcontrol',
 			'confirmdialog',
+			'customselectcontrol-v2',
 		];
 		const REDIRECTS = [
 			{