[Resolved] Links are not underlined in Admin Block editor

[Alicia]

Hi!

I’ve just noticed any link I create in the block editor isn’t underlined, nor is it blue. So there is no way of visually seeing what is linked. I noticed in this stylesheet:

…/wp-content/themes/generatepress/css/admin/block-editor.css?ver=2.4.2

This code:

.block-editor-block-list__block a,
.block-editor-block-list__block a:visited,
.block-editor-block-list__block a:hover,
.block-editor-block-list__block a:focus {
	text-decoration: none;
}

Is this causing the issue and is there any way to override it?

Thanks!

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Alicia]

To clarify: the links are showing up on the front end. They are not underlined in the admin.

[Alicia]

Here’s a specific post where links are underlined on front end but not in admin

[Leo]

The underline is added with CSS in the child theme which only applies to the front end unfortunately.

[Alicia]

How do I get the underline back into the admin. This makes linking very tedious when I can’t see what’s linked as I’m editing…

[Alicia]

Please see the code I added when I began this thread. It looks like the block editor css is removing the underline from links. And it’s in the Generatepress Parent theme. Can I add that folder and file to my child theme and change the text-decoration property to underline?

[Leo]

Hmm can you try this?
https://generatepress.com/forums/topic/frontend-styling-for-gutenberg/#post-734784

[Alicia]

I added the code:

remove_action( 'enqueue_block_editor_assets', 'generate_enqueue_backend_block_editor_assets' );

to my child theme functions file and I’m still not getting underlined links in the admin.

[Alicia]

However, I changed the text-decoration property to underline for the selectors in the stylesheet I mentioned above and I see the links.

The file is found here:

theme > css > admin > block-editor.css

The very first selector set. Here’s my edited code:

.block-editor-block-list__block a,
.block-editor-block-list__block a:visited,
.block-editor-block-list__block a:hover,
.block-editor-block-list__block a:focus {
	text-decoration: underline;
}

[Leo]

Editing the CSS is no good as it will be erased during updates.

This function should work:

add_action( 'after_setup_theme', function() {
    remove_action( 'enqueue_block_editor_assets', 'generate_enqueue_backend_block_editor_assets' );
} );

Let me know 🙂

[Alicia]

Editing the CSS is no good as it will be erased during updates.

I know. It was a temporary fix. I was hoping there would be a function. I found something after Googling but it wasn’t working for this specific theme.

Is there anyway to change the css code in the next theme update? I did like having the styles in the editor. Now, they are all gone. But, the most important thing is seeing what’s actually a link. And that’s working nicely!

Thanks for more stellar help!

[Leo]

We don’t have plans to add the underline back in the editor.

We haven’t had this request before as most people use a different color for link vs text and that would reflect in the editor.

We try to make the editor appears exactly the same as the front end 🙂

[Alicia]

Ah, you may want to add the underline to the admin for accessibility reasons. Having my links underlined in same color as body text is 100% accessible. I strongly suggest you have the underline in the admin so that links can be 100% accessible despite aesthetic decisions on the front end. I LOVE the editor coming close to the front end design, but accessibility has to trump that. And in order to make it accessible, I shouldn’t have to have a lesser experience than other GeneratePress users.

From https://webaim.org/techniques/hypertext/link_text:

Link Appearance

Links should look like links, and nothing else should. Users may get frustrated if they try to click on textual phrases or graphics that look like links but are not. They will also be frustrated if they have to move their mouse all over the page trying to discover links that do not look like links.

Underlining

Browsers underline hypertext links by default. It is possible to remove the underline using Cascading Style Sheets (CSS), but this is a bad idea most of the time. Users are accustomed to seeing links underlined. In body text, they may or may not be able to figure out which text is linked if the underline convention is not used.

Although users are accustomed to seeing links in the main content underlined, they are also accustomed to seeing tabs and main navigational features (oftentimes created as graphics rather than text) without underlining. In these cases, the linked items should be designed so it is apparent that the user can click on them to perform an action.

[Leo]

Thanks for the suggestion!

You can try this to overwrite that line:

add_action( 'enqueue_block_editor_assets', function() {
    $style = '.block-editor-block-list__block a {text-decoration: underline;}';
    wp_add_inline_style( 'generate-block-editor-styles', $style );
}, 20 );

[Author]

Posts