westonruter/amp-sidebar-shortcode.php

## amp-sidebar-shortcode.php
<?php
/**
 * AMP Sidebar Shortcode plugin bootstrap.
 *
 * @package   Google\AMP_Sidebar_Shortcode
 * @author    Weston Ruter, Google
 * @license   GPL-2.0-or-later
 * @copyright 2020 Google Inc.
 *
 * @wordpress-plugin
 * Plugin Name: AMP Sidebar Shortcode
 * Plugin URI: https://gist.github.com/westonruter/79ee1fd638e70a363c15a25ddde29db6
 * Description: Proof of concept for how an <code>amp-sidebar</code> could be used in both AMP and non-AMP pages. Warning: The <code>amp-sidebar</code> component is not yet intended for this purpose! Wait until Bento AMP for official support.
 * Version: 0.1
 * 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/79ee1fd638e70a363c15a25ddde29db6
 */

namespace Google\AMP_Sidebar_Shortcode;

use WP_Styles;
use AmpProject\AmpWP\RemoteRequest\CachedRemoteGetRequest;
use AmpProject\RemoteRequest\CurlRemoteGetRequest;

const SHORTCODE_TAG = 'amp_sidebar';

add_action(
	'amp_init',
	function () {
		if ( ! version_compare( AMP__VERSION, '2.0', '>=' ) ) {
			return;
		}
		add_shortcode( SHORTCODE_TAG, __NAMESPACE__ . '\render_shortcode' );
	}
);

/**
 * Get AMP runtime CSS.
 *
 * @return string
 */
function get_amp_runtime_css() {
	$url = 'https://cdn.ampproject.org/v0.css';

	$remote_request = new CachedRemoteGetRequest( new CurlRemoteGetRequest() );
	$response       = $remote_request->get( $url );
	$status_code    = $response->getStatusCode();

	if ( $status_code < 200 || $status_code >= 300 ) {
		return '';
	}

	$styles = $response->getBody();
	return sprintf( '<style amp-runtime>%s</style>', $styles );
}

/**
 * Render shortcode.
 *
 * @param array $attrs    Attributes.
 * @param string $content Content.
 * @return string Rendered shortcode.
 */
function render_shortcode( $attrs, $content = '' ) {
	$attrs = shortcode_atts(
		[
			'id'   => wp_unique_id( 'amp-sidebar-shortcode' ),
			'side' => 'right',
		],
		$attrs,
		SHORTCODE_TAG
	);
	$attrs['layout'] = 'nodisplay';

	$attr_shortcodes = '';
	foreach ( $attrs as $name => $value ) {
		$attr_shortcodes .= sprintf( ' %s="%s"', sanitize_key( $name ), esc_attr( $value ) );
	}

	$scripts = '';
	$styles  = '';
	static $style_printed = false;

	if ( ! amp_is_request() ) {
		if ( ! wp_script_is( 'amp-sidebar', 'done' ) ) {
			ob_start();
			wp_scripts()->do_items( [ 'amp-sidebar' ] );
			$scripts = ob_get_clean();
		}

		// Styles needed to prevent <amp-sidebar> from being displayed while waiting for v0.js to load this same stylesheet in the <head>.
		if ( ! $style_printed ) {
			$styles = get_amp_runtime_css();
		}
	}

	return sprintf(
		'<p>%s<button on="%s">Toggle Sidebar</button></p><amp-sidebar%s>%s</amp-sidebar>',
		$scripts . $styles,
		esc_attr( "tap:{$attrs['id']}.toggle" ),
		$attr_shortcodes,
		wpautop( $content )
	);
}