Add post preview for AMP and allow AMP to be disabled on a per-post basis

amp.php

@@ -22,6 +22,7 @@
 require_once AMP__DIR__ . '/includes/class-amp-post-type-support.php';
 require_once AMP__DIR__ . '/includes/admin/functions.php';
 require_once AMP__DIR__ . '/includes/admin/class-amp-customizer.php';
+require_once AMP__DIR__ . '/includes/admin/class-amp-post-meta-box.php';
 require_once AMP__DIR__ . '/includes/settings/class-amp-customizer-settings.php';
 require_once AMP__DIR__ . '/includes/settings/class-amp-customizer-design-settings.php';
 require_once AMP__DIR__ . '/includes/actions/class-amp-frontend-actions.php';
@@ -61,6 +62,7 @@ function amp_init() {
 
 	load_plugin_textdomain( 'amp', false, plugin_basename( AMP__DIR__ ) . '/languages' );
 
+	amp_define_query_var();
 	add_rewrite_endpoint( AMP_QUERY_VAR, EP_PERMALINK );
 
 	add_filter( 'request', 'amp_force_query_var_value' );
@@ -82,7 +84,11 @@ function amp_init() {
  *
  * @since 0.6
  */
-function define_query_var() {
+function amp_define_query_var() {
+	if ( defined( 'AMP_QUERY_VAR' ) ) {
+		return;
+	}
+
 	/**
 	 * Filter the AMP query variable.
 	 *
@@ -91,7 +97,7 @@ function define_query_var() {
 	 */
 	define( 'AMP_QUERY_VAR', apply_filters( 'amp_query_var', 'amp' ) );
 }
-add_action( 'after_setup_theme', 'define_query_var', 3 );
+add_action( 'after_setup_theme', 'amp_define_query_var', 3 );
 
 // Make sure the `amp` query var has an explicit value.
 // Avoids issues when filtering the deprecated `query_string` hook.
@@ -147,24 +153,40 @@ function amp_prepare_render() {
 	add_action( 'template_redirect', 'amp_render' );
 }
 
+/**
+ * Render AMP for queried post.
+ *
+ * @since 0.1
+ */
 function amp_render() {
-	$post_id = get_queried_object_id();
-	amp_render_post( $post_id );
+
+	// Note that queried object is used instead of the ID so that the_preview for the queried post can apply.
+	amp_render_post( get_queried_object() );
 	exit;
 }
 
-function amp_render_post( $post_id ) {
-	$post = get_post( $post_id );
-	if ( ! $post ) {
-		return;
+/**
+ * Render AMP post template.
+ *
+ * @since 0.5
+ * @param WP_Post|int $post Post.
+ */
+function amp_render_post( $post ) {
+
+	if ( ! ( $post instanceof WP_Post ) ) {
+		$post = get_post( $post );
+		if ( ! $post ) {
+			return;
+		}
 	}
+	$post_id = $post->ID;
 
 	amp_load_classes();
 
 	do_action( 'pre_amp_render_post', $post_id );
 
 	amp_add_post_template_actions();
-	$template = new AMP_Post_Template( $post_id );
+	$template = new AMP_Post_Template( $post );
 	$template->load();
 }
 

assets/css/amp-post-meta-box.css

@@ -0,0 +1,49 @@
+/**
+* 1.0 AMP preview.
+*
+* Submit box preview buttons.
+*/
+
+/* Core preview button */
+.wp-core-ui #preview-action.has-amp-preview #post-preview {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	float: none;
+}
+
+/* AMP preview button */
+.wp-core-ui #amp-post-preview.preview {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	text-indent: -9999px;
+	width: 30px;
+	background: no-repeat center url( '../images/amp-icon.svg' ) !important; /* Important needed due to .disabled rule in buttons.css */
+	background-size: 14px !important;
+}
+.wp-core-ui #amp-post-preview.preview.disabled {
+	opacity: 0.7;
+}
+
+/* AMP status */
+.misc-amp-status .amp-icon {
+	float: left;
+	background: transparent url( '../images/amp-icon.svg' ) no-repeat left;
+	background-size: 17px;
+	width: 17px;
+	height: 17px;
+	margin: 0 8px 0 1px;
+}
+
+#amp-status-select {
+	margin-top: 4px;
+}
+
+.amp-status-actions {
+	margin-top: 10px;
+}
+
+@media screen and ( max-width: 782px ) {
+	#amp-status-select {
+		line-height: 280%;
+	}
+}

assets/js/amp-post-meta-box.js

@@ -0,0 +1,170 @@
+/* exported ampPostMetaBox */
+
+/**
+ * AMP Post Meta Box.
+ *
+ * @todo Rename this to be just the ampEditPostScreen?
+ *
+ * @since 0.6
+ */
+var ampPostMetaBox = ( function( $ ) {
+	'use strict';
+
+	var component = {
+
+		/**
+		 * Holds data.
+		 *
+		 * @since 0.6
+		 */
+		data: {
+			previewLink: '',
+			disabled: false,
+			statusInputName: '',
+			l10n: {
+				ampPreviewBtnLabel: ''
+			}
+		},
+
+		/**
+		 * Toggle animation speed.
+		 *
+		 * @since 0.6
+		 */
+		toggleSpeed: 200,
+
+		/**
+		 * Core preview button selector.
+		 *
+		 * @since 0.6
+		 */
+		previewBtnSelector: '#post-preview',
+
+		/**
+		 * AMP preview button selector.
+		 *
+		 * @since 0.6
+		 */
+		ampPreviewBtnSelector: '#amp-post-preview'
+	};
+
+	/**
+	 * Boot plugin.
+	 *
+	 * @since 0.6
+	 * @param {Object} data Object data.
+	 * @return {void}
+	 */
+	component.boot = function boot( data ) {
+		component.data = data;
+		$( document ).ready( function() {
+			if ( ! component.data.disabled ) {
+				component.addPreviewButton();
+			}
+			component.listen();
+		} );
+	};
+
+	/**
+	 * Events listener.
+	 *
+	 * @since 0.6
+	 * @return {void}
+	 */
+	component.listen = function listen() {
+		$( component.ampPreviewBtnSelector ).on( 'click.amp-post-preview', function( e ) {
+			e.preventDefault();
+			component.onAmpPreviewButtonClick();
+		} );
+
+		$( '.edit-amp-status, [href="#amp_status"]' ).click( function( e ) {
+			e.preventDefault();
+			component.toggleAmpStatus( $( e.target ) );
+		} );
+
+		$( '#submitpost input[type="submit"]' ).on( 'click', function() {
+			$( component.ampPreviewBtnSelector ).addClass( 'disabled' );
+		} );
+	};
+
+	/**
+	 * Add AMP Preview button.
+	 *
+	 * @since 0.6
+	 * @return {void}
+	 */
+	component.addPreviewButton = function addPreviewButton() {
+		var previewBtn = $( component.previewBtnSelector );
+		previewBtn
+			.clone()
+			.insertAfter( previewBtn )
+			.prop( {
+				'href': component.data.previewLink,
+				'id': component.ampPreviewBtnSelector.replace( '#', '' )
+			} )
+			.text( component.data.l10n.ampPreviewBtnLabel )
+			.parent()
+			.addClass( 'has-amp-preview' );
+	};
+
+	/**
+	 * AMP Preview button click handler.
+	 *
+	 * We trigger the Core preview link for events propagation purposes.
+	 *
+	 * @since 0.6
+	 * @return {void}
+	 */
+	component.onAmpPreviewButtonClick = function onAmpPreviewButtonClick() {
+		var $input;
+
+		// Flag the AMP preview referer.
+		$input = $( '<input>' )
+			.prop( {
+				'type': 'hidden',
+				'name': 'amp-preview',
+				'value': 'do-preview'
+			} )
+			.insertAfter( component.ampPreviewBtnSelector );
+
+		// Trigger Core preview button and remove AMP flag.
+		$( component.previewBtnSelector ).click();
+		$input.remove();
+	};
+
+	/**
+	 * Add AMP status toggle.
+	 *
+	 * @since 0.6
+	 * @param {Object} $target Event target.
+	 * @return {void}
+	 */
+	component.toggleAmpStatus = function toggleAmpStatus( $target ) {
+		var $container = $( '#amp-status-select' ),
+			status = $container.data( 'amp-status' ),
+			$checked,
+			editAmpStatus = $( '.edit-amp-status' );
+
+		// Don't modify status on cancel button click.
+		if ( ! $target.hasClass( 'button-cancel' ) ) {
+			status = $( '[name="' + component.data.statusInputName + '"]:checked' ).val();
+		}
+
+		$checked = $( '#amp-status-' + status );
+
+		// Toggle elements.
+		editAmpStatus.fadeToggle( component.toggleSpeed, function() {
+			if ( editAmpStatus.is( ':visible' ) ) {
+				editAmpStatus.focus();
+			}
+		} );
+		$container.slideToggle( component.toggleSpeed );
+
+		// Update status.
+		$container.data( 'amp-status', status );
+		$checked.prop( 'checked', true );
+		$( '.amp-status-text' ).text( $checked.next().text() );
+	};
+
+	return component;
+})( window.jQuery );