Upgrade screen shows invisible button

[fabiankaegy]

After https://core.trac.wordpress.org/changeset/61645 was merged I am seeing a defect where the upgrade screen doesn't load the needed admin css variables from the base-styles stylesheet which leads to the button rendering without any background color and therefore appearing invisible

Add fallback values for CSS custom properties so
buttons render correctly when wp-base-styles is not loaded, such as on the upgrade.php screen.

Trac ticket: https://core.trac.wordpress.org/ticket/64640

## Use of AI Tools

[peterwilsoncc]

As noted in my comment on the PR, I've noticed checkboxes are also affected. The Remember Me checkbox does not indicated the status of the checkbox on the login screen.

There is also a way to output fallback default CSS variables as shown below, but what do you think?

First, add the default CSS variables to the build styles in the @wordpress/base-styles package by making the following changes in the Gutenberg Github repo:

packages/base-styles/src/admin-schemes.scss

@@ -1 +1 @@
 @use "mixins" as *;
+@use "default-custom-properties.scss" as *;
 
 @include wordpress-admin-schemes();

Next, in WP core, add wp-base-styles as a dependency to the login and error pages, and also fix the checkbox on the login screen.

src/wp-admin/css/login.css

@@ -358 +358 @@
        padding-right: 2.5rem;
 }
 
-.login form .input,
-.login input[type="text"],
-.login form input[type="checkbox"] {
-       background: #fff;
-}
-
 .js.login-action-resetpass input[type="text"],
 .js.login-action-resetpass input[type="password"],
 .js.login-action-rp input[type="text"],

src/wp-includes/script-loader.php

@@ -1633 +1633 @@
 
        $styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n', 'wp-base-styles' ) );
 
-       $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
-       $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
+       $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles' ) );
+       $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles' ) );
        $styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" );
        $styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'imgareaselect' ) );
        $styles->add( 'customize-widgets', "/wp-admin/css/customize-widgets$suffix.css", array( 'wp-admin', 'colors' ) );

@t-hamano That was similar to the approach I took before seeing this PR: I was looking at changing the selector in this block of code to body.wp-core-ui, body.admin-color-modern and moving it to the top of the mixin to allow for body.admin-color-light to still work.

​https://github.com/WordPress/gutenberg/blob/e755db0fb38e3d349cdd05a1c37661183e19ba72/packages/base-styles/_mixins.scss#L524-L526

I'm happy with either approach.

[sabernhardt]

#64650 was marked as a duplicate.

Alternative approach to ​https://github.com/WordPress/wordpress-develop/pull/10934

This adds the base styles as dependencies to the login and install stylesheets.

For non-admin admin screens:

• the default theme's body class is added for screens that do not require a login
• the user's selected theme's body class is added for screens that do require a login

When determining additional locations that required the theme's body class, I did a search for the string wp-core-ui.

Trac ticket:

## Use of AI Tools

Nil.

[peterwilsoncc]

I've created ​PR#10948 as an alternative approach based on @wildworks' comment. I think it will be less of a maintenance burden but am happy to hear from people who disagree.

I've attempted the approach suggested by @t-hamano in ​https://github.com/WordPress/wordpress-develop/pull/10948 -- a subjective opinion of the benefits is included in the PR description.

Thank you for this! :)

I originally started with loading the base styles but then failed at the step of adding the default themes admin scheme class to the screens and was concerned that there might be additional screens I wasn't aware of. Which is why I then went with the other approach. But I agree it isn't ideal. So this here feels better to me 👍

By applying the base styles to the non-logged in screens, devs can be sure tweaking the default styles will update in all the locations.

I wasn't fond of loading all these resources on such a screen, but this is the main reason why I do think this would be the best approach to fix this issue.

I like the approach taken in #10948. It also doesn't require updating the base-styles package. It might be better to close this PR and move forward with #10948.

Closing in favor of ​https://github.com/WordPress/wordpress-develop/pull/10948

[Presskopp]

