Switching from Solid to Gradient doesn't scroll to end when having customised gradient

[fluiddot]

Describe the bug
Related to test case: Color Settings - Test Cases - TC003 - Scroll color palette to the end.

When having a customised gradient, switching from Solid to Gradient doesn't scroll the colors list to the end.

To Reproduce
Steps to reproduce the behavior:

1. Go to a post/page
2. Add Buttons block
3. Tap on gear button
4. Tap on Background color option
5. Tap on Gradient option
6. Tap one gradient color
7. Tap on Customize Gradient
8. Change Gradient Type to Radial (it also works changing other options)
9. Tap on back arrow button
10. Tap on Solid option
11. Tap on Gradient option again
12. Observe that the scroll doesn't go to the end where the custom gradient is shown

Expected behavior
The scroll should go to to the end showing the custom gradient color when switching between Solid and Gradient options.

Screenshots

scroll-to-end-bug-android.mp4

Smartphone (please complete the following information):

• Device: Samsung Galaxy S20 FE 5G
• OS: Android 10
• Version 16.5

[chipsnyder]

Related to #2882

[dcalhoun]

@chipsnyder @fluiddot I have found that the "Custom" button is now no longer displayed at all when customizing the gradient, in addition to not scrolling to the end. I was about to create a new issue, but then found this one. Happy to create a separate issue if that is more appropriate.

Details of missing "Custom" button issue

Description

When customizing the gradient of a block, the color list does not add the "Custom" button to the end of the color list. It also does not remove the "Custom" button when switching from a customized gradient to a predefined gradient. This was found in the steps within the GB Mobile TC005 color settings test case.

Step-by-step reproduction instructions

1. Launch block editor on WPiOS or WPAndroid.
2. Add a Button block.
3. Open Button block settings.
4. Tap Background Color.
5. Tap Gradient.
6. Select a gradient.
7. Tap Customize Gradient.
8. Tap Radial.
9. Tab back arrow.

Expected behaviour

The horizontal list of gradients is scrolled to the end to reveal a "Custom" button. Switching to a predefined gradient animates removing the "Custom" button.

Actual behaviour

A "Custom" button is never added or removed.

Screenshots or screen recording (optional)

RPReplay_Final1618504138.MP4

WordPress information

• WordPress version: WordPress.com
• Gutenberg version: v10.3.2-with-autocomplete-perf-fix
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: iPhone SE
• Operating system: iOS 14.4.2
• WordPress app version: 16.9

[chipsnyder]

Thank you for adding more details @dcalhoun! I think keeping this in one issue is the best way to go.

[antonis]

Fixed with WordPress/gutenberg#30994