GradientPicker: use index while iterating over gradient entries to avoid React "duplicated key" warning

[t-hamano]

Part of #57309
Similar to #43096

What?

This PR avoids the React Warning error that occurs when the GradientPicker component renders entries with duplicate styles.

b6ca74abb97903934b2750c8cc1c1e81.mp4

Why?

Now the actual gradient style is used as the key. However, this style is user-definable via theme.json or a custom palette, so duplication can occur.

How?

Use index for the key prop. I've heard that using index as a key is not recommended, but I think we have to use it in this case.

The reason this error does not occur with solid color is that index is used for the key.

Testing Instructions

Please update Emptytheme's theme.json as follows in advance. The first and second in the gradient palette have the same style.

test/emptytheme/theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"color": {
			"gradients": [
				{
					"name": "Gradient 1",
					"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
					"slug": "gradient-1"
				},
				{
					"name": "Gradient 2",
					"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
					"slug": "gradient-2"
				},
				{
					"name": "Gradient 3",
					"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
					"slug": "gradient-3"
				}
			]
		}
	}
}

• Activate Emptytheme.
• Go to Apperance > Editor > Global Styles > Colors > Palette.
• Click the "Gradient" tab.
  • trunk: React warning error occurs.
  • This PR: React warning error does not occur.
• Adds a continuous gradient in a custom palette.
  Note: The first color is transparent, but this is an issue that needs to be fixed separately as reported in this comment.
• Click "Done" button.
  • trunk: React warning error occurs.
  • This PR: React warning error does not occur.

[mirka]

Any reason we can't use the slug? It's marked as required in TS and the JSON schema says it should be a unique identifier.

[t-hamano]

For the custom color palette (PaletteEdit component), this slug is automatically generated from the name entered by the user. Therefore, if a user defines the same color name across multiple palettes, duplicate slugs will occur.

Also, as reported in #55185, the numbers do not increase in non-English languages, so slug duplication will occur.

However, this is unexpected behavior and I think it should be improved in the future so that duplication of slugs does not occur in any scenario, so I updated this PR to use the slug as a key as well.

[mirka]

Ah ok, thanks for the explanation. I agree the slug collision problem should be handled before the data hits the GradientPicker component 👍

[github-actions]

Flaky tests detected in 2eff803.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7329196636
📝 Reported issues:

• [Flaky Test] Should show Columns block only if selected blocks are between limits (1-6) #40369 in specs/editor/various/block-switcher.test.js