Add AMP support for GIF block#11318
Conversation
|
Thank you for the great PR description! When this PR is ready for review, please apply the Scheduled Jetpack release: April 2, 2019. Generated by 🚫 dangerJS against 8f339ede39fa89bbafa23e0ded4181213d55b380 |
modules/blocks.php
Outdated
There was a problem hiding this comment.
Perhaps should do some more to make sure this is the expected value?
modules/blocks.php
Outdated
There was a problem hiding this comment.
What is this doesn't return the expected img?
modules/blocks.php
Outdated
There was a problem hiding this comment.
Instead of the search text, this code include the alt text from the oEmbed image.
class.jetpack.php
Outdated
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
@jeffersonrabb Could you address Weston's question?
There was a problem hiding this comment.
Looking at this PR today—sorry I've let it sit so long.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
@jeffersonrabb hey! Yes, I'm curious why oEmbed isn't being used generally for implementing Giphy support.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
There is this warning:
WARNING: The PORT_WORDPRESS variable is not set. Defaulting to a blank string.
There was a problem hiding this comment.
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'] ) ) {There was a problem hiding this comment.
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' );There was a problem hiding this comment.
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!
|
This now needs a rebase, since we've reorganized how blocks are loaded in #11312. |
5a70b09 to
93b8b37
Compare
Rebase pushed. |
… be ignored in AMP context. Use paddingTop attribute to accurately size amp-iframe.
8f339ed to
a3331fd
Compare
|
Thank you for the great PR description! When this PR is ready for review, please apply the Scheduled Jetpack release: June 4, 2019. |
|
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 The branch has been rebased, too. |
jeffersonrabb
left a comment
There was a problem hiding this comment.
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.
jeherve
left a comment
There was a problem hiding this comment.
I just have a few minor comments that will make it easier to sync that block with WordPress.com.
…ration, and one absint() replacing an intval().
jeherve
left a comment
There was a problem hiding this comment.
This works well in my tests! 👍
Merging.
|
Caution: This PR has changes that must be merged to WordPress.com |
* 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>
As noted by @jeherve in #9730 (comment):
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.cssto change the selector as follows:This prevents the responsive code from applying in AMP where it is not needed.
Changes proposed in this Pull Request:
amp-iframefor the Giphy embed without the unnecessarywp-block-jetpack-gif-wrapper, since AMP layout takes care of the responsive image. Obtain thewidthandheightof the image for theamp-iframevia oEmbed. Use thealttext as theplaceholderfor when theamp-iframehas not been loaded yet.Testing instructions:
<!-- wp:jetpack/gif {"caption":"This is mars","giphyUrl":"https://giphy.com/embed/bJc1o7QdHRBHq","searchText":"mars","paddingTop":"100%"} /-->Proposed changelog entry for your changes:
Todo
amp-iframebefore the caption.Screenshots
Non-AMP Reference
AMP While Loading
AMP After Loading