Fix Verbum comments in Query Loop (#40933)

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/12711349519

Upstream-Ref: Automattic/jetpack@59e2d93

Author: alshakero

composer.lock

@@ -45,6 +45,7 @@ This is an alpha version! The changes listed here are not final.
 - Load WPCOM sidebar notice async
 - Restore visited button color in themes.php to Core's default
 - Starter page templates: correctly insert the pattern to the Content block when rendering mode is template-locked
+- To support adding a comment form inside a query loop
 - wpcom-block-editor-nux: avoid using useLocation which now throws exception outside Site Editor in Gutenberg 19.9.0
 
 ## [6.0.0] - 2024-12-04

vendor/automattic/jetpack-mu-wpcom/CHANGELOG.md

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => '4cf8f5b832fdeb1f83c1');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '5dddcf62b1d02cdefa9b');

vendor/automattic/jetpack-mu-wpcom/src/build/verbum-comments/verbum-comments.asset.php

@@ -96,7 +96,7 @@ public function verbum_render_element() {
 			$color_scheme = 'transparent';
 		}
 
-		$verbum = '<div id="comment-form__verbum" class="' . $color_scheme . '"></div>' . $this->hidden_fields();
+		$verbum = '<div class="comment-form__verbum ' . $color_scheme . '"></div>' . $this->hidden_fields();
 
 		// If the blog requires login, Verbum need to be wrapped in a <form> to work.
 		// Verbum is given `mustLogIn` to handle the login flow.
@@ -535,8 +535,12 @@ public function add_verbum_meta_data( $comment_id ) {
 	 * Get the hidden fields for the comment form.
 	 */
 	public function hidden_fields() {
+		// Ironically, get_queried_post_id doesn't work inside query loop.
+		// See: https://github.com/Automattic/wp-calypso/issues/98136
+		$queried_post    = get_post();
+		$queried_post_id = $queried_post ? $queried_post->ID : 0;
 		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
-		$post_id = isset( $_GET['postid'] ) ? intval( $_GET['postid'] ) : get_queried_object_id();
+		$post_id = isset( $_GET['postid'] ) ? intval( $_GET['postid'] ) : $queried_post_id;
 		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
 		$is_current_user_subscribed = isset( $_GET['is_current_user_subscribed'] ) ? intval( $_GET['is_current_user_subscribed'] ) : 0;
 		$nonce                      = wp_create_nonce( 'highlander_comment' );

vendor/automattic/jetpack-mu-wpcom/src/build/verbum-comments/verbum-comments.css

@@ -1,12 +1,18 @@
+import { useContext, useCallback } from 'preact/hooks';
 import { translate } from '../../i18n';
-import { shouldStoreEmailData } from '../../state';
+import { VerbumSignals } from '../../state';
 import { ToggleControl } from '../ToggleControl';
 
-const handleChange = ( e: boolean ) => {
-	shouldStoreEmailData.value = e;
-};
-
 export const EmailFormCookieConsent = () => {
+	const { shouldStoreEmailData } = useContext( VerbumSignals );
+
+	const handleChange = useCallback(
+		( e: boolean ) => {
+			shouldStoreEmailData.value = e;
+		},
+		[ shouldStoreEmailData ]
+	);
+
 	const label = (
 		<div className="verbum-toggle-control__label">
 			<p className="primary">

vendor/automattic/jetpack-mu-wpcom/src/build/verbum-comments/verbum-comments.js

@@ -1,9 +1,9 @@
-import { signal, effect, batch, computed } from '@preact/signals';
+import { effect, batch, useSignal, useComputed } from '@preact/signals';
 import clsx from 'clsx';
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useContext } from 'preact/hooks';
 import { translate } from '../../i18n';
 import { Name, Website, Email } from '../../images';
-import { mailLoginData, isMailFormInvalid, shouldStoreEmailData } from '../../state';
+import { VerbumSignals } from '../../state';
 import { getUserInfoCookie, isAuthRequired } from '../../utils';
 import { NewCommentEmail } from '../new-comment-email';
 import { NewPostsEmail } from '../new-posts-email';
@@ -15,32 +15,34 @@ interface EmailFormProps {
 	shouldShowEmailForm: boolean;
 }
 
-const isValidEmail = signal( true );
-const isEmailTouched = signal( false );
-const isNameTouched = signal( false );
-const isValidAuthor = signal( true );
-const userEmail = computed( () => mailLoginData.value.email || '' );
-const userName = computed( () => mailLoginData.value.author || '' );
-const userUrl = computed( () => mailLoginData.value.url || '' );
+export const EmailForm = ( { shouldShowEmailForm }: EmailFormProps ) => {
+	const { mailLoginData, isMailFormInvalid, shouldStoreEmailData } = useContext( VerbumSignals );
 
-const validateFormData = () => {
-	const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-	batch( () => {
-		isValidEmail.value =
-			Boolean( userEmail.value ) && Boolean( emailRegex.test( userEmail.value ) );
-		isValidAuthor.value = Boolean( userName.value.length > 0 );
-	} );
-};
+	const isValidEmail = useSignal( true );
+	const isEmailTouched = useSignal( false );
+	const isNameTouched = useSignal( false );
+	const isValidAuthor = useSignal( true );
+	const userEmail = useComputed( () => mailLoginData.value.email || '' );
+	const userName = useComputed( () => mailLoginData.value.author || '' );
+	const userUrl = useComputed( () => mailLoginData.value.url || '' );
 
-const setFormData = ( event: ChangeEvent< HTMLInputElement > ) => {
-	mailLoginData.value = {
-		...mailLoginData.peek(),
-		[ event.currentTarget.name ]: event.currentTarget.value,
+	const validateFormData = () => {
+		const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+		batch( () => {
+			isValidEmail.value =
+				Boolean( userEmail.value ) && Boolean( emailRegex.test( userEmail.value ) );
+			isValidAuthor.value = Boolean( userName.value.length > 0 );
+		} );
+	};
+
+	const setFormData = ( event: ChangeEvent< HTMLInputElement > ) => {
+		mailLoginData.value = {
+			...mailLoginData.peek(),
+			[ event.currentTarget.name ]: event.currentTarget.value,
+		};
+		validateFormData();
 	};
-	validateFormData();
-};
 
-export const EmailForm = ( { shouldShowEmailForm }: EmailFormProps ) => {
 	const { subscribeToComment, subscribeToBlog } = VerbumComments;
 	const [ emailNewComment, setEmailNewComment ] = useState( false );
 	const [ emailNewPosts, setEmailNewPosts ] = useState( false );