Cover Block: Duotone feature crashes editor when attempting to edit unlinked padding.

[bph]

Description

I wanted to test the new padding feature on the cover block, then i uploaded an image and added the duotone overlay but then I wanted to edit it again and the editor crashed.

Step-by-step reproduction instructions

1. Add a post
2. Add a Cover block
3. Add a background image
4. add padding to the cover block
5. unlink the sides
6. set bottom to 45 and top to 25
7. select duotone.
8. try to edit the padding again.

A better video. The crash happens when editing padding after duotone is enabled.
https://recordit.co/VhT8aaWaTt

Error message:

- TypeError: e.forEach is not a function
    - at Vc (http://fse-testing.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=8e360919cbf98891d83938131507d2b8:10:8971)
    - at http://fse-testing.local/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=8e360919cbf98891d83938131507d2b8:10:11210
    - at we (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:84:293)
    - at He (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:97:464)
    - at zj (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:228:406)
    - at Th (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:223)
    - at tj (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:152:152)
    - at Te (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:146:151)
    - at http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react-dom.min.de439aae.js:61:68
    - at unstable_runWithPriority (http://fse-testing.local/wp-content/plugins/gutenberg/vendor/react.min.e713ea3b.js:25:260)

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: 10.6
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1-Blocks

Device information

• Device: Desktop
• Operating system: OS 10.15.7
• Browser: Chrome 90.0.4430.93

[ajlende]

I was able to reproduce the issue with fewer steps:

1. Add cover block
2. Set image background
3. Apply any duotone filter
4. Hover over the padding input

The error comes from duotone and, when unminified, reads:

Uncaught TypeError: colors.forEach is not a function
    at getValuesFromColors (duotone.js:34)
    at duotone.js:232
    at renderWithHooks (react-dom.82e849f1.js:14938)
    at updateFunctionComponent (react-dom.82e849f1.js:17169)
    at beginWork (react-dom.82e849f1.js:18745)
    at HTMLUnknownElement.callCallback (react-dom.82e849f1.js:182)
    at Object.invokeGuardedCallbackDev (react-dom.82e849f1.js:231)
    at invokeGuardedCallback (react-dom.82e849f1.js:286)
    at beginWork$1 (react-dom.82e849f1.js:23338)
    at performUnitOfWork (react-dom.82e849f1.js:22289)

What's strange is that the colors are coming through as an Object despite being an Array in the code editor and when the values are set with setAttributes in duotone.

Both duotone and padding use the style attribute, so something that padding is doing may be resetting the duotone attribute to be an Object instead of an Array.