Enable oembeds in short descriptions

assets/css/woocommerce-layout.scss

@@ -342,6 +342,27 @@
 			float: right;
 		}
 	}
+
+	/**
+	 * oEmbeds
+	 */
+	 .woocommerce-oembed {
+	 	position: relative;
+
+	 	&.force-ratio {
+			width: 100%;
+			height: 0;
+
+			embed, iframe, object, video {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+	 	}
+	 }
+
 }
 
 .woocommerce-account {

includes/wc-core-functions.php

@@ -51,6 +51,7 @@ add_filter( 'woocommerce_short_description', 'wpautop' );
 add_filter( 'woocommerce_short_description', 'shortcode_unautop' );
 add_filter( 'woocommerce_short_description', 'prepend_attachment' );
 add_filter( 'woocommerce_short_description', 'do_shortcode', 11 ); // AFTER wpautop()
+add_filter( 'woocommerce_short_description', 'wc_do_oembeds' );
 
 /**
  * Define a constant if it is not already defined.

includes/wc-formatting-functions.php

@@ -1041,3 +1041,52 @@ function wc_format_datetime( $date, $format = '' ) {
 	}
 	return $date->date_i18n( $format );
 }
+
+/**
+ * Process oEmbeds.
+ *
+ * @since  3.0.0
+ * @param string $content
+ * @return string
+ */
+function wc_do_oembeds( $content ) {
+	global $wp_embed;
+
+	$layout_css_enqueued = wp_style_is( 'woocommerce-layout', 'enqueued' );
+
+	if ( $layout_css_enqueued ) {
+		add_filter( 'embed_oembed_html', 'wc_wrap_oembed' );
+	}
+
+	$content = $wp_embed->autoembed( $content );
+
+	if ( $layout_css_enqueued ) {
+		remove_filter( 'embed_oembed_html', 'wc_wrap_oembed' );
+	}
+
+	return $content;
+}
+
+/**
+ * Wrap an oEmbed with a container that keeps the ratio in narrow containers.
+ *
+ * @since  3.0.0
+ * @param string $html oEmbed html (generally an iframe)
+ * @return string
+ */
+function wc_wrap_oembed( $html ) {
+	$classes = array( 'woocommerce-oembed' );
+	$width_regex = '/width="([0-9]+)/';
+	$height_regex = '/height="([0-9]+)/';
+	$width = preg_match( $width_regex, $html, $matches ) ? (int) $matches[1] : 0;
+	$height = preg_match( $height_regex, $html, $matches ) ? (int) $matches[1] : 0;
+	$padding_bottom_percent = ( $width && $height && $width > $height ) ? round( $height / $width, 2 ) * 100 : 0;
+
+	if ( $padding_bottom_percent ) {
+		$classes[] = 'force-ratio';
+	}
+
+	$html = '<div class="' . implode( ' ', $classes ) . '" style="padding-bottom: ' . $padding_bottom_percent . '%">' . $html . '</div>';
+
+	return $html;
+}

tests/unit-tests/formatting/functions.php

@@ -644,4 +644,21 @@ class WC_Tests_Formatting_Functions extends WC_Unit_Test_Case {
 		$this->assertEquals( 'st.',    wc_trim_string( 'string', 3, '.' ) );
 		$this->assertEquals( 'string¥', wc_trim_string( 'string¥', 7, '' ) );
 	}
+
+	/**
+	 * Test wc_wrap_oembed().
+	 *
+	 * @since 3.0.0
+	 */
+	public function test_wc_wrap_oembed() {
+		$ratio_html = '<iframe width="625" height="352" src="https://www.youtube.com/embed/1KahlicghaE?feature=oembed" frameborder="0" allowfullscreen></iframe>';
+		$natural_html = '<blockquote class="twitter-tweet" data-width="550"><p lang="en" dir="ltr">Apple Pay is now available for <a href="https://twitter.com/hashtag/WooCommerce?src=hash">#WooCommerce</a>. Quicker checkouts for your<br>customers, better conversion rates for you: <a href="https://t.co/89zhGGZlhS">https://t.co/89zhGGZlhS</a> <a href="https://t.co/oFh11vQsAJ">pic.twitter.com/oFh11vQsAJ</a></p>&mdash; WooCommerce (@WooCommerce) <a href="https://twitter.com/WooCommerce/status/842406075374698497">March 16, 2017</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>';
+		$ratio_html_expected = '<div class="woocommerce-oembed force-ratio" style="padding-bottom: 56%"><iframe width="625" height="352" src="https://www.youtube.com/embed/1KahlicghaE?feature=oembed" frameborder="0" allowfullscreen></iframe></div>';
+
+		$ratio_wrapped = wc_wrap_oembed( $ratio_html );
+		$natural_wrapped = wc_wrap_oembed( $natural_html );
+
+		$this->assertEquals( $ratio_html_expected, $ratio_wrapped );
+		$this->assertFalse( strpos( $natural_wrapped, 'force-ratio' ) );
+	}
 }