Skip to content
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.

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

AMP: Render amp-gist from gist shortcode/oEmbed during AMP requests #10053

Merged
merged 2 commits into from
Sep 26, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
43 changes: 43 additions & 0 deletions modules/shortcodes/gist.php
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,49 @@ function github_gist_shortcode( $atts, $content = '' ) {
return '<!-- Invalid Gist ID -->';
}

if ( Jetpack_AMP_Support::is_amp_request() ) {
/*
* According to <https://www.ampproject.org/docs/reference/components/amp-gist#height-(required)>:
*
* > Note: You must find the height of the gist by inspecting it with your browser (e.g., Chrome Developer Tools).
*
* However, this does not seem to be the case any longer. The actual height of the content does get set in the
* page after loading. So this is just the initial height.
* See <https://github.com/ampproject/amphtml/pull/17738>.
*/
$height = 240;

$parsed_url = wp_parse_url( $id );

// Strip Github user name.
$id = preg_replace( '#^.*/(?=[a-z0-9]+)#', '', $parsed_url['path'] );

$file = null;
if ( ! empty( $parsed_url['query'] ) ) {
$query_args = wp_parse_args( $parsed_url['query'] );
if ( isset( $query_args['file'] ) ) {
$file = $query_args['file'];
}
}
if ( ! $file && ! empty( $parsed_url['fragment'] ) && preg_match( '#^file-(.+)#', $parsed_url['fragment'], $matches ) ) {
$file = $matches[1];

// Make best guess of file for fragment that was slugified.
$file = preg_replace( '/-(\w+)/', '.$1', $file );
}

$amp_tag = sprintf(
'<amp-gist layout="fixed-height" data-gistid="%s" height="%s"',
esc_attr( basename( $id, '.json' ) ),
esc_attr( $height )
);
if ( ! empty( $file ) ) {
$amp_tag .= sprintf( ' data-file="%s"', esc_attr( $file ) );
}
$amp_tag .= '></amp-gist>';
return $amp_tag;
}

wp_enqueue_script(
'jetpack-gist-embed',
Jetpack::get_file_url_for_environment( '_inc/build/shortcodes/js/gist.min.js', 'modules/shortcodes/js/gist.js' ),
Expand Down
65 changes: 57 additions & 8 deletions tests/php/modules/shortcodes/test_class.gist.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@

class WP_Test_Jetpack_Shortcodes_Gist extends WP_UnitTestCase {

/**
* After a test method runs, reset any state in WordPress the test method might have changed.
*/
public function tearDown() {
wp_reset_postdata();
parent::tearDown();
}

/**
* Verify that the shortcode exists.
*
Expand Down Expand Up @@ -38,8 +46,13 @@ public function test_shortcodes_gist() {
public function test_shortcodes_empty_gist() {
$content = '[gist]';

// Test HTML version.
$shortcode_content = do_shortcode( $content );
$this->assertEquals( '<!-- Missing Gist ID -->', $shortcode_content );

// Test AMP version.
add_filter( 'jetpack_is_amp_request', '__return_true' );
$shortcode_content = do_shortcode( $content );
$this->assertEquals( '<!-- Missing Gist ID -->', $shortcode_content );
}

Expand All @@ -54,9 +67,17 @@ public function test_shortcodes_gist_id() {
$gist_id = '57cc50246aab776e110060926a2face2';
$content = '[gist]' . $gist_id . '[/gist]';

// Test HTML version.
$shortcode_content = do_shortcode( $content );

$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $shortcode_content );

// Test AMP version.
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
);
}

/**
Expand All @@ -70,9 +91,17 @@ public function test_shortcodes_gist_full_url() {
$gist_id = '57cc50246aab776e110060926a2face2';
$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 );

// Test AMP version.
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
);
}

/**
Expand All @@ -87,16 +116,26 @@ public function test_shortcodes_gist_oembed_to_embed() {

$gist_id = '57cc50246aab776e110060926a2face2';
$url = 'https://gist.github.com/' . $gist_id;
$post = $this->factory->post->create_and_get( array( 'post_content' => $url ) );
$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();
wp_reset_postdata();

$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json"></div>', $actual );

// Test AMP version.
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
);
}

/**
Expand All @@ -112,15 +151,25 @@ public function test_shortcodes_gist_file_to_embed() {
$gist_id = 'jeherve/57cc50246aab776e110060926a2face2';
$file = 'wp-config-php';
$url = 'https://gist.github.com/' . $gist_id . '#file-' . $file;
$post = $this->factory->post->create_and_get( array( 'post_content' => $url ) );
$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();
wp_reset_postdata();

$this->assertContains( '<div class="gist-oembed" data-gist="' . $gist_id . '.json?file=wp-config.php"></div>', $actual );

// Test AMP version.
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" data-file="wp.config.php"></amp-gist>', basename( $gist_id ) ) ),
$actual
);
}
}