From 7523325e6d228c9a4e86bd8cb331c16945367e08 Mon Sep 17 00:00:00 2001 From: nfmohit Date: Wed, 19 Feb 2025 09:54:14 +0600 Subject: [PATCH 01/11] Add basic block. --- .../contribute-with-google/Edit.js | 54 +++++++++++++++ .../contribute-with-google/block.json | 11 +++ .../contribute-with-google/index.js | 32 +++++++++ includes/Modules/Reader_Revenue_Manager.php | 15 +++- .../Blocks/Contribute_With_Google.php | 69 +++++++++++++++++++ webpack/common.js | 1 + webpack/gutenbergBlocks.config.js | 3 + 7 files changed, 184 insertions(+), 1 deletion(-) create mode 100644 blocks/reader-revenue-manager/contribute-with-google/Edit.js create mode 100644 blocks/reader-revenue-manager/contribute-with-google/block.json create mode 100644 blocks/reader-revenue-manager/contribute-with-google/index.js create mode 100644 includes/Modules/Reader_Revenue_Manager/Blocks/Contribute_With_Google.php diff --git a/blocks/reader-revenue-manager/contribute-with-google/Edit.js b/blocks/reader-revenue-manager/contribute-with-google/Edit.js new file mode 100644 index 00000000000..4c8d8ee7e9f --- /dev/null +++ b/blocks/reader-revenue-manager/contribute-with-google/Edit.js @@ -0,0 +1,54 @@ +/** + * Site Kit by Google, Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * WordPress dependencies + */ +import { useBlockProps, InspectorControls } from '@wordpress-core/block-editor'; +import { Notice } from '@wordpress-core/components'; + +/** + * Internal dependencies + */ +import { Fragment } from '@wordpress/element'; + +/** + * Sign in with Google Block Edit component. + * + * @since n.e.x.t + * + * @return {Element} Element to render. + */ +export default function Edit() { + const blockProps = useBlockProps(); + + return ( + + +
+ + This is a notice. + +
+ +
+
+ Contribute with Google +
+
+ + ); +} diff --git a/blocks/reader-revenue-manager/contribute-with-google/block.json b/blocks/reader-revenue-manager/contribute-with-google/block.json new file mode 100644 index 00000000000..d32d4d99647 --- /dev/null +++ b/blocks/reader-revenue-manager/contribute-with-google/block.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "google-site-kit/rrm-contribute-with-google", + "version": "n.e.x.t", + "title": "Contribute with Google", + "category": "widgets", + "icon": "google", + "description": "Allow users to make voluntary contributions using Reader Revenue Manager.", + "textdomain": "google-site-kit" +} diff --git a/blocks/reader-revenue-manager/contribute-with-google/index.js b/blocks/reader-revenue-manager/contribute-with-google/index.js new file mode 100644 index 00000000000..41adb837f43 --- /dev/null +++ b/blocks/reader-revenue-manager/contribute-with-google/index.js @@ -0,0 +1,32 @@ +/** + * Site Kit by Google, Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { registerBlockType } from '@wordpress-core/blocks'; + +/** + * Internal dependencies + */ +import Edit from './Edit'; +import metadata from './block.json'; + +/** + * Registers the block. + * + * @since n.e.x.t + */ +registerBlockType( metadata.name, { + edit: Edit, +} ); diff --git a/includes/Modules/Reader_Revenue_Manager.php b/includes/Modules/Reader_Revenue_Manager.php index 4171b7821f7..5b4ab9374db 100644 --- a/includes/Modules/Reader_Revenue_Manager.php +++ b/includes/Modules/Reader_Revenue_Manager.php @@ -41,6 +41,7 @@ use Google\Site_Kit\Core\Tags\Guards\Tag_Verify_Guard; use Google\Site_Kit\Core\Util\Feature_Flags; use Google\Site_Kit\Core\Util\URL; +use Google\Site_Kit\Modules\Reader_Revenue_Manager\Blocks\Contribute_With_Google; use Google\Site_Kit\Modules\Reader_Revenue_Manager\Post_Product_ID; use Google\Site_Kit\Modules\Reader_Revenue_Manager\Settings; use Google\Site_Kit\Modules\Reader_Revenue_Manager\Synchronize_Publication; @@ -119,6 +120,9 @@ public function register() { if ( Feature_Flags::enabled( 'rrmModuleV2' ) && $this->is_connected() ) { $this->post_product_id->register(); + + $contribute_with_google = new Contribute_With_Google( $this->context ); + $contribute_with_google->register(); } add_action( 'load-toplevel_page_googlesitekit-dashboard', array( $synchronize_publication, 'maybe_schedule_synchronize_publication' ) ); @@ -449,13 +453,22 @@ protected function setup_assets() { if ( Feature_Flags::enabled( 'rrmModuleV2' ) ) { $assets[] = new Script( - 'googlesitekit-reader-revenue-manager-block-editor', + 'blocks-reader-revenue-manager-block-editor', array( 'src' => $base_url . 'js/blocks/googlesitekit-reader-revenue-manager-block-editor.js', 'dependencies' => array(), 'load_contexts' => array( Asset::CONTEXT_ADMIN_POST_EDITOR ), ) ); + + $assets[] = new Script( + 'blocks-contribute-with-google', + array( + 'src' => $base_url . 'js/blocks/reader-revenue-manager/contribute-with-google/index.js', + 'dependencies' => array(), + 'load_contexts' => array( Asset::CONTEXT_ADMIN_POST_EDITOR ), + ) + ); } return $assets; diff --git a/includes/Modules/Reader_Revenue_Manager/Blocks/Contribute_With_Google.php b/includes/Modules/Reader_Revenue_Manager/Blocks/Contribute_With_Google.php new file mode 100644 index 00000000000..2392aa316b2 --- /dev/null +++ b/includes/Modules/Reader_Revenue_Manager/Blocks/Contribute_With_Google.php @@ -0,0 +1,69 @@ +context = $context; + } + + /** + * Register this block. + * + * @since n.e.x.t + */ + public function register() { + add_action( + 'init', + function () { + register_block_type( + dirname( GOOGLESITEKIT_PLUGIN_MAIN_FILE ) . '/dist/assets/js/blocks/reader-revenue-manager/contribute-with-google/block.json', + array( + 'render_callback' => array( $this, 'render_callback' ), + ) + ); + }, + 99 + ); + } + + /** + * Render callback for the block. + * + * @since n.e.x.t + * @return string Rendered block. + */ + public function render_callback() { + return ''; + } +} diff --git a/webpack/common.js b/webpack/common.js index 18f5bc8c753..dc8e9e40403 100644 --- a/webpack/common.js +++ b/webpack/common.js @@ -277,6 +277,7 @@ const corePackages = [ 'api-fetch', 'block-editor', 'blocks', + 'components', 'compose', 'data', 'dom-ready', diff --git a/webpack/gutenbergBlocks.config.js b/webpack/gutenbergBlocks.config.js index 1b3a9da5508..d41679355dc 100644 --- a/webpack/gutenbergBlocks.config.js +++ b/webpack/gutenbergBlocks.config.js @@ -43,6 +43,9 @@ module.exports = ( mode ) => ( { // Reader Revenue Manager 'googlesitekit-reader-revenue-manager-block-editor': './assets/js/googlesitekit-reader-revenue-manager-block-editor.js', + // Reader Revenue Manager blocks. + 'reader-revenue-manager/contribute-with-google/index': + './blocks/reader-revenue-manager/contribute-with-google/index.js', // Sign in with Google block. 'sign-in-with-google/index': './blocks/sign-in-with-google/index.js', 'sign-in-with-google/editor-styles': From bf68b4a23e7ceee7650e34aa22845f51e2cf912a Mon Sep 17 00:00:00 2001 From: nfmohit Date: Wed, 19 Feb 2025 10:19:14 +0600 Subject: [PATCH 02/11] Prevent block render when tag is not placed. --- includes/Modules/Reader_Revenue_Manager.php | 35 +++++++++++-------- .../Blocks/Contribute_With_Google.php | 23 ++++++++++-- .../Reader_Revenue_Manager/Tag_Guard.php | 13 ++++--- .../Reader_Revenue_Manager/Tag_GuardTest.php | 28 ++++++++++----- .../Modules/Reader_Revenue_ManagerTest.php | 4 +-- 5 files changed, 70 insertions(+), 33 deletions(-) diff --git a/includes/Modules/Reader_Revenue_Manager.php b/includes/Modules/Reader_Revenue_Manager.php index 5b4ab9374db..576c929570e 100644 --- a/includes/Modules/Reader_Revenue_Manager.php +++ b/includes/Modules/Reader_Revenue_Manager.php @@ -80,6 +80,15 @@ final class Reader_Revenue_Manager extends Module implements Module_With_Scopes, */ private $post_product_id; + /** + * Tag_Guard instance. + * + * @since n.e.x.t + * + * @var Tag_Guard + */ + private $tag_guard; + /** * Constructor. * @@ -102,6 +111,8 @@ public function __construct( $post_meta = new Post_Meta(); $this->post_product_id = new Post_Product_ID( $post_meta, $this->get_settings() ); + + $this->tag_guard = new Tag_Guard( $this->get_settings(), $this->post_product_id ); } /** @@ -121,7 +132,7 @@ public function register() { if ( Feature_Flags::enabled( 'rrmModuleV2' ) && $this->is_connected() ) { $this->post_product_id->register(); - $contribute_with_google = new Contribute_With_Google( $this->context ); + $contribute_with_google = new Contribute_With_Google( $this->context, $this->tag_guard ); $contribute_with_google->register(); } @@ -500,17 +511,8 @@ public function register_tag() { return; } - $post_product_id = ''; - - if ( - Feature_Flags::enabled( 'rrmModuleV2' ) && - is_singular() - ) { - $post_product_id = $this->post_product_id->get( get_the_ID() ); - } - $tag->use_guard( new Tag_Verify_Guard( $this->context->input() ) ); - $tag->use_guard( new Tag_Guard( $module_settings, $post_product_id ) ); + $tag->use_guard( $this->tag_guard ); $tag->use_guard( new Tag_Environment_Type_Guard() ); if ( ! $tag->can_register() ) { @@ -520,10 +522,15 @@ public function register_tag() { $product_id = 'openaccess'; if ( Feature_Flags::enabled( 'rrmModuleV2' ) ) { - $product_id = $settings['productID']; + $product_id = $settings['productID']; + $post_product_id = ''; + + if ( is_singular() ) { + $post_product_id = $this->post_product_id->get( get_the_ID() ); - if ( is_singular() && ! empty( $post_product_id ) ) { - $product_id = $post_product_id; + if ( ! empty( $post_product_id ) ) { + $product_id = $post_product_id; + } } // Extract the product ID from the setting, which is in the format diff --git a/includes/Modules/Reader_Revenue_Manager/Blocks/Contribute_With_Google.php b/includes/Modules/Reader_Revenue_Manager/Blocks/Contribute_With_Google.php index 2392aa316b2..ccd144097ff 100644 --- a/includes/Modules/Reader_Revenue_Manager/Blocks/Contribute_With_Google.php +++ b/includes/Modules/Reader_Revenue_Manager/Blocks/Contribute_With_Google.php @@ -11,6 +11,7 @@ namespace Google\Site_Kit\Modules\Reader_Revenue_Manager\Blocks; use Google\Site_Kit\Context; +use Google\Site_Kit\Modules\Reader_Revenue_Manager\Tag_Guard; /** * Contribute with Google Gutenberg block. @@ -26,15 +27,26 @@ class Contribute_With_Google { */ protected $context; + /** + * Tag_Guard instance. + * + * @since n.e.x.t + * + * @var Tag_Guard + */ + private $tag_guard; + /** * Constructor. * * @since n.e.x.t * - * @param Context $context Plugin context. + * @param Context $context Plugin context. + * @param Tag_Guard $tag_guard Tag_Guard instance. */ - public function __construct( Context $context ) { - $this->context = $context; + public function __construct( Context $context, Tag_Guard $tag_guard ) { + $this->context = $context; + $this->tag_guard = $tag_guard; } /** @@ -64,6 +76,11 @@ function () { * @return string Rendered block. */ public function render_callback() { + // If the tag is not placed, do not render the block. + if ( ! $this->tag_guard->can_activate() ) { + return ''; + } + return ''; } } diff --git a/includes/Modules/Reader_Revenue_Manager/Tag_Guard.php b/includes/Modules/Reader_Revenue_Manager/Tag_Guard.php index f6e1cc1d33e..a5adb87b90b 100644 --- a/includes/Modules/Reader_Revenue_Manager/Tag_Guard.php +++ b/includes/Modules/Reader_Revenue_Manager/Tag_Guard.php @@ -13,6 +13,7 @@ use Google\Site_Kit\Core\Modules\Module_Settings; use Google\Site_Kit\Core\Modules\Tags\Module_Tag_Guard; use Google\Site_Kit\Core\Util\Feature_Flags; +use Google\Site_Kit\Modules\Reader_Revenue_Manager\Post_Product_ID; /** * Class for the Reader Revenue Manager tag guard. @@ -24,11 +25,11 @@ class Tag_Guard extends Module_Tag_Guard { /** - * Post product ID. + * Post_Product_ID instance. * * @since n.e.x.t * - * @var string + * @var Post_Product_ID */ private $post_product_id; @@ -38,7 +39,7 @@ class Tag_Guard extends Module_Tag_Guard { * @since n.e.x.t * * @param Module_Settings $settings Module settings instance. - * @param string $post_product_id Post product ID. + * @param Post_Product_ID $post_product_id Post_Product_ID instance. */ public function __construct( Module_Settings $settings, $post_product_id ) { parent::__construct( $settings ); @@ -79,11 +80,13 @@ public function can_activate() { * @return bool TRUE if guarded tag can be activated for a singular post, otherwise FALSE. */ private function can_activate_for_singular_post() { - if ( 'none' === $this->post_product_id ) { + $post_product_id = $this->post_product_id->get( get_the_ID() ); + + if ( 'none' === $post_product_id ) { return false; } - if ( ! empty( $this->post_product_id ) ) { + if ( ! empty( $post_product_id ) ) { return true; } diff --git a/tests/phpunit/integration/Modules/Reader_Revenue_Manager/Tag_GuardTest.php b/tests/phpunit/integration/Modules/Reader_Revenue_Manager/Tag_GuardTest.php index 24926a02493..fae0b335f8b 100644 --- a/tests/phpunit/integration/Modules/Reader_Revenue_Manager/Tag_GuardTest.php +++ b/tests/phpunit/integration/Modules/Reader_Revenue_Manager/Tag_GuardTest.php @@ -12,6 +12,8 @@ use Google\Site_Kit\Context; use Google\Site_Kit\Core\Storage\Options; +use Google\Site_Kit\Core\Storage\Post_Meta; +use Google\Site_Kit\Modules\Reader_Revenue_Manager\Post_Product_ID; use Google\Site_Kit\Modules\Reader_Revenue_Manager\Settings; use Google\Site_Kit\Modules\Reader_Revenue_Manager\Tag_Guard; use Google\Site_Kit\Tests\TestCase; @@ -29,6 +31,13 @@ class Tag_GuardTest extends TestCase { */ private $settings; + /** + * Post_Product_ID instance. + * + * @var Post_Product_ID + */ + private $post_product_id; + public function set_up() { parent::set_up(); @@ -40,10 +49,13 @@ public function set_up() { 'publicationID' => '12345', ) ); + + $post_meta = new Post_Meta(); + $this->post_product_id = new Post_Product_ID( $post_meta, $this->settings ); } public function test_can_activate() { - $guard = new Tag_Guard( $this->settings, '' ); + $guard = new Tag_Guard( $this->settings, $this->post_product_id ); $this->assertTrue( $guard->can_activate() ); } @@ -51,7 +63,7 @@ public function test_can_activate() { public function test_can_not_activate_when_publication_id_is_unset() { $this->settings->merge( array( 'publicationID' => '' ) ); - $guard = new Tag_Guard( $this->settings, '' ); + $guard = new Tag_Guard( $this->settings, $this->post_product_id ); $this->assertFalse( $guard->can_activate(), @@ -145,7 +157,10 @@ public function test_can_activate__singular__rrmModuleV2( $post_ID = $this->factory()->post->create(); $this->go_to( get_permalink( $post_ID ) ); - $guard = new Tag_Guard( $this->settings, $post_product_id ); + // Set the post product ID. + $this->post_product_id->set( $post_ID, $post_product_id ); + + $guard = new Tag_Guard( $this->settings, $this->post_product_id ); $this->assertEquals( $expected, $guard->can_activate() ); } @@ -156,7 +171,6 @@ public function data_configurations__non_singular() { array( 'publicationID' => '', ), - '', false, ), 'with snippet mode of post types' => array( @@ -164,7 +178,6 @@ public function data_configurations__non_singular() { 'publicationID' => '12345', 'snippetMode' => 'post_types', ), - '', false, ), 'with snippet mode of per post' => array( @@ -172,7 +185,6 @@ public function data_configurations__non_singular() { 'publicationID' => '12345', 'snippetMode' => 'per_post', ), - '', false, ), 'with snippet mode of site wide' => array( @@ -180,7 +192,6 @@ public function data_configurations__non_singular() { 'publicationID' => '12345', 'snippetMode' => 'sitewide', ), - '', true, ), ); @@ -191,14 +202,13 @@ public function data_configurations__non_singular() { */ public function test_can_activate__non_singular__rrmModuleV2( $settings, - $post_product_id, $expected ) { $this->enable_feature( 'rrmModuleV2' ); $this->settings->merge( $settings ); - $guard = new Tag_Guard( $this->settings, $post_product_id ); + $guard = new Tag_Guard( $this->settings, $this->post_product_id ); $this->assertEquals( $expected, $guard->can_activate() ); } diff --git a/tests/phpunit/integration/Modules/Reader_Revenue_ManagerTest.php b/tests/phpunit/integration/Modules/Reader_Revenue_ManagerTest.php index f9cee7ea3e8..248c682f66d 100644 --- a/tests/phpunit/integration/Modules/Reader_Revenue_ManagerTest.php +++ b/tests/phpunit/integration/Modules/Reader_Revenue_ManagerTest.php @@ -736,7 +736,7 @@ function ( $asset ) { ); $this->assertContains( - 'googlesitekit-reader-revenue-manager-block-editor', + 'blocks-reader-revenue-manager-block-editor', $registerable_asset_handles ); } @@ -750,7 +750,7 @@ function ( $asset ) { ); $this->assertNotContains( - 'googlesitekit-reader-revenue-manager-block-editor', + 'blocks-reader-revenue-manager-block-editor', $registerable_asset_handles ); } From 0576b348e6c614d88ea5d74fc9d6d8cde88eb976 Mon Sep 17 00:00:00 2001 From: nfmohit Date: Wed, 19 Feb 2025 15:53:33 +0600 Subject: [PATCH 03/11] Add button preview. --- .../common/EditorButton.js | 29 +++++++++++++ .../common/UnavailableNotice.js | 28 +++++++++++++ .../common/editor-styles.scss | 41 +++++++++++++++++++ blocks/reader-revenue-manager/common/index.js | 18 ++++++++ .../contribute-with-google/Edit.js | 10 ++--- .../contribute-with-google/block.json | 3 +- includes/Modules/Reader_Revenue_Manager.php | 14 +++++++ webpack/gutenbergBlocks.config.js | 2 + 8 files changed, 138 insertions(+), 7 deletions(-) create mode 100644 blocks/reader-revenue-manager/common/EditorButton.js create mode 100644 blocks/reader-revenue-manager/common/UnavailableNotice.js create mode 100644 blocks/reader-revenue-manager/common/editor-styles.scss create mode 100644 blocks/reader-revenue-manager/common/index.js diff --git a/blocks/reader-revenue-manager/common/EditorButton.js b/blocks/reader-revenue-manager/common/EditorButton.js new file mode 100644 index 00000000000..dd6d038cdb8 --- /dev/null +++ b/blocks/reader-revenue-manager/common/EditorButton.js @@ -0,0 +1,29 @@ +/** + * Site Kit by Google, Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Internal dependencies + */ +import GoogleLogoIcon from '../../../assets/svg/graphics/logo-g.svg'; + +export default function EditorButton( { children } ) { + return ( + + ); +} diff --git a/blocks/reader-revenue-manager/common/UnavailableNotice.js b/blocks/reader-revenue-manager/common/UnavailableNotice.js new file mode 100644 index 00000000000..de7299ab2b7 --- /dev/null +++ b/blocks/reader-revenue-manager/common/UnavailableNotice.js @@ -0,0 +1,28 @@ +/** + * Site Kit by Google, Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * WordPress dependencies + */ +import { Notice } from '@wordpress-core/components'; + +export default function UnavailableNotice() { + return ( + + This is a notice. + + ); +} diff --git a/blocks/reader-revenue-manager/common/editor-styles.scss b/blocks/reader-revenue-manager/common/editor-styles.scss new file mode 100644 index 00000000000..2585f3ea912 --- /dev/null +++ b/blocks/reader-revenue-manager/common/editor-styles.scss @@ -0,0 +1,41 @@ +/** + * Contribute/Subscribe with Google block editor styles. + * + * Site Kit by Google, Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// Styles copied over from the actual inline button. +.googlesitekit-blocks-reader-revenue-manager-button { + align-items: center; + background-color: #fff; + border: 1px solid #dadce0; + border-radius: 4px; + color: #1a73e8; + display: flex; + font-family: "Google Sans", Roboto-Regular, sans-serif, arial; + font-size: 14px; + font-weight: 500; + height: 44px; + justify-content: center; + letter-spacing: 0.014px; + min-height: 44px; + min-width: 237px; + outline: 0; + width: 237px; + + svg { + margin-right: 8px; + } +} diff --git a/blocks/reader-revenue-manager/common/index.js b/blocks/reader-revenue-manager/common/index.js new file mode 100644 index 00000000000..9ad3ca633fc --- /dev/null +++ b/blocks/reader-revenue-manager/common/index.js @@ -0,0 +1,18 @@ +/** + * Site Kit by Google, Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { default as EditorButton } from './EditorButton'; +export { default as UnavailableNotice } from './UnavailableNotice'; diff --git a/blocks/reader-revenue-manager/contribute-with-google/Edit.js b/blocks/reader-revenue-manager/contribute-with-google/Edit.js index 4c8d8ee7e9f..c289f17aba0 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/Edit.js +++ b/blocks/reader-revenue-manager/contribute-with-google/Edit.js @@ -18,12 +18,12 @@ * WordPress dependencies */ import { useBlockProps, InspectorControls } from '@wordpress-core/block-editor'; -import { Notice } from '@wordpress-core/components'; +import { Fragment } from '@wordpress/element'; /** * Internal dependencies */ -import { Fragment } from '@wordpress/element'; +import { EditorButton, UnavailableNotice } from '../common'; /** * Sign in with Google Block Edit component. @@ -39,14 +39,12 @@ export default function Edit() {
- - This is a notice. - +
- Contribute with Google + Contribute with Google
diff --git a/blocks/reader-revenue-manager/contribute-with-google/block.json b/blocks/reader-revenue-manager/contribute-with-google/block.json index d32d4d99647..1d420ee64a1 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/block.json +++ b/blocks/reader-revenue-manager/contribute-with-google/block.json @@ -7,5 +7,6 @@ "category": "widgets", "icon": "google", "description": "Allow users to make voluntary contributions using Reader Revenue Manager.", - "textdomain": "google-site-kit" + "textdomain": "google-site-kit", + "editorStyle": "blocks-reader-revenue-manager-editor-styles" } diff --git a/includes/Modules/Reader_Revenue_Manager.php b/includes/Modules/Reader_Revenue_Manager.php index 576c929570e..0ced60ddb26 100644 --- a/includes/Modules/Reader_Revenue_Manager.php +++ b/includes/Modules/Reader_Revenue_Manager.php @@ -15,6 +15,7 @@ use Google\Site_Kit\Core\Assets\Asset; use Google\Site_Kit\Core\Assets\Assets; use Google\Site_Kit\Core\Assets\Script; +use Google\Site_Kit\Core\Assets\Stylesheet; use Google\Site_Kit\Core\Authentication\Authentication; use Google\Site_Kit\Core\Authentication\Clients\Google_Site_Kit_Client; use Google\Site_Kit\Core\Modules\Module; @@ -476,6 +477,19 @@ protected function setup_assets() { 'blocks-contribute-with-google', array( 'src' => $base_url . 'js/blocks/reader-revenue-manager/contribute-with-google/index.js', + 'dependencies' => array( + 'googlesitekit-data', + 'googlesitekit-i18n', + 'googlesitekit-modules', + ), + 'load_contexts' => array( Asset::CONTEXT_ADMIN_POST_EDITOR ), + ) + ); + + $assets[] = new Stylesheet( + 'blocks-reader-revenue-manager-editor-styles', + array( + 'src' => $base_url . 'js/blocks/reader-revenue-manager/common/editor-styles.css', 'dependencies' => array(), 'load_contexts' => array( Asset::CONTEXT_ADMIN_POST_EDITOR ), ) diff --git a/webpack/gutenbergBlocks.config.js b/webpack/gutenbergBlocks.config.js index d41679355dc..e66d30a676e 100644 --- a/webpack/gutenbergBlocks.config.js +++ b/webpack/gutenbergBlocks.config.js @@ -46,6 +46,8 @@ module.exports = ( mode ) => ( { // Reader Revenue Manager blocks. 'reader-revenue-manager/contribute-with-google/index': './blocks/reader-revenue-manager/contribute-with-google/index.js', + 'reader-revenue-manager/common/editor-styles': + './blocks/reader-revenue-manager/common/editor-styles.scss', // Sign in with Google block. 'sign-in-with-google/index': './blocks/sign-in-with-google/index.js', 'sign-in-with-google/editor-styles': From 06c7631a5ec815ecb944aa1d5a711c7d7f0fb222 Mon Sep 17 00:00:00 2001 From: nfmohit Date: Wed, 19 Feb 2025 15:59:25 +0600 Subject: [PATCH 04/11] Attempt to access SK data. --- .../contribute-with-google/index.js | 30 ++++++++++++++----- webpack/common.js | 3 ++ 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/blocks/reader-revenue-manager/contribute-with-google/index.js b/blocks/reader-revenue-manager/contribute-with-google/index.js index 41adb837f43..a0ff7baf696 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/index.js +++ b/blocks/reader-revenue-manager/contribute-with-google/index.js @@ -14,19 +14,33 @@ * limitations under the License. */ +/** + * WordPress dependencies + */ import { registerBlockType } from '@wordpress-core/blocks'; /** * Internal dependencies */ -import Edit from './Edit'; +import Data, { dispatch, select, resolveSelect } from 'googlesitekit-data'; +import { registerStore } from '../../../assets/js/modules/reader-revenue-manager'; +import { CORE_MODULES } from '../../../assets/js/googlesitekit/modules/datastore/constants'; +import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants'; import metadata from './block.json'; +import Edit from './Edit'; -/** - * Registers the block. - * - * @since n.e.x.t - */ -registerBlockType( metadata.name, { - edit: Edit, +registerStore( Data ); + +// Since we aren't currently able to use `useSelect()` in the components, +// we need to resolve selectors before registering the block +// to ensure the data is available when the block is rendered. +Promise.all( [ + resolveSelect( CORE_MODULES ).getModules(), + resolveSelect( MODULES_READER_REVENUE_MANAGER ).getSettings(), +] ).then( () => { + registerBlockType( metadata.name, { + edit() { + return ; + }, + } ); } ); diff --git a/webpack/common.js b/webpack/common.js index dc8e9e40403..ec46679322b 100644 --- a/webpack/common.js +++ b/webpack/common.js @@ -291,6 +291,9 @@ exports.corePackages = corePackages; const gutenbergExternals = { '@wordpress/i18n': [ 'googlesitekit', 'i18n' ], + 'googlesitekit-api': [ 'googlesitekit', 'api' ], + 'googlesitekit-data': [ 'googlesitekit', 'data' ], + 'googlesitekit-modules': [ 'googlesitekit', 'modules' ], }; exports.gutenbergExternals = gutenbergExternals; From bd2777617d24c38a7fe2e6041f61afe5234e2ea5 Mon Sep 17 00:00:00 2001 From: Tom Rees-Herdman Date: Wed, 19 Feb 2025 12:21:46 +0000 Subject: [PATCH 05/11] Fix `registerStore` import. --- blocks/reader-revenue-manager/contribute-with-google/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/blocks/reader-revenue-manager/contribute-with-google/index.js b/blocks/reader-revenue-manager/contribute-with-google/index.js index a0ff7baf696..dc68976b5d3 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/index.js +++ b/blocks/reader-revenue-manager/contribute-with-google/index.js @@ -23,7 +23,9 @@ import { registerBlockType } from '@wordpress-core/blocks'; * Internal dependencies */ import Data, { dispatch, select, resolveSelect } from 'googlesitekit-data'; -import { registerStore } from '../../../assets/js/modules/reader-revenue-manager'; +// We need to import `registerStore` from `./modules/reader-revenue-manager/datastore` rather than `./modules/reader-revenue-manager` +// to avoid pulling in all the other modules imported in the top-level RRM module. +import { registerStore } from '../../../assets/js/modules/reader-revenue-manager/datastore'; import { CORE_MODULES } from '../../../assets/js/googlesitekit/modules/datastore/constants'; import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants'; import metadata from './block.json'; From 5213ec42e92fea122dd09e59bc49595aad1b4d46 Mon Sep 17 00:00:00 2001 From: nfmohit Date: Thu, 20 Feb 2025 17:04:40 +0600 Subject: [PATCH 06/11] Add `defer` to block script. --- includes/Modules/Reader_Revenue_Manager.php | 1 + 1 file changed, 1 insertion(+) diff --git a/includes/Modules/Reader_Revenue_Manager.php b/includes/Modules/Reader_Revenue_Manager.php index 0ced60ddb26..a614a0005fa 100644 --- a/includes/Modules/Reader_Revenue_Manager.php +++ b/includes/Modules/Reader_Revenue_Manager.php @@ -483,6 +483,7 @@ protected function setup_assets() { 'googlesitekit-modules', ), 'load_contexts' => array( Asset::CONTEXT_ADMIN_POST_EDITOR ), + 'execution' => 'defer', ) ); From c7941a571e9caaf0e25655fa7dc5efdb7bdb37bf Mon Sep 17 00:00:00 2001 From: nfmohit Date: Thu, 20 Feb 2025 17:05:10 +0600 Subject: [PATCH 07/11] Add button disabled style. --- .../common/EditorButton.js | 18 ++++++++++++++++-- .../common/editor-styles.scss | 5 +++++ 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/blocks/reader-revenue-manager/common/EditorButton.js b/blocks/reader-revenue-manager/common/EditorButton.js index dd6d038cdb8..61eb497f751 100644 --- a/blocks/reader-revenue-manager/common/EditorButton.js +++ b/blocks/reader-revenue-manager/common/EditorButton.js @@ -14,14 +14,28 @@ * limitations under the License. */ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * Internal dependencies */ import GoogleLogoIcon from '../../../assets/svg/graphics/logo-g.svg'; -export default function EditorButton( { children } ) { +export default function EditorButton( { children, disabled } ) { return ( - diff --git a/blocks/reader-revenue-manager/common/editor-styles.scss b/blocks/reader-revenue-manager/common/editor-styles.scss index 2585f3ea912..7f67a2022a3 100644 --- a/blocks/reader-revenue-manager/common/editor-styles.scss +++ b/blocks/reader-revenue-manager/common/editor-styles.scss @@ -38,4 +38,9 @@ svg { margin-right: 8px; } + + &.googlesitekit-blocks-reader-revenue-manager-button--disabled { + filter: grayscale(50%); + opacity: 0.5; + } } From 526f66c0e6ba14a9c10dbec02bfb292f4203ccea Mon Sep 17 00:00:00 2001 From: nfmohit Date: Thu, 20 Feb 2025 17:06:27 +0600 Subject: [PATCH 08/11] Use SK data to complete the block. --- .../{UnavailableNotice.js => constants.js} | 13 +-- blocks/reader-revenue-manager/common/index.js | 1 - .../contribute-with-google/Edit.js | 106 ++++++++++++++++-- .../contribute-with-google/index.js | 6 +- 4 files changed, 100 insertions(+), 26 deletions(-) rename blocks/reader-revenue-manager/common/{UnavailableNotice.js => constants.js} (72%) diff --git a/blocks/reader-revenue-manager/common/UnavailableNotice.js b/blocks/reader-revenue-manager/common/constants.js similarity index 72% rename from blocks/reader-revenue-manager/common/UnavailableNotice.js rename to blocks/reader-revenue-manager/common/constants.js index de7299ab2b7..31d3ebe9189 100644 --- a/blocks/reader-revenue-manager/common/UnavailableNotice.js +++ b/blocks/reader-revenue-manager/common/constants.js @@ -14,15 +14,4 @@ * limitations under the License. */ -/** - * WordPress dependencies - */ -import { Notice } from '@wordpress-core/components'; - -export default function UnavailableNotice() { - return ( - - This is a notice. - - ); -} +export const CORE_EDITOR = 'core/editor'; diff --git a/blocks/reader-revenue-manager/common/index.js b/blocks/reader-revenue-manager/common/index.js index 9ad3ca633fc..745f6db9450 100644 --- a/blocks/reader-revenue-manager/common/index.js +++ b/blocks/reader-revenue-manager/common/index.js @@ -15,4 +15,3 @@ */ export { default as EditorButton } from './EditorButton'; -export { default as UnavailableNotice } from './UnavailableNotice'; diff --git a/blocks/reader-revenue-manager/contribute-with-google/Edit.js b/blocks/reader-revenue-manager/contribute-with-google/Edit.js index c289f17aba0..629cfebdd70 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/Edit.js +++ b/blocks/reader-revenue-manager/contribute-with-google/Edit.js @@ -18,33 +18,119 @@ * WordPress dependencies */ import { useBlockProps, InspectorControls } from '@wordpress-core/block-editor'; -import { Fragment } from '@wordpress/element'; +import { ExternalLink, Notice } from '@wordpress-core/components'; +import { createInterpolateElement, Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { EditorButton, UnavailableNotice } from '../common'; +import { EditorButton } from '../common'; +import { CORE_EDITOR } from '../common/constants'; +import { CORE_MODULES } from '../../../assets/js/googlesitekit/modules/datastore/constants'; +import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants'; /** - * Sign in with Google Block Edit component. + * Contribute with Google Block Edit component. * * @since n.e.x.t * + * @param {Object} props Component props. + * @param {Object} props.select Data store select function. * @return {Element} Element to render. */ -export default function Edit() { +export default function Edit( { select } ) { const blockProps = useBlockProps(); + const hasModuleAccess = select( CORE_MODULES ).hasModuleOwnershipOrAccess( + 'reader-revenue-manager' + ); + + const settings = select( MODULES_READER_REVENUE_MANAGER ).getSettings(); + + const { publicationID, paymentOption, snippetMode, postTypes } = settings; + + const serviceURL = select( MODULES_READER_REVENUE_MANAGER ).getServiceURL( { + path: 'reader-revenue-manager', + query: { + publication: publicationID, + }, + } ); + + const metaKey = `googlesitekit_rrm_${ publicationID }:productID`; + + const postProductID = + select( CORE_EDITOR ).getEditedPostAttribute( 'meta' )?.[ metaKey ] || + ''; + const postType = select( CORE_EDITOR ).getCurrentPostType(); + + let notice = ''; + let disabled = false; + + if ( paymentOption !== 'contributions' ) { + disabled = true; + + if ( hasModuleAccess ) { + notice = createInterpolateElement( + __( + 'You need to set up a contributions request in Reader Revenue Manager to use this block. Go to Reader Revenue Manager', + 'google-site-kit' + ), + { + a: , + } + ); + } else { + notice = __( + 'You need to set up a contributions request in Reader Revenue Manager to use this block. Contact your administrator.', + 'google-site-kit' + ); + } + } + + if ( + postProductID === 'none' || + ( ! postProductID && snippetMode === 'per_post' ) || + ( ! postProductID && + snippetMode === 'post_types' && + ! postTypes.includes( postType ) ) + ) { + disabled = true; + + if ( hasModuleAccess ) { + notice = createInterpolateElement( + __( + 'This post does not include the Reader Revenue Manager snippet. Configure the snippet for this post in the post settings sidebar.', + 'google-site-kit' + ), + { + a: , + } + ); + } else { + notice = __( + 'This post does not include the Reader Revenue Manager snippet. Contact your administrator', + 'google-site-kit' + ); + } + } + return ( - -
- -
- + { notice && ( + +
+ + { notice } + +
+ + ) }
- Contribute with Google + + Contribute with Google +
diff --git a/blocks/reader-revenue-manager/contribute-with-google/index.js b/blocks/reader-revenue-manager/contribute-with-google/index.js index dc68976b5d3..5cf936da6b6 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/index.js +++ b/blocks/reader-revenue-manager/contribute-with-google/index.js @@ -22,7 +22,7 @@ import { registerBlockType } from '@wordpress-core/blocks'; /** * Internal dependencies */ -import Data, { dispatch, select, resolveSelect } from 'googlesitekit-data'; +import Data, { select, resolveSelect } from 'googlesitekit-data'; // We need to import `registerStore` from `./modules/reader-revenue-manager/datastore` rather than `./modules/reader-revenue-manager` // to avoid pulling in all the other modules imported in the top-level RRM module. import { registerStore } from '../../../assets/js/modules/reader-revenue-manager/datastore'; @@ -37,12 +37,12 @@ registerStore( Data ); // we need to resolve selectors before registering the block // to ensure the data is available when the block is rendered. Promise.all( [ - resolveSelect( CORE_MODULES ).getModules(), + resolveSelect( CORE_MODULES ).getModule( 'reader-revenue-manager' ), resolveSelect( MODULES_READER_REVENUE_MANAGER ).getSettings(), ] ).then( () => { registerBlockType( metadata.name, { edit() { - return ; + return ; }, } ); } ); From b541339903d5a385289982e77894d96e81fbeaeb Mon Sep 17 00:00:00 2001 From: nfmohit Date: Fri, 21 Feb 2025 11:06:17 +0600 Subject: [PATCH 09/11] Update imports. --- blocks/reader-revenue-manager/contribute-with-google/Edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/reader-revenue-manager/contribute-with-google/Edit.js b/blocks/reader-revenue-manager/contribute-with-google/Edit.js index 629cfebdd70..560629780b8 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/Edit.js +++ b/blocks/reader-revenue-manager/contribute-with-google/Edit.js @@ -19,7 +19,7 @@ */ import { useBlockProps, InspectorControls } from '@wordpress-core/block-editor'; import { ExternalLink, Notice } from '@wordpress-core/components'; -import { createInterpolateElement, Fragment } from '@wordpress/element'; +import { createInterpolateElement, Fragment } from '@wordpress-core/element'; import { __ } from '@wordpress/i18n'; /** From de3e99f5abfa226b62aeb19682de2a6fba8c63d6 Mon Sep 17 00:00:00 2001 From: nfmohit Date: Fri, 21 Feb 2025 17:51:48 +0600 Subject: [PATCH 10/11] Update editor button. --- blocks/reader-revenue-manager/common/editor-styles.scss | 5 +---- blocks/reader-revenue-manager/contribute-with-google/Edit.js | 5 ++++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/blocks/reader-revenue-manager/common/editor-styles.scss b/blocks/reader-revenue-manager/common/editor-styles.scss index 7f67a2022a3..1b02fd3ad5e 100644 --- a/blocks/reader-revenue-manager/common/editor-styles.scss +++ b/blocks/reader-revenue-manager/common/editor-styles.scss @@ -27,13 +27,10 @@ font-family: "Google Sans", Roboto-Regular, sans-serif, arial; font-size: 14px; font-weight: 500; - height: 44px; justify-content: center; letter-spacing: 0.014px; - min-height: 44px; - min-width: 237px; outline: 0; - width: 237px; + padding: 12px 34px; svg { margin-right: 8px; diff --git a/blocks/reader-revenue-manager/contribute-with-google/Edit.js b/blocks/reader-revenue-manager/contribute-with-google/Edit.js index 560629780b8..749eaf3c679 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/Edit.js +++ b/blocks/reader-revenue-manager/contribute-with-google/Edit.js @@ -129,7 +129,10 @@ export default function Edit( { select } ) {
- Contribute with Google + { + /* translators: Button label for Contribute with Google. See: https://github.com/subscriptions-project/swg-js/blob/main/src/i18n/swg-strings.ts#L58-L91 */ + __( 'Contribute with Google', 'google-site-kit' ) + }
From bd1092f47d8630d82a1ecf87f197730f3dca33f6 Mon Sep 17 00:00:00 2001 From: nfmohit Date: Fri, 21 Feb 2025 22:21:22 +0600 Subject: [PATCH 11/11] Update translator comment. --- blocks/reader-revenue-manager/contribute-with-google/Edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/reader-revenue-manager/contribute-with-google/Edit.js b/blocks/reader-revenue-manager/contribute-with-google/Edit.js index 749eaf3c679..d875eeb4524 100644 --- a/blocks/reader-revenue-manager/contribute-with-google/Edit.js +++ b/blocks/reader-revenue-manager/contribute-with-google/Edit.js @@ -130,7 +130,7 @@ export default function Edit( { select } ) {
{ - /* translators: Button label for Contribute with Google. See: https://github.com/subscriptions-project/swg-js/blob/main/src/i18n/swg-strings.ts#L58-L91 */ + /* translators: Button label for Contribute with Google. See: https://github.com/subscriptions-project/swg-js/blob/05af2d45cfcaf831a6b4d35c28f2c7b5c2e39308/src/i18n/swg-strings.ts#L58-L91 (see latest version) */ __( 'Contribute with Google', 'google-site-kit' ) }