#64655 was marked as a duplicate.

The notices shown on wp-login.php seems like they aren't styled with the right color yet:

Login screen:

Password reset:

The upgrade screen looks right, but as with the login screen, the WP logo seems it will need to have its hue shifted to match.

@westonruter Noices were updated in another ticket, I've reopened to investigate in a separate PR, see Core-64548 (comment)

This fixes the notices on the login screen @westonruter highlights above, cc @joedolson @fabiankaegy

I was going to try and fix the login notices in another PR but realised I needed the base styles.

Rego screen	Rego success	lost pw	lost pw success	lpw error

​ada4dae fixes the notices on the login screen

That still doesn't look quite right, as there is no background color for the notice? Maybe that's how it is supposed to be, but it feels off given how I'm used to seeing the notices.

There was no background with the test notices I threw in the dashboard so I think it's intended.

I selected the Sunrise color scheme and I see these screens:

Repair | DB Upgrade | Login | wp_iframe()

--

| | |

Only in the wp_iframe() is the color scheme shown, which I believe is as expected. It shows the expected scheme when I switch back to the default:

<details><summary>Plugin Code to test <code>wp_iframe()</code></summary>

Navigating to /wp-admin/admin-ajax.php?action=my_iframe_content:

{{{php
<?php

add_action( 'wp_ajax_my_iframe_content', function () {

wp_iframe('my_iframe_content');
exit;

} );

function my_iframe_content() {

echo '<div style="margin:20px;">';
echo '<h1>Hello from inside the iframe!</h1>';
echo '<button class="button button-primary">test</button>';
echo '</div>';

}

}}}

</details>

Here's a diff of the HTML for the login page before and after this change:

.html

@@ -12 +12 @@
 <link rel='stylesheet' id='buttons-css' href='http://localhost:8000/wp-includes/css/buttons.css?ver=7.0-alpha-61215-src' media='all' />
 <link rel='stylesheet' id='forms-css' href='http://localhost:8000/wp-admin/css/forms.css?ver=7.0-alpha-61215-src' media='all' />
 <link rel='stylesheet' id='l10n-css' href='http://localhost:8000/wp-admin/css/l10n.css?ver=7.0-alpha-61215-src' media='all' />
+<link rel='stylesheet' id='wp-base-styles-css' href='http://localhost:8000/wp-includes/css/dist/base-styles/admin-schemes.css?ver=7.0-alpha-61215-src' media='all' />
 <link rel='stylesheet' id='login-css' href='http://localhost:8000/wp-admin/css/login.css?ver=7.0-alpha-61215-src' media='all' />
         <meta name='referrer' content='strict-origin-when-cross-origin' />
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                 </head>
-        <body class="login no-js login-action-login wp-core-ui  locale-en-us">
+        <body class="login no-js login-action-login wp-core-ui admin-color-modern  locale-en-us">
         <script>
 document.body.className = document.body.className.replace('no-js','js');
 </script>

Visually looks good and working as expected 👍

DB Repair	DB Upgrade	Login with Checked Remember Me	Reset Password	Register

Thank you all for your help in getting this fixed ❤️

[fabiankaegy]

#64668 was marked as a duplicate.

[SirLouen]

Ok, I was searching for update not upgrade in #64668 🤦‍♂️
Good to see this has been already caught before beta.

Confirmed that this also fixes the install page checkbox:

[joedolson]

In 61681:

Admin: Apply scheme styles in non-admin admin screens.

Adds the admin-scheme styles as a dependency for the login and install styles. This is to ensure the CSS variables are available to the login, installation, database repair and upgrade screens.

Modifies the display of notices in the login styles to match those in the new default scheme, "modern".

Props peterwilsoncc, wildworks, westonruter, mukesh27, fabiankaegy, audrasjb, huzaifaalmesbah, sabernhardt, presskopp, SirLouen, ellatrix, nendeb55, neo2k23, jsmansart, joedolson.
Fixes #64640, #64548. See #64308.