Last active
June 2, 2020 06:06
-
-
Save westonruter/461460130b6c27ca2072f79a1eeac51b to your computer and use it in GitHub Desktop.
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-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; | |
} |
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