Navigation Block: Colors selections display differently between editor and frontend

[aaronrobertshaw]

Describe the bug
Color selections for the navigation block using named CSS color classes, appear different between the editor and frontend.

When the color palette differs between the editor and frontend, or when the theme doesn't provide a color palette at all, the color the user selects is not reflected on the frontend.

Further discussion, background, and an ad-hoc approach to forcing this consistency ( 8b84c42 ) was originally included in #25691.

To reproduce
This is an issue across multiple themes ( TwentyTwenty, Maywood etc ) however is best observed in a theme that doesn't provide a full colour palette to the editor such as Varia.

1. Start with Varia theme active
2. Create a post and add a navigation block to it
3. Select different color combinations for the navigation block and notice some do not display correctly in the editor.
4. Save the post and view on the frontend and see a completely different set of colors displayed.
5. Switch themes and repeat steps 2-4. There will still be inconsistent behaviour.

Expected behavior
The color I select in the editor to be the one shown on the frontend.

Screenshots

Varia	TwentyTwenty	Maywood

Editor version (please complete the following information):

• WordPress version: 5.5.1
• Gutenberg plugin 9.1

Desktop (please complete the following information):

• OS: macOS Catalina
• Browsers: Chrome, Safari, Firefox
• Versions: Latest

[tellthemachines]

Hi @aaronrobertshaw, I can only reproduce this bug in the Navigation block. Have you found it in any other blocks?

[aaronrobertshaw]

Thanks for taking the time to look at this one @tellthemachines

I'd previously seen it in another dynamic block, social links, when using the colors hook in a separate PR. I've rebased that one though and cannot replicate the issue there now. I'll take a closer look at the navigation block and see if I can spot something specific causing this problem, then update this issue accordingly.

[aaronrobertshaw]

It looks like recent improvements to block supports has fixed up a few of these issues. I currently have a PR (#25691) that will address the navigation block. If it is accepted I think it will close this issue.

[tellthemachines]

Is this still an issue? I notice the attached PR was closed, so can we close this one as well?

[aaronrobertshaw]

Yes, my mistake. Closing this now. Thanks 🙂