Skip to content

Commit

Permalink
AMP: Render amp-gist from gist shortcode/oEmbed during AMP requests (#…
Browse files Browse the repository at this point in the history 
…10053)

#### Changes proposed in this Pull Request:

* Return `amp-gist` from a `gist` shortcode or oEmbed when in an AMP response.

#### Testing instructions:

1. Install the [AMP plugin](https://github.com/Automattic/amp-wp).
2. Add a `gist` shortcode or gist oEmbed URL to a post. Then view that post in AMP.
3. View the AMP version of the post.

Example content:

```html
oEmbed: Full gist:

https://gist.github.com/sebastianbenz/1d449dee039202d8b7464f1131eae449

oEmbed: Linking to a file via in a Gist:

https://gist.github.com/sebastianbenz/1d449dee039202d8b7464f1131eae449#file-sw-html

oEmbed: Linking to file without username in URL.

https://gist.github.com/1d449dee039202d8b7464f1131eae449#file-sw-html

Example from WordPress.com docs:

[gist https://gist.github.com/2314628 /]

Second example from WordPress.com docs:

[gist]2314628[/gist]
```

Originally proposed in ampproject/amp-wp#375

See also ampproject/amphtml#17738 for details on the `amp-gist`'s `height` attribute.

#### Proposed changelog entry for your changes:

* Add Gist support for AMP responses.
  • Loading branch information
@westonruter @jeherve
westonruter authored and jeherve committed Sep 26, 2018
1 parent 1526b40 commit 45551d8
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 8 deletions.
43 changes: 43 additions & 0 deletions modules/shortcodes/gist.php
View file
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
View file
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
);
}
}

0 comments on commit 45551d8

Please sign in to comment.