[Resolved] Links not visible in Editor

[Paul]

Hi There,

Do you know what I could change to make hyperlinks visible within the post editor?
I can see a link style on the front end but not in the editor (see link to example post in private info)

Thanks
Paul

[David]

Hi there,

if those styles are adding using CSS that is in the Customizer > Additional CSS then add this PHP Snippet to your site:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

This doc explains how to add PHP:
https://docs.generatepress.com/article/adding-php/

[Paul]

Thank you David – I’ve added that PHP and I’m now seeing some of the styles in the editor but links are still unstyled there?

Cheers
Paul

[Ying]

Hi Paul,

The link style CSS is NOT added using customizer> additional CSS, it looks like being added by a plugin, the stylesheet name is thrive-default-styles, so the code will not pull that CSS.

I would recommend reaching out to the plugin’s support for this 🙂

[Paul]

Hi Ying,

Thanks for getting back to me.

The link style on the frontend is added via the CSS in the Customizer – see below:

/* Nice link hover effect when in paragraphs (and lists) */

#page :is(p, li) a {
    box-shadow: 0px -1px 0px var(--links) inset;
    transition: all 0.3s ease 0s;
    padding: 1px;
}

#page :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(--links) inset;
} 

[Ying]

Oops, sorry about that, I overlooked it, it is added via additional CSS.

If that’s the case, the style has been added to the editor.

But as you are targeting #page which doesn’t exist in the editor, so the style will not apply to the link in editor.

You’ll have to remove #page to make it work in the editor.

[Paul]

Hi Ying,

Thank you for looking into this.
I removed #page but that adds the underline style to the nav elements (which doesn’t look great) is the way to hide those styles in the nav?

Cheers
Paul

[Ying]

I would recommend writing specific CSS for the editor.

So keep the original one with #page for the front end, then add this just for the editor:

.editor-styles-wrapper :is(p, li) a {
  box-shadow: 0px -1px 0px var(--links) inset;
    transition: all 0.3s ease 0s;
    padding: 1px;
}
.editor-styles-wrapper :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(--links) inset;
} 

[Paul]

Hi Ying,

Thank you for helping me with this.

I added that CSS but still not seeing the styles in the Editor – sorry to be a pain!
(the links don’t need to have the same style as the front end with the transition etc they just need to look like a link so the editor can identify them)

Cheers
Paul

[David]

Try changing your CSS to this:

#page :is(p, li) a,
.is-root-container :is(p, li) a  {
    box-shadow: 0px -1px 0px var(--links) inset;
    transition: all 0.3s ease 0s;
    padding: 1px;
}
#page :is(p, li) a:hover,
.is-root-container :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(--links) inset;
} 

The second selector should also apply the styles to the is-root-container in the editor.

[Paul]

That’s great thank you David and Ying. Awesome support as always!

[David]

Glad we could be of help!

[Author]

Posts