Verbum Comments: Fix iframe resize logic (#39791)

* Add changes to fix Verbum comments resize logic * changelog
Automattic · Oct 25, 2024 · 748fce5 · 748fce5
1 parent d3386eb
commit 748fce5
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-verbum-comments-resize-logic b/projects/packages/jetpack-mu-wpcom/changelog/fix-verbum-comments-resize-logic
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update Verbum Comments resize logic
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php
@@ -175,6 +175,7 @@ public function enqueue_assets() {
 		$jetpack_username             = isset( $__get['hc_username'] ) && is_string( $__get['hc_username'] ) ? $__get['hc_username'] : '';
 		$jetpack_user_id              = isset( $__get['hc_userid'] ) && is_numeric( $__get['hc_userid'] ) ? (int) $__get['hc_userid'] : 0;
 		$jetpack_signature            = isset( $__get['sig'] ) && is_string( $__get['sig'] ) ? $__get['sig'] : '';
+		$iframe_unique_id             = isset( $__get['iframe_unique_id'] ) && is_numeric( $__get['iframe_unique_id'] ) ? (int) $__get['iframe_unique_id'] : 0;
 		list( $jetpack_avatar )       = wpcom_get_avatar_url( "$email_hash@md5.gravatar.com" );
 		$comment_registration_enabled = boolval( get_blog_option( $this->blog_id, 'comment_registration' ) );
 		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
@@ -255,6 +256,7 @@ public function enqueue_assets() {
 					'verbumBundleUrl'                    => plugins_url( 'dist/index.js', __FILE__ ),
 					'isRTL'                              => is_rtl( $locale ),
 					'vbeCacheBuster'                     => $vbe_cache_buster,
+					'iframeUniqueId'                     => $iframe_unique_id,
 				)
 			),
 			'before'

diff --git a/projects/plugins/jetpack/changelog/fix-verbum-comments-resize-logic b/projects/plugins/jetpack/changelog/fix-verbum-comments-resize-logic
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Update Verbum Comments resize logic
diff --git a/projects/plugins/jetpack/modules/comments/comments.php b/projects/plugins/jetpack/modules/comments/comments.php
@@ -394,6 +394,7 @@ public function comment_form_after() {
 			'color_scheme'           => get_option( 'jetpack_comment_form_color_scheme', $this->default_color_scheme ),
 			'lang'                   => get_locale(),
 			'jetpack_version'        => JETPACK__VERSION,
+			'iframe_unique_id'       => wp_unique_id(),
 		);
 
 		// Extra parameters for logged in user.
@@ -594,12 +595,30 @@ function tellFrameNewParent ( commentParentValue ) {
 				document.querySelector('#comment-reply-js')?.addEventListener( 'load', watchReply );
 
 				<?php endif; ?>
+
+				const commentIframes = document.getElementsByClassName('jetpack_remote_comment');
 
-				window.addEventListener( 'message', function ( event ) {
-					if ( event.origin !== 'https://jetpack.wordpress.com' ) {
+				window.addEventListener('message', function(event) {
+					if (event.origin !== 'https://jetpack.wordpress.com') {
 						return;
 					}
-					iframe.style.height = event.data + 'px';
+
+					if (!event?.data?.iframeUniqueId && !event?.data?.height) {
+						return;
+					}
+
+					const eventDataUniqueId = event.data.iframeUniqueId;
+
+					// Change height for the matching comment iframe
+					for (let i = 0; i < commentIframes.length; i++) {
+						const iframe = commentIframes[i];
+						const url = new URL(iframe.src);
+						const iframeUniqueIdParam = url.searchParams.get('iframe_unique_id');
+						if (iframeUniqueIdParam == event.data.iframeUniqueId) {
+							iframe.style.height = event.data.height + 'px';
+							return;
+						}
+					}
 				});
 			})();
 		</script>