Last active
March 14, 2021 18:06
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Installation instructions: https://gist.github.com/westonruter/6110fbc4bef0c4b8c021a112012f7e9c