PoC: RRM Gutenberg Blocks

blocks/reader-revenue-manager/common/EditorButton.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import GoogleLogoIcon from '../../../assets/svg/graphics/logo-g.svg';
+
+export default function EditorButton( { children, disabled } ) {
+	return (
+		<button
+			disabled={ disabled }
+			className={ classnames(
+				'googlesitekit-blocks-reader-revenue-manager-button',
+				{
+					'googlesitekit-blocks-reader-revenue-manager-button--disabled':
+						disabled,
+				}
+			) }
+		>
+			<GoogleLogoIcon height="18" width="18" />
+			{ children }
+		</button>
+	);
+}

blocks/reader-revenue-manager/common/constants.js

@@ -0,0 +1,17 @@
+/**
+ * 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 const CORE_EDITOR = 'core/editor';

blocks/reader-revenue-manager/common/editor-styles.scss

@@ -0,0 +1,43 @@
+/**
+ * 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;
+	justify-content: center;
+	letter-spacing: 0.014px;
+	outline: 0;
+	padding: 12px 34px;
+
+	svg {
+		margin-right: 8px;
+	}
+
+	&.googlesitekit-blocks-reader-revenue-manager-button--disabled {
+		filter: grayscale(50%);
+		opacity: 0.5;
+	}
+}

blocks/reader-revenue-manager/common/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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';

blocks/reader-revenue-manager/contribute-with-google/Edit.js

@@ -0,0 +1,141 @@
+/**
+ * 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 { ExternalLink, Notice } from '@wordpress-core/components';
+import { createInterpolateElement, Fragment } from '@wordpress-core/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+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';
+
+/**
+ * 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( { 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. <a>Go to Reader Revenue Manager</a>',
+					'google-site-kit'
+				),
+				{
+					a: <ExternalLink href={ serviceURL } />,
+				}
+			);
+		} 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: <ExternalLink href={ serviceURL } />,
+				}
+			);
+		} else {
+			notice = __(
+				'This post does not include the Reader Revenue Manager snippet. Contact your administrator',
+				'google-site-kit'
+			);
+		}
+	}
+
+	return (
+		<Fragment>
+			{ notice && (
+				<InspectorControls>
+					<div className="block-editor-block-card">
+						<Notice status="warning" isDismissible={ false }>
+							{ notice }
+						</Notice>
+					</div>
+				</InspectorControls>
+			) }
+			<div { ...blockProps }>
+				<div className="googlesitekit-blocks-reader-revenue-manager">
+					<EditorButton disabled={ disabled }>
+						{
+							/* 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' )
+						}
+					</EditorButton>
+				</div>
+			</div>
+		</Fragment>
+	);
+}

blocks/reader-revenue-manager/contribute-with-google/block.json

@@ -0,0 +1,12 @@
+{
+	"$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",
+	"editorStyle": "blocks-reader-revenue-manager-editor-styles"
+}

blocks/reader-revenue-manager/contribute-with-google/index.js

@@ -0,0 +1,48 @@
+/**
+ * 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 { registerBlockType } from '@wordpress-core/blocks';
+
+/**
+ * Internal dependencies
+ */
+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';
+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';
+
+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 ).getModule( 'reader-revenue-manager' ),
+	resolveSelect( MODULES_READER_REVENUE_MANAGER ).getSettings(),
+] ).then( () => {
+	registerBlockType( metadata.name, {
+		edit() {
+			return <Edit select={ select } />;
+		},
+	} );
+} );