ultimate-blocks-countdown-amp.php

<?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;
}

Installation instructions: https://gist.github.com/westonruter/6110fbc4bef0c4b8c021a112012f7e9c