React warns of “two children with the same key” due to identical custom and accent colors

[nickcernis]

With define( 'SCRIPT_DEBUG', true );, a warning appears in the console when opening the color palette for the paragraph block:

The text, “the behavior is unsupported and could change in a future version” suggests we should address this, perhaps by altering one of the two colors slightly.

This affects both WP 5.2 and the 5.3RCs.

To reproduce

1. Ensure define( 'SCRIPT_DEBUG', true ); is set in wp-config.php.
2. Create a paragraph block and open the Color Settings pane in the Block sidebar.
3. Check your browser console. (I tested Chrome.)

Expected behavior
No errors are triggered by theme default color choices.

[dreamwhisper]

It seems like the same color should be allowed in the palette as we can't prevent someone from choosing the same color in the customizer. The same warning appears if you select duplicate colors even if the original defaults are different.

The key used is the hex value rather than the slug. Warning: Encountered two children with the same key, #00a33c.

Seems like this issue has come up for others as well. WordPress/gutenberg#9357

[robincornett]

I came here to report this as well. Since that thread has been ignored for nearly a year, I would suggest that the Sample theme should update one of the default color values to resolve it, even though the root of the problem stays in place.

Another reason to update one of the colors in the theme is that with them being the same, it's very difficult for a user to determine what the second color is used for until they're making changes in the Customizer, and depending on where all it's used, it's possible that users may end up with undesired changes. A quick skim suggests that the accent color is used primarily for focus and hover styles? Except for the button block? Or not--I'm in the Customizer and have changed the accent color and don't see it in use at all on the front page content (from onboarding).