[FSE]: Global Styles link color setting overrides color set for Navigation items #6195

filipanoscampos · 2022-07-09T08:05:25Z

Quick summary

On Atomic sites, the color set for Links under the global site styles overrides the color set for the navigation items.
From my tests, this only affected Atomic sites, non-Atomic sites with the same FSE themes did not have this issue and it was possible to set a color for the navigation items.

Steps to reproduce

On an Atomic site with an FSE theme, open the site Editor
Select the navigation Block and set a custom color for the text that is different from the theme colors and save the settings. Notice the setting shows correctly inside the Editor
Now, preview the site outside the Editor. Notice the color that was set for the navigation text is ignored.

The color set by the theme prevails over the preference of the user:

The live site:

What you expected to happen

The color that was set specifically for the navigation items to show on the live site, as it does for non-Atomic sites.

What actually happened

The color set under Global styles overrode the element-specific color setting.

Context

5357926-zd-woothemes

Simple, Atomic or both?

Atomic

Theme-specific issue?

I tested with Arbutus and Antonia and the issue affected both themes.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

I provided the following CSS:

/* Set color for navigation items / XXXXXX-HC/ZD (XXX) */
.wp-block-navigation a{
color: #xxxxxx;
}

rw-ye · 2022-07-10T05:48:13Z

5361706-zd-woothemes

Shared the workaround.

ktyfuller604 · 2022-07-10T14:59:36Z

5363094-zen

Shared the CSS workaround.

Joshgrygiel · 2022-07-12T17:02:41Z

📌 SCRUBBING

Tested on P2 - N/A
Tested on Simple ✅
Tested on AT ✅
Tested on Self-hosted ✅
Replicable on Core - No

📌 FINDINGS/SCREENSHOTS/VIDEO

I can confirm only on Atomic sites (Simple/SH work as normal) with the FSE theme Twenty Twenty Two active: the global style overwrites any custom color applied to the navigation block. The change reflects normally in the editor:

However the live page view not render correctly:

📌 ACTIONS

Marked as Triaged for Quality Squad review
Transferred to Themes external repo
May be related to this: Blockbase/FSE themes - Navigation Block: Site Editor does not accurately show changes made in Display module for nav block wp-calypso#65419

1dr0 · 2022-07-15T03:01:27Z

36072801-hc
Bryne theme.

Suggested changing the "Submenu & overlay background" color.

sharonlaker19 · 2022-07-18T09:32:32Z

+1 at 35300729-hc, I recommended they choose a different color for the links or background. This worked for them.

rw-ye · 2022-07-27T05:23:44Z

+1 5427038-zd-woothemes

Recommended they use the Styles tab to change colors for menu links.

Robertght · 2022-07-28T10:49:10Z

@mrfoxtalbot if you have some bandwidth, I may need a double check on this issue.

filipanoscampos · 2022-07-28T11:33:15Z

Another one, here 36227265-hc

Follow-up here, please:

5430800-zd-woothemes

mrfoxtalbot · 2022-07-28T14:48:20Z

Thank you for the ping @Robertght ! I have been able to reproduce this using Twenty Twenty-Two, so I think this is coming from Core.

I do think that this is intended: changing link colors should affect links in the menu (they are links too, after all). The way I understand this, the issue is that this is not previewed in the Site Editor (links in the navigation menu do not appear to be affected) and this leads to confusion.

Arbutus:

Editor:

Public site:

Twenty Twenty-Two:

Editor:

Public site:

I am going to see if I can find an existing issue in the Gutenberg repo before I open a new one.

mrfoxtalbot · 2022-07-28T15:06:52Z

I have found this to be a little more complicated that it seemed. On a self-hosted site, the behaviour is inconsistent, but different! It looks like this might be related to which header is being used, but I need more time to test it and might be related to this WordPress/gutenberg#41146

I will try to come back to this later, but here is a video:

Screen.Capture.on.2022-07-28.at.17-03-45.mp4

liviopv · 2022-08-05T09:00:05Z

5454966-zd-woothemes

My test on the ticket above indicate that is not only font color, but font size as well.

One other thing I noticed, which might be a different issue all together, is that using the "Restore Defaults" option leads to an The editor has encountered an unexpected error.

Here are the "Copy Error" logs:

TypeError: Cannot read properties of undefined (reading 'nativeEvent')
    at __unstableStateReducer (https://jackieandbobby.com/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=5e434d6c83d6ea8a030f:71:873)
    at __unstableStateReducer (https://jackieandbobby.com/wp-content/plugins/gutenberg/build/components/index.min.js?ver=5cbcfaeb963f7dcb0492:1:452819)
    at https://jackieandbobby.com/wp-content/plugins/gutenberg/build/components/index.min.js?ver=5cbcfaeb963f7dcb0492:1:445975
    at Object.mt [as useReducer] (https://jackieandbobby.com/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.0.1:1:44679)
    at e.useReducer (https://jackieandbobby.com/wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=6.0.1:1:10802)
    at zm.isDragEnabled (https://jackieandbobby.com/wp-content/plugins/gutenberg/build/components/index.min.js?ver=5cbcfaeb963f7dcb0492:1:446665)
    at https://jackieandbobby.com/wp-content/plugins/gutenberg/build/components/index.min.js?ver=5cbcfaeb963f7dcb0492:1:447542
    at ft (https://jackieandbobby.com/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.0.1:1:43451)
    at Ft (https://jackieandbobby.com/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.0.1:1:48896)
    at ts (https://jackieandbobby.com/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.0.1:1:113344)```

jamiepalatnik · 2022-08-13T00:18:02Z

Another report: 36434347-hc
User would like a follow-up: 5472612-zd-woothemes

donalirl · 2022-08-15T01:50:57Z

Occurred in 36470426-hc and solved with this CSS:

a.wp-block-navigation-item__content {
  color: inherit;
}

Used inherit rather than declaring a specific color, to allow for different colors to be used in different Navigation blocks.

getdave · 2022-10-05T11:09:41Z

Please see WordPress/gutenberg#41146 (comment).

Also a patch fix has landed in WordPress/gutenberg#44578.

github-actions · 2022-10-05T11:10:12Z

mrfoxtalbot · 2022-10-10T13:30:31Z

Thank you @getdave!
I have added this to our "Need bulk reply" board and I am going to close it.

vajrasar · 2023-01-05T07:43:22Z

I've manually sent the follow-up replies to the affected users (listed above). ✅

ariel-maidana · 2023-03-24T19:00:20Z

This issue has re-appeared on 6067313-zd-woothemes
I was able to reproduce it on a test site (both are Atomic sites).

philnick206 · 2023-03-25T08:44:12Z

Reported in 6067364-zd-woothemes

Provided CSS workaround for now

rw-ye · 2023-03-26T03:55:08Z

Reported here: 6068609-zd-woothemes
Theme: Zoologist
Provided CSS workaround

getdave · 2023-03-27T08:25:01Z

@scruffian I know you've been working in and around this area recently. Are you aware of anything that has changed with handling of colors?

This scenario also requires an e2e test.

csabarakasz · 2023-03-27T09:50:13Z

Same issue: 6074726-zd-woothemes
Theme: Zoologist

The Home navigation link did not respect the color choice in the Editor but showed the link color choice. However, even when I changed the link color options, the Home button didn't change.

Provided CSS workaround.

cuemarie · 2023-03-28T19:07:06Z

I think this may be related: WordPress/gutenberg#44931 Global Styles: Styles specificity and users expectations

If so, the TLDR here is that GB is working as intended, but has a confusing UX due to the hierarchy of elements vs blocks.

@dsas Do you agree this is part of that larger conversation?

dsas · 2023-03-28T20:53:37Z

@cuemarie it's related to that conversation but probably not a duplicate issue. According to an earlier comment the navigation menu has some specific custom behaviour that acts more in-line with what users are expecting, it seems that custom behaviour has stopped working.

cuemarie · 2023-03-29T17:12:33Z

Reviewed all the new reports since this was solved, and they are all occurring on theme Zoologist. Will triage to see if I can repro outside of that theme, or if it's something specific to Zoologist (or blockbase)

cuemarie · 2023-03-29T17:31:17Z

I do think this is a different issue, specific to Blockbase child themes. Closing this again in favor of a new report: Automattic/wp-calypso#75088

The following new reports have been added to the new issue instead:

6067313-zen
6067364-zen
6068609-zen
6074726-zen

filipanoscampos added [Type] Bug Something isn't working User Report This issue was created following a WordPress customer report labels Jul 9, 2022

github-actions bot added the [Pri] Low label Jul 9, 2022

Joshgrygiel added Themes FSE labels Jul 12, 2022

Joshgrygiel added the Triaged label Jul 12, 2022

Joshgrygiel transferred this issue from Automattic/wp-calypso Jul 12, 2022

mrfoxtalbot added [Theme] Arbutus [Theme] Antonia labels Jul 28, 2022

mrfoxtalbot added [Status] Core fix needed This issues is coming from a bundled theme (Twenty Something)) core and is being addressed in trac. and removed [Theme] Arbutus [Theme] Antonia labels Jul 28, 2022

mrfoxtalbot closed this as completed Oct 10, 2022

ariel-maidana reopened this Mar 24, 2023

getdave mentioned this issue Mar 27, 2023

Improve Navigation block tests WordPress/gutenberg#44920

Closed

25 tasks

github-actions bot added the [Interaction #] > 10 (Automated) interaction count label for better visibility. Please don't add these manualliy. label Mar 27, 2023

cuemarie closed this as completed Mar 29, 2023

cuemarie mentioned this issue Mar 29, 2023

Blockbase Themes - Navigation Text Color unchangeable Automattic/wp-calypso#75088

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FSE]: Global Styles link color setting overrides color set for Navigation items #6195

[FSE]: Global Styles link color setting overrides color set for Navigation items #6195

filipanoscampos commented Jul 9, 2022

rw-ye commented Jul 10, 2022

ktyfuller604 commented Jul 10, 2022 •

edited by kathrynwp

Loading

Joshgrygiel commented Jul 12, 2022

1dr0 commented Jul 15, 2022

sharonlaker19 commented Jul 18, 2022

rw-ye commented Jul 27, 2022

Robertght commented Jul 28, 2022

filipanoscampos commented Jul 28, 2022

mrfoxtalbot commented Jul 28, 2022 •

edited

Loading

mrfoxtalbot commented Jul 28, 2022

liviopv commented Aug 5, 2022

jamiepalatnik commented Aug 13, 2022

donalirl commented Aug 15, 2022

getdave commented Oct 5, 2022

github-actions bot commented Oct 5, 2022 •

edited

Loading

mrfoxtalbot commented Oct 10, 2022

vajrasar commented Jan 5, 2023

ariel-maidana commented Mar 24, 2023

philnick206 commented Mar 25, 2023

rw-ye commented Mar 26, 2023

getdave commented Mar 27, 2023

csabarakasz commented Mar 27, 2023

cuemarie commented Mar 28, 2023 •

edited

Loading

dsas commented Mar 28, 2023

cuemarie commented Mar 29, 2023

cuemarie commented Mar 29, 2023 •

edited

Loading

[FSE]: Global Styles link color setting overrides color set for Navigation items #6195

[FSE]: Global Styles link color setting overrides color set for Navigation items #6195

Comments

filipanoscampos commented Jul 9, 2022

Quick summary

Steps to reproduce

What you expected to happen

What actually happened

Context

Simple, Atomic or both?

Theme-specific issue?

Browser, operating system and other notes

Reproducibility

Severity

Available workarounds?

Workaround details

rw-ye commented Jul 10, 2022

ktyfuller604 commented Jul 10, 2022 • edited by kathrynwp Loading

Joshgrygiel commented Jul 12, 2022

1dr0 commented Jul 15, 2022

sharonlaker19 commented Jul 18, 2022

rw-ye commented Jul 27, 2022

Robertght commented Jul 28, 2022

filipanoscampos commented Jul 28, 2022

mrfoxtalbot commented Jul 28, 2022 • edited Loading

Arbutus:

Twenty Twenty-Two:

mrfoxtalbot commented Jul 28, 2022

liviopv commented Aug 5, 2022

jamiepalatnik commented Aug 13, 2022

donalirl commented Aug 15, 2022

getdave commented Oct 5, 2022

github-actions bot commented Oct 5, 2022 • edited Loading

mrfoxtalbot commented Oct 10, 2022

vajrasar commented Jan 5, 2023

ariel-maidana commented Mar 24, 2023

philnick206 commented Mar 25, 2023

rw-ye commented Mar 26, 2023

getdave commented Mar 27, 2023

csabarakasz commented Mar 27, 2023

cuemarie commented Mar 28, 2023 • edited Loading

dsas commented Mar 28, 2023

cuemarie commented Mar 29, 2023

cuemarie commented Mar 29, 2023 • edited Loading

ktyfuller604 commented Jul 10, 2022 •

edited by kathrynwp

Loading

mrfoxtalbot commented Jul 28, 2022 •

edited

Loading

github-actions bot commented Oct 5, 2022 •

edited

Loading

cuemarie commented Mar 28, 2023 •

edited

Loading

cuemarie commented Mar 29, 2023 •

edited

Loading