amp-script-test.php

<?php
/**
 * Plugin Name: amp-script Test
 * Description: Implementing the experimental amp-script component in WordPress. To use, add the <code>[amp_script_test]</code> shortcode to a post.
 * Author Name: Weston Ruter
 */

namespace AMP_Script_Test;

const SCRIPT_HANDLE = 'amp-script-hello-world';

const SCRIPT_REQUEST_QUERY_VAR = 'amp_script_file';

/**
 * Render amp-script test shortcode.
 */
function render_amp_script_test() {
	ob_start();
	$src = add_query_arg(
		[
			SCRIPT_REQUEST_QUERY_VAR => SCRIPT_HANDLE,
			'ver'                    => filemtime( __DIR__ . '/hello-world.js' ),
		],
		home_url( '/' )
	);
	?>
	<amp-script layout="container" src="<?php echo esc_url( $src ); ?>">
		<p>If the button below is disabled and you see an error in the console: <q>Experiment "amp-script" is not enabled</q>", then you probably need to run <code>AMP.toggleExperiment('amp-script')</code> in the console, then reload.</p>
		<button id="hello">Insert Hello World!</button>
	</amp-script>
	<?php
	return ob_get_clean();
}
add_shortcode( 'amp_script_test', __NAMESPACE__ . '\render_amp_script_test' );

/**
 * Serve the script for amp-script.
 *
 * This is needed because amp-script will otherwise throw an error:
 *
 * > Response must contain the AMP-Access-Control-Allow-Source-Origin header
 *
 * If the web server were configured to send this response header with scripts requested by amp-script then this
 * workaround would not be required. Note that `AMP_HTTP::send_cors_headers()` is sent by WordPress in `amp_init()`
 * when WordPress initializes. The amp-script component will request the script with an __amp_source_origin query param
 *
 * @see \AMP_HTTP::send_cors_headers()
 */
function serve_amp_script_response() {
	if ( isset( $_GET[ SCRIPT_REQUEST_QUERY_VAR ] ) && SCRIPT_HANDLE === $_GET[ SCRIPT_REQUEST_QUERY_VAR ] ) {
		header( 'Content-Type: text/javascript' );
		echo file_get_contents( __DIR__ . '/hello-world.js' );
		exit;
	}
}
add_action( 'template_redirect', __NAMESPACE__ . '\serve_amp_script_response' );

hello-world.js

// hello-world.js
const button = document.getElementById('hello');
button.addEventListener('click', () => {
  const el = document.createElement('h1');
  el.textContent = 'Hello World!';
  // `document.body` is effectively the <amp-script> element.
  document.body.appendChild(el);
});