Skip to content

Add AMP support for GIF block#11318

Merged
jeherve merged 6 commits intoAutomattic:masterfrom
westonruter:add/amp-gif-block-support
May 20, 2019
Merged

Add AMP support for GIF block#11318
jeherve merged 6 commits intoAutomattic:masterfrom
westonruter:add/amp-gif-block-support

Conversation

@westonruter
Copy link
Copy Markdown
Contributor

@westonruter westonruter commented Feb 10, 2019

As noted by @jeherve in #9730 (comment):

We should probably look at the output of our different blocks as well:
https://jetpack.com/support/jetpack-blocks/

The upcoming GIF block (scheduled for release tomorrow), for example, is very broken right now.

This PR takes a stab at implementing the support.

Note that another change needed which is not included in this PR is modifying jetpack/_inc/blocks/gif/view.css to change the selector as follows:

- .wp-block-jetpack-gif iframe
+ .wp-block-jetpack-gif-wrapper iframe

This prevents the responsive code from applying in AMP where it is not needed.

Changes proposed in this Pull Request:

  • Register oEmbed provider for Giphy.
  • Output an amp-iframe for the Giphy embed without the unnecessary wp-block-jetpack-gif-wrapper, since AMP layout takes care of the responsive image. Obtain the width and height of the image for the amp-iframe via oEmbed. Use the alt text as the placeholder for when the amp-iframe has not been loaded yet.
  • Skip enqueueing block script assets on frontend when in AMP, since they are not allowed in AMP.

Testing instructions:

  • Activate the AMP plugin and enable paired mode.
  • Add a GIF block to a post, for example:
<!-- wp:jetpack/gif {"caption":"This is mars","giphyUrl":"https://giphy.com/embed/bJc1o7QdHRBHq","searchText":"mars","paddingTop":"100%"} /-->
  • Compare the non-AMP version of the post with the AMP version. They should end up appearing similar.

Proposed changelog entry for your changes:

  • Improve AMP compatibility for GIF block.

Todo

Screenshots

Non-AMP Reference

not-amp

AMP While Loading

amp-while-loading

AMP After Loading

amp-after-loading

@jetpackbot
Copy link
Copy Markdown
Collaborator

jetpackbot commented Feb 10, 2019

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: April 2, 2019.
Scheduled code freeze: March 26, 2019

Generated by 🚫 dangerJS against 8f339ede39fa89bbafa23e0ded4181213d55b380

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Perhaps should do some more to make sure this is the expected value?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

What is this doesn't return the expected img?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Instead of the search text, this code include the alt text from the oEmbed image.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I'm curious why this block is not more heavily relying on oEmbed. It could be an embed block very similar to the others in core, and then most of the markup for the block could be static with a bare URL which is converted into the iframe. I suppose the only problem with this is the Giphy oEmbed response doesn't serve back an iframe, so we'd need to filter it as well to replace the img with an iframe. This filter is where the AMP-compat code could go as well.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@jeffersonrabb Could you address Weston's question?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looking at this PR today—sorry I've let it sit so long.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Just to make sure I understand the question, @westonruter you're suggesting that oEmbed be used universally for the block, not just for AMP pages as implemented here?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@jeffersonrabb hey! Yes, I'm curious why oEmbed isn't being used generally for implementing Giphy support.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Do you have display_errors turned on?

The error:

Cannot use output buffering in output buffering display handlers in Unknown on line 0

This may be due to a warning being printed out during post processing of the output buffer. See ampproject/amp-wp#1915 for a fix planned in the plugin.

But if that is the case, I want to know what the underlying warning was to trigger the error. Is there any previous log entry with a warning perhaps?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

There is this warning:

WARNING: The PORT_WORDPRESS variable is not set. Defaulting to a blank string.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Humm. That seems like it's something specific to your environment. Where is PORT_WORDPRESS being read?

Also, try applying this patch to your AMP plugin:

