Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?php
/**
* AMP-compatible Countdown Block
*
* @package AMP_UB_Countdown_Block
* @author Weston Ruter, Google
* @license GPL-2.0-or-later
* @copyright 2019 Google Inc.
*
* @wordpress-plugin
* Plugin Name: AMP-compatible Countdown Block
* Description: Extension plugin for Ultimate Blocks to make the Countdown block AMP-compatible.
* Plugin URI: https://gist.github.com/westonruter/461460130b6c27ca2072f79a1eeac51b
* Version: 0.1.0
* 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/461460130b6c27ca2072f79a1eeac51b
*/
namespace AMP_UB_Countdown_Block;
/**
* Determine whether serving an AMP response.
*
* @return bool Whether AMP.
*/
function is_amp() {
return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
}
/**
* Add hooks for the AMP response.
*
* Note this must happen at or after the 'wp' action, such as at 'template_redirect'.
*/
function add_hooks() {
if ( is_amp() ) {
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\dequeue_scripts', 11 );
add_filter( 'render_block', __NAMESPACE__ . '\filter_render_block', 10, 2 );
}
}
add_action( 'template_redirect', __NAMESPACE__ . '\add_hooks' );
/**
* Dequeue scripts that are enqueued by Ultimate Blocks.
*
* These may or may not be enqueued, but we don't need them ever in AMP, so no need to check.
*
* @see \ub_countdown_add_frontend_assets()
*/
function dequeue_scripts() {
wp_dequeue_script( 'ultimate_blocks-countdown-odometer-script' );
wp_dequeue_script( 'ultimate_blocks-countdown-script' );
}
/**
* Override the output of the Countdown block for AMP responses.
*
* Note that this could altenrnatuvely use <amp-script> for 100% parity with Ultimate Blocks.
*
* @see \ub_render_countdown_block()
* @link https://amp.dev/documentation/components/amp-date-countdown/
*
* @param string $block_content Block content.
* @param array $block Block data.
* @return string Block content.
*/
function filter_render_block( $block_content, $block ) {
// Pass through the block content if it is not for the Countdown block.
if ( 'ub/countdown' !== $block['blockName'] || ! isset( $block['attrs']['endDate'] ) ) {
return $block_content;
}
// Pass-through original block content if countdown time has passed, since static content used.
$time_left = $block['attrs']['endDate'] - time();
if ( $time_left <= 0 ) {
return $block_content;
}
// Note that all possible languages are not supported.
// See <https://amp.dev/documentation/components/amp-date-countdown/?format=websites#locale-(optional)>.
$locale = strtolower( get_bloginfo( 'language' ) );
if ( ! in_array( $locale, [ 'zh-cn', 'zh-tw' ], true ) ) {
$locale = strtok( $locale, '-' );
}
$block_content = '<div class="ub-countdown">';
// @todo The <amp-date-countdown> component should allow for placeholder content, and when supplied, allow layout=container.
$block_content .= sprintf(
'<amp-date-countdown timestamp-seconds="%d" layout="flex-item" locale="%s">',
(int) $block['attrs']['endDate'],
esc_attr( $locale )
);
$block_content .= '<template type="amp-mustache">';
$block_content .= '{{d}} {{days}}, {{h}} {{hours}}, {{m}} {{minutes}}, {{s}} {{seconds}}';
$block_content .= '</template>';
$block_content .= '</amp-date-countdown>';
$block_content .= '
<style class="amp-ub-countdown">
.ub-countdown {
display: flex;
height: 100px;
justify-content: center;
align-items: center;
font-size: larger;
}
.ub-countdown amp-date-countdown {
text-align: center;
}
</style>
';
$block_content .= '</div>';
return $block_content;
}
@westonruter

This comment has been minimized.

Copy link
Owner Author

westonruter commented Apr 4, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.