Skip to content

Fix Sign in with Google formatting when session is expired #10263

@jamesozzie

Description

@jamesozzie

Bug Description

Similar to #10201, we may need to review the formatting and placement of the Sign in with Google button on the login page when a user is logged out due to an expired session.

See screenshot below (which will be updated to a higher resolution image)

Image

Steps to reproduce

  1. Sign in to WordPress Admin
  2. Trigger a session timeout that redirects you to the WordPress login page (wp-login.php) after clicking on a link in the WordPress Admin
  3. Observe the Sign in with Google button being placed directly again the WordPress login box.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • When a message appears notifying the user they were signed out due to session expiration (or any other notice appears), the Sign in with Google button should still have margins around it and not be placed directly against the username/password box without margin.

Implementation Brief

  • Update wp-login SiWG spacing rule in includes/Modules/Sign_In_With_Google/Web_Tag.php:
    • Add an additional CSS rule for the expired-session/interim login context to restore spacing before the login form:
    .interim-login #login > .googlesitekit-sign-in-with-google__frontend-output-button { margin-bottom: 16px; }
  • WordPress core sets .interim-login.login form { margin: 0; }, which removes the normal gap between SiWG and #loginform, so the button appears directly against the username/password box after session timeout.

Test Coverage

  • No updates needed

QA Brief

  • Visit /wp-login.php?interim-login=1 in an incognito window, confirm a visible gap renders between the Sign in with Google button and the #loginform username/password box.
  • Inspect .googlesitekit-sign-in-with-google__frontend-output-button in DevTools → Elements and confirm margin-bottom: 16px under Computed styles.
  • Visit /wp-login.php?interim-login=1&loggedout=1 and confirm the "You are now logged out." notice renders above the button without affecting the 16px gap below it.
  • Visit /wp-login.php (no interim-login) and confirm the button keeps its normal spacing above the login form.
  • Repeat the interim-login check at mobile viewport (DevTools → Toggle device toolbar) and confirm the 16px gap still renders.
After Image Image

Changelog entry

  • Fix layout of Sign in with Google button when session expired message appears.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions