Issue #864: Subclass 'Image' widget to output valid AMP markup.

Like the 'Gallery' widget, only implement the render_media().
@todo: filter markup.
The test currently fails because of this.

includes/class-amp-autoloader.php

@@ -81,6 +81,7 @@ class AMP_Autoloader {
 		'AMP_Widget_Archives'                         => 'includes/widgets/class-amp-widget-archives',
 		'AMP_Widget_Categories'                       => 'includes/widgets/class-amp-widget-categories',
 		'AMP_Widget_Media_Gallery'                    => 'includes/widgets/class-amp-widget-media-gallery',
+		'AMP_Widget_Media_Image'                      => 'includes/widgets/class-amp-widget-media-image',
 		'AMP_Widget_Recent_Comments'                  => 'includes/widgets/class-amp-widget-recent-comments',
 		'AMP_Widgets'                                 => 'includes/widgets/class-amp-widgets',
 		'WPCOM_AMP_Polldaddy_Embed'                   => 'wpcom/class-amp-polldaddy-embed',

includes/widgets/class-amp-widget-media-image.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Class AMP_Widget_Media_Image
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Widget_Media_Image
+ *
+ * @package AMP
+ */
+class AMP_Widget_Media_Image extends WP_Widget_Media_Image {
+
+	/**
+	 * Echoes the markup of the widget.
+	 *
+	 * @todo filter $output, to convert <imp> to <amp-img> and remove the 'style' attribute.
+	 * @see https://github.com/Automattic/amp-wp/issues/864
+	 * @param array $instance Data for widget.
+	 * @return void.
+	 */
+	public function render_media( $instance ) {
+		ob_start();
+		parent::render_media( $instance );
+		$output = ob_get_clean();
+		echo $output; // WPCS: XSS ok.
+	}
+
+}

includes/widgets/class-amp-widgets.php

@@ -42,6 +42,7 @@ public function get_widgets() {
 			'WP_Widget_Archives'        => 'AMP_Widget_Archives',
 			'WP_Widget_Categories'      => 'AMP_Widget_Categories',
 			'WP_Widget_Media_Gallery'   => 'AMP_Widget_Media_Gallery',
+			'WP_Widget_Media_Image'     => 'AMP_Widget_Media_Image',
 			'WP_Widget_Recent_Comments' => 'AMP_Widget_Recent_Comments',
 		);
 	}

tests/test-class-amp-widget-media-image.php

@@ -0,0 +1,83 @@
+<?php
+/**
+ * Tests for class AMP_Widget_Media_Image.
+ *
+ * @package AMP
+ */
+
+/**
+ * Tests for class AMP_Widget_Media_Image.
+ *
+ * @package AMP
+ */
+class Test_AMP_Widget_Media_Image extends WP_UnitTestCase {
+
+	/**
+	 * Instance of the widget.
+	 *
+	 * @var object
+	 */
+	public $instance;
+
+	/**
+	 * Setup.
+	 *
+	 * @inheritdoc
+	 */
+	public function setUp() {
+		parent::setUp();
+		$amp_widgets = new AMP_Widgets();
+		$amp_widgets->register_widgets();
+		$this->instance = new AMP_Widget_Media_Image();
+	}
+
+	/**
+	 * Test construct().
+	 *
+	 * @see AMP_Widget_Media_Image::__construct().
+	 */
+	public function test_construct() {
+		global $wp_widget_factory;
+		$amp_widget = $wp_widget_factory->widgets['AMP_Widget_Media_Image'];
+
+		$this->assertEquals( 'media_image', $amp_widget->id_base );
+		$this->assertEquals( 'Image', $amp_widget->name );
+		$this->assertEquals( 'widget_media_image', $amp_widget->widget_options['classname'] );
+		$this->assertEquals( true, $amp_widget->widget_options['customize_selective_refresh'] );
+		$this->assertEquals( 'Displays an image.', $amp_widget->widget_options['description'] );
+	}
+
+	/**
+	 * Test widget().
+	 *
+	 * Mock image logic mainly copied from Test_WP_Widget_Media_image::test_render_media().
+	 *
+	 * @see AMP_Widget_Media_Image::widget().
+	 */
+	public function test_render_media() {
+		$first_test_image = '/tmp/test-image.jpg';
+		copy( DIR_TESTDATA . '/images/test-image.jpg', $first_test_image );
+		$attachment_id = self::factory()->attachment->create_object( array(
+			'file'           => $first_test_image,
+			'post_parent'    => 0,
+			'post_mime_type' => 'image/jpeg',
+			'post_title'     => 'Test Image',
+		) );
+		wp_update_attachment_metadata( $attachment_id, wp_generate_attachment_metadata( $attachment_id, $first_test_image ) );
+		$instance = array(
+			'title'         => 'Test Image Widget',
+			'attachment_id' => $attachment_id,
+			'height'        => 100,
+			'width'         => 100,
+			'url'           => 'https://example.com/amp',
+		);
+
+		ob_start();
+		$this->instance->render_media( $instance );
+		$output = ob_get_clean();
+
+		$this->assertFalse( strpos( $output, '<img' ) );
+		$this->assertFalse( strpos( $output, 'style=' ) );
+	}
+
+}