[Resolved] Links are not underlined in Admin Block editor

Home Forums Support Links are not underlined in Admin Block editor

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1460769
    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!

    #1461190
    Leo
    Staff
    Customer Support

    Hi there,

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

    You can use the private information field.

    Let me know πŸ™‚

    #1461637
    Alicia

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

    #1461641
    Alicia

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

    #1462430
    Leo
    Staff
    Customer Support

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

    #1464334
    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…

    #1464338
    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?

    #1464418
    Leo
    Staff
    Customer Support
    #1464430
    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.

    #1464434
    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;
    }
    #1464559
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1464860
    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!

    #1465529
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1465763
    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.

    #1465807
    Leo
    Staff
    Customer Support

    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 );
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.