{ canWeAccessCookies && (
<>
-
{ getLoginCommentText() }
+
+ { getLoginCommentText( commentParent ) }
+
{
+ const { userInfo } = useContext( VerbumSignals );
const subscriptionOptionsVisible = hasSubscriptionOptionsVisible();
const handleOnClick = ( event: MouseEvent ) => {
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/types.d.ts b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/types.d.ts
index 5483f4cbf3797..6ab2338030982 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/types.d.ts
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/types.d.ts
@@ -6,6 +6,14 @@ type ScriptLoader = {
declare global {
const VerbumComments: VerbumCommentsType;
+ const verbumBlockEditor: {
+ attachGutenberg: (
+ textarea: HTMLTextAreaElement,
+ content: ( embedUrl: string ) => void,
+ isRtl: boolean,
+ onEmbedContent: ( embedUrl: string ) => void
+ ) => void;
+ };
const vbeCacheBuster: string;
const WP_Enqueue_Dynamic_Script: ScriptLoader;
const wp: Record< string, unknown >;
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useFormMutations.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useFormMutations.tsx
index 52fe81c655378..011efe1264bd6 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useFormMutations.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useFormMutations.tsx
@@ -1,12 +1,15 @@
-import { useEffect } from 'preact/hooks';
-import { commentParent } from '../state';
+import { useEffect, useContext } from 'preact/hooks';
+import { VerbumSignals } from '../state';
/**
* Hook to observe comment form changes and update state according to comment_parent changes.
+ *
+ * @param formElement - The form element to observe.
*/
-export default function useFormMutations() {
+export default function useFormMutations( formElement: HTMLFormElement ) {
+ const { commentParent } = useContext( VerbumSignals );
+
useEffect( () => {
- const formElement = document.querySelector( '#commentform' ) as HTMLFormElement;
const commentParentInput = formElement.querySelector( '#comment_parent' );
if ( ! formElement || ! commentParentInput ) {
@@ -28,5 +31,5 @@ export default function useFormMutations() {
return () => {
mutationObserver.disconnect();
};
- }, [] );
+ }, [ formElement, commentParent ] );
}
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useSocialLogin.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useSocialLogin.tsx
index 1fd4a984ee340..421456bdf777c 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useSocialLogin.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useSocialLogin.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useContext } from 'preact/hooks';
import wpcomRequest from 'wpcom-proxy-request';
-import { userInfo } from '../state';
+import { VerbumSignals } from '../state';
import { UserInfo } from '../types';
import { serviceData, setUserInfoCookie } from '../utils';
@@ -30,6 +30,7 @@ const addWordPressDomain = window.location.hostname.endsWith( '.wordpress.com' )
*/
export default function useSocialLogin() {
const [ loginWindowRef, setLoginWindowRef ] = useState< Window >();
+ const { userInfo } = useContext( VerbumSignals );
useEffect( () => {
wpcomRequest< UserInfo >( {
@@ -42,6 +43,7 @@ export default function useSocialLogin() {
.catch( () => {
// User may not be logged in.
} );
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [] );
if ( VerbumComments.isJetpackCommentsLoggedIn ) {
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useSubscriptionApi.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useSubscriptionApi.tsx
index 0fd1b1660bdbb..3ff058c6a7088 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useSubscriptionApi.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/hooks/useSubscriptionApi.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useContext } from 'preact/hooks';
import wpcomRequest from 'wpcom-proxy-request';
-import { subscriptionSettings } from '../state';
+import { VerbumSignals } from '../state';
import { SubscriptionDetails, EmailPostsChange, EmailSubscriptionResponse } from '../types';
const getSubscriptionDetails = async () => {
@@ -24,7 +24,8 @@ const getSubscriptionDetails = async () => {
*
* @return {object} Object containing functions to manage subscriptions.
*/
-export default function useSubscriptionApi(): object {
+export default function useSubscriptionApi() {
+ const { subscriptionSettings } = useContext( VerbumSignals );
const { siteId } = VerbumComments;
const [ subscriptionSettingsIsLoading, setSubscriptionSettingsIsLoading ] = useState( true );
@@ -61,6 +62,7 @@ export default function useSubscriptionApi(): object {
.finally( () => {
setSubscriptionSettingsIsLoading( false );
} );
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [] );
const setEmailPostsSubscription = async function ( change: EmailPostsChange ) {
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx
index b3d38e8e67db0..da832a89da10a 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/index.tsx
@@ -1,7 +1,7 @@
import { effect } from '@preact/signals';
import clsx from 'clsx';
import { render } from 'preact';
-import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+import { useState, useEffect, useRef, useCallback, useContext } from 'preact/hooks';
import { SimpleSubscribeModal } from './components/SimpleSubscribeModal';
import { CommentFooter } from './components/comment-footer';
import { CommentInputField } from './components/comment-input-field';
@@ -11,31 +11,32 @@ import { LoggedOut } from './components/logged-out';
import useFormMutations from './hooks/useFormMutations';
import useSocialLogin from './hooks/useSocialLogin';
import { translate } from './i18n';
-import {
- hasOpenedTrayOnce,
- isEmptyComment,
- isSavingComment,
- isTrayOpen,
- mailLoginData,
- shouldStoreEmailData,
- userInfo,
- userLoggedIn,
- commentUrl,
- commentParent,
- subscribeModalStatus,
-} from './state';
+import { createSignals, VerbumSignals } from './state';
import {
canWeAccessCookies,
setUserInfoCookie,
addWordPressDomain,
hasSubscriptionOptionsVisible,
} from './utils';
-import type { VerbumComments } from './types';
+import type { VerbumAppProps, VerbumComments } from './types';
import './style.scss';
-const Verbum = ( { siteId }: VerbumComments ) => {
- const formRef = useRef< HTMLFormElement >( null );
+const Verbum = ( { siteId, parentForm }: VerbumAppProps ) => {
+ const {
+ hasOpenedTrayOnce,
+ isEmptyComment,
+ isSavingComment,
+ isTrayOpen,
+ mailLoginData,
+ shouldStoreEmailData,
+ userInfo,
+ userLoggedIn,
+ commentUrl,
+ commentParent,
+ subscribeModalStatus,
+ } = useContext( VerbumSignals );
+
const [ showMessage, setShowMessage ] = useState( '' );
const [ isErrorMessage, setIsErrorMessage ] = useState( false );
@@ -43,7 +44,7 @@ const Verbum = ( { siteId }: VerbumComments ) => {
const [ email, setEmail ] = useState( '' );
const [ ignoreSubscriptionModal, setIgnoreSubscriptionModal ] = useState( false );
const { login, loginWindowRef, logout } = useSocialLogin();
- useFormMutations();
+ useFormMutations( parentForm );
const dispose = effect( () => {
// The tray, when there is no sub options, is pretty minimal.
@@ -59,16 +60,14 @@ const Verbum = ( { siteId }: VerbumComments ) => {
}, [] );
useEffect( () => {
- formRef.current = document.getElementById( 'commentform' ) as HTMLFormElement | null;
-
- if ( formRef.current ) {
- formRef.current.addEventListener( 'submit', handleCommentSubmit );
+ if ( parentForm ) {
+ parentForm.addEventListener( 'submit', handleCommentSubmit );
return () => {
- formRef.current.removeEventListener( 'submit', handleCommentSubmit );
+ parentForm.removeEventListener( 'submit', handleCommentSubmit );
};
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [] );
+ }, [ parentForm ] );
useEffect( () => {
if ( ! isEmptyComment.value ) {
@@ -117,8 +116,8 @@ const Verbum = ( { siteId }: VerbumComments ) => {
event.preventDefault();
setShowMessage( '' );
- const formAction = formRef.current.getAttribute( 'action' );
- const formData = new FormData( formRef.current );
+ const formAction = parentForm.getAttribute( 'action' );
+ const formData = new FormData( parentForm );
// if formData email address is set, set the newUserEmail state
if ( formData.get( 'email' ) ) {
@@ -155,8 +154,8 @@ const Verbum = ( { siteId }: VerbumComments ) => {
// If no error message and not redirect, we re-submit the form as usual instead of using fetch.
setIgnoreSubscriptionModal( true );
isSavingComment.value = false;
- const submitFormFunction = Object.getPrototypeOf( formRef.current ).submit;
- submitFormFunction.call( formRef.current );
+ const submitFormFunction = Object.getPrototypeOf( parentForm ).submit;
+ submitFormFunction.call( parentForm );
};
const handleCommentSubmit = async event => {
@@ -246,4 +245,11 @@ const { siteId } = {
...VerbumComments,
};
-render( , document.getElementById( 'comment-form__verbum' ) );
+document.querySelectorAll( '.comment-form__verbum' ).forEach( element => {
+ render(
+
+
+ ,
+ element
+ );
+} );
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/state.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/state.tsx
index 1c5702ede9bad..75734e981be0a 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/state.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/state.tsx
@@ -1,110 +1,139 @@
import { signal, computed } from '@preact/signals';
+import { createContext } from 'preact';
import { canWeAccessCookies, getUserInfoCookie, isAuthRequired, isEmptyEditor } from './utils';
import type { UserInfo, SubscriptionDetails } from './types';
import type { Signal } from '@preact/signals';
-/*
- * In userInfo we store the user data for logged-in users.
+/**
+ * Creates an instance of the app state.
+ *
+ * @return An object containing all the signals used in the app.
*/
-export const userInfo: Signal< UserInfo > = signal( getUserInfoCookie() );
-
-/*
- * Calculate if user is logged in. For self-hosted sites this check is based only on VerbumComments.isJetpackCommentsLoggedIn.
- * Here we also check if cookies are accessible, userInfo is set and the service is different from 'guest' or 'jetpack'.
- */
-export const userLoggedIn = computed( () => {
- return (
- VerbumComments.isJetpackCommentsLoggedIn ||
- ( canWeAccessCookies() &&
- userInfo.value &&
- userInfo.value?.service !== 'guest' &&
- userInfo.value?.service !== 'jetpack' )
- );
-} );
-
-/*
- * Store user input: email, author and url from email form.
- */
-export const mailLoginData = signal( {
- email: '',
- author: '',
- url: '',
-} );
-
-/*
- * Indicate whether the tray showing the subscription options is open.
- */
-export const isTrayOpen = signal( false );
-
-/*
- * Indicate whether the subscription option tray has been opened once.
- */
-export const hasOpenedTrayOnce = signal( false );
-
-/*
- * Store the value of the comment input field.
- */
-export const commentValue = signal( '' );
-
-/*
- * Calculate if the comment value is empty.
- */
-export const isEmptyComment = computed( () => {
- return isEmptyEditor( commentValue.value );
-} );
-
-/*
- * Indicate whether we are saving the comment.
- */
-export const isSavingComment = signal( false );
-
-/*
- * isMailFormInvalid is used to if the required email form data was not properly filled.
- */
-export const isMailFormInvalid = signal( false );
-
-/*
- * isMailFormMissingInput is used to determine if the mail input is not set.
- */
-const isMailFormMissingInput = computed( () => {
- return ! mailLoginData.value.email || ! mailLoginData.value.author;
-} );
-
-/*
- * Calculate if the reply button should be disabled. When we have no user data we check the shouldDisableReply value,
- * otherwise we check if the comment is empty or saving.
- */
-export const isReplyDisabled = computed( () => {
- return (
- ( isAuthRequired() &&
- ! userLoggedIn.value &&
- ( isMailFormMissingInput.value || isMailFormInvalid.value ) ) ||
- isEmptyComment.value ||
- isSavingComment.value
- );
-} );
-
-/*
- * commentUrl is used to store the url of the comment page.
- * This is used to redirect the user to the comment page after the comment is saved.
- */
-export const commentUrl = signal( '' );
-
-/*
- * Indicate whether we need to store the email data. If set we use this to store the user info cookie.
- */
-export const shouldStoreEmailData = signal( false );
-
-//
-export const subscriptionSettings: Signal< SubscriptionDetails > = signal( undefined );
-
-/*
- * Store the comment parent which is updated by external scripts
- */
-export const commentParent = signal( 0 );
-
-/*
- * Store the subscription modal status calculated for the user.
- * Can be one of these values: 'showed', 'hidden_cookies_disabled', 'hidden_subscribe_not_enabled', 'hidden_views_limit' and 'hidden_already_subscribed'.
- */
-export const subscribeModalStatus = signal( undefined );
+export function createSignals() {
+ /*
+ * In userInfo we store the user data for logged-in users.
+ */
+ const userInfo: Signal< UserInfo > = signal( getUserInfoCookie() );
+
+ /*
+ * Calculate if user is logged in. For self-hosted sites this check is based only on VerbumComments.isJetpackCommentsLoggedIn.
+ * Here we also check if cookies are accessible, userInfo is set and the service is different from 'guest' or 'jetpack'.
+ */
+ const userLoggedIn = computed( () => {
+ return (
+ VerbumComments.isJetpackCommentsLoggedIn ||
+ ( canWeAccessCookies() &&
+ userInfo.value &&
+ userInfo.value?.service !== 'guest' &&
+ userInfo.value?.service !== 'jetpack' )
+ );
+ } );
+
+ /*
+ * Store user input: email, author and url from email form.
+ */
+ const mailLoginData = signal( {
+ email: '',
+ author: '',
+ url: '',
+ } );
+
+ /*
+ * Indicate whether the tray showing the subscription options is open.
+ */
+ const isTrayOpen = signal( false );
+
+ /*
+ * Indicate whether the subscription option tray has been opened once.
+ */
+ const hasOpenedTrayOnce = signal( false );
+
+ /*
+ * Store the value of the comment input field.
+ */
+ const commentValue = signal( '' );
+
+ /*
+ * Calculate if the comment value is empty.
+ */
+ const isEmptyComment = computed( () => {
+ return isEmptyEditor( commentValue.value );
+ } );
+
+ /*
+ * Indicate whether we are saving the comment.
+ */
+ const isSavingComment = signal( false );
+
+ /*
+ * isMailFormInvalid is used to if the required email form data was not properly filled.
+ */
+ const isMailFormInvalid = signal( false );
+
+ /*
+ * isMailFormMissingInput is used to determine if the mail input is not set.
+ */
+ const isMailFormMissingInput = computed( () => {
+ return ! mailLoginData.value.email || ! mailLoginData.value.author;
+ } );
+
+ /*
+ * Calculate if the reply button should be disabled. When we have no user data we check the shouldDisableReply value,
+ * otherwise we check if the comment is empty or saving.
+ */
+ const isReplyDisabled = computed( () => {
+ return (
+ ( isAuthRequired() &&
+ ! userLoggedIn.value &&
+ ( isMailFormMissingInput.value || isMailFormInvalid.value ) ) ||
+ isEmptyComment.value ||
+ isSavingComment.value
+ );
+ } );
+
+ /*
+ * commentUrl is used to store the url of the comment page.
+ * This is used to redirect the user to the comment page after the comment is saved.
+ */
+ const commentUrl = signal( '' );
+
+ /*
+ * Indicate whether we need to store the email data. If set we use this to store the user info cookie.
+ */
+ const shouldStoreEmailData = signal( false );
+
+ //
+ const subscriptionSettings: Signal< SubscriptionDetails > = signal( undefined );
+
+ /*
+ * Store the comment parent which is updated by external scripts
+ */
+ const commentParent = signal( 0 );
+
+ /*
+ * Store the subscription modal status calculated for the user.
+ * Can be one of these values: 'showed', 'hidden_cookies_disabled', 'hidden_subscribe_not_enabled', 'hidden_views_limit' and 'hidden_already_subscribed'.
+ */
+ const subscribeModalStatus = signal( undefined );
+
+ return {
+ userInfo,
+ userLoggedIn,
+ mailLoginData,
+ isTrayOpen,
+ hasOpenedTrayOnce,
+ commentValue,
+ isEmptyComment,
+ isSavingComment,
+ isMailFormInvalid,
+ isMailFormMissingInput,
+ isReplyDisabled,
+ commentUrl,
+ shouldStoreEmailData,
+ subscriptionSettings,
+ commentParent,
+ subscribeModalStatus,
+ } as const;
+}
+
+export const VerbumSignals = createContext( createSignals() );
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/style.scss
index 6e7e4229bd5ba..16d52d377945c 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/style.scss
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/style.scss
@@ -89,7 +89,7 @@
display: none;
}
- #comment-form__verbum {
+ .comment-form__verbum {
@include color-schemes;
&.dark {
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/types.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/types.tsx
index 9ae4e3961b206..228bf852dc280 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/types.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/types.tsx
@@ -36,6 +36,10 @@ export type EmailPostsChange =
trackSource: 'verbum-subscription-modal' | 'verbum-toggle';
};
+export type VerbumAppProps = {
+ parentForm: HTMLFormElement;
+ siteId?: number;
+};
export interface VerbumComments {
loginPostMessage?: UserInfo;
siteId?: number;
@@ -67,6 +71,7 @@ export interface VerbumComments {
* Contains the time we started loading Highlander.
*/
fullyLoadedTime: number;
+ vbeCacheBuster: string;
}
export type EmailSubscriptionResponse = {
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/utils.ts b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/utils.ts
index 9a28d20fb0291..d39846036940c 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/utils.ts
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/utils.ts
@@ -1,6 +1,6 @@
import { translate } from './i18n';
import { Facebook, Mail, WordPress } from './images';
-import type { UserInfo, VerbumComments } from './types';
+import type { UserInfo } from './types';
export const serviceData = {
wordpress: {
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/tests/simple/open_comments_for_everyone.test.ts b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/tests/simple/open_comments_for_everyone.test.ts
index 6b14ec8b07582..0fa2029ed6817 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/tests/simple/open_comments_for_everyone.test.ts
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/tests/simple/open_comments_for_everyone.test.ts
@@ -21,7 +21,7 @@ test( 'Simple: open_comments_for_everyone - Anonymous', async ( { page } ) => {
await page.getByPlaceholder( 'Write a comment...' ).click();
await page.getByPlaceholder( 'Write a comment...' ).pressSequentially( randomComment );
await expect( page.getByRole( 'button', { name: 'Comment' } ) ).toBeVisible();
- await expect( page.locator( '#comment-form__verbum' ) ).toContainText(
+ await expect( page.locator( '.comment-form__verbum' ) ).toContainText(
'Leave a comment. (log in optional)'
);
await page.getByRole( 'button', { name: 'Comment' } ).click();
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/tests/simple/user_must_be_registered_and_logged_in_to_comment.test.ts b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/tests/simple/user_must_be_registered_and_logged_in_to_comment.test.ts
index 58b2a6111ee92..49268612d0e31 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/tests/simple/user_must_be_registered_and_logged_in_to_comment.test.ts
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/tests/simple/user_must_be_registered_and_logged_in_to_comment.test.ts
@@ -25,7 +25,7 @@ test( 'Simple: user_must_be_registered_and_logged_in_to_comment - Anonymous', as
.locator( 'p[contenteditable="true"]' )
.pressSequentially( randomComment );
- await expect( page.locator( '#comment-form__verbum' ) ).toContainText(
+ await expect( page.locator( '.comment-form__verbum' ) ).toContainText(
'Log in to leave a comment.'
);
// Reply button should be disabled before log in.
@@ -41,7 +41,7 @@ test( 'Simple: user_must_be_registered_and_logged_in_to_comment - Anonymous', as
await loginPopupPage.getByRole( 'button', { name: 'Log In' } ).click();
//
- await expect( page.locator( '#comment-form__verbum' ) ).toContainText(
+ await expect( page.locator( '.comment-form__verbum' ) ).toContainText(
`${ testingUser.username } - Logged in via WordPress.com`
);
await page.getByRole( 'button', { name: 'Comment' } ).click();