From 4aaa4f26c54eb9e205f412215fd635a3ad3689bd Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 6 Sep 2020 01:34:44 -0700 Subject: [PATCH 1/7] Add initial AMP compatibility for OpenTable block --- extensions/blocks/opentable/opentable.php | 53 +++++++++++++++++++++-- extensions/blocks/opentable/view.scss | 1 + 2 files changed, 50 insertions(+), 4 deletions(-) diff --git a/extensions/blocks/opentable/opentable.php b/extensions/blocks/opentable/opentable.php index 626fb8991417e..9db03c20509be 100644 --- a/extensions/blocks/opentable/opentable.php +++ b/extensions/blocks/opentable/opentable.php @@ -11,6 +11,7 @@ use Automattic\Jetpack\Blocks; use Jetpack_Gutenberg; +use Jetpack_AMP_Support; const FEATURE_NAME = 'opentable'; const BLOCK_NAME = 'jetpack/' . FEATURE_NAME; @@ -67,8 +68,10 @@ function load_assets( $attributes ) { $classes[] = sprintf( 'is-style-%s', $style ); } + $is_multi = false; // @todo Temp. if ( array_key_exists( 'rid', $attributes ) && is_array( $attributes['rid'] ) && count( $attributes['rid'] ) > 1 ) { $classes[] = 'is-multi'; + $is_multi = true; // @todo Temp. } if ( array_key_exists( 'negativeMargin', $attributes ) && $attributes['negativeMargin'] ) { $classes[] = 'has-no-margin'; @@ -76,10 +79,52 @@ function load_assets( $attributes ) { $classes = Blocks::classes( FEATURE_NAME, $attributes, $classes ); $content = '
'; - // 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_url = build_embed_url( $attributes ); + + if ( Jetpack_AMP_Support::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"; + + // @todo This is temporary workaround! The height should not be needed, and otherwise it should just have layout=fill. To replace once https://github.com/ampproject/amphtml/issues/29398 fixed. + $height = $is_multi ? 361 : 301; + $params = array(); + wp_parse_str( $url_query, $params ); + if ( 'tall' === $params['theme'] ) { + $height = $is_multi ? 550 : 490; + } elseif ( 'wide' === $params['theme'] ) { + $height = 150; + } elseif ( 'button' === $params['theme'] ) { + $height = 113; + } + $layout_attrs = sprintf( 'layout="fixed-height" height="%d"', $height ); + + // Note an iframe is similarly constructed in the block edit function. + $content .= sprintf( + '%s', + esc_url( $src ), + $layout_attrs, + sprintf( + '%s', + 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 .= ''; + } + $content .= '
'; return $content; diff --git a/extensions/blocks/opentable/view.scss b/extensions/blocks/opentable/view.scss index 6feb31ad161b6..1157cdfa27a0f 100644 --- a/extensions/blocks/opentable/view.scss +++ b/extensions/blocks/opentable/view.scss @@ -1,4 +1,5 @@ .wp-block-jetpack-opentable { + position: relative; /* For sake of amp-iframe with layout=fill */ &.aligncenter iframe { margin: 0 auto; From d0b2e9f7ecb1daa060153cf5fee89689eef29c0b Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 6 Sep 2020 22:48:14 -0700 Subject: [PATCH 2/7] Add missing allow-popups sandbox value for amp-iframe --- extensions/blocks/opentable/opentable.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/blocks/opentable/opentable.php b/extensions/blocks/opentable/opentable.php index 9db03c20509be..de280939fb858 100644 --- a/extensions/blocks/opentable/opentable.php +++ b/extensions/blocks/opentable/opentable.php @@ -102,7 +102,7 @@ function load_assets( $attributes ) { // Note an iframe is similarly constructed in the block edit function. $content .= sprintf( - '%s', + '%s', esc_url( $src ), $layout_attrs, sprintf( From ecd115f85c42c08a27264ae2668300c24491ca6c Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 20 Sep 2020 12:53:50 -0700 Subject: [PATCH 3/7] Remove gray background for iframes in reader mode --- extensions/blocks/opentable/view.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/extensions/blocks/opentable/view.scss b/extensions/blocks/opentable/view.scss index 1157cdfa27a0f..bae44f83cbd27 100644 --- a/extensions/blocks/opentable/view.scss +++ b/extensions/blocks/opentable/view.scss @@ -1,6 +1,10 @@ .wp-block-jetpack-opentable { position: relative; /* For sake of amp-iframe with layout=fill */ + .wp-block-jetpack-opentable iframe { + background: transparent; /* Override AMP Reader mode gray background for iframes in legacy post templates */ + } + &.aligncenter iframe { margin: 0 auto; } From be77d07a8d40291ff978cd01b034cb0e63cb625e Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 20 Sep 2020 12:56:33 -0700 Subject: [PATCH 4/7] Remove temp code for layout=fill workaround --- extensions/blocks/opentable/opentable.php | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/extensions/blocks/opentable/opentable.php b/extensions/blocks/opentable/opentable.php index de280939fb858..dfe11e30af437 100644 --- a/extensions/blocks/opentable/opentable.php +++ b/extensions/blocks/opentable/opentable.php @@ -68,11 +68,6 @@ function load_assets( $attributes ) { $classes[] = sprintf( 'is-style-%s', $style ); } - $is_multi = false; // @todo Temp. - if ( array_key_exists( 'rid', $attributes ) && is_array( $attributes['rid'] ) && count( $attributes['rid'] ) > 1 ) { - $classes[] = 'is-multi'; - $is_multi = true; // @todo Temp. - } if ( array_key_exists( 'negativeMargin', $attributes ) && $attributes['negativeMargin'] ) { $classes[] = 'has-no-margin'; } @@ -87,24 +82,13 @@ function load_assets( $attributes ) { $src = "https://www.opentable.com/widget/reservation/canvas?$url_query"; - // @todo This is temporary workaround! The height should not be needed, and otherwise it should just have layout=fill. To replace once https://github.com/ampproject/amphtml/issues/29398 fixed. - $height = $is_multi ? 361 : 301; $params = array(); wp_parse_str( $url_query, $params ); - if ( 'tall' === $params['theme'] ) { - $height = $is_multi ? 550 : 490; - } elseif ( 'wide' === $params['theme'] ) { - $height = 150; - } elseif ( 'button' === $params['theme'] ) { - $height = 113; - } - $layout_attrs = sprintf( 'layout="fixed-height" height="%d"', $height ); // Note an iframe is similarly constructed in the block edit function. $content .= sprintf( - '%s', + '%s', esc_url( $src ), - $layout_attrs, sprintf( '%s', esc_url( From 681cba1ef25a8382383476d8895f26f2910befd4 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 20 Sep 2020 12:59:10 -0700 Subject: [PATCH 5/7] Restore addition of is-multi class --- extensions/blocks/opentable/opentable.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/extensions/blocks/opentable/opentable.php b/extensions/blocks/opentable/opentable.php index dfe11e30af437..2f969ac5769f3 100644 --- a/extensions/blocks/opentable/opentable.php +++ b/extensions/blocks/opentable/opentable.php @@ -68,6 +68,9 @@ function load_assets( $attributes ) { $classes[] = sprintf( 'is-style-%s', $style ); } + if ( array_key_exists( 'rid', $attributes ) && is_array( $attributes['rid'] ) && count( $attributes['rid'] ) > 1 ) { + $classes[] = 'is-multi'; + } if ( array_key_exists( 'negativeMargin', $attributes ) && $attributes['negativeMargin'] ) { $classes[] = 'has-no-margin'; } From f0b54e19478024730e94066df15e52cfc48769dd Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 23 Sep 2020 11:07:22 -0700 Subject: [PATCH 6/7] Utilize Blocks::is_amp_request() --- extensions/blocks/opentable/opentable.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/extensions/blocks/opentable/opentable.php b/extensions/blocks/opentable/opentable.php index 2f969ac5769f3..95f7176cc8f49 100644 --- a/extensions/blocks/opentable/opentable.php +++ b/extensions/blocks/opentable/opentable.php @@ -11,7 +11,6 @@ use Automattic\Jetpack\Blocks; use Jetpack_Gutenberg; -use Jetpack_AMP_Support; const FEATURE_NAME = 'opentable'; const BLOCK_NAME = 'jetpack/' . FEATURE_NAME; @@ -79,7 +78,7 @@ function load_assets( $attributes ) { $script_url = build_embed_url( $attributes ); - if ( Jetpack_AMP_Support::is_amp_request() ) { + 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'; From 1652d9177d82d19b3622d4ff8a0ebcf5ecb0d627 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 24 Sep 2020 14:13:19 -0700 Subject: [PATCH 7/7] Fix seletor for iframe and remove margins for sake of AMP legacy Reader mode --- extensions/blocks/opentable/view.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/extensions/blocks/opentable/view.scss b/extensions/blocks/opentable/view.scss index bae44f83cbd27..b1813eaeabd86 100644 --- a/extensions/blocks/opentable/view.scss +++ b/extensions/blocks/opentable/view.scss @@ -1,8 +1,9 @@ .wp-block-jetpack-opentable { position: relative; /* For sake of amp-iframe with layout=fill */ - .wp-block-jetpack-opentable iframe { - background: transparent; /* Override AMP Reader mode gray background for iframes in legacy post templates */ + > 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 {