Blockbase/FSE themes - Navigation Block: Site Editor does not accurately show changes made in Display module for nav block

[cuemarie]

Quick summary

Changing font size, color, and other Typography styles for the Navigation block results in some changes showing in the Site Editor, and others are only visible on the live site.

Steps to reproduce

1. Install theme Meraki on a test site
2. Open Site Editor and create a navigation block with a few menu items
3. Under the nav block's block settings, adjust all settings under the Display module

What you expected to happen

Changes made to the menu's color and typography are reflected in the Site Editor

What actually happened

The following properties appear in the site editor correctlY:

• Color: Text, Background, and Submenu & overlay background
• Typography: Appearance, Decoration

The following properties are only visible on Submenu menu items:

• Typography: Font family, Size, and Letter case

The last item is not visible at all:

• Color: Submenu & overlay text

Live Site

On the live site, all changes are visible, except that the Submenu & overlay text color is improperly applied to the main menu, and not applied to the submenu.

Context

Reported here: 36018994-hc
Customer was trying to change font size, and noting that things looked different between editor and live site

Follow Up Ticket: 5360428-zd-woothemes

Simple, Atomic or both?

Atomic

Theme-specific issue?

Meraki

Browser, operating system and other notes

Only had a change to test this on Atomic

I did a quick test on other FSE themes and the issues did not present in the same way

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

• Open up the live site in a new tab/window
• Return to the Site Editor and adjust the Navigation Block's display settings
• Select Save to save that change
• Refresh view of live site to see the results

[Robertght]

I'm not moving this yet, but I asked here p1657650535013499-slack-C029FM1EH

[Addison-Stavlo]

I can repro on Meraki, but not TT2 - perhaps an issue with Blockbase child themes? cc @pbking @jeffikus

[github-actions]

Support References

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

• 5360428-zen
• 5500136-zen
• 5578503-zen
• 5579740-zen
• 5601369-zen
• 5638928-zen
• 5830773-zen
• 6352918-zen

[madhusudhand]

Issue can be replicated with any theme that has style definitions for core/navigation-link in theme.json

This seems to be an issue with Gutenberg itself. Created an issue here WordPress/gutenberg#42963

[jeffikus]

Thanks @madhusudhand - I'm removing this from our board.

[Addison-Stavlo]

This seems like it might be the same issue as #62017 ?

If so we could close one in favor of the other.

[KirkwallDay]

• 5500136-zen another instance here

[hngdny]

Another report here 37050063-hc

[jamiepalatnik]

Adding that the user from this comment requested a follow-up if there is a resolution, so I created a follow-up ticket: 5578503-zd-woothemes

[Robertght]

5579740-zen

[Robertght]

5601369-zen Submenu & Overlay Text does not work as set within the editor.

[filipanoscampos]

Another case here:
5638928-zd-woothemes

[kspilarski]

5830773-zd Varese theme.

[ha-un]

Another case: 40059682-hc

[wiesenhauss]

Another case here: 40667803-hc

[NoHopeRadio]

Another case in 40789792-hc, I provided CSS to undo the a:where(:not(.wp-element-button)) rules so that the H2 rules took over in a query loop.

/*unset style rules in nested links */
a:where(:not(.wp-element-button)) {
    font-size: unset;
    font-weight: unset;
    font-style: unset;
}

I don't quite understand how rules for this element seem to take precedence, though.

[NoHopeRadio]

Maybe this bug was happening in 40928618-hc in the site title element of the
Spearhead Blocks theme, though it seemed that user was experiencing some other color anomalies that I couldn't recreate.

[the-misha]

Another case: 6352918-zd-woothemes

AT/Pro site, Marl theme. Worked around with CSS:

/* set submenu item color | 6352918-zd tdl */
.wp-block-navigation-item__content {
    color: white !important;
    background-color: black;
}

[cuemarie]

📌 ACTIONS

• Due to the age of this issue, I've downgraded the priority from High to Normal to better reflect its status in the larger context of open bugs in this repo.
• I also think there are a few issues I tried reporting all in one here, and I think we'd probably be more successful disconnecting them and reporting them in pieces. I'd also bet that they aren't all happening anymore.
• I've marked this for retesting and I'll try to clear things up after retesting the different pieces of the issue. 👍