Issue #864: Native WordPress widget support, including subclasses

amp.php

@@ -71,6 +71,7 @@ function amp_after_setup_theme() {
 	}
 
 	add_action( 'init', 'amp_init' );
+	add_action( 'init', 'amp_add_widget_support' );
 	add_action( 'admin_init', 'AMP_Options_Manager::register_settings' );
 	add_filter( 'amp_post_template_analytics', 'amp_add_custom_analytics' );
 	add_action( 'wp_loaded', 'amp_post_meta_box' );

includes/admin/functions.php

@@ -136,6 +136,16 @@ function amp_add_custom_analytics( $analytics ) {
 	return $analytics;
 }
 
+/**
+ * Bootstraps AMP widget support class, which registers AMP-compliant widgets.
+ *
+ * @since 0.7
+ */
+function amp_add_widget_support() {
+	$amp_widgets = new AMP_Widgets();
+	$amp_widgets->init();
+}
+
 /**
  * Bootstrap AMP post meta box.
  *

includes/class-amp-autoloader.php

@@ -78,6 +78,15 @@ class AMP_Autoloader {
 		'AMP_Image_Dimension_Extractor'               => 'includes/utils/class-amp-image-dimension-extractor',
 		'AMP_String_Utils'                            => 'includes/utils/class-amp-string-utils',
 		'AMP_WP_Utils'                                => 'includes/utils/class-amp-wp-utils',
+		'AMP_Widget_Archives'                         => 'includes/widgets/class-amp-widget-archives',
+		'AMP_Widget_Categories'                       => 'includes/widgets/class-amp-widget-categories',
+		'AMP_Widget_Media_Audio'                      => 'includes/widgets/class-amp-widget-media-audio',
+		'AMP_Widget_Media_Gallery'                    => 'includes/widgets/class-amp-widget-media-gallery',
+		'AMP_Widget_Media_Image'                      => 'includes/widgets/class-amp-widget-media-image',
+		'AMP_Widget_Media_Video'                      => 'includes/widgets/class-amp-widget-media-video',
+		'AMP_Widget_Recent_Comments'                  => 'includes/widgets/class-amp-widget-recent-comments',
+		'AMP_Widget_RSS'                              => 'includes/widgets/class-amp-widget-rss',
+		'AMP_Widgets'                                 => 'includes/widgets/class-amp-widgets',
 		'WPCOM_AMP_Polldaddy_Embed'                   => 'wpcom/class-amp-polldaddy-embed',
 		'AMP_Test_Stub_Sanitizer'                     => 'tests/stubs',
 		'AMP_Test_World_Sanitizer'                    => 'tests/stubs',

includes/widgets/class-amp-widget-archives.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Class AMP_Widget_Archives
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Widget_Archives
+ *
+ * @package AMP
+ */
+class AMP_Widget_Archives extends WP_Widget_Archives {
+
+	/**
+	 * Echoes the markup of the widget.
+	 *
+	 * @todo filter $output, to strip the onchange attribute
+	 * @see https://github.com/Automattic/amp-wp/issues/864
+	 * @param array $args Widget display data.
+	 * @param array $instance Data for widget.
+	 * @return void.
+	 */
+	public function widget( $args, $instance ) {
+		ob_start();
+		parent::widget( $args, $instance );
+		$output = ob_get_clean();
+		echo AMP_Theme_Support::filter_the_content( $output ); // WPCS: XSS ok.
+	}
+
+}

includes/widgets/class-amp-widget-categories.php

