Unwrap all embeds with paragraph tags #4650

pierlon · 2020-05-04T17:01:04Z

Summary

There are inconsistencies with some embeds being wrapped with a <p> tag, and some not. We should strive towards having a uniform markup across all embeds.

Fixes #4450.
Fixes #4697.
Fixes #4754.
Fixes #4757.

Embeds to be unwrapped:

Checklist

My pull request is addressing an open issue (please create one otherwise).
My code is tested and passes existing tests.
My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

Addresses issue #4663

westonruter

Sorry for the delay in reviewing!

includes/embeds/class-amp-base-embed-handler.php

includes/embeds/class-amp-dailymotion-embed-handler.php

includes/embeds/class-amp-gfycat-embed-handler.php

westonruter · 2020-05-12T06:15:38Z

includes/embeds/class-amp-wordpress-tv-embed-handler.php

+	private function sanitize_raw_embed( DOMElement $iframe_node ) {
+		$next_sibling = $iframe_node->nextSibling;
+
+		if ( $next_sibling && 'script' === $next_sibling->nodeName ) {


Should this verify the script is the expected one? Namely, one with the src of https://videopress.com/videopress-iframe.js?

Come to mention it, what does this script do? It appears to be handling resizing. Is resizing something that we're missing? Or is resizing not needed in an AMP context? If it is, we should contact WordPress.com about emitting the AMP resizing messages.

westonruter · 2020-05-12T06:18:06Z

includes/embeds/class-amp-youtube-embed-handler.php

+			'width'        => $this->args['width'],
+			'height'       => $this->args['height'],


Note the width/height are overridden below if defined on the iframe.

includes/utils/class-amp-dom-utils.php

includes/embeds/class-amp-scribd-embed-handler.php

includes/embeds/class-amp-base-embed-handler.php

schlessera

Before you going, I suggest refactoring the code to put more recurring logic into the base embed handler.

Basically, what this does is provide more of "Template Method Pattern" approach to dealing with embeds, where the base embed handler lays down a framework of how to deal with a typical embed. The individual embeds can still override any step that doesn't directly fit within the general framework, but overall, there'll be less code, needing less testing, as a lot of them will be perfectly happy with this default framework if it is well chosen.

So, if you look at my comments, I'd suggest using sanitize_raw_embeds() as one of the steps in this template, with its default implementation (using is_raw_embed() and sanitize_raw_embed(), but minus the hard-coded strings) just being implemented once within the base embed handler.

includes/embeds/class-amp-dailymotion-embed-handler.php

westonruter · 2020-05-12T22:05:23Z

includes/embeds/class-amp-instagram-embed-handler.php

@@ -190,6 +117,22 @@ private function create_amp_instagram_and_replace_node( $dom, $node ) {
 		$this->did_convert_elements = true;


As uncovered in https://github.com/rtCamp/themes/pull/3/files#r423249922, it may make sense in this create_amp_instagram_and_replace_node() method to preserve some inline styles from the $node to copy onto $new_node. In particular, border-radius: 3px; border: 1px solid rgb(219, 219, 219);.

Nevertheless, this is is probably not something we should be concerned with. In fact, it's probably actually an AMP issue where amp-instagram should be applying those styles. So nevermind!

# Conflicts: # tests/php/test-amp-dailymotion-embed-handler.php # tests/php/test-amp-instagram-embed-handler.php # tests/php/test-amp-pinterest-embed-handler.php # tests/php/test-amp-scribd-embed-handler.php # tests/php/test-amp-soundcloud-embed-handler.php # tests/php/test-amp-vimeo-embed-handler.php # tests/php/test-amp-vine-embed-handler.php # tests/php/test-class-amp-gfycat-embed-handler.php # tests/php/test-class-amp-hulu-embed-handler.php # tests/php/test-class-amp-imgur-embed-handler.php # tests/php/test-class-amp-youtube-embed-handler.php

# Conflicts: # tests/php/test-amp-dailymotion-embed-handler.php # tests/php/test-amp-instagram-embed-handler.php # tests/php/test-class-amp-imgur-embed-handler.php

pierlon · 2020-06-25T18:55:26Z

Marking this as ready for review although one of the tests is failing.

github-actions · 2020-06-25T18:59:31Z

Plugin builds for 0860f48 are ready 🛎️!

Download development build
Download production build

…wrapped-embeds * 'develop' of github.com:ampproject/amp-wp: Fix PHPCS issues Use SVG variant of `yes-alt` Dashicon Disable filtering of services by default Add additional tests for ServiceBasedPlugin Add test to verify that filtering is disabled by default

westonruter

Good to see much of the duplicated code being factored away.

There are a couple areas that need to be addressed before this is ready:

It is relatively common for developers to create their own embed handlers, slightly less common I'd say to creating custom sanitizers. Sanitizers and embed handlers are two key ways the plugin is extended. Therefore, it is critical that backwards-compatibility be maintained for existing embed handlers (and sanitizers).

Additionally, it is important that any APIs introduced on the base method be ergonomic for developers to use when they extend the embed base handler. For example, some of the methods take a lot of positional parameters which make it hard to read.

westonruter · 2020-06-25T23:33:44Z

includes/class-amp-theme-support.php

@@ -1179,8 +1180,9 @@ public static function register_content_embed_handlers() {
 				);
 				continue;
 			}
-
-			$embed_handler->register_embed();
+			if ( $embed_handler instanceof Registerable ) {


Will this have a backwards-incompatibility problem? If someone has existing subclasses of AMP_Base_Embed_Handler with register_embed defined, should it not do something like this:

Suggested change

if ( $embed_handler instanceof Registerable ) {

if ( $embed_handler instanceof Registerable || method_exists( $embed_handler, 'register_embed' ) ) {

westonruter · 2020-06-25T23:36:13Z

includes/embeds/class-amp-base-embed-handler.php

@@ -40,14 +42,18 @@ abstract class AMP_Base_Embed_Handler {
 	protected $did_convert_elements = false;


This property can be marked as @deprecated and any usages in the subclasses can be eliminated (all of which are write-only currently), as it is not serving any purpose anymore.

In the past it was used to determine whether or not the AMP component script needed to be added to the page. But this is obsolete.

westonruter · 2020-06-25T23:37:02Z

includes/embeds/class-amp-base-embed-handler.php

 	 */
-	abstract public function unregister_embed();
+	protected $base_embed_url = '';


I don't see this property as being used anywhere. Can it be removed?

westonruter · 2020-06-25T23:48:59Z

includes/embeds/class-amp-base-embed-handler.php

+	 * @return DOMNodeList|null A list of DOMElement nodes, or null if not implemented.
+	 */
+	abstract protected function get_raw_embed_nodes( Document $dom );


If not implemented? Doesn't an abstract method always have to be implemented by a subclass? Shouldn't this method just be changed to be non-abstract and then return null here? Then only the subclassed methods would return DOMNodeList. This would avoid needing to define the method to return null as it stands today for Twitter, Playlist, Gallery, and Blocks.

westonruter · 2020-06-25T23:49:30Z

includes/embeds/class-amp-core-block-handler.php

+	/**
+	 * Get all raw embeds from the DOM.
+	 *
+	 * @param Document $dom Document.
+	 * @return DOMNodeList|null A list of DOMElement nodes, or null if not implemented.
+	 */
+	protected function get_raw_embed_nodes( Document $dom ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		return null;
+	}


I just making this the method in the base class.

westonruter · 2020-06-26T00:40:40Z

includes/embeds/class-amp-playlist-embed-handler.php

+	protected function get_raw_embed_nodes( Document $dom ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		return null;
+	}
+
+	/**
+	 * Make embed AMP compatible.
+	 *
+	 * @param DOMElement $node DOM element.
+	 */
+	protected function sanitize_raw_embed( DOMElement $node ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+	}


See comments in base class about moving these methods there.

westonruter · 2020-06-26T00:42:48Z

includes/embeds/class-amp-reddit-embed-handler.php

-
-		if ( empty( $args['url'] ) ) {
-			return '';
+	private function get_first_child_element( DOMElement $node ) {


This seems useful to be in the base class as a protected method. It could be called get_first_element_child() to reflect the DOM: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/firstElementChild

westonruter · 2020-06-26T00:45:25Z

includes/embeds/class-amp-tumblr-embed-handler.php

+			]
+		);
+
+		$overflow_node->textContent = esc_html__( 'See more', 'amp' );


No need to escape when manipulating the DOM:

Suggested change

$overflow_node->textContent = esc_html__( 'See more', 'amp' );

$overflow_node->textContent = __( 'See more', 'amp' );

westonruter · 2020-06-26T00:45:34Z

includes/embeds/class-amp-tumblr-embed-handler.php

+				'overflow'   => '',
+				'tabindex'   => 0,
+				'role'       => 'button',
+				'aria-label' => esc_attr__( 'See more', 'amp' ),


No need to escape when manipulating the DOM:

Suggested change

'aria-label' => esc_attr__( 'See more', 'amp' ),

'aria-label' => __( 'See more', 'amp' ),

westonruter · 2020-06-26T00:46:13Z

includes/embeds/class-amp-tumblr-embed-handler.php

+		$amp_node->appendChild( $overflow_node );
+
+		// Append the original link as a placeholder node.
+		if ( $node->firstChild instanceof DOMElement && 'a' === $node->firstChild->nodeName ) {


Perhaps this could make use of get_first_element_child mentioned above.

westonruter · 2020-06-26T00:58:18Z

As discussed over chat, let's pause work on this until after beta1 or else 1.7 worst case. This will allow us to focus on the RME issues.

thelovekesh · 2023-06-15T18:43:11Z

Closing in favor of #7564.
cc @westonruter

pierlon added 3 commits May 4, 2020 12:33

Sanitize DailyMotion embeds

7401840

Sanitize gfycat embeds

3c57f35

Unwrap Instagram embeds

7e1ccf0

googlebot added the cla: yes Signed the Google CLA label May 4, 2020

pierlon marked this pull request as draft May 4, 2020 17:01

pierlon added 2 commits May 4, 2020 17:33

Unwrap Scribd embeds

3bb9d3e

Unwrap SoundCloud embeds

be260f8

pierlon mentioned this pull request May 5, 2020

Twitter raw embeds are not all converted #4653

Closed

pierlon added 6 commits May 7, 2020 23:38

Sanitize Twitter timelines and moments

d7f3421

Addresses issue #4663

Unwrap Vimeo embeds

9c17878

Sanitize YouTube embeds

91cdd3d

Sanitize WordPress TV embeds

ce5ef79

Sanitize Hulu embeds

575f173

Fix lint errors

d789507

pierlon requested review from westonruter and schlessera May 8, 2020 17:12

westonruter requested changes May 12, 2020

View reviewed changes

schlessera requested changes May 12, 2020

View reviewed changes

includes/embeds/class-amp-dailymotion-embed-handler.php Outdated Show resolved Hide resolved

includes/embeds/class-amp-dailymotion-embed-handler.php Outdated Show resolved Hide resolved

includes/embeds/class-amp-dailymotion-embed-handler.php Outdated Show resolved Hide resolved

westonruter reviewed May 12, 2020

View reviewed changes

pierlon mentioned this pull request May 13, 2020

Imgur post embed gives 404 error #4697

Closed

pierlon added 9 commits May 15, 2020 23:38

Merge branch 'develop' into fix/4450-wrapped-embeds

2ee90b4

Make child element count more robust

bd606bf

Extract base embed URLs as class constants

8e492b2

Get dimensions from iframe if available

3f4f9ae

Refactor logic for removing script sibling

085d1cc

Simplify logic for retrieving embed IDs

050b9e7

Fix tests

6893a47

Implement the Template Method design pattern

34ca29c

Sanitize Imgur embeds

c955f45

pierlon mentioned this pull request May 21, 2020

Extend WordPress.tv embed handler to also handle VideoPress #4755

Merged

3 tasks

pierlon added 9 commits June 21, 2020 19:47

Rename whitelist_sanitizer to validating_sanitizer

beadf51

Mark Pinterest and Vine embed handlers as registerable

b0157a1

Add oEmbed provider URLs for embeds not supported in WP 5.1

b3a2c1c

Fix YouTube embed test

dfaf3e5

Merge branch 'develop' into fix/4450-wrapped-embeds

244b53d

# Conflicts: # tests/php/test-amp-dailymotion-embed-handler.php # tests/php/test-amp-instagram-embed-handler.php # tests/php/test-class-amp-imgur-embed-handler.php

Remove unused vars

a857f25

Fix tests failures related to Gutenberg

434660a

Add oEmbed provider URL for Crowdsignal surveys on WP 5.2.

986c036

pierlon marked this pull request as ready for review June 25, 2020 18:55

westonruter added 2 commits June 25, 2020 16:07

Update phpdoc to reflect where methods do not return null

0860f48

westonruter requested changes Jun 26, 2020

View reviewed changes

westonruter added this to the v1.6 milestone Jun 26, 2020

westonruter modified the milestones: v1.6, v1.7 Jun 26, 2020

schlessera added the WS:Core Work stream for Plugin core label Aug 18, 2020

westonruter modified the milestones: v2.1, v2.2 Feb 11, 2021

pierlon mentioned this pull request Jun 29, 2021

Preserve seek time and other parameters to amp-youtube from YouTube embeds #6423

Merged

2 tasks

westonruter modified the milestones: v2.2, v2.3 Nov 30, 2021

westonruter modified the milestones: v2.3, v2.4 Dec 23, 2021

westonruter removed this from the v2.4 milestone Jul 28, 2022

thelovekesh closed this Jun 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unwrap all embeds with paragraph tags #4650

Unwrap all embeds with paragraph tags #4650

pierlon commented May 4, 2020 •

edited

westonruter left a comment

westonruter May 12, 2020

westonruter May 12, 2020

westonruter May 12, 2020

schlessera left a comment

westonruter May 12, 2020

pierlon commented Jun 25, 2020 •

edited

github-actions bot commented Jun 25, 2020 •

edited

westonruter left a comment

westonruter Jun 25, 2020

westonruter Jun 25, 2020

westonruter Jun 25, 2020

westonruter Jun 25, 2020

westonruter Jun 25, 2020

westonruter Jun 26, 2020

westonruter Jun 26, 2020

westonruter Jun 26, 2020

westonruter Jun 26, 2020

westonruter Jun 26, 2020

westonruter commented Jun 26, 2020

thelovekesh commented Jun 15, 2023

		'width' => $this->args['width'],
		'height' => $this->args['height'],

		@@ -190,6 +117,22 @@ private function create_amp_instagram_and_replace_node( $dom, $node ) {
		$this->did_convert_elements = true;

	if ( $embed_handler instanceof Registerable ) {
	if ( $embed_handler instanceof Registerable \|\| method_exists( $embed_handler, 'register_embed' ) ) {

		@@ -40,14 +42,18 @@ abstract class AMP_Base_Embed_Handler {
		protected $did_convert_elements = false;

	$overflow_node->textContent = esc_html__( 'See more', 'amp' );
	$overflow_node->textContent = __( 'See more', 'amp' );

	'aria-label' => esc_attr__( 'See more', 'amp' ),
	'aria-label' => __( 'See more', 'amp' ),

Unwrap all embeds with paragraph tags #4650

Unwrap all embeds with paragraph tags #4650

Conversation

pierlon commented May 4, 2020 • edited

Summary

Embeds to be unwrapped:

Checklist

westonruter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

schlessera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pierlon commented Jun 25, 2020 • edited

github-actions bot commented Jun 25, 2020 • edited

westonruter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Jun 26, 2020

thelovekesh commented Jun 15, 2023

pierlon commented May 4, 2020 •

edited

pierlon commented Jun 25, 2020 •

edited

github-actions bot commented Jun 25, 2020 •

edited