diff --git a/includes/class-amp-theme-support.php b/includes/class-amp-theme-support.php
index 507919ec..2dd8a6b4 100644
--- a/includes/class-amp-theme-support.php
+++ b/includes/class-amp-theme-support.php
@@ -1672,6 +1672,8 @@ class AMP_Theme_Support {
 	 */
 	public static function prepare_response( $response, $args = array() ) {
 		global $content_width;
+		ini_set( 'display_errors', 0 );
+
 		$prepare_response_start = microtime( true );
 
 		if ( isset( $args['validation_error_callback'] ) ) {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Otherwise, it seems there is an error happening in \AMP_Style_Sanitizer::ampify_ruleset_selectors() but it's not clear what it is from the stack trace.

Is also related to running out of memory as was reported by someone else in ampproject/amp-wp#1915? So what happens if you modify your WP_MEMORY_LIMIT in wp-config.php to:

define( 'WP_MEMORY_LIMIT', '128M' );

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

PORT_WORDPRESS is indeed something from our Docker environment. @jeffersonrabb you can bypass this via this section of https://github.com/Automattic/jetpack/blob/master/docker/README.md

You can set the following variables on a per-command basis (PORT_WORDPRESS=80 yarn docker:up) or, preferably, in a ./.env file in Jetpack's root directory.
PORT_WORDPRESS: (default=80) The port on your host machine connected to the WordPress container's HTTP server.

Opening #11583 to track making that warning display only at more actionable times to avoid false issues like this. Sorry about that folks!

@jeherve jeherve added Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Review This PR is ready for review. AMP [Block] GIF labels Feb 11, 2019
@jeherve jeherve added this to the 7.1 milestone Feb 11, 2019
@jeherve jeherve added the [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack label Feb 11, 2019
@jeherve
Copy link
Copy Markdown
Member

jeherve commented Feb 11, 2019

cc @jeffersonrabb

@jeherve jeherve added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Feb 11, 2019
@jeherve
Copy link
Copy Markdown
Member

jeherve commented Feb 11, 2019

This now needs a rebase, since we've reorganized how blocks are loaded in #11312.

@westonruter westonruter force-pushed the add/amp-gif-block-support branch from 5a70b09 to 93b8b37 Compare February 11, 2019 16:55
@westonruter
Copy link
Copy Markdown
Contributor Author

This now needs a rebase, since we've reorganized how blocks are loaded in #11312.

Rebase pushed.

@jeherve jeherve added [Status] Needs Review This PR is ready for review. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Feb 11, 2019
@simison simison requested a review from a team February 18, 2019 07:09
@jeherve jeherve modified the milestones: 7.1, 7.2 Feb 25, 2019
@kraftbj kraftbj added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Mar 15, 2019
@kraftbj kraftbj added [Status] Needs Review This PR is ready for review. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Mar 22, 2019
@jeffersonrabb jeffersonrabb force-pushed the add/amp-gif-block-support branch from 8f339ed to a3331fd Compare May 4, 2019 16:59
@jetpackbot
Copy link
Copy Markdown
Collaborator

jetpackbot commented May 4, 2019

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: June 4, 2019.
Scheduled code freeze: May 28, 2019

Generated by 🚫 dangerJS against 5500354

@jeffersonrabb
Copy link
Copy Markdown
Contributor

After a bit more discussion and analysis @westonruter and I concluded that oEmbed doesn't actually gain us anything since the block already has access to the Giphy ID and the paddingTop attribute which is effectively a stand-in for aspect ratio. In a3331fd I rolled back the oEmbed implementation, constructed the amp-iframe dimensions/placeholder from available attributes, and made the suggested change to the iFrame selector.

The branch has been rebased, too.

@jeherve jeherve added this to the 7.4 milestone May 6, 2019
jeffersonrabb
jeffersonrabb previously approved these changes May 17, 2019
Copy link
Copy Markdown
Contributor

@jeffersonrabb jeffersonrabb left a comment

Choose a reason for hiding this comment

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

After a few iterations @westonruter and I concluded that oEmbed doesn't improve the block much, so we removed the initial pass at implementing it and addressed the iFrame styling issues that were conflicting with amp-iframe. Should be good to go.

Copy link
Copy Markdown
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

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

I just have a few minor comments that will make it easier to sync that block with WordPress.com.

@jeherve jeherve added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels May 20, 2019
…ration, and one absint() replacing an intval().
@jeffersonrabb jeffersonrabb added [Status] Needs Review This PR is ready for review. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels May 20, 2019
@jeffersonrabb jeffersonrabb requested a review from jeherve May 20, 2019 18:05
Copy link
Copy Markdown
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

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

This works well in my tests! 👍

Merging.

@matticbot
Copy link
Copy Markdown
Contributor

Caution: This PR has changes that must be merged to WordPress.com
Hello westonruter! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D28457-code before merging this PR. Thank you!

@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. labels May 20, 2019
@jeherve jeherve merged commit 3742ae9 into Automattic:master May 20, 2019
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels May 20, 2019
jeherve added a commit that referenced this pull request May 23, 2019
jeherve added a commit that referenced this pull request May 27, 2019
* Kick off the changelog

* Add 7.3.1

* Update date and post link

* changelog: add #12219

* changelog: add #12170

* changelog: add #12184

* Changelog: add #12268

* Changelog: add #12081

* Changelog: add #12323

* Changelog: add #12204

* Changelog: add #12269

* Changelog: add #12332

* changelog: add #12339

* changelog: add #12209

* Changelog: add #12319

* Changelog: add #12357

* Changelog: add #12124

* Changelog: add #12373

* Changelog: add #12252

* Changelog: add #12383

* Changelog: add #12372

* changelog: add #12337

* Changelog: add #12290

* Changelog: add #12301

* Changelog: add #12061

* Testing list: add instructions for #12061

* Changelog: add #12393

* Update minimum supported version

See #12287

* Changelog: add #12406

* Testing list: add #12406

* Changelog: add #12277

* Changelog: add #12412

* Changelog: add #11318

* Changelog: add #12328

* Changelog: add #12425

* Changelog: add #12380

* Changelog: add #12428

* Changelog: add #12414

* Changelog: add #12395

* Changelog & Testing list: add #12416, #12417, #12418, and #12348

* changelog: add #12379

* Changelog: add #12341

* changelog: add #12444

* Changelog: add #12434

* Changelog: add #12454

* Changelog: add #12460

* Changelog: add #12463

* Changelog: add #12457

* Changelog / testing list: add #10333

* Changelog: add #12467


Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AMP [Block] GIF Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Pri] Low Touches WP.com Files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants