Add Sign in with Google Gutenberg block. #10191

tofumatt · 2025-02-06T21:25:51Z

Summary

Addresses issue:

Add Sign in with Google Gutenberg block to allow users to add Sign in with Google button to their site's layout #10046.

Relevant technical choices

Always output the Sign in with Google render JS, so that any page can output a button.
Still conditionally renders the WordPress login and WooCommerce login code.

Updates to asset handling for Gutenberg blocks

Gutenberg blocks use `block.json` to handle their JS and CSS loading. Previously we used `CONTEXT_ADMIN_POST_EDITOR` to handle asset loading within Site Kit, but `block.json` does this for us, including versioning the requests based on the version number in the `block.json` file. I've set up new blocks to use the Gutenberg norm for loading CSS and JS assets, instead of Site Kit's asset handling, as it's more idiomatic for block code.

The above ended up meaning we couldn't load block JS with Site Kit dependencies, so it was reverted.

Also, instead of the approach mentioned in the IB with colocated block PHP code, this one moves the Block PHP to Blocks/ folder, because otherwise dealing with composer's autoload is a huge pain. 😓

I also removed the entirely empty RRM Gutenberg block, as it wasn't using the modern block.json approach and was set up in a way more similar to our plugin/admin assets than a block.

This PR, being the first real block we ship, also cleans up/extends some configs/naming as appropriate.

PR Author Checklist

My code is tested and passes existing unit tests.
My code has an appropriate set of unit tests which all pass.
My code is backward-compatible with WordPress 5.2 and PHP 7.4.
My code follows the WordPress coding standards.
My code has proper inline documentation.
I have added a QA Brief on the issue linked above.
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 · 2025-02-13T00:59:18Z

Build files for 513645d have been deleted.

tofumatt · 2025-02-13T15:24:30Z

Thanks @zutigrm! I've gone through and addressed/responded to all the comments, so back to you for another review 🙂

blocks/sign-in-with-google/index.js

This reverts commit 5ec3934.

zutigrm

Thanks @tofumatt LGTM

nfmohit · 2025-02-17T08:37:02Z

includes/Modules/Reader_Revenue_Manager.php

-		if ( Feature_Flags::enabled( 'rrmModuleV2' ) ) {
-			$assets[] = new Script(
-				'googlesitekit-reader-revenue-manager-block-editor',
-				array(
-					'src'           => $base_url . 'js/googlesitekit-reader-revenue-manager-block-editor.js',
-					'dependencies'  => array(),
-					'load_contexts' => array( Asset::CONTEXT_ADMIN_POST_EDITOR ),
-				)
-			);
-		}
-


@tofumatt The suggested approach for registering and enqueuing blocks in this PR is great!

