Links not visible in Editor

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/

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

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 :)

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;
} 

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.

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

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;
} 

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

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.

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

Glad we could be of help!