From 0a36180adeb07957bf31502c9c526997c14bc2c9 Mon Sep 17 00:00:00 2001
From: jeherve <jeherve@users.noreply.github.com>
Date: Wed, 11 Dec 2024 13:06:53 +0000
Subject: [PATCH] Facebook Embeds: add a white background for better
 readability (#40547)

* Facebook Embeds: add a white background for better readability

Fixes #40546

* Update tests to match new output format

* Add extra style

See https://github.com/Automattic/jetpack/pull/40547#discussion_r1879845488

Co-authored-by: Fredrik Rombach Ekelund <fredrik@f26d.dev>

* Add comment explaining why this is necessary

Co-authored-by: Fredrik Rombach Ekelund <fredrik@f26d.dev>

---------

Co-authored-by: Fredrik Rombach Ekelund <fredrik@f26d.dev>

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

Upstream-Ref: Automattic/jetpack@8b1f3d02ec9e35d505fcd24511d14f0babfeac08
---
 CHANGELOG.md                    |  1 +
 modules/shortcodes/facebook.php | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5e38e62a1..3a33b5d081 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 This is an alpha version! The changes listed here are not final.
 
 ### Bug fixes
+- Facebook Embeds: add a white background to embeds to avoid transparent background interfering with readability.
 - Form Block: fixed validation of URL input types to allow query strings.
 
 ### Other changes <!-- Non-user-facing changes go here. This section will not be copied to readme.txt. -->
diff --git a/modules/shortcodes/facebook.php b/modules/shortcodes/facebook.php
index 84904ca518..6e19a0b5db 100644
--- a/modules/shortcodes/facebook.php
+++ b/modules/shortcodes/facebook.php
@@ -55,12 +55,20 @@
  * @return string Facebook embed markup.
  */
 function jetpack_facebook_embed_handler( $matches, $attr, $url ) {
+	// This is a stop-gap solution until Facebook hopefully resolves this ticket
+	// https://developers.facebook.com/community/threads/1675075423353415/?post_id=1675075426686748
+	$extra_styles = 'style="background-color: #fff; display: inline-block;"';
+
 	if (
 		str_contains( $url, 'video.php' )
 		|| str_contains( $url, '/videos/' )
 		|| str_contains( $url, '/watch' )
 	) {
-		$embed = sprintf( '<div class="fb-video" data-allowfullscreen="true" data-href="%s"></div>', esc_url( $url ) );
+		$embed = sprintf(
+			'<div class="fb-video" data-allowfullscreen="true" data-href="%1$s" %2$s></div>',
+			esc_url( $url ),
+			$extra_styles
+		);
 	} else {
 		$width = 552; // As of 01/2017, the default width of Facebook embeds when no width attribute provided.
 
@@ -69,7 +77,12 @@ function jetpack_facebook_embed_handler( $matches, $attr, $url ) {
 			$width = min( $width, $content_width );
 		}
 
-		$embed = sprintf( '<div class="fb-post" data-href="%s" data-width="%s"></div>', esc_url( $url ), esc_attr( $width ) );
+		$embed = sprintf(
+			'<div class="fb-post" data-href="%1$s" data-width="%2$s" %3$s></div>',
+			esc_url( $url ),
+			esc_attr( $width ),
+			$extra_styles
+		);
 	}
 
 	// Skip rendering scripts in an AMP context.