Ensure correct item is selected upon mount based on the value passed …

…to the select
WordPress · May 15, 2024 · 387ad3b · 387ad3b
1 parent 8f85a89
commit 387ad3b
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -97,7 +97,6 @@ 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 = () => {
@@ -168,7 +167,6 @@ 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 ) =>
@@ -215,7 +213,6 @@ export default function FontAppearanceControl( props ) {
 				options={ selectOptions }
 				value={ currentSelection }
 				onChange={ ( { selectedItem } ) => {
-					debugger;
 					onChange( selectedItem.style );
 				} }
 			/>

diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -177,7 +177,6 @@ export default function TypographyPanel( {
 		const slug = mergedFontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
-		debugger;
 		onChange(
 			setImmutably(
 				value,
@@ -216,7 +215,6 @@ 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 );
@@ -225,7 +223,6 @@ export default function TypographyPanel( {
 		fontStyle: newFontStyle,
 		fontWeight: newFontWeight,
 	} ) => {
-		debugger;
 		onChange( {
 			...value,
 			typography: {
@@ -396,9 +393,6 @@ export default function TypographyPanel( {
 					isShownByDefault={ defaultControls.fontAppearance }
 					panelId={ panelId }
 				>
-					{ ( () => {
-						debugger;
-					} )() }
 					<FontAppearanceControl
 						value={ {
 							fontStyle,

diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
@@ -50,7 +50,6 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 ];
 
 function styleToAttributes( style ) {
-	debugger;
 	const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };
 	const fontSizeValue = style?.typography?.fontSize;
 	const fontFamilyValue = style?.typography?.fontFamily;
@@ -118,7 +117,6 @@ 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 } ),

diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -6,7 +6,7 @@ import * as Ariakit from '@ariakit/react';
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -34,7 +34,8 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				return;
 			}
 
-			console.debug( nextValue );
+			// @todo add test to verify that a value passed programmatically is
+			// selected
 
 			// Executes the logic in a microtask after the popup is closed.
 			// This is simply to ensure the isOpen state matches that in Downshift.
@@ -44,7 +45,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 			const option = options.find( ( item ) => item.name === nextValue );
 
 			const changeObject = {
-				highlightedIndex: state.renderedItems.findIndex(
+				highlightedIndex: state.items.findIndex(
 					( item ) => item.value === nextValue
 				),
 				inputValue: '',
@@ -57,6 +58,11 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 		},
 	} );
 
+	useEffect( () => {
+		// This is a workaround for selecting the right item upon mount
+		store.setValue( value?.name! );
+	} );
+
 	const children = options.map(
 		( { name, key, __experimentalHint, ...rest } ) => {
 			const withHint = (

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -64,6 +64,7 @@ export {
 } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { ClassicCustomSelectControl as CustomSelectControl } from './custom-select-control-v2/legacy-component';
+//export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
 export { default as CustomSelectControlV2 } from './custom-select-control-v2';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';