Add AMP compatibility for OpenTable block (#17085)

Automattic · Sep 30, 2020 · 4f371f5 · 4f371f5
1 parent 1dba135
commit 4f371f5
Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/extensions/blocks/opentable/opentable.php b/extensions/blocks/opentable/opentable.php
@@ -76,10 +76,41 @@ function load_assets( $attributes ) {
 	$classes = Blocks::classes( FEATURE_NAME, $attributes, $classes );
 	$content = '<div class="' . esc_attr( $classes ) . '">';
 
-	// The OpenTable script uses multiple `rid` paramters,
-	// so we can't use WordPress to output it, as WordPress attempts to validate it and removes them.
-	// phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
-	$content .= '<script type="text/javascript" src="' . esc_url( build_embed_url( $attributes ) ) . '"></script>';
+	$script_url = build_embed_url( $attributes );
+
+	if ( Blocks::is_amp_request() ) {
+		// Extract params from URL since it had jetpack_opentable_block_url filters applied.
+		$url_query = \wp_parse_url( $script_url, PHP_URL_QUERY ) . '&overlay=false&disablega=false';
+
+		$src = "https://www.opentable.com/widget/reservation/canvas?$url_query";
+
+		$params = array();
+		wp_parse_str( $url_query, $params );
+
+		// Note an iframe is similarly constructed in the block edit function.
+		$content .= sprintf(
+			'<amp-iframe src="%s" layout="fill" sandbox="allow-scripts allow-forms allow-same-origin allow-popups">%s</amp-iframe>',
+			esc_url( $src ),
+			sprintf(
+				'<a placeholder href="%s">%s</a>',
+				esc_url(
+					add_query_arg(
+						array(
+							'rid' => $params['rid'],
+						),
+						'https://www.opentable.com/restref/client/'
+					)
+				),
+				esc_html__( 'Make a reservation', 'jetpack' )
+			)
+		);
+	} else {
+		// The OpenTable script uses multiple `rid` paramters,
+		// so we can't use WordPress to output it, as WordPress attempts to validate it and removes them.
+		// phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
+		$content .= '<script src="' . esc_url( $script_url ) . '"></script>';
+	}
+
 	$content .= '</div>';
 
 	return $content;

diff --git a/extensions/blocks/opentable/view.scss b/extensions/blocks/opentable/view.scss
@@ -1,4 +1,10 @@
 .wp-block-jetpack-opentable {
+	position: relative; /* For sake of amp-iframe with layout=fill */
+
+	> iframe {
+		background: transparent; /* Override AMP Reader mode gray background for iframes in legacy post templates. */
+		margin: 0; /* Override margins in AMP legacy Reader mode. */
+	}
 
 	&.aligncenter iframe {
 		margin: 0 auto;