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 #40547 (comment) Co-authored-by: Fredrik Rombach Ekelund <[email protected]> * Add comment explaining why this is necessary Co-authored-by: Fredrik Rombach Ekelund <[email protected]> --------- Co-authored-by: Fredrik Rombach Ekelund <[email protected]>
Automattic · Dec 11, 2024 · 8b1f3d0 · 8b1f3d0
1 parent 8b50b67
commit 8b1f3d0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-facebook-embed-background-color b/projects/plugins/jetpack/changelog/fix-facebook-embed-background-color
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Facebook Embeds: add a white background to embeds to avoid transparent background interfering with readability.
diff --git a/projects/plugins/jetpack/modules/shortcodes/facebook.php b/projects/plugins/jetpack/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.

diff --git a/projects/plugins/jetpack/tests/php/modules/shortcodes/test-class.facebook.php b/projects/plugins/jetpack/tests/php/modules/shortcodes/test-class.facebook.php
@@ -57,7 +57,7 @@ public function test_shortcodes_facebook_video_old() {
 		$actual = ob_get_clean();
 		$this->assertStringContainsString(
 			sprintf(
-				'<div class="fb-video" data-allowfullscreen="true" data-href="%s"></div>',
+				'<div class="fb-video" data-allowfullscreen="true" data-href="%s" style="background-color: #fff; display: inline-block;"></div>',
 				$url
 			),
 			$actual
@@ -86,7 +86,7 @@ public function test_shortcodes_facebook_video_watch_format() {
 		$actual = ob_get_clean();
 		$this->assertStringContainsString(
 			sprintf(
-				'<div class="fb-video" data-allowfullscreen="true" data-href="%s"></div>',
+				'<div class="fb-video" data-allowfullscreen="true" data-href="%s" style="background-color: #fff; display: inline-block;"></div>',
 				$url
 			),
 			$actual
@@ -115,7 +115,7 @@ public function test_shortcodes_facebook_video_alternate() {
 		$actual = ob_get_clean();
 		$this->assertStringContainsString(
 			sprintf(
-				'<div class="fb-video" data-allowfullscreen="true" data-href="%s"></div>',
+				'<div class="fb-video" data-allowfullscreen="true" data-href="%s" style="background-color: #fff; display: inline-block;"></div>',
 				$url
 			),
 			$actual