Add AMP validation checking for Gutenberg blocks

.dev-lib

@@ -6,4 +6,5 @@ PROJECT_SLUG=amp
 function after_wp_install {
     echo "Installing REST API..."
     svn export -q https://plugins.svn.wordpress.org/jetpack/trunk/ "$WP_CORE_DIR/src/wp-content/plugins/jetpack"
+    svn export -q https://plugins.svn.wordpress.org/gutenberg/trunk/ "$WP_CORE_DIR/src/wp-content/plugins/gutenberg"
 }

assets/js/amp-block-validation.js

@@ -0,0 +1,185 @@
+/*jshint esversion: 6 */
+/*global _, wp:true */
+/**
+ * AMP Gutenberg integration.
+ *
+ * On editing a block, this checks that the content is AMP-compatible.
+ * And it displays a notice if it's not.
+ */
+
+/* exported ampBlockValidation */
+var ampBlockValidation = ( function( $ ) {
+	var module = {
+
+		/**
+		 * Holds data.
+		 */
+		data: {},
+
+		/**
+		 * Boot module.
+		 *
+		 * @param {Object} data Object data.
+		 * @return {void}
+		 */
+		boot: function( data ) {
+			module.data = data;
+			$( document ).ready( function() {
+				if ( 'undefined' !== typeof wp.blocks ) {
+					module.processBlocks();
+				}
+			} );
+		},
+
+		/**
+		 * Gets all of the registered blocks, and overwrites their edit() functions.
+		 *
+		 * The new edit() functions will check if the content is AMP-compliant.
+		 * If not, it will display a notice.
+		 *
+		 * @returns {void}
+		 */
+		processBlocks: function() {
+			var blocks = wp.blocks.getBlockTypes();
+			blocks.forEach( function( block ) {
+				if ( block.hasOwnProperty( 'name' ) ) {
+					module.overwriteEdit( block.name );
+				}
+			} );
+		},
+
+		/**
+		 * Overwrites the edit() function of a block.
+		 *
+		 * Outputs the original edit function, stored in OriginalBlockEdit.
+		 * This also appends a notice to the block.
+		 * It only displays if the block's content isn't valid AMP,
+		 *
+		 * @see https://riad.blog/2017/10/16/one-thousand-and-one-way-to-extend-gutenberg-today/
+		 * @param {string} blockType the type of the block, like 'core/paragraph'.
+		 * @returns {void}
+		 */
+		overwriteEdit: function( blockType ) {
+			let block = wp.blocks.unregisterBlockType( blockType );
+			let OriginalBlockEdit = block.edit;
+
+			block.edit = class AMPNotice extends wp.element.Component {
+
+				/**
+				 * The AMPNotice constructor.
+				 *
+				 * @param {object} props The component properties.
+				 * @returns {void}
+				 */
+				constructor( props ) {
+					props.attributes.pendingValidation = false;
+					super( props );
+					this.validateAMP = _.throttle( this.validateAMP, 5000 );
+					this.state = { isInvalidAMP: false };
+				}
+
+				/**
+				 * Outputs the existing block, with a Notice element below.
+				 *
+				 * The Notice only appears if the state of isInvalidAMP is false.
+				 * It also displays the name of the block.
+				 *
+				 * @returns {array} The elements.
+				 */
+				render() {
+					let originalEdit;
+					let result;
+
+					result = [];
+					originalEdit = wp.element.createElement( OriginalBlockEdit, this.props );
+					if ( originalEdit ) {
+						result.push( originalEdit );
+					}
+					if ( this.state.isInvalidAMP && wp.components.hasOwnProperty( 'Notice' ) ) {
+						result.push( wp.element.createElement(
+							wp.components.Notice,
+							{
+								status: 'warning',
+								content: module.data.i18n.notice.replace( '%s', this.props.name ),
+								isDismissible: false
+							}
+						) );
+					}
+
+					this.props.attributes.pendingValidation = false;
+					return result;
+				}
+
+				/**
+				 * Handler for after the component mounting.
+				 *
+				 * If validateAMP() changes the isInvalidAMP state, it will result in this method being called again.
+				 * There's no need to check if the state is valid again.
+				 * So this skips the check if pendingValidation is true.
+				 *
+				 * @returns {void}
+				 */
+				componentDidMount() {
+					if ( ! this.props.attributes.pendingValidation ) {
+						let content = this.props.attributes.content;
+						if ( 'string' !== typeof content ) {
+							content = wp.element.renderToString( content );
+						}
+						if ( content.length > 0 ) {
+							this.validateAMP( this.props.attributes.content );
+						}
+					}
+					this.props.attributes.pendingValidation = false;
+				}
+
+				/**
+				 * Validates the content for AMP compliance, and sets the state of the Notice.
+				 *
+				 * Depending on the results of the validation,
+				 * it sets the Notice component's isInvalidAMP state.
+				 * This will cause the notice to either display or be hidden.
+				 *
+				 * @param {string} content The block content, from calling save().
+				 * @returns {void}
+				 */
+				validateAMP( content ) {
+					this.setState( function() {
+
+								// Changing the state can cause componentDidMount() to be called, so prevent it from calling validateAMP() again.
+								component.props.attributes.pendingValidation = true;
+								return { isInvalidAMP: ( Math.random() > 0.5 ) };
+							} );
+
+					let component = this;
+					$.post(
+						module.data.endpoint,
+						{
+							markup: content
+						}
+					).done( function( data ) {
+						if ( data.hasOwnProperty( 'removed_elements' ) && ( 0 === data.removed_elements.length ) && ( 0 === data.removed_attributes.length ) ) {
+							component.setState( function() {
+
+								// Changing the state can cause componentDidMount() to be called, so prevent it from calling validateAMP() again.
+								component.props.attributes.pendingValidation = true;
+								return { isInvalidAMP: false };
+							} );
+						} else {
+							component.setState( function() {
+								component.props.attributes.pendingValidation = true;
+								return { isInvalidAMP: true };
+							} );
+						}
+					} );
+				}
+
+			};
+
+			wp.blocks.registerBlockType( blockType, block );
+		}
+
+	};
+
+	return module;
+
+} )( window.jQuery );

