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 Automattic/jetpack#40547 (comment)

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@8b1f3d0

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. -->

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.