Plugin to test inline amp-script support in the the AMP plugin. Depends on https://github.com/ampproject/amp-wp/pull/3619

amp-inline-script-test.php

<?php
/**
 * AMP Inline Script Test
 *
 * @package   AMP_Inline_Script_Test
 * @author    Weston Ruter, Google
 * @license   GPL-2.0-or-later
 * @copyright 2019 Google Inc.
 *
 * @wordpress-plugin
 * Plugin Name: AMP Inline Script Test
 * Description: Demonstration for how to add <code>&lt;amp-script&gt;</code> with an inline script (and required script hash) to a site. Requires AMP v1.4-beta2 or higher.
 * Plugin URI: https://gist.github.com/westonruter/d0bd2f39a45e664368d6e4ffc82da041
 * 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/d0bd2f39a45e664368d6e4ffc82da041
 */

namespace AMP_Inline_Script_Test;

/**
 * Get current time script contents.
 *
 * @return string Script contents.
 */
function get_current_time_script() {
	return escape_script_text( file_get_contents( __DIR__ . '/current-time-script.js' ) ); // phpcs:ignore
}

/**
 * Get random number script contents.
 *
 * @return string Script contents.
 */
function get_random_number_script() {
	return escape_script_text( file_get_contents( __DIR__ . '/random-number-script.js' ) ); // phpcs:ignore
}

/**
 * Prevent script contents from breaking out of the script.
 *
 * This doesn't seem entirely right. It would seem better to use htmlspecialchars().
 *
 * @param string $script Script.
 * @return string Escaped script.
 */
function escape_script_text( $script ) {
	return str_replace( '</script>', '<\/script>', $script );
}

/**
 * Print inline amp-script.
 *
 * @param string $script      Inline script.
 * @param string $placeholder Placeholder.
 */
function print_inline_script( $script, $placeholder = 'Loading...' ) {
	printf(
		'<amp-script script="%1$s" layout="fixed-height" height="50">%2$s</amp-script><script type="text/plain" target="amp-script" id="%1$s">%3$s</script>',
		esc_attr( wp_unique_id( 'amp-script-' ) ),
		esc_html( $placeholder ),
		escape_script_text( $script ) // phpcs:ignore -- Note that escape_script_text() is all that is required, not esc_html() or htmlspecialchars().
	);
}

add_action(
	'amp_init',
	function () {
		if ( ! function_exists( 'amp_generate_script_hash' ) ) {
			trigger_error( 'The amp_generate_script_hash() function depends on AMP plugin v1.4 to be active.' ); // phpcs:ignore
			return;
		}
		add_hooks();
	}
);

/**
 * Add hooks.
 */
function add_hooks() {

	// Output two separate amp-script-src meta tags to confirm that the AMP plugin merges them during post-processing.
	add_action(
		'wp_head',
		function () {
			printf( '<meta name="amp-script-src" content="%s">', esc_attr( \amp_generate_script_hash( escape_script_text( get_random_number_script() ) ) ) );

			// This one will get merged with the first.
			printf( '<meta name="amp-script-src" content="%s">', esc_attr( \amp_generate_script_hash( escape_script_text( get_current_time_script() ) ) ) );
		}
	);

	// Print the two inline scripts.
	add_action(
		'wp_footer',
		function () {
			print_inline_script( get_current_time_script(), 'Starting clock...' );
			print_inline_script( get_random_number_script(), 'Generating randomness...' );
		}
	);
}

current-time-script.js

// This gets added to an line inline <script type=text/plain target=amp-script></script>!
// Note this file contains characters that normally get escaped when printing HTML. The only text that needs special
// handling in this file when added to the page is '</script>' which must be replaced with '<\/script>'.

function printCurrentTime() {
	const date = new Date();
	let text = `Current time: ${date.toLocaleTimeString()}`;
	if ( 0 === date.getHours() && 0 === date.getSeconds() ) {
		text += ' (It is the top of the hour!)';
	} else if ( date.getSeconds() > 50 ) {
		text += ` (Only ${60 - date.getSeconds()} until the next minute!)`;
	} else if ( 0 === date.getSeconds() ) {
		text += ` (New minute just started!)`;
	} else if ( 1 === date.getSeconds() ) {
		text += ` (New minute started a second ago!)`;
	} else if ( date.getSeconds() < 10 ) {
		text += ` (New minute started ${date.getSeconds()} seconds ago!)`;
	} else if ( date.getSeconds() === 0 && date.getSeconds() < 10 ) {
		text += ` (New minute started ${60 - date.getSeconds()} until the next minute!)`;
	}

	document.body.textContent = text;
	setTimeout( printCurrentTime, 1000 );
}

printCurrentTime();

random-number-script.js

function printRandomNumber() {
	document.body.textContent = 'Random number: ' + Math.random().toString();
	setTimeout( printRandomNumber, 1000 );
}

printRandomNumber();

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