From bf77fb5e8fa93138dfbd2670f8395866a034bf03 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 28 Jan 2018 16:48:10 -0800 Subject: [PATCH 1/3] Add incomplete support for post embeds --- includes/amp-frontend-actions.php | 21 +++++ includes/amp-helper-functions.php | 1 + includes/class-amp-autoloader.php | 1 + .../embeds/class-amp-post-embed-handler.php | 81 +++++++++++++++++++ 4 files changed, 104 insertions(+) create mode 100644 includes/embeds/class-amp-post-embed-handler.php diff --git a/includes/amp-frontend-actions.php b/includes/amp-frontend-actions.php index f62b93f6b70..e55dcea965d 100644 --- a/includes/amp-frontend-actions.php +++ b/includes/amp-frontend-actions.php @@ -30,3 +30,24 @@ function amp_frontend_add_canonical() { printf( '', esc_url( amp_get_permalink( get_queried_object_id() ) ) ); } + +/** + * Add JS required for iframe to resize itself in AMP. + * + * @todo This should be incorporated into core. + * @since ?.? + */ +function amp_add_post_embed_js() { + ?> + + array(), 'AMP_Issuu_Embed_Handler' => array(), 'AMP_Meetup_Embed_Handler' => array(), + 'AMP_Post_Embed_Handler' => array(), 'AMP_Vine_Embed_Handler' => array(), 'AMP_Facebook_Embed_Handler' => array(), 'AMP_Pinterest_Embed_Handler' => array(), diff --git a/includes/class-amp-autoloader.php b/includes/class-amp-autoloader.php index b0904dd69e8..68f69882dce 100644 --- a/includes/class-amp-autoloader.php +++ b/includes/class-amp-autoloader.php @@ -42,6 +42,7 @@ class AMP_Autoloader { 'AMP_Issuu_Embed_Handler' => 'includes/embeds/class-amp-issuu-embed-handler', 'AMP_Meetup_Embed_Handler' => 'includes/embeds/class-amp-meetup-embed-handler', 'AMP_Pinterest_Embed_Handler' => 'includes/embeds/class-amp-pinterest-embed', + 'AMP_Post_Embed_Handler' => 'includes/embeds/class-amp-post-embed-handler', 'AMP_Reddit_Embed_Handler' => 'includes/embeds/class-amp-reddit-embed-handler', 'AMP_SoundCloud_Embed_Handler' => 'includes/embeds/class-amp-soundcloud-embed', 'AMP_Tumblr_Embed_Handler' => 'includes/embeds/class-amp-tumblr-embed-handler', diff --git a/includes/embeds/class-amp-post-embed-handler.php b/includes/embeds/class-amp-post-embed-handler.php new file mode 100644 index 00000000000..5b5f5c4d2a7 --- /dev/null +++ b/includes/embeds/class-amp-post-embed-handler.php @@ -0,0 +1,81 @@ +. + */ +class AMP_Post_Embed_Handler extends AMP_Base_Embed_Handler { + + /** + * Register embed. + */ + public function register_embed() { + + // Note that oembed_dataparse filter should not be used as the response will get cached in the DB. + add_filter( 'embed_oembed_html', array( $this, 'filter_embed_oembed_html' ), 10, 3 ); + } + + /** + * Unregister embed. + */ + public function unregister_embed() { + remove_filter( 'embed_oembed_html', array( $this, 'filter_embed_oembed_html' ), 10 ); + } + + /** + * Filter oEmbed HTML for WordPress post embeds to prepare it for AMP. + * + * @see \get_post_embed_html() + * @param string $cache Cache for oEmbed. + * @param string $url Embed URL. + * @param array $attr Embed attributes, including width and height. + * @return string Embed. + */ + public function filter_embed_oembed_html( $cache, $url, $attr ) { + unset( $url ); + + // See regex in wp_filter_oembed_result() where blockquote and iframe are presumed to exist. + if ( ! preg_match( '#]*class="wp-embedded-content"[^>]*?>#s', $cache ) ) { + return $cache; + } + + $dom = AMP_DOM_Utils::get_dom_from_content( $cache ); + $iframe = $dom->getElementsByTagName( 'iframe' )->item( 0 ); + if ( ! $iframe ) { + return $cache; + } + + // Note we have to exclude the blockquote because wpautop() does not like it. + $link = $dom->getElementsByTagName( 'a' )->item( 0 ); + $link->setAttribute( 'placeholder', '' ); + + $attributes = $attr; // Initially width and height. + foreach ( $iframe->attributes as $attribute ) { + $attributes[ $attribute->nodeName ] = $attribute->nodeValue; + } + unset( $attributes['data-secret'] ); + + return AMP_HTML_Utils::build_tag( + 'amp-iframe', + array_merge( + $attributes, + array( + 'src' => strtok( $attributes['src'], '#' ), // So that `#amp=1` can be added. + 'layout' => 'responsive', + 'resizable' => '', + 'sandbox' => 'allow-scripts allow-top-navigation-by-user-activation', // @todo Top-navigation doesn't work because linkClickHandler() prevents it. See . + + ) + ), + $dom->saveHTML( $link ) . ' ' . esc_html__( 'Read more', 'amp' ) . '' + ); + } +} + From 46523fbc0401de61072272372ca48742527c361e Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Mon, 24 Sep 2018 16:08:45 -0700 Subject: [PATCH 2/3] Move amp_add_post_embed_js() out of deprecated file --- amp.php | 1 + includes/amp-frontend-actions.php | 21 --------------------- includes/amp-helper-functions.php | 20 ++++++++++++++++++++ 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/amp.php b/amp.php index 07f9e341c47..7afd4eb73c1 100644 --- a/amp.php +++ b/amp.php @@ -356,6 +356,7 @@ function amp_load_classes() { */ function amp_add_frontend_actions() { add_action( 'wp_head', 'amp_add_amphtml_link' ); + add_action( 'embed_footer', 'amp_add_post_embed_js' ); } /** diff --git a/includes/amp-frontend-actions.php b/includes/amp-frontend-actions.php index 263dda34ee9..fa23028f5a7 100644 --- a/includes/amp-frontend-actions.php +++ b/includes/amp-frontend-actions.php @@ -21,24 +21,3 @@ function amp_frontend_add_canonical() { _deprecated_function( __FUNCTION__, '1.0', 'amp_add_amphtml_link' ); amp_add_amphtml_link(); } - -/** - * Add JS required for iframe to resize itself in AMP. - * - * @todo This should be incorporated into core. - * @since ?.? - */ -function amp_add_post_embed_js() { - ?> - - + + Date: Mon, 24 Sep 2018 22:43:21 -0700 Subject: [PATCH 3/3] Ensure iframe gets style removed so it is displayed --- includes/amp-helper-functions.php | 16 +++++++----- .../embeds/class-amp-post-embed-handler.php | 26 +++++++++++++++---- 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/includes/amp-helper-functions.php b/includes/amp-helper-functions.php index 944490ff929..83c11d35f16 100644 --- a/includes/amp-helper-functions.php +++ b/includes/amp-helper-functions.php @@ -899,13 +899,15 @@ function amp_wp_kses_mustache( $markup ) { function amp_add_post_embed_js() { ?> removeAttribute( 'style' ); + + // @todo Top-navigation doesn't work because linkClickHandler() prevents it. See . + $iframe->setAttribute( 'sandbox', strval( $iframe->getAttribute( 'sandbox' ) ) . ' allow-scripts allow-same-origin allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation' ); + // Note we have to exclude the blockquote because wpautop() does not like it. $link = $dom->getElementsByTagName( 'a' )->item( 0 ); $link->setAttribute( 'placeholder', '' ); @@ -62,7 +67,9 @@ public function filter_embed_oembed_html( $cache, $url, $attr ) { } unset( $attributes['data-secret'] ); - return AMP_HTML_Utils::build_tag( + // @todo Try srcdoc + $amp_iframe = AMP_DOM_Utils::create_node( + $dom, 'amp-iframe', array_merge( $attributes, @@ -70,12 +77,21 @@ public function filter_embed_oembed_html( $cache, $url, $attr ) { 'src' => strtok( $attributes['src'], '#' ), // So that `#amp=1` can be added. 'layout' => 'responsive', 'resizable' => '', - 'sandbox' => 'allow-scripts allow-top-navigation-by-user-activation', // @todo Top-navigation doesn't work because linkClickHandler() prevents it. See . - ) - ), - $dom->saveHTML( $link ) . ' ' . esc_html__( 'Read more', 'amp' ) . '' + ) ); + + $link->setAttribute( 'fallback', '' ); + $amp_iframe->appendChild( $link->parentNode->removeChild( $link ) ); + + $overflow = $dom->createElement( 'span' ); + $overflow->setAttribute( 'role', 'button' ); + $overflow->setAttribute( 'tabindex', '0' ); + $overflow->appendChild( $dom->createTextNode( 'More' ) ); + $overflow->setAttribute( 'overflow', '' ); + $amp_iframe->appendChild( $overflow ); + + return $dom->saveHTML( $amp_iframe ); } }