Skip to content

Instantly share code, notes, and snippets.

@westonruter
Last active March 14, 2021 18:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westonruter/2d8ac828f48b43803852e26c5af274ff to your computer and use it in GitHub Desktop.
Save westonruter/2d8ac828f48b43803852e26c5af274ff to your computer and use it in GitHub Desktop.
OBSOLETE as of AMP plugin v2.0.11. Fixed in https://github.com/ampproject/amp-wp/pull/5927
<?php
/**
* AMP Cover Block Fix plugin bootstrap.
*
* @package Google\AMP_Cover_Block_Fix
* @author Weston Ruter, Google
* @license GPL-2.0-or-later
* @copyright 2021 Google Inc.
*
* @wordpress-plugin
* Plugin Name: AMP Cover Block Fix
* Plugin URI: https://gist.github.com/westonruter/2d8ac828f48b43803852e26c5af274ff
* Description: Quick fix for bug in AMP plugin with the Cover Block wherein it fails to apply <code>object-fit</code> and <code>object-position</code> styles. Fix will landin plugin via <a href="https://github.com/ampproject/amp-wp/pull/5927">#5927</a>.
* Version: 0.1.1
* Author: Weston Ruter, Google
* Author URI: https://weston.ruter.net/
* License: GNU General Public License v2 (or later)
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Gist Plugin URI: https://gist.github.com/westonruter/2d8ac828f48b43803852e26c5af274ff
*/
namespace Google\AMP_Cover_Block_Fix;
add_filter(
'render_block',
static function ( $block_content, $block ) {
if (
'core/cover' !== $block['blockName']
||
! function_exists( 'is_amp_endpoint' )
||
! is_amp_endpoint()
) {
return $block_content;
}
return preg_replace_callback(
'#<(?:img|video)(?= )[^>]*? class="[^"]*?wp-block-cover__(?:image|video)-background[^"]*?"#',
static function ( $matches ) use ( $block ) {
$replacement = $matches[0];
// Strip out the playsinline attribute since not valid AMP and handled automatically by amp-video.
if ( isset( $block['attrs']['backgroundType'] ) && 'video' === $block['attrs']['backgroundType'] ) {
$replacement = str_replace( ' playsinline ', ' ', $replacement );
}
// The background image/video for the cover block by definition needs object-fit="cover" on the resulting amp-ing/amp-video.
$replacement .= ' object-fit="cover"';
// Add the fill layout to skip the needlessly obtaining the dimensions.
$replacement .= ' layout="fill"';
// Add object-position from the block attribute's to add to the img/video to be copied onto the amp-img/amp-video.
// The AMP runtime copies object-position attribute onto the underlying img/video for a given amp-img/amp-video.
// This is needed since the object-position property directly on an amp-img/amp-video will have no effect since
// since it is merely a wrapper for the underlying img/video element which actually supports the CSS property.
if ( isset( $block['attrs']['focalPoint']['x'], $block['attrs']['focalPoint']['y'] ) ) {
// See logic in Gutenberg for writing focal point to object-position attr: <https://github.com/WordPress/gutenberg/blob/54c9066/packages/block-library/src/cover/save.js#L71>.
$replacement .= sprintf(
' object-position="%d%% %d%%"',
round( (float) $block['attrs']['focalPoint']['x'] * 100 ),
round( (float) $block['attrs']['focalPoint']['y'] * 100 )
);
}
return $replacement;
},
$block_content,
1
);
},
9,
2
);
@westonruter
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment