Fix/864 remove sizes

.dev-lib

@@ -1,6 +1,7 @@
 PATH_EXCLUDES_PATTERN=includes/lib/
 DEFAULT_BASE_BRANCH=develop
 ASSETS_DIR=wp-assets
+PROJECT_SLUG=amp
 
 function after_wp_install {
     echo "Installing REST API..."

.travis.yml

@@ -43,9 +43,9 @@ cache:
 matrix:
   include:
    - php: "5.3"
-     env: WP_VERSION=latest DEV_LIB_SKIP=phpcs
+     env: WP_VERSION=latest DEV_LIB_SKIP=composer,phpcs
    - php: "5.3"
-     env: WP_VERSION=4.7 DEV_LIB_SKIP=phpcs
+     env: WP_VERSION=4.7 DEV_LIB_SKIP=composer,phpcs
    - php: "5.4"
      env: WP_VERSION=latest
    - php: "5.4"

amp.php

@@ -55,7 +55,7 @@ function amp_deactivate() {
 	// We need to manually remove the amp endpoint
 	global $wp_rewrite;
 	foreach ( $wp_rewrite->endpoints as $index => $endpoint ) {
-		if ( AMP_QUERY_VAR === $endpoint[1] ) {
+		if ( amp_get_slug() === $endpoint[1] ) {
 			unset( $wp_rewrite->endpoints[ $index ] );
 			break;
 		}
@@ -64,6 +64,15 @@ function amp_deactivate() {
 	flush_rewrite_rules();
 }
 
+/*
+ * Register AMP scripts regardless of whether AMP is enabled or it is the AMP endpoint
+ * for the sake of being able to use AMP components on non-AMP documents ("dirty AMP").
+ */
+add_action( 'wp_default_scripts', 'amp_register_default_scripts' );
+
+// Ensure async and custom-element/custom-template attributes are present on script tags.
+add_filter( 'script_loader_tag', 'amp_filter_script_loader_tag', PHP_INT_MAX, 2 );
+
 /**
  * Set up AMP.
  *
@@ -73,20 +82,12 @@ function amp_deactivate() {
  * @since 0.6
  */
 function amp_after_setup_theme() {
+	amp_get_slug(); // Ensure AMP_QUERY_VAR is set.
+
 	if ( false === apply_filters( 'amp_is_enabled', true ) ) {
 		return;
 	}
 
-	if ( ! defined( 'AMP_QUERY_VAR' ) ) {
-		/**
-		 * Filter the AMP query variable.
-		 *
-		 * @since 0.3.2
-		 * @param string $query_var The AMP query variable.
-		 */
-		define( 'AMP_QUERY_VAR', apply_filters( 'amp_query_var', 'amp' ) );
-	}
-
 	add_action( 'init', 'amp_init', 0 ); // Must be 0 because widgets_init happens at init priority 1.
 }
 add_action( 'after_setup_theme', 'amp_after_setup_theme', 5 );
@@ -107,11 +108,11 @@ function amp_init() {
 
 	load_plugin_textdomain( 'amp', false, plugin_basename( AMP__DIR__ ) . '/languages' );
 
-	add_rewrite_endpoint( AMP_QUERY_VAR, EP_PERMALINK );
+	add_rewrite_endpoint( amp_get_slug(), EP_PERMALINK );
 
+	AMP_Validation_Utils::init();
 	AMP_Theme_Support::init();
 	AMP_Post_Type_Support::add_post_type_support();
-	AMP_Validation_Utils::init();
 	add_filter( 'request', 'amp_force_query_var_value' );
 	add_action( 'admin_init', 'AMP_Options_Manager::register_settings' );
 	add_action( 'wp_loaded', 'amp_post_meta_box' );
@@ -132,8 +133,8 @@ function amp_init() {
 // Make sure the `amp` query var has an explicit value.
 // Avoids issues when filtering the deprecated `query_string` hook.
 function amp_force_query_var_value( $query_vars ) {
-	if ( isset( $query_vars[ AMP_QUERY_VAR ] ) && '' === $query_vars[ AMP_QUERY_VAR ] ) {
-		$query_vars[ AMP_QUERY_VAR ] = 1;
+	if ( isset( $query_vars[ amp_get_slug() ] ) && '' === $query_vars[ amp_get_slug() ] ) {
+		$query_vars[ amp_get_slug() ] = 1;
 	}
 	return $query_vars;
 }
@@ -202,7 +203,7 @@ function amp_correct_query_when_is_front_page( WP_Query $query ) {
 		$query->is_home()
 		&&
 		// Is AMP endpoint.
-		false !== $query->get( AMP_QUERY_VAR, false )
+		false !== $query->get( amp_get_slug(), false )
 		&&
 		// Is query not yet fixed uo up to be front page.
 		! $query->is_front_page()
@@ -214,7 +215,7 @@ function amp_correct_query_when_is_front_page( WP_Query $query ) {
 		get_option( 'page_on_front' )
 		&&
 		// See line in WP_Query::parse_query() at <https://github.com/WordPress/wordpress-develop/blob/0baa8ae/src/wp-includes/class-wp-query.php#L961>.
-		0 === count( array_diff( array_keys( wp_parse_args( $query->query ) ), array( AMP_QUERY_VAR, 'preview', 'page', 'paged', 'cpage' ) ) )
+		0 === count( array_diff( array_keys( wp_parse_args( $query->query ) ), array( amp_get_slug(), 'preview', 'page', 'paged', 'cpage' ) ) )
 	);
 	if ( $is_front_page_query ) {
 		$query->is_home     = false;
@@ -304,9 +305,9 @@ function amp_render_post( $post ) {
 	 * which is not ideal for any code that expects to run in an AMP context.
 	 * Let's force the value to be true while we render AMP.
 	 */
-	$was_set = isset( $wp_query->query_vars[ AMP_QUERY_VAR ] );
+	$was_set = isset( $wp_query->query_vars[ amp_get_slug() ] );
 	if ( ! $was_set ) {
-		$wp_query->query_vars[ AMP_QUERY_VAR ] = true;
+		$wp_query->query_vars[ amp_get_slug() ] = true;
 	}
 
 	// Prevent New Relic from causing invalid AMP responses due the NREUM script it injects after the meta charset.
@@ -328,7 +329,7 @@ function amp_render_post( $post ) {
 	$template->load();
 
 	if ( ! $was_set ) {
-		unset( $wp_query->query_vars[ AMP_QUERY_VAR ] );
+		unset( $wp_query->query_vars[ amp_get_slug() ] );
 	}
 }
 
@@ -359,7 +360,7 @@ function _amp_bootstrap_customizer() {
 function amp_redirect_old_slug_to_new_url( $link ) {
 
 	if ( is_amp_endpoint() ) {
-		$link = trailingslashit( trailingslashit( $link ) . AMP_QUERY_VAR );
+		$link = trailingslashit( trailingslashit( $link ) . amp_get_slug() );
 	}
 
 	return $link;

bin/create-gutenberg-test-post.php

@@ -0,0 +1,175 @@
+<?php
+/**
+ * Creates a post to test all Gutenberg blocks.
+ *
+ * @codeCoverageIgnore
+ * @package AMP
+ */
+
+namespace AMP;
+
+/**
+ * Gets many of the Gutenberg fixture blocks in blocks/tests/fixtures/.
+ *
+ * @throws \Exception If this is script is not run inside the plugin directory, or if it doesn't have .html fixtures.
+ * @return string $content Post content with all Gutenberg blocks.
+ */
+function get_test_block_fixtures() {
+	$gutenberg_dir = dirname( dirname( __DIR__ ) ) . '/gutenberg';
+	$content       = get_test_block_permutations();
+	if ( ! is_dir( $gutenberg_dir ) ) {
+		$gutenberg_dir = dirname( $gutenberg_dir );
+		if ( ! is_dir( $gutenberg_dir ) ) {
+			throw new \Exception( 'Please run this script from the AMP plugin root.' );
+		}
+	}
+
+	$fixtures_dir = $gutenberg_dir . '/blocks/test/fixtures';
+	if ( ! is_dir( $fixtures_dir ) ) {
+		throw new \Exception( "Test files not found in the Gutenberg plugin. You may need to clone the plugin repo: \nhttps://github.com/WordPress/gutenberg.git" );
+	}
+
+	foreach ( glob( $fixtures_dir . '/*.html' ) as $file ) {
+		if ( ! preg_match( '/(serialized|embed|shortcode|custom-text-teaser|core__block)/', $file ) ) {
+			// Add the block's title.
+			preg_match( ':core__(?P<block>.+)\.html:s', basename( $file ), $matches );
+			if ( isset( $matches['block'] ) ) {
+				$content .= sprintf( '<h1>%s</h1>', $matches['block'] );
+			}
+			$content .= file_get_contents( $file ); // @codingStandardsIgnoreLine: file_get_contents_file_get_contents, file_system_read_file_get_contents.
+		}
+	}
+
+	// Replace broken URLs in fixture files.
+	$content = str_replace( 'http://google.com/hi.png', 'https://cldup.com/-3VMmmrPm9.jpg', $content );
+	$content = str_replace( 'https://awesome-fake.video/file.mp4', 'https://videos.files.wordpress.com/DK5mLrbr/video-ca6dc0ab4a_hd.mp4', $content );
+	return $content;
+}
+
+/**
+ * Gets the Gutenberg block permutations.
+ *
+ * These are mostly copied from gutenberg/blocks/test/fixtures/, and slightly modified.
+ * Embeds and shortcodes are tested in a separate script, so this does not have have many.
+ *
+ * @return string $content The blocks as HTML.
+ */
+function get_test_block_permutations() {
+	$blocks = array(
+		array(
+			'title'   => '(Reusable) Block With Video',
+			'content' => sprintf( '<!-- wp:block {"ref":%d} /-->', create_test_reusable_block() ),
+		),
+		array(
+			'title'   => 'Categories With Dropdown',
+			'content' => '<!-- wp:core/categories {"showPostCounts":false,"displayAsDropdown":true,"showHierarchy":false} /-->',
+		),
+		array(
+			'title'   => 'Columns, With 2 Columns',
+			'content' => '<!-- wp:core/columns {"columns":2} --><div class="wp-block-columns has-2-columns"><!-- wp:core/paragraph {"layout":"column-1"} --><p class="layout-column-1">Column One, Paragraph One</p><!-- /wp:core/paragraph --><!-- wp:core/paragraph {"layout":"column-1"} --><p class="layout-column-1">Column One, Paragraph Two</p><!-- /wp:core/paragraph --><!-- wp:core/paragraph {"layout":"column-2"} --><p class="layout-column-2">Column Two, Paragraph One</p><!-- /wp:core/paragraph --></div><!-- /wp:core/columns -->',
+		),
+		array(
+			'title'   => 'Cover Image With Fixed Background',
+			'content' => '<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} --><section class="wp-block-cover-image has-background-dim-40 has-background-dim has-parallax" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)"><h2>Guten Berg!</h2></section><!-- /wp:core/cover-image -->',
+		),
+		array(
+			'title'   => 'WordPress Embed',
+			'content' => '<!-- wp:core-embed/wordpress {"url":"https://make.wordpress.org/core/2017/12/11/whats-new-in-gutenberg-11th-december/"} --><figure class="wp-block-embed-wordpress wp-block-embed">https://make.wordpress.org/core/2017/12/11/whats-new-in-gutenberg-11th-december/<figcaption>Embedded content from WordPress</figcaption></figure><!-- /wp:core-embed/wordpress -->',
+		),
+		array(
+			'title'   => 'YouTube Embed',
+			'content' => '<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=GGS-tKTXw4Y"} --><figure class="wp-block-embed-youtube wp-block-embed">https://www.youtube.com/watch?v=GGS-tKTXw4Y<figcaption>Embedded content from youtube</figcaption></figure><!-- /wp:core-embed/youtube -->',
+		),
+		array(
+			'title'   => 'Twitter Embed',
+			'content' => '<!-- wp:core-embed/twitter {"url":"https://twitter.com/AMPhtml/status/963443140005957632"} --><figure class="wp-block-embed-twitter wp-block-embed">https://twitter.com/AMPhtml/status/963443140005957632<figcaption>We are Automattic</figcaption></figure><!-- /wp:core-embed/twitter -->',
+		),
+		array(
+			'title'   => 'Gallery With 3 Columns',
+			'content' => '<!-- wp:core/gallery --><ul class="wp-block-gallery alignnone columns-3 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></figure></li><li class="blocks-gallery-item"><figure><img src="https://cldup.com/-3VMmmrPm9.jpg" alt="title" /></figure></li><li class="blocks-gallery-item"><figure><img src="https://cldup.com/aMbxBM0zAi.jpg" alt="title" /></figure></li></ul><!-- /wp:core/gallery -->',
+		),
+		array(
+			'title'   => 'Audio Shortcode',
+			'content' => '<!-- wp:core/shortcode -->[audio src=https://wptavern.com/wp-content/uploads/2017/11/EPISODE-296-Gutenberg-Telemetry-Calypso-and-More-With-Matt-Mullenweg.mp3]<!-- /wp:core/shortcode -->',
+		),
+		array(
+			'title'   => 'Caption Shortcode',
+			'content' => '<!-- wp:core/shortcode -->[caption width=150]This is a caption[/caption]<!-- /wp:core/shortcode -->',
+		),
+	);
+
+	$content = '';
+	foreach ( $blocks as $block ) {
+		$content .= sprintf( '<h2>%s</h2>', $block['title'] );
+		$content .= $block['content'];
+	}
+
+	return $content;
+}
+
+/**
+ * Creates a reusable block with a video.
+ *
+ * Reusable blocks are stored in custom post types.
+ * This creates one, and returns the ID on success.
+ *
+ * @return int|\WP_Error $post_id The post ID where the reusable block is stored, and 0 or WP_Error in case of failure.
+ */
+function create_test_reusable_block() {
+	return wp_insert_post( array(
+		'post_type'    => 'wp_block',
+		'post_title'   => 'Test Reusable Block',
+		'post_content' => '<!-- wp:core/video --><figure class="wp-block-video"><video src="https://videos.files.wordpress.com/DK5mLrbr/video-ca6dc0ab4a_hd.mp4" controls=""></video></figure><!-- /wp:core/video -->',
+		'post_status'  => 'publish',
+	) );
+}
+
+/**
+ * Creates a Gutenberg test post (page).
+ *
+ * @throws \Exception If there is an error in creating the test page.
+ * @param string $content The content to add to the post.
+ * @return int Page ID.
+ */
+function create_gutenberg_test_post( $content ) {
+	$slug            = 'amp-test-gutenberg-blocks';
+	$title           = 'AMP Test Gutenberg Blocks';
+	$page            = get_page_by_path( "/{$slug}/" );
+	$failure_message = 'The test page could not be added, please try again.';
+	if ( $page ) {
+		$page_id = $page->ID;
+	} else {
+		$page_id = wp_insert_post( array(
+			'post_name'  => $slug,
+			'post_title' => $title,
+			'post_type'  => 'page',
+		) );
+
+		if ( ! $page_id || is_wp_error( $page_id ) ) {
+			throw new \Exception( $failure_message );
+		}
+	}
+
+	$update = wp_update_post( array(
+		'ID'           => $page_id,
+		'post_content' => $content,
+	) );
+
+	if ( ! $update ) {
+		throw new \Exception( $failure_message );
+	}
+	return $update;
+}
+
+// Bootstrap.
+if ( defined( 'WP_CLI' ) ) {
+	try {
+		$post_id = create_gutenberg_test_post( get_test_block_fixtures() );
+		\WP_CLI::success( sprintf( 'The test page is at: %s', \amp_get_permalink( $post_id ) . '#development=1' ) );
+	} catch ( \Exception $e ) {
+		\WP_CLI::error( $e->getMessage() );
+	}
+} else {
+	echo "This script should be run WP-CLI via: wp eval-file bin/create-gutenberg-test-post.php\n";
+	exit( 1 );
+}

bin/create-gutenberg-test-post.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+set -e
+cd "$(dirname "$0")"
+
+BIN_PATH="$(pwd)"
+PROJECT_PATH=$(dirname $PWD)
+PLUGINS_PATH=$(dirname $PROJECT_PATH)
+GUTENBERG_PATH=$PLUGINS_PATH/gutenberg
+
+# Clone the Gutenberg plugin, or pull the master branch if it's already present.
+if [[ ! -e $GUTENBERG_PATH ]]; then
+	cd $PLUGINS_PATH
+	echo "This needs to clone the Gutenberg plugin into your plugins directory, as it looks like it's not there."
+	read -p "Is that alright? y/n " -r
+	if [[ $REPLY =~ [Yy] ]]; then
+		git clone https://github.com/WordPress/gutenberg.git
+		wp plugin activate gutenberg
+		echo "The Gutenberg plugin is cloned. Please follow the build steps:"
+		echo "https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md"
+	else
+		echo "Exiting script."
+		exit 1
+	fi
+else
+	cd $GUTENBERG_PATH
+	if [ 'master' == $( git rev-parse --abbrev-ref HEAD ) ]; then
+		git pull origin master
+	fi
+fi
+
+cd $PROJECT_PATH
+wp eval-file bin/create-gutenberg-test-post.php

contributing.md

@@ -42,6 +42,14 @@ To run it:
 3. run `wp eval-file bin/create-comments-on-test-post.php`
 4. go to the URL that is output in the command line
 
+## Testing Gutenberg Block Support
+
+The following script creates a post with all core Gutenberg blocks. To run it:
+1. `ssh` into an environment like [VVV](https://github.com/Varying-Vagrant-Vagrants/VVV)
+2. `cd` to the root of this plugin
+3. run `bash bin/create-gutenberge-test-post.sh`
+4. go to the URL that is output in the command line
+
 ## PHPUnit Testing
 
 Please run these tests in an environment with WordPress unit tests installed, like [VVV](https://github.com/Varying-Vagrant-Vagrants/VVV).

includes/admin/class-amp-customizer.php

@@ -134,7 +134,7 @@ public function add_customizer_scripts() {
 
 		wp_add_inline_script( 'amp-customize-controls', sprintf( 'ampCustomizeControls.boot( %s );',
 			wp_json_encode( array(
-				'queryVar' => AMP_QUERY_VAR,
+				'queryVar' => amp_get_slug(),
 				'panelId'  => self::PANEL_ID,
 				'ampUrl'   => amp_admin_get_preview_permalink(),
 				'l10n'     => array(

includes/admin/class-amp-post-meta-box.php

@@ -145,7 +145,7 @@ public function enqueue_admin_assets() {
 		);
 		wp_add_inline_script( self::ASSETS_HANDLE, sprintf( 'ampPostMetaBox.boot( %s );',
 			wp_json_encode( array(
-				'previewLink'     => esc_url_raw( add_query_arg( AMP_QUERY_VAR, '', get_preview_post_link( $post ) ) ),
+				'previewLink'     => esc_url_raw( add_query_arg( amp_get_slug(), '', get_preview_post_link( $post ) ) ),
 				'canonical'       => amp_is_canonical(),
 				'enabled'         => post_supports_amp( $post ),
 				'canSupport'      => count( AMP_Post_Type_Support::get_support_errors( $post ) ) === 0,
@@ -237,7 +237,7 @@ public function preview_post_link( $link ) {
 		);
 
 		if ( $is_amp ) {
-			$link = add_query_arg( AMP_QUERY_VAR, true, $link );
+			$link = add_query_arg( amp_get_slug(), true, $link );
 		}
 
 		return $link;