However, besides blocks, this asset in RRM is also designed to add a plugin sidebar panel to the block editor (see #9962). In this case, would you suggest we also do that in the blocks folder, or can we continue using the approach being removed here?

CC: @eugene-manuilov @zutigrm @techanvil

Thanks @nfmohit, good spot here.

@tofumatt, it would be preferable not to entirely remove the RRM block editor entry point in this PR, and rather either keep it as-is, or move it to a new location in keeping with the changes introduced in this PR. We'll be building on the RRM entry point in the issue Nahid linked above, #9962.

Noted, in that case I'll keep the entry point around, though if it's a Gutenberg block/block editor code I'd suggest moving it to its own blocks/reader-revenue-manager location in that PR. But I won't change anything else here for now to keep the PR more tightly scoped.

Cool, thanks @tofumatt.

Cc @ankitrox, who will be executing on #9962. Ankit, let's also see how this PR pans out with the other discussion under way about the blocks location.

Co-authored-by: Eugene Manuilov <[email protected]>

…-10046' of github.com:google/site-kit-wp into siwg-gutenberg-block-10046.

Co-authored-by: Eugene Manuilov <[email protected]>

.eslintignore

includes/Blocks/Sign_In_With_Google_Block.php

blocks/sign-in-with-google/index.js

includes/Modules/Sign_In_With_Google.php

Co-authored-by: Eugene Manuilov <[email protected]>

eugene-manuilov

Thanks, @tofumatt. Mostly looks good now. Left a few more comments that we need to address and then we should be good to go.

eugene-manuilov · 2025-02-18T06:53:31Z

includes/Modules/Sign_In_With_Google.php

+		// Check to see if the module is connected before registering the block.
+		if ( $this->is_connected() ) {
+			// Load the Gutenberg block for this module.
+			$this->sign_in_with_google_block = new Sign_In_With_Google_Block( $this->context );


This should be instantiated in the constructor like existing_client_id and woocommerce.

Ah, good point, done 🙂

includes/Modules/Sign_In_With_Google.php

eugene-manuilov · 2025-02-18T07:02:55Z

includes/Modules/Sign_In_With_Google/Sign_In_With_Google_Block.php

+namespace Google\Site_Kit\Modules\Sign_In_With_Google;
+
+use Google\Site_Kit\Context;
+use Google\Site_Kit\Modules\Sign_In_With_Google;


This is not needed.

eugene-manuilov

Thanks, @tofumatt. Looks good to me.

Add Sign in with Google Gutenberg block.

297909f

tofumatt mentioned this pull request Feb 6, 2025

Add Sign in with Google Gutenberg block to allow users to add Sign in with Google button to their site's layout #10046

Closed

9 tasks

tofumatt added 4 commits February 11, 2025 17:35

Merge branch 'develop' into siwg-gutenberg-block-10046.

94e914e

Add Gutenberg block for Sign in with Google.

9a3d0f2

Remove empty/unused RRM Gutenberg block.

4444472

Remove Gutenberg asset management.

5ec3934

tofumatt marked this pull request as ready for review February 13, 2025 00:52

tofumatt added 2 commits February 13, 2025 01:05

Remove empty tests.

99363b1

Ignore all dist/ folders when running lint.

2a69339

This comment was marked as resolved.

Sign in to view

Update SiwG JS test.

327053d

This comment was marked as resolved.

Sign in to view

tofumatt added 2 commits February 13, 2025 12:54

Add version string test to block code.

eb6503c

Improve one tap handling.

ec3df6e

This comment was marked as resolved.

Sign in to view

zutigrm reviewed Feb 13, 2025

View reviewed changes

blocks/sign-in-with-google/index.js Outdated Show resolved Hide resolved

tofumatt added 6 commits February 13, 2025 21:49

Revert "Remove Gutenberg asset management."

6d3bd26

This reverts commit 5ec3934.

Add Feature flag checks to SiwG block.

98346be

Add copy webpack plugin.

abf3158

Add blocks autoload to build step.

ae15a2e

Move block to Includes/ folder.

059b99e

Use valid ID strings for assets.

b2d4a70

zutigrm approved these changes Feb 14, 2025

View reviewed changes

This comment was marked as resolved.

Sign in to view

nfmohit reviewed Feb 17, 2025

View reviewed changes

techanvil mentioned this pull request Feb 17, 2025

Add post-level RRM settings #9962

Closed

5 tasks

tofumatt added 2 commits February 17, 2025 11:50

Add wildcard to node_modules ignore.

d199b85

Use glob pattern for block.json.

06bc0e9

tofumatt and others added 11 commits February 17, 2025 12:14

Improve WordPress core import handling.

410c5db

Revert composer changes.

15ff04a

Merge branch 'develop' into siwg-gutenberg-block-10046

af5c879

Update path to block file JSON.

a44ee11

Co-authored-by: Eugene Manuilov <[email protected]>

Remove ignore changes.

006f0a8

Merge branches 'siwg-gutenberg-block-10046' and 'siwg-gutenberg-block…

0597b53

…-10046' of github.com:google/site-kit-wp into siwg-gutenberg-block-10046.

Use $is_wp_login instead of is_user_logged_in().

1059f3d

Co-authored-by: Eugene Manuilov <[email protected]>

Update includes/Modules/Sign_In_With_Google.php

20abab0

Co-authored-by: Eugene Manuilov <[email protected]>

Add <?php around comment to hide it from HTML output.

0016617

Move connection check to module.

f5138d6

Restore RRM block.

4117a86

eugene-manuilov requested changes Feb 17, 2025

View reviewed changes

tofumatt and others added 4 commits February 17, 2025 17:03

Restore /dist gitignore.

19b5e59

Co-authored-by: Eugene Manuilov <[email protected]>

Restore tab indentation in settings.json.

d6c237a

Remove feature flag checks.

d1161c5

Move WooCommerce "magic div" to WordPress hook.

5936ce8

eugene-manuilov requested changes Feb 18, 2025

View reviewed changes

tofumatt added 3 commits February 18, 2025 10:57

Remove unneeded import.

7da3abb

Move SiwG instance instantiation to constructor.

f3a74dd

Conditionally render the SiwG button in WooCommerce contexts.

513645d

eugene-manuilov approved these changes Feb 18, 2025

View reviewed changes

eugene-manuilov merged commit 033cbb9 into develop Feb 18, 2025
22 of 28 checks passed

eugene-manuilov deleted the siwg-gutenberg-block-10046 branch February 18, 2025 12:19

techanvil mentioned this pull request Feb 21, 2025

[9962] Post level RRM settings #10246

Merged

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Sign in with Google Gutenberg block. #10191

Add Sign in with Google Gutenberg block. #10191

tofumatt commented Feb 6, 2025 •

edited by zutigrm

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

tofumatt commented Feb 13, 2025

This comment was marked as resolved.

zutigrm left a comment

This comment was marked as resolved.

nfmohit Feb 17, 2025 •

edited

Loading

techanvil Feb 17, 2025

tofumatt Feb 17, 2025

techanvil Feb 17, 2025 •

edited

Loading

eugene-manuilov left a comment

eugene-manuilov Feb 18, 2025

tofumatt Feb 18, 2025

eugene-manuilov Feb 18, 2025

eugene-manuilov left a comment

Add Sign in with Google Gutenberg block. #10191

Add Sign in with Google Gutenberg block. #10191

Conversation

tofumatt commented Feb 6, 2025 • edited by zutigrm Loading

Summary

Relevant technical choices

Updates to asset handling for Gutenberg blocks

PR Author Checklist

Code Reviewer Checklist

Merge Reviewer Checklist

github-actions bot commented Feb 13, 2025 • edited Loading

This comment was marked as resolved.

This comment was marked as resolved.

tofumatt commented Feb 13, 2025

This comment was marked as resolved.

zutigrm left a comment

Choose a reason for hiding this comment

This comment was marked as resolved.

nfmohit Feb 17, 2025 • edited Loading

Choose a reason for hiding this comment

techanvil Feb 17, 2025

Choose a reason for hiding this comment

tofumatt Feb 17, 2025

Choose a reason for hiding this comment

techanvil Feb 17, 2025 • edited Loading

Choose a reason for hiding this comment

eugene-manuilov left a comment

Choose a reason for hiding this comment

eugene-manuilov Feb 18, 2025

Choose a reason for hiding this comment

tofumatt Feb 18, 2025

Choose a reason for hiding this comment

eugene-manuilov Feb 18, 2025

Choose a reason for hiding this comment

eugene-manuilov left a comment

Choose a reason for hiding this comment

tofumatt commented Feb 6, 2025 •

edited by zutigrm

Loading

github-actions bot commented Feb 13, 2025 •

edited

Loading

nfmohit Feb 17, 2025 •

edited

Loading

techanvil Feb 17, 2025 •

edited

Loading