Skip to content

Handles custom tab sizes for gist embeds and shortcodes #13807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 24, 2019
Merged

Handles custom tab sizes for gist embeds and shortcodes #13807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2ab9cd1
[not verified] Handles custom tab sizes for gist embeds and shortcodes
ChaosExAnima Oct 22, 2019
55d9440
Makes tab size default consistent
ChaosExAnima Oct 23, 2019
4ca5709
Fixes tests to no longer fail
ChaosExAnima Oct 23, 2019
f36a598
[not verified] Fixes incorrect test and slash trimming method.
ChaosExAnima Oct 23, 2019
217bdfa
[not verified] Ensures default tab size is set if function exits early
ChaosExAnima Oct 23, 2019
4de9a1d
[not verified] Adds tests to cover tab size functionality
ChaosExAnima Oct 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 29 additions & 6 deletions modules/shortcodes/gist.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ function jetpack_gist_get_shortcode_id( $gist = '' ) {
$gist_info = array(
'id' => '',
'file' => '',
'ts' => 8,
);
// Simple shortcode, with just an ID.
if ( ctype_alnum( $gist ) ) {
Expand All @@ -76,6 +77,7 @@ function jetpack_gist_get_shortcode_id( $gist = '' ) {
return array(
'id' => '',
'file' => '',
'ts' => 8,
);
}

Expand All @@ -86,10 +88,19 @@ function jetpack_gist_get_shortcode_id( $gist = '' ) {

// Keep the unique identifier without any leading or trailing slashes.
if ( ! empty( $parsed_url['path'] ) ) {
$gist_info['id'] = preg_replace( '/^\/([^\.]+)\./', '$1', $parsed_url['path'] );
$gist_info['id'] = trim( $parsed_url['path'], '/' );
// Overwrite $gist with our identifier to clean it up below.
$gist = $gist_info['id'];
}

// Parse the query args to obtain the tab spacing.
if ( ! empty( $parsed_url['query'] ) ) {
$query_args = array();
wp_parse_str( $parsed_url['query'], $query_args );
if ( ! empty( $query_args['ts'] ) ) {
$gist_info['ts'] = absint( $query_args['ts'] );
}
}
}

// Not a URL nor an ID? Look for "username/id", "/username/id", or "id", and only keep the ID.
Expand Down Expand Up @@ -156,6 +167,12 @@ function github_gist_shortcode( $atts, $content = '' ) {
$file = rawurlencode( $file );
}

// Set the tab size, allowing attributes to override the query string.
$tab_size = $gist_info['ts'];
if ( ! empty( $atts['ts'] ) ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I decided to allow the attributes to override the query string to allow for theme filtering via shortcode_atts_{$shortcode} and similar.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add some default attributes in shortcode_atts at the top of github_gist_shortcode to allow for this to happen?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code already sets the defaults in jetpack_gist_get_shortcode_id. Do you feel that it needs to have that set additionally?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do indeed have defaults but we do not have the shortcode_atts function that would make the shortcode_atts_gist filter you mentioned above available, iirc. Maybe we could add that function here, to make the filter available?

Something like this?

jetpack/modules/shortcodes/recipe.php

Line 175 in 89a9af9

$atts = shortcode_atts(

That's not necessarily a blocker here. 👍

$tab_size = absint( $atts['ts'] );
}

if (
class_exists( 'Jetpack_AMP_Support' )
&& Jetpack_AMP_Support::is_amp_request()
Expand Down Expand Up @@ -195,7 +212,11 @@ class_exists( 'Jetpack_AMP_Support' )
);

// inline style to prevent the bottom margin to the embed that themes like TwentyTen, et al., add to tables.
$return = '<style>.gist table { margin-bottom: 0; }</style><div class="gist-oembed" data-gist="' . esc_attr( $id ) . '"></div>';
$return = sprintf(
'<style>.gist table { margin-bottom: 0; }</style><div class="gist-oembed" data-gist="%1$s" data-ts="%2$d"></div>',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noting that we embed this multiple times. May be a better way to do this.

esc_attr( $id ),
absint( $tab_size )
);

if (
// No need to check for a nonce here, that's already handled by Core further up.
Expand All @@ -206,7 +227,7 @@ class_exists( 'Jetpack_AMP_Support' )
&& 'parse-embed' === $_POST['action']
// phpcs:enable WordPress.Security.NonceVerification.Missing
) {
return github_gist_simple_embed( $id );
return github_gist_simple_embed( $id, $tab_size );
}

return $return;
Expand All @@ -218,9 +239,11 @@ class_exists( 'Jetpack_AMP_Support' )
*
* @since 3.9.0
*
* @param string $id The ID of the gist.
* @param string $id The ID of the gist.
* @param int $tab_size The tab size of the gist.
* @return string The script tag of the gist.
*/
function github_gist_simple_embed( $id ) {
function github_gist_simple_embed( $id, $tab_size = 8 ) {
$id = str_replace( 'json', 'js', $id );
return '<script src="' . esc_url( "https://gist.github.com/$id" ) . '"></script>'; // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
return '<script src="' . esc_url( "https://gist.github.com/$id?ts=$tab_size" ) . '"></script>'; // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
}
9 changes: 7 additions & 2 deletions modules/shortcodes/js/gist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@
var gistStylesheetLoaded = false,
gistEmbed = function() {
$( '.gist-oembed' ).each( function( i, el ) {
var url = 'https://gist.github.com/' + $( el ).data( 'gist' );
var url = 'https://gist.github.com/' + $( el ).data( 'gist' ),
ts = Number.parseInt( $( el ).data( 'ts' ), 10 );

$.ajax( {
url: url,
dataType: 'jsonp',
} ).done( function( response ) {
$( el ).replaceWith( response.div );
if ( ts && 8 !== ts ) {
$( el ).replaceWith( $( response.div ).css( 'tab-size', ts.toString() ) );
} else {
$( el ).replaceWith( response.div );
}

if ( ! gistStylesheetLoaded ) {
var stylesheet =
Expand Down
162 changes: 146 additions & 16 deletions tests/php/modules/shortcodes/test-class.gist.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ public function test_shortcodes_gist_public_id_in_content() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -113,7 +113,7 @@ public function test_shortcodes_gist_public_id() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -137,7 +137,7 @@ public function test_shortcodes_gist_private_id_in_content() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -161,7 +161,7 @@ public function test_shortcodes_gist_private_id() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -185,7 +185,7 @@ public function test_shortcodes_gist_public_id_with_username() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -209,7 +209,7 @@ public function test_shortcodes_gist_private_id_with_username() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand Down Expand Up @@ -241,7 +241,7 @@ public function test_shortcodes_gist_no_username_direct_file() {
);
// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $expected_gist_id . '"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $expected_gist_id . '" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand Down Expand Up @@ -278,7 +278,7 @@ public function test_shortcodes_gist_username_direct_file() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $expected_gist_id . '"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $expected_gist_id . '" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand Down Expand Up @@ -343,11 +343,11 @@ public function test_shortcodes_gist_invalid_url() {
*/
public function test_shortcodes_gist_public_full_url() {
$gist_id = '57cc50246aab776e110060926a2face2';
$content = '[gist https://gist.github.com/' . $gist_id . ' /]';
$content = '[gist https://gist.github.com/' . $gist_id . '/ ]';

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -371,7 +371,7 @@ public function test_shortcodes_gist_public_full_url_in_content() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -391,11 +391,11 @@ public function test_shortcodes_gist_public_full_url_in_content() {
*/
public function test_shortcodes_gist_private_full_url() {
$gist_id = 'xknown/fc5891af153e2cf365c9';
$content = '[gist https://gist.github.com/' . $gist_id . ' /]';
$content = '[gist https://gist.github.com/' . $gist_id . '/ ]';

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -419,7 +419,7 @@ public function test_shortcodes_gist_private_full_url_in_content() {

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json"></div>', $shortcode_content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json" data-ts="8"></div>', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand Down Expand Up @@ -451,7 +451,7 @@ public function test_shortcodes_gist_oembed_to_embed() {
ob_start();
the_content();
$actual = ob_get_clean();
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $actual );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="8"></div>', $actual );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand Down Expand Up @@ -486,7 +486,7 @@ public function test_shortcodes_gist_file_to_embed() {
ob_start();
the_content();
$actual = ob_get_clean();
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json?file=wp-config.php"></div>', $actual );
$this->assertContains( '<div class="gist-oembed" data-gist="' . basename( $gist_id ) . '.json?file=wp-config.php" data-ts="8"></div>', $actual );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
Expand All @@ -498,4 +498,134 @@ public function test_shortcodes_gist_file_to_embed() {
$actual
);
}

/**
* Verify that gist URLs in shortcode preserves tab spacing.
*
* @covers ::github_gist_shortcode
*
* @since 7.9.0
*/
public function test_shortcodes_gist_with_tab_size() {
$gist_id = '57cc50246aab776e110060926a2face2';
$content = '[gist https://gist.github.com/' . $gist_id . '/?ts=4]';

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="4"></div>', $shortcode_content );

// Test AMP version *lacks* tab size.
add_filter( 'jetpack_is_amp_request', '__return_true' );
$shortcode_content = do_shortcode( $content );
$this->assertEquals(
sprintf( '<amp-gist layout="fixed-height" data-gistid="%s" height="240"></amp-gist>', basename( $gist_id ) ),
$shortcode_content
);
}

/**
* Verify that gist URLs in shortcode content preserves tab spacing.
*
* @covers ::github_gist_shortcode
*
* @since 7.9.0
*/
public function test_shortcodes_gist_full_url_with_tab_size_in_content() {
$gist_id = '57cc50246aab776e110060926a2face2';
$content = '[gist]https://gist.github.com/' . $gist_id . '/?ts=4[/gist]';

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="4"></div>', $shortcode_content );

// Test AMP version *lacks* tab size.
add_filter( 'jetpack_is_amp_request', '__return_true' );
$shortcode_content = do_shortcode( $content );
$this->assertEquals(
sprintf( '<amp-gist layout="fixed-height" data-gistid="%s" height="240"></amp-gist>', basename( $gist_id ) ),
$shortcode_content
);
}

/**
* Verify that gist URLs in shortcode allows tab size as an attribute.
*
* @covers ::github_gist_shortcode
*
* @since 7.9.0
*/
public function test_shortcodes_gist_with_tab_size_in_attributes() {
$gist_id = '57cc50246aab776e110060926a2face2';
$content = '[gist https://gist.github.com/' . $gist_id . '/?ts=2 ts=4]';

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="4"></div>', $shortcode_content );

// Test AMP version *lacks* tab size.
add_filter( 'jetpack_is_amp_request', '__return_true' );
$shortcode_content = do_shortcode( $content );
$this->assertEquals(
sprintf( '<amp-gist layout="fixed-height" data-gistid="%s" height="240"></amp-gist>', basename( $gist_id ) ),
$shortcode_content
);
}

/**
* Verify that gist URLs in shortcode has their tab size overridden by attributes.
*
* @covers ::github_gist_shortcode
*
* @since 7.9.0
*/
public function test_shortcodes_gist_with_tab_size_in_attributes_override() {
$gist_id = '57cc50246aab776e110060926a2face2';
$content = '[gist ' . $gist_id . ' ts=4]';

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="4"></div>', $shortcode_content );

// Test AMP version *lacks* tab size.
add_filter( 'jetpack_is_amp_request', '__return_true' );
$shortcode_content = do_shortcode( $content );
$this->assertEquals(
sprintf( '<amp-gist layout="fixed-height" data-gistid="%s" height="240"></amp-gist>', basename( $gist_id ) ),
$shortcode_content
);
}

/**
* Verify that content with a full Gist URL on its own line preserves tab spacing.
*
* @covers ::github_gist_shortcode
*
* @since 7.9.0
*/
public function test_shortcodes_gist_oembed_with_tab_size() {
global $post;

$gist_id = '57cc50246aab776e110060926a2face2';
$url = 'https://gist.github.com/' . $gist_id . '/?ts=4';
$post = $this->factory()->post->create_and_get( array( 'post_content' => $url ) );

do_action( 'init' );
setup_postdata( $post );

// Test HTML version.
ob_start();
the_content();
$actual = ob_get_clean();
$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json" data-ts="4"></div>', $actual );

// Test AMP version *lacks* tab size.
add_filter( 'jetpack_is_amp_request', '__return_true' );
ob_start();
the_content();
$actual = ob_get_clean();
$this->assertEquals(
wpautop( sprintf( '<amp-gist layout="fixed-height" data-gistid="%s" height="240"></amp-gist>', basename( $gist_id ) ) ),
$actual
);
}
}