includes/class-amp-theme-support.php

@@ -939,7 +939,7 @@ public static function prepare_response( $response, $args = array() ) {
 			return $response;
 		}
 
-		$is_validation_debug_mode = ! empty( $_REQUEST[ AMP_Validation_Utils::DEBUG_QUERY_VAR ] ); // WPCS: csrf ok.
+		$is_validation_debug_mode = isset( $_REQUEST[ AMP_Validation_Utils::DEBUG_QUERY_VAR ] ); // WPCS: csrf ok.
 
 		$args = array_merge(
 			array(

includes/utils/class-amp-dom-utils.php

@@ -67,22 +67,6 @@ public static function get_dom( $document ) {
 		// @todo In the future consider an AMP_DOMDocument subclass that does this automatically. See <https://github.com/Automattic/amp-wp/pull/895/files#r163825513>.
 		$document = self::convert_amp_bind_attributes( $document );
 
-		/*
-		 * Prevent amp-mustache syntax from getting URL-encoded in attributes when saveHTML is done.
-		 * While this is applying to the entire document, it only really matters inside of <template>
-		 * elements, since URL-encoding of curly braces in href attributes would not normally matter.
-		 * But when this is done inside of a <template> then it breaks Mustache. Since Mustache
-		 * is logic-less and curly braces are not unsafe for HTML, we can do a global replacement.
-		 * The replacement is done on the entire HTML document instead of just inside of the <template>
-		 * elements since it is faster and wouldn't change the outcome.
-		 */
-		$placeholders = self::get_mustache_tag_placeholders();
-		$document     = str_replace(
-			array_keys( $placeholders ),
-			array_values( $placeholders ),
-			$document
-		);
-
 		// Force all self-closing tags to have closing tags since DOMDocument isn't fully aware.
 		$document = preg_replace(
 			'#<(' . implode( '|', self::$self_closing_tags ) . ')[^>]*>(?!</\1>)#',
@@ -365,13 +349,51 @@ public static function get_content_from_dom_node( $dom, $node ) {
 			$self_closing_tags_regex = "#</({$self_closing_tags})>#i";
 		}
 
+		/*
+		 * Prevent amp-mustache syntax from getting URL-encoded in attributes when saveHTML is done.
+		 * While this is applying to the entire document, it only really matters inside of <template>
+		 * elements, since URL-encoding of curly braces in href attributes would not normally matter.
+		 * But when this is done inside of a <template> then it breaks Mustache. Since Mustache
+		 * is logic-less and curly braces are not unsafe for HTML, we can do a global replacement.
+		 * The replacement is done on the entire HTML document instead of just inside of the <template>
+		 * elements since it is faster and wouldn't change the outcome.
+		 */
+		$mustache_tag_placeholders = self::get_mustache_tag_placeholders();
+		$mustache_tags_replaced    = false;
+		$xpath                     = new DOMXPath( $dom );
+		$templates                 = $dom->getElementsByTagName( 'template' );
+		foreach ( $templates as $template ) {
+
+			// These attributes are the only ones that saveHTML() will URL-encode.
+			foreach ( $xpath->query( './/*/@src|.//*/@href|.//*/@action', $template ) as $attribute ) {
+				$attribute->nodeValue = str_replace(
+					array_keys( $mustache_tag_placeholders ),
+					array_values( $mustache_tag_placeholders ),
+					$attribute->nodeValue,
+					$count
+				);
+				if ( $count ) {
+					$mustache_tags_replaced = true;
+				}
+			}
+		}
+
 		$html = $dom->saveHTML( $node );
 
 		// Whitespace just causes unit tests to fail... so whitespace begone.
 		if ( '' === trim( $html ) ) {
 			return '';
 		}
 
+		// Restore amp-mustache placeholders which were replaced to prevent URL-encoded corruption by saveHTML.
+		if ( $mustache_tags_replaced ) {
+			$html = str_replace(
+				array_values( $mustache_tag_placeholders ),
+				array_keys( $mustache_tag_placeholders ),
+				$html
+			);
+		}
+
 		// Restore noscript elements which were temporarily removed to prevent libxml<2.8 parsing problems.
 		if ( version_compare( LIBXML_DOTTED_VERSION, '2.8', '<' ) ) {
 			$html = str_replace(
@@ -383,14 +405,6 @@ public static function get_content_from_dom_node( $dom, $node ) {
 
 		$html = self::restore_amp_bind_attributes( $html );
 
-		// Restore amp-mustache placeholders which were replaced to prevent URL-encoded corruption by saveHTML.
-		$placeholders = self::get_mustache_tag_placeholders();
-		$html         = str_replace(
-			array_values( $placeholders ),
-			array_keys( $placeholders ),
-			$html
-		);
-
 		/*
 		 * Travis w/PHP 7.1 generates <br></br> and <hr></hr> vs. <br/> and <hr/>, respectively.
 		 * Travis w/PHP 7.x generates <source ...></source> vs. <source ... />.  Etc.