diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e5b6286354456e..4490280ce2ae22 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,8 @@ - `NumberControl`: Fix invalid HTML attributes for infinite bounds ([#69033](https://github.com/WordPress/gutenberg/pull/69033)). +- `FontSizePicker`: Remove Custom option from dropdown to prevent unexpected context changes during keyboard navigation ([#69038](https://github.com/WordPress/gutenberg/pull/69038)). + - `ComboboxControl`: Add an `isLoading` prop to show a loading spinner ([#68990](https://github.com/WordPress/gutenberg/pull/68990)) ## 29.3.0 (2025-01-29) diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx index b33c382f3393e4..fcc80355ddd19a 100644 --- a/packages/components/src/font-size-picker/font-size-picker-select.tsx +++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx @@ -20,21 +20,8 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = { value: undefined, }; -const CUSTOM_OPTION: FontSizePickerSelectOption = { - key: 'custom', - name: __( 'Custom' ), -}; - const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { - const { - __next40pxDefaultSize, - fontSizes, - value, - disableCustomFontSizes, - size, - onChange, - onSelectCustom, - } = props; + const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props; const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes ); @@ -59,12 +46,10 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { hint, }; } ), - ...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ), ]; - const selectedOption = value - ? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION - : DEFAULT_OPTION; + const selectedOption = + options.find( ( option ) => option.value === value ) ?? DEFAULT_OPTION; return ( { }: { selectedItem: FontSizePickerSelectOption; } ) => { - if ( selectedItem === CUSTOM_OPTION ) { - onSelectCustom(); - } else { - onChange( selectedItem.value ); - } + onChange( selectedItem.value ); } } size={ size } /> diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index 34e8ce17c67fa6..b3612029df3624 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -127,7 +127,7 @@ describe( 'FontSizePicker', () => { screen.getByRole( 'combobox', { name: 'Font size' } ) ); const options = screen.getAllByRole( 'option' ); - expect( options ).toHaveLength( 8 ); + expect( options ).toHaveLength( 7 ); expect( options[ 0 ] ).toHaveAccessibleName( 'Default' ); expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' ); expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12' ); @@ -135,7 +135,6 @@ describe( 'FontSizePicker', () => { expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20' ); expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' ); expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' ); - expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' ); } ); test.each( [ @@ -186,7 +185,6 @@ describe( 'FontSizePicker', () => { } ); - commonSelectTests( fontSizes ); commonTests( fontSizes ); } ); @@ -231,7 +229,7 @@ describe( 'FontSizePicker', () => { screen.getByRole( 'combobox', { name: 'Font size' } ) ); const options = screen.getAllByRole( 'option' ); - expect( options ).toHaveLength( 8 ); + expect( options ).toHaveLength( 7 ); expect( options[ 0 ] ).toHaveAccessibleName( 'Default' ); expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' ); expect( options[ 2 ] ).toHaveAccessibleName( 'Small 1em' ); @@ -239,7 +237,6 @@ describe( 'FontSizePicker', () => { expect( options[ 4 ] ).toHaveAccessibleName( 'Large' ); expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' ); expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' ); - expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' ); } ); test.each( [ @@ -327,7 +324,6 @@ describe( 'FontSizePicker', () => { } ); - commonSelectTests( fontSizes ); commonTests( fontSizes ); } ); @@ -523,24 +519,6 @@ describe( 'FontSizePicker', () => { ); } - function commonSelectTests( fontSizes: FontSize[] ) { - it( 'shows custom input when Custom is selected', async () => { - const user = userEvent.setup(); - const onChange = jest.fn(); - await render( - - ); - await user.click( - screen.getByRole( 'combobox', { name: 'Font size' } ) - ); - await user.click( - screen.getByRole( 'option', { name: 'Custom' } ) - ); - expect( screen.getByLabelText( 'Custom' ) ).toBeVisible(); - expect( onChange ).not.toHaveBeenCalled(); - } ); - } - function commonTests( fontSizes: FontSize[] ) { it( 'shows custom input when value is unknown', async () => { await render(