From d12c83357c10eeae36eb070f2f1d48c410f72907 Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Fri, 9 Dec 2016 14:59:31 -0800 Subject: [PATCH 1/8] Add "height-adjust" to responive elements script Because from iframes, like Instagram embeds, have a non-responsive element (header + footer) as well as the responsive part (the image), it would be helpful to be able to specify the two separately. This adds an additional data-element (data-height-adjust) which can be specified on the .shortcake-bakery-responsive element. If this is set, that portion of the height will be considered "static" and will not be recalculated on resize. --- assets/js/shortcake-bakery.js | 4 +++- inc/shortcodes/class-instagram.php | 9 +++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/assets/js/shortcake-bakery.js b/assets/js/shortcake-bakery.js index ac55218..b2948ec 100644 --- a/assets/js/shortcake-bakery.js +++ b/assets/js/shortcake-bakery.js @@ -30,9 +30,11 @@ parentWidth = parent.innerWidth; } + var heightAdj = el.data('height-adjust') ? el.data('height-adjust') : 0; + var trueHeight = el.data('true-height') ? el.data('true-height') : 360; var trueWidth = el.data('true-width') ? el.data('true-width') : 640; - var newHeight = ( parentWidth / trueWidth ) * trueHeight; + var newHeight = ( ( parentWidth / trueWidth ) * trueHeight ) + heightAdj; $(this).css('height', newHeight + 'px' ).css('width', parentWidth + 'px'); $(this).trigger('shortcake-bakery-responsive-resize'); }); diff --git a/inc/shortcodes/class-instagram.php b/inc/shortcodes/class-instagram.php index 320f655..34f397a 100644 --- a/inc/shortcodes/class-instagram.php +++ b/inc/shortcodes/class-instagram.php @@ -67,8 +67,13 @@ public static function callback( $attrs, $content = '' ) { return ''; } - return sprintf( '', - esc_url( sprintf( 'https://instagram.com/p/%s/embed/', $photo_id ) ) + $image_ratio = ( ! empty( $attrs['ratio'] ) ) ? floatval( $attrs['ratio'] ) : 100.0; + + $height = round( 612 * ( $image_ratio / 100 ) ); + + return sprintf( '', + esc_url( sprintf( 'https://instagram.com/p/%s/embed/', $photo_id ) ), + esc_attr( $height ) ); } From c8cb864c4870c99aabd4223a8543f6d9ea0248a6 Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Fri, 9 Dec 2016 15:09:45 -0800 Subject: [PATCH 2/8] Add test for reversal of non-square Instagram embeds --- tests/test-instagram-shortcode.php | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/tests/test-instagram-shortcode.php b/tests/test-instagram-shortcode.php index 3051a84..1ccfc24 100644 --- a/tests/test-instagram-shortcode.php +++ b/tests/test-instagram-shortcode.php @@ -103,4 +103,27 @@ public function test_embed_reversal_example_without_script() { $transformed_content = str_replace( '\"', '"', $transformed_content ); // Kses slashes the data $this->assertEquals( $expected_content, $transformed_content ); } + + public function test_embed_reversal_with_non_standard_ratio() { + $old_content = <<

A photo posted by 渡辺直美 (@watanabenaomi703) on

+ + + bananas after +EOT; + + $expected_content = <<assertEquals( $expected_content, $transformed_content ); + } } From fdcd31103e238c9e2748fd7d00a261c722e2eae6 Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Fri, 9 Dec 2016 16:05:20 -0800 Subject: [PATCH 3/8] Update height calculations to include height-adjust Try to match the padding from the wrapper div in the initial embed code, and use it to set the "ratio" on the shortcode. Leaves the "ratio" argument out if it's 100%. --- assets/js/shortcake-bakery.js | 8 +++++--- inc/shortcodes/class-instagram.php | 17 ++++++++++++++--- tests/test-instagram-shortcode.php | 8 ++++---- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/assets/js/shortcake-bakery.js b/assets/js/shortcake-bakery.js index b2948ec..ee5f511 100644 --- a/assets/js/shortcake-bakery.js +++ b/assets/js/shortcake-bakery.js @@ -30,11 +30,11 @@ parentWidth = parent.innerWidth; } - var heightAdj = el.data('height-adjust') ? el.data('height-adjust') : 0; + var heightAdjust = el.data('height-adjust') ? el.data('height-adjust') : 0; var trueHeight = el.data('true-height') ? el.data('true-height') : 360; var trueWidth = el.data('true-width') ? el.data('true-width') : 640; - var newHeight = ( ( parentWidth / trueWidth ) * trueHeight ) + heightAdj; + var newHeight = ( ( parentWidth / trueWidth ) * trueHeight ) + heightAdjust; $(this).css('height', newHeight + 'px' ).css('width', parentWidth + 'px'); $(this).trigger('shortcake-bakery-responsive-resize'); }); @@ -48,7 +48,9 @@ if ( el.attr('height') && el.attr('width') && ! el.data('true-width') && ! el.data('true-height') && -1 === el.attr('height').indexOf('%') && -1 === el.attr('width').indexOf('%') ) { - el.data('true-height', el.attr('height')); + + var heightAdjust = el.data('height-adjust') ? el.data('height-adjust') : 0; + el.data('true-height', el.attr('height') - heightAdjust); el.data('true-width', el.attr('width')); } }); diff --git a/inc/shortcodes/class-instagram.php b/inc/shortcodes/class-instagram.php index 34f397a..58e5488 100644 --- a/inc/shortcodes/class-instagram.php +++ b/inc/shortcodes/class-instagram.php @@ -25,12 +25,21 @@ public static function reversal( $content ) { return $content; } - $needle = '#
]+>.+(?=
)\n?(]+src="//platform\.instagram\.com/[^>]+>)?#'; + // Expanation of regex: + // [1] vertical padding value on image div (should be doubled because it's applied to top and bottom + // [2] full match of embed URL + // [3] www or not www + // [4] script tag, if provided + $needle = '#
]+>.+(?=
)\n?(]+src="//platform\.instagram\.com/[^>]+>)?#'; if ( preg_match_all( $needle, $content, $matches ) ) { $replacements = array(); $shortcode_tag = self::get_shortcode_tag(); foreach ( $matches[0] as $key => $value ) { - $replacements[ $value ] = '[' . $shortcode_tag . ' url="' . esc_url_raw( $matches[1][ $key ] ) . '"]'; + + $ratio = round( floatval( $matches[1][ $key ] ) * 2, 4 ); + $replacements[ $value ] = '[' . $shortcode_tag . ' url="' . esc_url_raw( $matches[2][ $key ] ) . '"' . + ( ( 100 != $ratio ) ? ' ratio="' . esc_attr( $ratio ) . '"' : '' ) . + ']'; } $content = self::make_replacements_to_content( $content, $replacements ); } @@ -69,7 +78,9 @@ public static function callback( $attrs, $content = '' ) { $image_ratio = ( ! empty( $attrs['ratio'] ) ) ? floatval( $attrs['ratio'] ) : 100.0; - $height = round( 612 * ( $image_ratio / 100 ) ); + // Instagram embeds are a 48px header and footer, plus the responsive image section + // (the embed has a 8px negative bottom margin, so we account for that here as well.) + $height = 48 + round( 612 * ( $image_ratio / 100 ) ) + 48; return sprintf( '', esc_url( sprintf( 'https://instagram.com/p/%s/embed/', $photo_id ) ), diff --git a/tests/test-instagram-shortcode.php b/tests/test-instagram-shortcode.php index 1ccfc24..623eb00 100644 --- a/tests/test-instagram-shortcode.php +++ b/tests/test-instagram-shortcode.php @@ -5,13 +5,13 @@ class Test_Instagram_Shortcode extends WP_UnitTestCase { public function test_post_display() { $post_id = $this->factory->post->create( array( 'post_content' => '[instagram url="https://instagram.com/p/3QcZmWP5To/"]' ) ); $post = get_post( $post_id ); - $this->assertContains( '', apply_filters( 'the_content', $post->post_content ) ); + $this->assertContains( '', apply_filters( 'the_content', $post->post_content ) ); } public function test_post_display_with_www() { $post_id = $this->factory->post->create( array( 'post_content' => '[instagram url="https://www.instagram.com/p/3QcZmWP5To/"]' ) ); $post = get_post( $post_id ); - $this->assertContains( '', apply_filters( 'the_content', $post->post_content ) ); + $this->assertContains( '', apply_filters( 'the_content', $post->post_content ) ); } public function test_embed_reversal_v4() { @@ -50,7 +50,7 @@ public function test_embed_reversal_v6() { $expected_content = << +
bananas after From b0bb3aa105cb81e434f20f01cb31668b9018cd3d Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Fri, 9 Dec 2016 16:17:14 -0800 Subject: [PATCH 4/8] Update phpcs to ^2.6 Satisfies minimum requirements for wp-coding-standards @dev-master. --- composer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/composer.json b/composer.json index 4ec213a..de82e1b 100644 --- a/composer.json +++ b/composer.json @@ -7,7 +7,7 @@ } ], "require-dev": { - "squizlabs/php_codesniffer": "2.3.4", + "squizlabs/php_codesniffer": "^2.6", "wp-coding-standards/wpcs": "dev-master" }, "scripts": { From c744cf546fb70981b21e972b61922a84d0a11ea2 Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Fri, 9 Dec 2016 16:25:13 -0800 Subject: [PATCH 5/8] Add UI field for "Ratio" attribute. --- inc/shortcodes/class-instagram.php | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/inc/shortcodes/class-instagram.php b/inc/shortcodes/class-instagram.php index 58e5488..0095494 100644 --- a/inc/shortcodes/class-instagram.php +++ b/inc/shortcodes/class-instagram.php @@ -15,6 +15,12 @@ public static function get_shortcode_ui_args() { 'type' => 'text', 'description' => esc_html__( 'URL to an Instagram', 'shortcake-bakery' ), ), + array( + 'label' => esc_html__( 'Ratio', 'shortcake-bakery' ), + 'attr' => 'ratio', + 'type' => 'text', + 'description' => esc_html__( 'Ratio of the image\'s height to width as a percentage. (For example, the ratio of a 16:9 image would be 56.25).', 'shortcake-bakery' ), + ), ), ); } From 2e079ac9d4cea8afb91501c1882fb21f439a7e8c Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Fri, 9 Dec 2016 17:12:59 -0800 Subject: [PATCH 6/8] Fix some phpcs issues preventing build from passing Mostly whitespace cleanup and the like... --- inc/shortcodes/class-giphy.php | 2 +- inc/shortcodes/class-infogram.php | 3 +-- inc/shortcodes/class-instagram.php | 15 +++++++++------ inc/shortcodes/class-shortcode.php | 10 +++++----- inc/shortcodes/class-soundcloud.php | 2 +- inc/shortcodes/class-vine.php | 2 +- 6 files changed, 18 insertions(+), 16 deletions(-) diff --git a/inc/shortcodes/class-giphy.php b/inc/shortcodes/class-giphy.php index 1ecc5ca..d8e435c 100644 --- a/inc/shortcodes/class-giphy.php +++ b/inc/shortcodes/class-giphy.php @@ -59,7 +59,7 @@ public static function reversal( $content ) { $width_and_or_height .= ' ' . sanitize_key( $attr ) . '="' . (int) $iframe->attrs[ $attr ] . '"'; } } - $replacement = '[' . self::get_shortcode_tag() . ' url="' . esc_url_raw( 'http://giphy.com/gifs/' . $embed_id ) . '"' . $width_and_or_height . ']'; + $replacement = '[' . self::get_shortcode_tag() . ' url="' . esc_url_raw( 'http://giphy.com/gifs/' . $embed_id ) . '"' . $width_and_or_height . ']'; $replacements[ $replacement_key ] = $replacement; } $content = self::make_replacements_to_content( $content, $replacements ); diff --git a/inc/shortcodes/class-infogram.php b/inc/shortcodes/class-infogram.php index dd9943f..9b82abd 100644 --- a/inc/shortcodes/class-infogram.php +++ b/inc/shortcodes/class-infogram.php @@ -2,8 +2,7 @@ namespace Shortcake_Bakery\Shortcodes; -class Infogram extends Shortcode -{ +class Infogram extends Shortcode { /** * Turn embed code into a proper shortcode diff --git a/inc/shortcodes/class-instagram.php b/inc/shortcodes/class-instagram.php index 0095494..a3dc5ab 100644 --- a/inc/shortcodes/class-instagram.php +++ b/inc/shortcodes/class-instagram.php @@ -31,11 +31,14 @@ public static function reversal( $content ) { return $content; } - // Expanation of regex: - // [1] vertical padding value on image div (should be doubled because it's applied to top and bottom - // [2] full match of embed URL - // [3] www or not www - // [4] script tag, if provided + /** + * Explanation of regex: + * + * [1] vertical padding value on image div (should be doubled because it's applied to top and bottom + * [2] full match of embed URL + * [3] www or not www + * [4] script tag, if provided + */ $needle = '#
]+>.+(?=
)\n?(]+src="//platform\.instagram\.com/[^>]+>)?#'; if ( preg_match_all( $needle, $content, $matches ) ) { $replacements = array(); @@ -44,7 +47,7 @@ public static function reversal( $content ) { $ratio = round( floatval( $matches[1][ $key ] ) * 2, 4 ); $replacements[ $value ] = '[' . $shortcode_tag . ' url="' . esc_url_raw( $matches[2][ $key ] ) . '"' . - ( ( 100 != $ratio ) ? ' ratio="' . esc_attr( $ratio ) . '"' : '' ) . + ( ( 100 !== intval( $ratio ) ) ? ' ratio="' . esc_attr( $ratio ) . '"' : '' ) . ']'; } $content = self::make_replacements_to_content( $content, $replacements ); diff --git a/inc/shortcodes/class-shortcode.php b/inc/shortcodes/class-shortcode.php index 25ea2cc..a2b5083 100644 --- a/inc/shortcodes/class-shortcode.php +++ b/inc/shortcodes/class-shortcode.php @@ -74,7 +74,7 @@ protected static function parse_url( $url, $component = -1 ) { if ( $added_protocol && $ret ) { if ( -1 === $component && isset( $ret['scheme'] ) ) { unset( $ret['scheme'] ); - } else if ( PHP_URL_SCHEME === $component ) { + } elseif ( PHP_URL_SCHEME === $component ) { $ret = ''; } } @@ -149,13 +149,13 @@ protected static function parse_tag_attributes( $text ) { foreach ( $match as $m ) { if ( ! empty( $m[1] ) ) { $atts[ $m[1] ] = stripcslashes( $m[2] ); - } else if ( ! empty( $m[3] ) ) { + } elseif ( ! empty( $m[3] ) ) { $atts[ $m[3] ] = stripcslashes( $m[4] ); - } else if ( ! empty( $m[5] ) ) { + } elseif ( ! empty( $m[5] ) ) { $atts[ $m[5] ] = stripcslashes( $m[6] ); - } else if ( isset( $m[7] ) && strlen( $m[7] ) ) { + } elseif ( isset( $m[7] ) && strlen( $m[7] ) ) { $atts[ $m[7] ] = null; - } else if ( isset( $m[8] ) ) { + } elseif ( isset( $m[8] ) ) { $atts[ $m[8] ] = null; } } diff --git a/inc/shortcodes/class-soundcloud.php b/inc/shortcodes/class-soundcloud.php index d73cfec..4f64ffc 100644 --- a/inc/shortcodes/class-soundcloud.php +++ b/inc/shortcodes/class-soundcloud.php @@ -70,7 +70,7 @@ public static function callback( $attrs, $content = '' ) { } // Use the track URL in the API request. It will be redirected to the proper track ID - $embed_url = 'https://w.soundcloud.com/player/?url=' . urlencode( $attrs['url'] ); + $embed_url = 'https://w.soundcloud.com/player/?url=' . rawurlencode( $attrs['url'] ); $height = 166; if ( ! empty( $attrs['type'] ) && 'visual' === $attrs['type'] ) { $embed_url = add_query_arg( 'visual', 'true', $embed_url ); diff --git a/inc/shortcodes/class-vine.php b/inc/shortcodes/class-vine.php index a486e87..62a0f21 100644 --- a/inc/shortcodes/class-vine.php +++ b/inc/shortcodes/class-vine.php @@ -57,7 +57,7 @@ public static function reversal( $content ) { } else { $autoplay = ''; } - $replacements[ $iframe->original ] = '[' . self::get_shortcode_tag() . ' url="' . esc_url_raw( $replacement_url ) . '" type="' . $type . '"' . $autoplay . ']'; + $replacements[ $iframe->original ] = '[' . self::get_shortcode_tag() . ' url="' . esc_url_raw( $replacement_url ) . '" type="' . $type . '"' . $autoplay . ']'; } $content = self::make_replacements_to_content( $content, $replacements ); } From 2771a8b5421be7cc767d1852c8a89b7a203314b1 Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Tue, 13 Dec 2016 09:46:35 -0800 Subject: [PATCH 7/8] More phpcs fixes, whitespace and indenting... --- inc/shortcodes/class-googledocs.php | 2 +- tests/test-image-comparison.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/inc/shortcodes/class-googledocs.php b/inc/shortcodes/class-googledocs.php index 0e7e410..a10b258 100644 --- a/inc/shortcodes/class-googledocs.php +++ b/inc/shortcodes/class-googledocs.php @@ -232,7 +232,7 @@ public static function callback( $attrs, $content = '' ) { array_keys( $additional_attributes ), function( $attribute_string, $attr_key ) use ( $additional_attributes ) { return $attribute_string . sanitize_key( $attr_key ) . '="' . esc_attr( $additional_attributes[ $attr_key ] ) . '" '; - } ) : '' ) . '>' . + } ) : '' ) . '>' . ( $inner_content ? esc_html( $inner_content ) : '' ) . ''; } diff --git a/tests/test-image-comparison.php b/tests/test-image-comparison.php index 6bb109b..ba753be 100644 --- a/tests/test-image-comparison.php +++ b/tests/test-image-comparison.php @@ -51,7 +51,7 @@ public function test_post_display() { */ private function insert_attachment( $parent_post_id = 0, $image = null, $post_fields = array() ) { - $filename = rand_str().'.jpg'; + $filename = rand_str() . '.jpg'; $contents = rand_str(); if ( $image ) { From 14ce4171e18e089ebffcadadb2c3e068d1c7f878 Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Tue, 13 Dec 2016 10:19:09 -0800 Subject: [PATCH 8/8] More phpcs fixes tfw phpcs has two conflicting rules applied to one line... --- inc/shortcodes/class-googledocs.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/inc/shortcodes/class-googledocs.php b/inc/shortcodes/class-googledocs.php index a10b258..b633d54 100644 --- a/inc/shortcodes/class-googledocs.php +++ b/inc/shortcodes/class-googledocs.php @@ -232,7 +232,8 @@ public static function callback( $attrs, $content = '' ) { array_keys( $additional_attributes ), function( $attribute_string, $attr_key ) use ( $additional_attributes ) { return $attribute_string . sanitize_key( $attr_key ) . '="' . esc_attr( $additional_attributes[ $attr_key ] ) . '" '; - } ) : '' ) . '>' . + } + ) : '' ) . '>' . ( $inner_content ? esc_html( $inner_content ) : '' ) . ''; }