Merge #1008.

amp.php

@@ -3,8 +3,8 @@
  * Plugin Name: AMP
  * Description: Add AMP support to your WordPress site.
  * Plugin URI: https://github.com/automattic/amp-wp
- * Author: Automattic
- * Author URI: https://automattic.com
+ * Author: WordPress.com VIP, XWP, Google, and contributors
+ * Author URI: https://github.com/Automattic/amp-wp/graphs/contributors
  * Version: 1.0-alpha
  * Text Domain: amp
  * Domain Path: /languages/

assets/js/amp-editor-blocks.js

@@ -20,7 +20,12 @@ var ampEditorBlocks = ( function() {
 				{ value: 'intrinsic', label: 'Intrinsic' } // Not supported by video.
 			],
 			defaultWidth: 608, // Max-width in the editor.
-			defaultHeight: 400
+			defaultHeight: 400,
+			mediaBlocks: [
+				'core/image',
+				'core/video',
+				'core/audio'
+			]
 		}
 	};
 
@@ -35,7 +40,6 @@ var ampEditorBlocks = ( function() {
 		wp.hooks.addFilter( 'blocks.registerBlockType', 'ampEditorBlocks/addAttributes', component.addAMPAttributes );
 		wp.hooks.addFilter( 'blocks.getSaveElement', 'ampEditorBlocks/filterSave', component.filterBlocksSave );
 		wp.hooks.addFilter( 'blocks.BlockEdit', 'ampEditorBlocks/filterEdit', component.filterBlocksEdit );
-		wp.hooks.addFilter( 'blocks.getSaveContent.extraProps', 'ampEditorBlocks/addLayoutAttribute', component.addAMPExtraProps );
 	};
 
 	/**
@@ -89,30 +93,6 @@ var ampEditorBlocks = ( function() {
 		return layoutOptions;
 	};
 
-	/**
-	 * Add extra data-amp-layout attribute to save to DB.
-	 *
-	 * @param {Object} props Properties.
-	 * @param {string} blockType Block type.
-	 * @param {Object} attributes Attributes.
-	 * @return {*} Props.
-	 */
-	component.addAMPExtraProps = function addAMPExtraProps( props, blockType, attributes ) {
-		var ampAttributes = {};
-		if ( ! attributes.ampLayout && ! attributes.ampNoLoading ) {
-			return props;
-		}
-
-		if ( attributes.ampLayout ) {
-			ampAttributes[ 'data-amp-layout' ] = attributes.ampLayout;
-		}
-		if ( attributes.ampNoLoading ) {
-			ampAttributes[ 'data-amp-noloading' ] = attributes.ampNoLoading;
-		}
-
-		return _.assign( ampAttributes, props );
-	};
-
 	/**
 	 * Add AMP attributes (in this test case just ampLayout) to every core block.
 	 *
@@ -121,14 +101,8 @@ var ampEditorBlocks = ( function() {
 	 * @return {*} Settings.
 	 */
 	component.addAMPAttributes = function addAMPAttributes( settings, name ) {
-		var mediaBlocks = [
-			'core/image',
-			'core/video',
-			'core/audio'
-		];
-
 		// AMP Carousel settings.
-		if ( 'core/shortcode' === name || 'core/gallery' ) {
+		if ( 'core/shortcode' === name || 'core/gallery' === name ) {
 			if ( ! settings.attributes ) {
 				settings.attributes = {};
 			}
@@ -138,7 +112,7 @@ var ampEditorBlocks = ( function() {
 		}
 
 		// Layout settings for embeds and media blocks.
-		if ( 0 === name.indexOf( 'core-embed' ) || -1 !== mediaBlocks.indexOf( name ) ) {
+		if ( 0 === name.indexOf( 'core-embed' ) || -1 !== component.data.mediaBlocks.indexOf( name ) ) {
 			if ( ! settings.attributes ) {
 				settings.attributes = {};
 			}
@@ -169,6 +143,11 @@ var ampEditorBlocks = ( function() {
 
 			ampLayout = attributes.ampLayout;
 
+			// Lets remove amp-related classes from edit view.
+			if ( component.hasClassAmpAttributes( attributes.className || '' ) ) {
+				props.setAttributes( { className: component.removeAmpAttributesFromClassName( attributes.className ) } );
+			}
+
 			if ( 'core/shortcode' === name ) {
 				// Lets remove amp-carousel from from edit view.
 				if ( component.hasGalleryShortcodeCarouselAttribute( attributes.text || '' ) ) {
@@ -186,12 +165,11 @@ var ampEditorBlocks = ( function() {
 				}
 			} else if ( 'core/gallery' === name ) {
 				inspectorControls = component.setUpGalleryInpsectorControls( props );
-			} else {
+			} else if ( -1 !== component.data.mediaBlocks.indexOf( name ) || 0 === name.indexOf( 'core-embed/' ) ) {
 				inspectorControls = component.setUpInspectorControls( props );
 			}
 
-			// For editor view, add a wrapper to any tags except for embeds, these will break due to embedding logic.
-			if ( attributes.ampLayout && -1 === name.indexOf( 'core-embed/' ) ) {
+			if ( attributes.ampLayout ) {
 				if ( 'core/image' === name ) {
 					component.setImageBlockLayoutAttributes( props, attributes.ampLayout, inspectorControls );
 				} else if ( 'nodisplay' === attributes.ampLayout ) {
@@ -225,7 +203,6 @@ var ampEditorBlocks = ( function() {
 		var attributes = props.attributes;
 		switch ( layout ) {
 			case 'fixed-height':
-				props.setAttributes( { width: '' } );
 				if ( ! attributes.height ) {
 					props.setAttributes( { height: component.data.defaultHeight } );
 				}
@@ -369,7 +346,9 @@ var ampEditorBlocks = ( function() {
 	 * @return {*} Output element.
 	 */
 	component.filterBlocksSave = function filterBlocksSave( element, blockType, attributes ) {
-		var text;
+		var text,
+			ampClassName = element.props.className || '',
+			props = element.props;
 		if ( 'core/shortcode' === blockType.name && component.isGalleryShortcode( attributes ) ) {
 			if ( attributes.ampCarousel ) {
 				// If the text contains amp-carousel, lets remove it.
@@ -402,9 +381,44 @@ var ampEditorBlocks = ( function() {
 			);
 		}
 
+		// In case AMP Layout, add layout to classname.
+		if ( component.hasAmpLayoutSet( attributes || '' ) ) {
+			ampClassName += ' amp-layout-' + attributes.ampLayout;
+		}
+		if ( component.hasAmpNoLoadingSet( attributes || '' ) ) {
+			ampClassName += ' amp-noloading';
+		}
+
+		if ( '' !== ampClassName && attributes.className !== ampClassName ) {
+			props.className = ampClassName.trim();
+			return wp.element.createElement(
+				element.type,
+				props
+			);
+		}
 		return element;
 	};
 
+	/**
+	 * Check if AMP NoLoading is set.
+	 *
+	 * @param {Object} attributes Attributes.
+	 * @return {boolean} If is set.
+	 */
+	component.hasAmpNoLoadingSet = function hasAmpNoLoadingSet( attributes ) {
+		return attributes.ampNoLoading && false !== attributes.ampNoLoading;
+	};
+
+	/**
+	 * Check if AMP Layout is set.
+	 *
+	 * @param {Object} attributes Attributes.
+	 * @return {boolean} If AMP Layout is set.
+	 */
+	component.hasAmpLayoutSet = function hasAmpLayoutSet( attributes ) {
+		return attributes.ampLayout && attributes.ampLayout.length;
+	};
+
 	/**
 	 * Removes amp-carousel=false from attributes.
 	 *
@@ -425,6 +439,33 @@ var ampEditorBlocks = ( function() {
 		return -1 !== text.indexOf( 'amp-carousel=false' );
 	};
 
+	/**
+	 * Check if className has AMP attributes in it.
+	 *
+	 * @param {string} className Classname.
+	 * @return {boolean} If has attributes.
+	 */
+	component.hasClassAmpAttributes = function hasClassAmpAttributes( className ) {
+		return -1 !== className.indexOf( 'amp-' );
+	};
+
+	/**
+	 * Remove AMP related attributes from classname.
+	 *
+	 * @param {string} className Original className.
+	 * @return {string} Modified className.
+	 */
+	component.removeAmpAttributesFromClassName = function removeAmpAttributesFromClassName( className ) {
+		var splits = className.split( ' ' );
+		var modifiedClass = '';
+		_.each( splits, function( split ) {
+			if ( -1 === split.indexOf( 'amp-' ) ) {
+				modifiedClass += ' ' + split;
+			}
+		} );
+		return modifiedClass;
+	};
+
 	/**
 	 * Check if shortcode is gallery shortcode.
 	 *

contributing.md

@@ -16,7 +16,18 @@ To install the `pre-commit` hook, do `bash dev-lib/install-pre-commit-hook.sh`.
 
 Note that pull requests will be checked against [WordPress-Coding-Standards](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards) with PHPCS, and for JavaScript linting is done with ESLint and (for now) JSCS and JSHint.
 
-To run the Grunt commands, please first `npm install -g grunt-cli` and then `npm install`.
+## Creating a Plugin Build
+
+To create a build of the plugin for installing in WordPress as a ZIP package, do:
+
+```bash
+git submodule update --init # (if you haven't done so yet)
+composer install # (if you haven't done so yet)
+npm install # (if you haven't done so yet)
+npm run build
+```
+
+This will create an `amp.zip` in the plugin directory which you can install. The contents of this ZIP are also located in the `build` directory which you can `rsync` somewhere as well. 
 
 ## Updating Allowed Tags And Attributes
 
@@ -83,9 +94,16 @@ When you push a commit to your PR, Travis CI will run the PHPUnit tests and snif
 
 Contributors who want to make a new release, follow these steps:
 
-0. Do `grunt build` and install the `amp.zip` onto a normal WordPress install running a stable release build; do smoke test to ensure it works.
-1. Bump plugin versions in `package.json` (×1), `package-lock.json` (×1, just do `npm install` first), `composer.json` (×1), and in `amp.php` (×2: the metadata block in the header and also the `AMP__VERSION` constant).
-2. Add changelog entry to readme.
-3. Merge release branch into `master`.
-4. Run `grunt deploy` to to commit the plugin to WordPress.org.
-5. [Create new release](https://github.com/Automattic/amp-wp/releases/new) on GitHub targeting `master`, with the new plugin version as the tag and release title. Attaching the `amp.zip` build to the release. Publish.
+1. Do `npm run build` and install the `amp.zip` onto a normal WordPress install running a stable release build; do smoke test to ensure it works.
+2. Bump plugin versions in `package.json` (×1), `package-lock.json` (×1, just do `npm install` first), `composer.json` (×1), and in `amp.php` (×2: the metadata block in the header and also the `AMP__VERSION` constant).
+3. Add changelog entry to readme.
+4. Draft blog post about the new release.
+5. [Draft new release](https://github.com/Automattic/amp-wp/releases/new) on GitHub targeting the release branch, with the new plugin version as the tag and release title. Attaching the `amp.zip` build to the release. Include link to changelog in release tag.
+6. Run `npm run deploy` to to commit the plugin to WordPress.org.
+7. Confirm the release is available on WordPress.org; try installing it on a WordPress install and confirm it works.
+8. Publish GitHub release.
+9. Merge release branch into `develop`.
+10. Merge release tag into `master`.
+11. Publish release blog post, including link to GitHub release.
+12. Close the GitHub milestone and project.
+13. Make announcements.

includes/admin/class-amp-editor-blocks.php

@@ -21,6 +21,69 @@ public function init() {
 		}
 	}
 
+	/**
+	 * Whenever a post type is registered, hook into saving the post.
+	 *
+	 * @param string $post_type The newly registered post type.
+	 * @return string That same post type.
+	 */
+	public static function register_post_pre_insert_functions( $post_type ) {
+		add_filter( "rest_pre_insert_{$post_type}", 'AMP_Editor_Blocks::filter_rest_pre_insert_post', 11, 1 );
+		return $post_type;
+	}
+
+	/**
+	 * Filter pre_insert_post to ensure className is saved to post_content, too.
+	 *
+	 * @param WP_Post $prepared_post Prepared post.
+	 * @return mixed Prepared post.
+	 */
+	public static function filter_rest_pre_insert_post( $prepared_post ) {
+		if ( ! class_exists( 'Gutenberg_PEG_Parser' ) ) {
+			return $prepared_post;
+		}
+		$parser = new Gutenberg_PEG_Parser();
+		$blocks = $parser->parse( _gutenberg_utf8_split( $prepared_post->post_content ) );
+		foreach ( $blocks as $block ) {
+			if ( isset( $block['innerHTML'] ) ) {
+
+				// Get the class of the figure.
+				preg_match( "'<figure class=\"(.*?)\"'si", $block['innerHTML'], $match );
+				if ( ! $match ) {
+					continue;
+				}
+				$class_names = explode( ' ', $match[1] );
+				$class_attr  = array();
+				if ( isset( $block['attrs']['className'] ) ) {
+					$class_attr[] = $block['attrs']['className'];
+				}
+
+				// Take everything except for the wp-block-{block_type} class.
+				foreach ( $class_names as $class_name ) {
+					if ( false !== strpos( $class_name, 'amp-' ) ) {
+						$class_attr[] = $class_name;
+					}
+				}
+
+				if ( empty( $class_attr ) ) {
+					continue;
+				}
+				$new_attributes = wp_json_encode( array_merge(
+					$block['attrs'],
+					array(
+						'className' => implode( ' ', $class_attr ),
+					)
+				), 64 /* JSON_UNESCAPED_SLASHES */ );
+				$to_replace     = wp_json_encode( $block['attrs'], 64 /* JSON_UNESCAPED_SLASHES */ );
+
+				// Replace the classname attribute with the modified one.
+				$content                     = str_replace( $to_replace, $new_attributes, $prepared_post->post_content );
+				$prepared_post->post_content = $content;
+			}
+		}
+		return $prepared_post;
+	}
+
 	/**
 	 * Whitelist used data-amp-* attributes.
 	 *

includes/admin/functions.php

@@ -161,3 +161,6 @@ function amp_editor_core_blocks() {
 	$editor_blocks = new AMP_Editor_Blocks();
 	$editor_blocks->init();
 }
+
+// Add filter for registering posts.
+add_filter( 'registered_post_type', 'AMP_Editor_Blocks::register_post_pre_insert_functions', 11 );

includes/sanitizers/class-amp-base-sanitizer.php

@@ -360,11 +360,16 @@ public function get_data_amp_attributes( $node ) {
 		$parent_node = $node->parentNode;
 		if ( 'figure' === $parent_node->tagName ) {
 			$parent_attributes = AMP_DOM_Utils::get_node_attributes_as_assoc_array( $parent_node );
-			if ( isset( $parent_attributes['data-amp-layout'] ) ) {
-				$attributes['layout'] = $parent_attributes['data-amp-layout'];
-			}
-			if ( isset( $parent_attributes['data-amp-noloading'] ) && true === filter_var( $parent_attributes['data-amp-noloading'], FILTER_VALIDATE_BOOLEAN ) ) {
-				$attributes['noloading'] = $parent_attributes['data-amp-noloading'];
+			if ( isset( $parent_attributes['class'] ) ) {
+				$classes = explode( ' ', $parent_attributes['class'] );
+
+				foreach ( $classes as $class_name ) {
+					if ( 0 === strpos( $class_name, 'amp-layout-' ) ) {
+						$attributes['layout'] = str_replace( 'amp-layout-', '', $class_name );
+					} elseif ( 'amp-noloading' === $class_name ) {
+						$attributes['noloading'] = true;
+					}
+				}
 			}
 		}