Site editor - Duplicated name colors when adding/deleting in custom palette

[geriux]

Description

While creating a custom color palette in the site editor, there's a case where deleting the first colors would cause a bug where new colors created will keep the previous name causing duplicates.

Then when using these colors that have the same name there's a bug where the color you select is not the one you see.

Step-by-step reproduction instructions

1. Go to the site editor
2. Create a new custom color palette
3. Add 3 custom colors
4. Delete the first one or the second one
5. Add a new color (notice that it will have the same name as the previous one)
6. Try to use your new palette and see that selecting the colors that have the same name causes an issue where you can't see the color you're actually selecting.

Screenshots, screen recording, code snippet

ColorBug.mov

Environment info

• Gutenberg version 12.8.0
• Browser: Chrome 98.0.4758

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[javierarce]

While creating a custom color palette in the site editor, there's a case where deleting the first colors would cause a bug where new colors created will keep the previous name causing duplicates.

I imagine that this happens because we generate the name of the new color by adding one the number of rows.

A good solution that avoids repeating the name of the color, no matter how they are arranged on the list, would be to do something like Figma does with pages: sort all the pages that are labeled "Page X" (where X is a number), and then create a new page with the subsequent number.

Screen.Recording.2022-03-31.at.16.23.06.mov

[ramonjd]

I threw up something over at #40837

It tries to replicate Photoshop's layout behaviour: