0

I noticed that the live website version can often be different to preview in Gutenberg. For example, this CSS is added as additional/custom CSS through Styles menu:

.no-link-underline:link {
  text-decoration: none;
}

And then the class is applied to Hyperlink Group plugin's as additional class in Advanced settings.

Effect? Underlines are removed on the website, but they still show in the preview editor. A similar thing happens with e.g. custom .list li::before styling that adds an image.

Why is the styling different in the preview? How to avoid that? I tried refreshing browser cache and readding the block, but to no avail.

Additional notes:

  • the .no-link-underline class is not listed among classes when inspecting the element in Gutenberg. It is part of the element in HTML while in editor though. And bunch of other custom CSS rules are applied correctly.
  • I have CSS combining/minifying LiteSpeed Cache plugin (no cache enabled). Disabling it earlier didn't help.
6
  • .no-link-underline:link selects an a element with such a class (and an href attribute). It won’t select any other element that I know of because they can’t be a :link. Have you tried .no-link-underline :link instead? That might work because it will select any descendent link of an element with such a class.
    – stokesman
    Apr 3 at 4:27
  • Thanks, but that is not the issue here. The issue is that it's different between the editor and the live website. Changing to that doesn't help and it is a class on <a>.
    – Destroy666
    Apr 3 at 5:25
  • Okay. Pardon the unhelpful comment. Inspecting the page in the editor with dev tools should make it easy to see why your styling is not applying or what is overriding it. It very well could be due to a bug and you'll have to work around it for now. Like if it’s a specificity issue and you don’t want to use !important there’s [class][class].no-link-underline:link where you add as many [class] as needed to boost the specificity.
    – stokesman
    Apr 3 at 5:47
  • The class doesn't seem to be available at all looking at the CSS in the editor, even though it's added to the element. On live website it's added to single file because I have a plugin enabled that combines/minifies CSS. I tried disabling that plugin before but to no avail. Bunch of other custom CSS is also loaded. So I'm very confused as to what's happening.
    – Destroy666
    Apr 3 at 6:28
  • Yes, that’s quite baffling. I've tried something similar and the styles apply instantly in the editor for me. With what version of WP is this happening? Do you have the Gutenberg plugin installed? If not, you might try it and see if it changes anything.
    – stokesman
    Apr 3 at 15:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.