@@ -0,0 +1,102 @@
+<?php
+/**
+ * Class AMP_Widget_Categories
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Widget_Categories
+ *
+ * @package AMP
+ */
+class AMP_Widget_Categories extends WP_Widget_Categories {
+
+	/**
+	 * Adds an 'on' attribute to the category dropdown's <select>.
+	 *
+	 * @param string $dropdown The markup of the category dropdown.
+	 * @return string $dropdown The filtered markup of the dropdown.
+	 */
+	public function modify_select( $dropdown ) {
+		$new_select = sprintf( '<select on="change:widget-categories-dropdown-%d.submit"', esc_attr( $this->number ) );
+		return str_replace( '<select', $new_select, $dropdown );
+	}
+
+	/**
+	 * Echoes the markup of the widget.
+	 *
+	 * Mainly copied from WP_Widget_Categories::widget()
+	 * There's now an id for the <form>.
+	 * And the dropdown is now filtered with 'wp_dropdown_cats.'
+	 * This enables adding an 'on' attribute, with the id of the form.
+	 * So changing the dropdown value will redirect to the category page, with valid AMP.
+	 *
+	 * @param array $args Widget display data.
+	 * @param array $instance Data for widget.
+	 * @return void.
+	 */
+	public function widget( $args, $instance ) {
+		static $first_dropdown = true;
+		// @codingStandardsIgnoreLine
+		$title                 = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Categories' );
+		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
+		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
+		$c     = ! empty( $instance['count'] ) ? '1' : '0';
+		$h     = ! empty( $instance['hierarchical'] ) ? '1' : '0';
+		$d     = ! empty( $instance['dropdown'] ) ? '1' : '0';
+		echo wp_kses_post( $args['before_widget'] );
+		if ( $title ) {
+			echo wp_kses_post( $args['before_title'] . $title . $args['after_title'] );
+		}
+		$cat_args = array(
+			'orderby'      => 'name',
+			'show_count'   => $c,
+			'hierarchical' => $h,
+		);
+		if ( $d ) :
+			echo sprintf( '<form action="%s" method="get" id="widget-categories-dropdown-%d">', esc_url( home_url() ), esc_attr( $this->number ) );
+			add_filter( 'wp_dropdown_cats', array( $this, 'modify_select' ) );
+			$dropdown_id    = ( $first_dropdown ) ? 'cat' : "{$this->id_base}-dropdown-{$this->number}";
+			$first_dropdown = false;
+			echo '<label class="screen-reader-text" for="' . esc_attr( $dropdown_id ) . '">' . esc_html( $title ) . '</label>';
+			// @codingStandardsIgnoreLine
+			$cat_args['show_option_none'] = __( 'Select Category' );
+			$cat_args['id']               = $dropdown_id;
+			/**
+			 * Filters the arguments for the Categories widget drop-down.
+			 *
+			 * @since 2.8.0
+			 * @since 4.9.0 Added the `$instance` parameter.
+			 *
+			 * @see wp_dropdown_categories()
+			 *
+			 * @param array $cat_args An array of Categories widget drop-down arguments.
+			 * @param array $instance Array of settings for the current widget.
+			 */
+			wp_dropdown_categories( apply_filters( 'widget_categories_dropdown_args', $cat_args, $instance ) );
+			remove_filter( 'wp_dropdown_cats', array( $this, 'modify_select' ) );
+			echo '</form>';
+		else :
+			?>
+			<ul>
+			<?php
+			$cat_args['title_li'] = '';
+			/**
+			 * Filters the arguments for the Categories widget.
+			 *
+			 * @since 2.8.0
+			 * @since 4.9.0 Added the `$instance` parameter.
+			 *
+			 * @param array $cat_args An array of Categories widget options.
+			 * @param array $instance Array of settings for the current widget.
+			 */
+			wp_list_categories( apply_filters( 'widget_categories_args', $cat_args, $instance ) );
+			?>
+			</ul>
+		<?php
+		endif;
+		echo wp_kses_post( $args['after_widget'] );
+	}
+
+}

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

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Class AMP_Widget_Media_Audio
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Widget_Media_Audio
+ *
+ * @package AMP
+ */
+class AMP_Widget_Media_Audio extends WP_Widget_Media_Audio {
+
+	/**
+	 * Echoes the markup of the widget.
+	 *
+	 * @todo filter $output, to convert <audio> to <amp-audio>.
+	 * @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 AMP_Theme_Support::filter_the_content( $output ); // WPCS: XSS ok.
+	}
+
+}

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

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Class AMP_Widget_Media_Gallery
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Widget_Media_Gallery
+ *
+ * @package AMP
+ */
+class AMP_Widget_Media_Gallery extends WP_Widget_Media_Gallery {
+
+	/**
+	 * Echoes the markup of the widget.
+	 *
+	 * @todo filter $output, to convert <imp> to <amp-img> and remove the <style>.
+	 * @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 AMP_Theme_Support::filter_the_content( $output ); // WPCS: XSS ok.
+	}
+
+}

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 AMP_Theme_Support::filter_the_content( $output ); // WPCS: XSS ok.
+	}
+
+}

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

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Class AMP_Widget_Media_Video
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Widget_Media_Video
+ *
+ * @package AMP
+ */
+class AMP_Widget_Media_Video extends WP_Widget_Media_Video {
+
+	/**
+	 * Echoes the markup of the widget.
+	 *
+	 * @todo filter $output, to convert <video> to <amp-video> 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 AMP_Theme_Support::filter_the_content( $output ); // WPCS: XSS ok.
+	}
+
+}

includes/widgets/class-amp-widget-recent-comments.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Class AMP_Widget_Recent_Comments
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Widget_Recent_Comments
+ *
+ * @package AMP
+ */
+class AMP_Widget_Recent_Comments extends WP_Widget_Recent_Comments {
+
+	/**
+	 * Instantiates the widget, and prevents inline styling.
+	 */
+	public function __construct() {
+		parent::__construct();
+		add_filter( 'show_recent_comments_widget_style', '__return_false' );
+	}
+
+}

includes/widgets/class-amp-widget-rss.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Class AMP_Widget_RSS
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Widget_RSS
+ *
+ * @package AMP
+ */
+class AMP_Widget_RSS extends WP_Widget_RSS {
+
+	/**
+	 * Echoes the markup of the widget.
+	 *
+	 * @todo filter $output, to convert <img> to <amp-img>.
+	 * @see https://github.com/Automattic/amp-wp/issues/864
+	 * @param array $args Widget display data.
+	 * @param array $instance Data for widget.
+	 * @return void.
+	 */
+	public function widget( $args, $instance ) {
+		ob_start();
+		parent::widget( $args, $instance );
+		$output = ob_get_clean();
+		echo AMP_Theme_Support::filter_the_content( $output ); // WPCS: XSS ok.
+	}
+
+}