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
*/
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;
}
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.