[Block] Navigation block font color not displaying properly

[tanjoymor]

Quick summary

Setting the font color directly on the Navigation block in the Site Editor is not properly reflected on the live site.

Reported in Forums: https://wordpress.com/forums/topic/navigation-menu-text-color-live-not-what-is-set-in-editor/

Steps to reproduce

1. Existing or new site
2. Free or Personal plan
3. Activate theme: Zoologist, Quadrat, Geologist
4. Go to the Site Editor in edit mode
5. Select the Navigation block
6. Set the Text color for the block
7. Save and view

What you expected to happen

I expected all parent items of the menu to be the color I selected.

What actually happened

Only items that had a sub-item updated to the new color.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple

Logs or notes

Confirmed it happens on: Zoologist, Quadrat, Geologist
Doesn't happen on: Appleton, Meraki, Russell

Work around: add a sub-item to each menu item but don't add a new link, and turn off the show arrow option. Live site will update to the correct color without behaving like there are sub-items for the menu.

I haven't tested this on the Premium plan, Atomic sites or self-hosted sites. It is consistently reproducible on Simple sites with the Free or Personal plan.

Other findings:
Seems to be coming from this inline CSS that's being added to the index:

<style id='wp-block-navigation-link-inline-css'>
.wp-block-navigation .wp-block-navigation-item__label{overflow-wrap:break-word;word-break:normal}.wp-block-navigation .wp-block-navigation-item__description{display:none}
.wp-block-navigation-link{background-color: transparent;color: var(--wp--custom--color--foreground);}
</style>

Possibly related to: WordPress/gutenberg#42253

[mdtanjid0]

Could replicate the same with Geologist - Slate theme.

6067099-zd ( needs to follow up ).

Looks like this CSS causes that:

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 6067099-zen

[cuemarie]

📌 ACTIONS

• Closing as duplicate of Blockbase themes: primary theme color is used instead of Navigation block color setting #74984