Custom login logo CSS targets changed

[leecollings]

Following the update from 6.7, I have several websites that no longer show a custom login logo, because the instructions given in the Codex (at ​https://codex.wordpress.org/Customizing_the_Login_Form), are showing an example that doesn't override the default logo anymore.

The core CSS target has changed, which now has greater authority over the example given in the codex URL.

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
		height:65px;
		width:320px;
		background-size: 320px 65px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

This used to work prior to 6.7, but now the core CSS target setting the default login logo has changed to

.login .wp-login-logo a

which now overrides any custom CSS setting

[im3dabasia1]

Hey @leecollings,

Thanks for raising this. I tested .login .wp-login-logo a in WordPress 6.6.2, and it didn’t override the default logo. However, using #login h1 a, .login h1 a worked as expected.

You mentioned it worked before, am I missing something? Let me know, thanks!

[leecollings]

@im3dabasia1 Yes, the code snippet I've put in my ticket (as shown on the Codex documentation page) would work fine by targeting the logo on the login page, but after upgrading to 6.7, it no longer does this because the change in the core CSS is higher in priority of CSS target than this (as explained).

I can't say why or how you're not getting it, it's very obvious that the order of CSS targeting has been changed.

Actually, whilst I've been typing this I can see that using the ID target, it works, but I've been using the class (so body.login h1 a), and it's this that doesn't target correctly.

(I would upload a screenshot, but there's no way of doing this now when adding comments here).

But either way, the Codex document needs changing so it only includes the #login h1 a, and not the class (as that wouldn't work).

But I guess, technically this was my fault and not a bug, so this could probably be cancelled or voided, apologies!

[roytanck]

This is related to #51786.

In that ticket, the accessibility of the login screen was improved. That did require some changes to the markup, and it was unfortunately expected that some 3rd party CSS would need to be adapted.

Obviously, the codex article should be updated accordingly.

[sabernhardt]

remove .login from logo selectors

[sabernhardt]

replace .login with body to match the specificity of previous selectors

[sabernhardt]

I should have noticed a problem with increasing the CSS specificity.

The Core styles can work with the .wp-login-logo class when .login is removed, so I made 62410.diff​ to consider that. With the change, the specificity would be one element lower than the .login h1 selectors.

Then the alternative patch adds a body element to match the specificity level those rules had in earlier versions. Note that printing custom styles with .login h1 a before the login.css stylesheet would not work with 62410.alt.diff​, but it would not have worked with WordPress 6.6 either.

The Codex is very outdated, but maybe it would be worth adding the current selector to the list in the article's example:
#login h1 a, .login h1 a, .login .wp-login-logo a {
(and maybe rewriting the snippet to use wp_add_inline_style( 'login', $css ); instead of printing a style tag in an enqueue hook)

[leecollings]

@sabernhardt I'm not sure I agree with you with the updates to the page on the Codex.

Why would you show three different CSS rules, when it should actually be reduced from 2 to 1?

All that needs to be displayed is #login h1 a (the first selector) - as the ID will also override a class. This seems to be sensible change to be made here (as my issue was brought about because I was using the class. When I changed it to the ID, the custom logo works fine).

I don't think any changes are actually needed to the core.. it's just the Codex that needs updating.

[sabernhardt]

#62423 was marked as a duplicate.

[sabernhardt]

Core should have had a lower specificity so people would not need to update their styles.

[sailpete]

I have to ask why the introduction of the wp-login-logo class?

Even though I do not fully understand the issues in 51786 I do think that 59138 is a bad and breaking change.

This has potentially affected thousands of websites which were coded in accordance with the codex. That's a lot of man hours of effort and undoubtedly cost too, to fix something where an alternative fix could be made which wouldn't break existing markup.

[joedolson]

@sabernhardt I can see the logic behind adding body to have identical specificity, but I'm trying to imagine a scenario where that's actually a benefit. As long as the core styles are sufficient to achieve our intentions, I can't easily see a scenario where we shouldn't have the lowest possible specificity.

Do you have any reason for that beyond "match the previous specificity?"

[joedolson]

Tested 62410.diff and this works well for me. I'm going to mark it for commit, but defer committing until I've got a second opinion about whether it matters to have lower specificity than in 6.6 and earlier.

[joedolson]

Updated patch restores the previous selectors. Tested with and without the Login Logo plugin, and works according to expectations. I'm not seeing any visual consequences with the hidden headings, as expected.

[joedolson]

Also verified that this now works with the code provided in the Codex, so it seems that this should restore back compatibility.

I think the most reasonable thing is to revert to CSS that's more similar to what we had previously. It seems like the CSS changes we made to selectors were ill-considered, since they really weren't necessary - I'll take the full blame for that. I should have noticed this conflict.

[joedolson]

Revert .wp-login-log for h1; minor fix

[joedolson]

In 59424:

Login: Revert selector change in login heading CSS.

In [59138], the login screens were updated to change the h1 heading from the logo to screen-reader hidden text. Along with that HTML change, we changed the CSS selectors from .login h1 to .login .wp-login-logo. This unnecessary change increased specificity and broke the CSS selectors used by a wide variety of plugins to replace the login logo.

Commit reverts the change in selector back to using the .login h1 pattern.

Props leecollings, sabernhardt, im3dabasia1, roytanck, sailpete, joedolson.
Fixes #62410.

[joedolson]

Reopening for dev review for 6.7.1.

[desrosj]

Looks good to backport.

[desrosj]

In 59429:

Login: Revert selector change in login heading CSS.

In [59138], the login screens were updated to change the h1 heading from the logo to screen-reader hidden text. Along with that HTML change, we changed the CSS selectors from .login h1 to .login .wp-login-logo. This unnecessary change increased specificity and broke the CSS selectors used by a wide variety of plugins to replace the login logo.

Commit reverts the change in selector back to using the .login h1 pattern.

Reviewed by joedolson, desrosj.
Merges [59424] to the 6.7 branch.

Props leecollings, sabernhardt, im3dabasia1, roytanck, sailpete, joedolson.
Fixes #62410.

[desrosj]

#62441 was marked as a duplicate.