Render Sign in with Google button on the wp-login page.

[benbowler]

Summary

Addresses issue:

• #9337

Relevant technical choices

Implemented to the IB, the redirect URL is the URL defined in #9338.

I extended the css a little as the dashboard css is not included on the login page. So I created and registered a new script for wp-login styles to be able to style the button in this case.

PR Author Checklist

• [x] My code is tested and passes existing unit tests.
• [x] My code has an appropriate set of unit tests which all pass.
• [x] My code is backward-compatible with WordPress 5.2 and PHP 7.4.
• [x] My code follows the WordPress coding standards.
• [x] My code has proper inline documentation.
• [x] I have added a QA Brief on the issue linked above.
• [x] I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

---

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

Code Reviewer Checklist

• [ ] Run the code.
• [ ] Ensure the acceptance criteria are satisfied.
• [ ] Reassess the implementation with the IB.
• [ ] Ensure no unrelated changes are included.
• [ ] Ensure CI checks pass.
• [ ] Check Storybook where applicable.
• [ ] Ensure there is a QA Brief.
• [ ] Ensure there are no unexpected significant changes to file sizes.

Merge Reviewer Checklist

• [ ] Ensure the PR has the correct target branch.
• [ ] Double-check that the PR is okay to be merged.
• [ ] Ensure the corresponding issue has a ZenHub release assigned.
• [ ] Add a changelog message to the issue.

[github-actions[bot]]

Build files for 171462c0a7d1635e878d68234be769877b59fe7f have been deleted.

[github-actions[bot]]

Size Change: +36 B (0%)

Total Size: 1.84 MB

Filename	Size	Change
./dist/assets/js/googlesitekit-modules-sign-in-with-google-********************.js	18.6 kB	+36 B (+0.19%)

ℹ️ View Unchanged

Filename	Size
./dist/assets/css/googlesitekit-admin-css-********************.min.css	58.9 kB
./dist/assets/css/googlesitekit-adminbar-css-********************.min.css	11.8 kB
./dist/assets/css/googlesitekit-authorize-application-css-********************.min.css	846 B
./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css	8.2 kB
./dist/assets/js/32-********************.js	2.76 kB
./dist/assets/js/33-********************.js	2.25 kB
./dist/assets/js/34-********************.js	3.64 kB
./dist/assets/js/35-********************.js	936 B
./dist/assets/js/36-********************.js	893 B
./dist/assets/js/37-********************.js	1.61 kB
./dist/assets/js/38-********************.js	1.57 kB
./dist/assets/js/39-********************.js	1.61 kB
./dist/assets/js/40-********************.js	1.59 kB
./dist/assets/js/41-********************.js	1.64 kB
./dist/assets/js/42-********************.js	3.11 kB
./dist/assets/js/analytics-advanced-tracking-********************.js	901 B
./dist/assets/js/googlesitekit-activation-********************.js	23.9 kB
./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js	54.8 kB
./dist/assets/js/googlesitekit-adminbar-********************.js	34.5 kB
./dist/assets/js/googlesitekit-api-********************.js	10.1 kB
./dist/assets/js/googlesitekit-components-gm2-********************.js	6.04 kB
./dist/assets/js/googlesitekit-components-gm3-********************.js	10.1 kB
./dist/assets/js/googlesitekit-consent-mode-********************.js	25.6 kB
./dist/assets/js/googlesitekit-data-********************.js	2.37 kB
./dist/assets/js/googlesitekit-datastore-forms-********************.js	8.95 kB
./dist/assets/js/googlesitekit-datastore-location-********************.js	2.08 kB
./dist/assets/js/googlesitekit-datastore-site-********************.js	20.5 kB
./dist/assets/js/googlesitekit-datastore-ui-********************.js	10.1 kB
./dist/assets/js/googlesitekit-datastore-user-********************.js	26.9 kB
./dist/assets/js/googlesitekit-entity-dashboard-********************.js	81.3 kB
./dist/assets/js/googlesitekit-events-provider-contact-form-7-********************.js	646 B
./dist/assets/js/googlesitekit-events-provider-easy-digital-downloads-********************.js	624 B
./dist/assets/js/googlesitekit-events-provider-mailchimp-********************.js	630 B
./dist/assets/js/googlesitekit-events-provider-ninja-forms-********************.js	712 B
./dist/assets/js/googlesitekit-events-provider-optin-monster-********************.js	675 B
./dist/assets/js/googlesitekit-events-provider-popup-maker-********************.js	634 B
./dist/assets/js/googlesitekit-events-provider-woocommerce-********************.js	657 B
./dist/assets/js/googlesitekit-events-provider-wpforms-********************.js	633 B
./dist/assets/js/googlesitekit-i18n-********************.js	3.93 kB
./dist/assets/js/googlesitekit-main-dashboard-********************.js	157 kB
./dist/assets/js/googlesitekit-modules-ads-********************.js	33.4 kB
./dist/assets/js/googlesitekit-modules-adsense-********************.js	111 kB
./dist/assets/js/googlesitekit-modules-analytics-4-********************.js	179 kB
./dist/assets/js/googlesitekit-modules-********************.js	22.2 kB
./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js	22.6 kB
./dist/assets/js/googlesitekit-modules-reader-revenue-manager-********************.js	40.6 kB
./dist/assets/js/googlesitekit-modules-search-console-********************.js	59.6 kB
./dist/assets/js/googlesitekit-modules-tagmanager-********************.js	32.2 kB
./dist/assets/js/googlesitekit-notifications-********************.js	22.8 kB
./dist/assets/js/googlesitekit-polyfills-********************.js	378 B
./dist/assets/js/googlesitekit-settings-********************.js	119 kB
./dist/assets/js/googlesitekit-splash-********************.js	68.9 kB
./dist/assets/js/googlesitekit-user-input-********************.js	43.7 kB
./dist/assets/js/googlesitekit-vendor-********************.js	321 kB
./dist/assets/js/googlesitekit-widgets-********************.js	90.9 kB
./dist/assets/js/googlesitekit-wp-dashboard-********************.js	62.5 kB
./dist/assets/js/runtime-********************.js	1.39 kB

_{compressed-size-action}

[benbowler]

@tofumatt @eugene-manuilov RE this thread I realise that the button designer here has different supported colors to the code we're using to implement the button here:

The text and shape fields map directly. In my ticket I mapped the values of the labels to the supported value of the props on the SiwG login button. Are we happy to map the following RE colors:

Light -> outline Dark -> filled_black Neutral -> filled_blue

Or should we actually update the colors in the selector to better match the true supported colors?

Alternatively we could explore rendering a custom button using the HTML/CSS you can export from the brand guidelines page in the IB.

Either way, as @eugene-manuilov mentions, we should update the way the settings are stored to store the expected API values with separate labels to show in the UI, I'll need to update assets/js/modules/sign-in-with-google/datastore/constants.js to contain arrays of { label: 'continue_with', value: 'Continue with Google' } which I'm happy to do here.

[tofumatt]

Let's actually update the colour values we use/store; since this isn't live yet it's fine to change them without migrations.

Mapping them seems needlessly confusing since we haven't shipped anything yet 🙂. I think making all your proposed changes here makes sense 👍🏻