WordPress 6.6 display all links as underlined

[simonbelley]

Since the update of WordPress 6.6 the css line: :root :where(a:where(:not(.wp-element-button))){text-decoration:underline;} broke all of my websites designs by adding underline on every links.

[butterflymedia]

I have already opened a ticket on the block editor on GitHub, and they said there is a hotfix for 6.6.1. Here is the link - ​https://github.com/WordPress/gutenberg/issues/63345

Still, there is a bunch of :root and :where styles overriding everything. Another example would be all centred images are now left aligned.

Regarding the underline, their reply was that this is common behaviour for browsers to underline links…

Here is the selector being added by the core:

:root :where(a:where(:not(.wp-element-button))) {
    text-decoration: underline;
}

[simonbelley]

It's clearly not a browser behaviour since it's a css line that has been added to wordpress core in the update. Hope they fix that soon! I have multiple website and don't want to go on each one to add a css line that would override it...

[butterflymedia]

Replying to simonbelley:

It's clearly not a browser behaviour since it's a css line that has been added to wordpress core in the update. Hope they fix that soon! I have multiple website and don't want to go on each one to add a css line that would override it...

No, but that was their reason for introducing that CSS rule.

30 years ago, links were, indeed, underlined and blue. This doesn't mean we need to have them like that.

[swissspidy]

Duplicate of #61660.

Closing as this was already reported & resolved.

[butterflymedia]

This is how I solved it, in case anyone stumbles upon this ticket. I put the code below in my theme:

:root :where(a:where(:not(.wp-block-navigation))),
:root :where(a:where(:not(.wp-element-button))) {
    text-decoration: initial;
}

[carriejeeze]

Thank you for this. I thought I was losing my mind…

[jmccallweb]

Replying to butterflymedia:

I have already opened a ticket on the block editor on GitHub, and they said there is a hotfix for 6.6.1. Here is the link - ​https://github.com/WordPress/gutenberg/issues/63345

Still, there is a bunch of :root and :where styles overriding everything. Another example would be all centred images are now left aligned.

Regarding the underline, their reply was that this is common behaviour for browsers to underline links…

Here is the selector being added by the core:

:root :where(a:where(:not(.wp-element-button))) {
    text-decoration: underline;
}

[jmccallweb]

Do we know when 6.6.1 will go live?

[butterflymedia]

The filter below fixed the entire issue for me:

add_action(
    'wp_head',
    function () {
    	global $wp_styles;

        if ( ! empty( $wp_styles->registered['global-styles']->extra['after'][0] ) ){
    		$wp_styles->registered['global-styles']->extra['after'][0] = str_replace(
                [
                    ':root :where',
                    ':root',
                    ':where',
                ],
                '',
                $wp_styles->registered['global-styles']->extra['after'][0]
            );
        }
    },
    1
);