Issue #864: Native WordPress widget support, including subclasses

bin/add-test-widgets-to-sidebar.php

@@ -385,7 +385,12 @@ function amp_create_widget( $widget ) {
 		$title             = str_replace( '-', ' ', $title );
 		$settings['title'] = sprintf( 'Test %s Widget', ucwords( $title ) );
 	}
-	$widgets[] = $settings;
+
+	$number = max( array_keys( $widgets ) );
+	$number = max( 2, $number );
+	$number++;
+
+	$widgets[ $number ] = $settings;
 	update_option( $option_key, $widgets );
 }
 

includes/class-amp-autoloader.php

@@ -78,6 +78,14 @@ 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',
 		'WPCOM_AMP_Polldaddy_Embed'                   => 'wpcom/class-amp-polldaddy-embed',
 		'AMP_Test_Stub_Sanitizer'                     => 'tests/stubs',
 		'AMP_Test_World_Sanitizer'                    => 'tests/stubs',

includes/class-amp-theme-support.php

@@ -154,6 +154,8 @@ public static function register_paired_hooks() {
 	 */
 	public static function register_hooks() {
 
+		add_action( 'widgets_init', array( __CLASS__, 'register_widgets' ) );
+
 		// Remove core actions which are invalid AMP.
 		remove_action( 'wp_head', 'locale_stylesheet' );
 		remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
@@ -196,6 +198,29 @@ public static function register_hooks() {
 		// @todo Add character conversion.
 	}
 
+	/**
+	 * Register/override widgets.
+	 *
+	 * @global WP_Widget_Factory
+	 * @return void
+	 */
+	public static function register_widgets() {
+		global $wp_widget_factory;
+		foreach ( $wp_widget_factory->widgets as $registered_widget ) {
+			$registered_widget_class_name = get_class( $registered_widget );
+			if ( ! preg_match( '/^WP_Widget_(.+)$/', $registered_widget_class_name, $matches ) ) {
+				continue;
+			}
+			$amp_class_name = 'AMP_Widget_' . $matches[1];
+			if ( ! class_exists( $amp_class_name ) || is_a( $amp_class_name, $registered_widget_class_name ) ) {
+				continue;
+			}
+
+			unregister_widget( $registered_widget_class_name );
+			register_widget( $amp_class_name );
+		}
+	}
+
 	/**
 	 * Register content embed handlers.
 	 *
@@ -465,7 +490,7 @@ public static function get_amp_component_scripts( $html ) {
 		 *
 		 * @since 0.7
 		 *
-		 * @param string $amp_scripts AMP Component scripts, mapping component names to component source URLs.
+		 * @param array $amp_scripts AMP Component scripts, mapping component names to component source URLs.
 		 */
 		$amp_scripts = apply_filters( 'amp_component_scripts', $amp_scripts );
 

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,91 @@
+<?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;
+		$title                 = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Categories', 'default' );
+		/** 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>';
+			$cat_args['show_option_none'] = __( 'Select Category', 'default' );
+			$cat_args['id']               = $dropdown_id;
+
+			/** This filter is documented in wp-includes/widgets/class-wp-widget-categories.php */
+			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,34 @@
+<?php
+/**
+ * Class AMP_Widget_Media_Audio
+ *
+ * @package AMP
+ */
+
+if ( class_exists( 'WP_Widget_Media_Audio' ) ) {
+	/**
+	 * 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,32 @@
+<?php
+/**
+ * Class AMP_Widget_Media_Gallery
+ *
+ * @package AMP
+ */
+
+if ( class_exists( 'WP_Widget_Media_Gallery' ) ) {
+	/**
+	 * 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,34 @@
+<?php
+/**
+ * Class AMP_Widget_Media_Image
+ *
+ * @package AMP
+ */
+
+if ( class_exists( 'WP_Widget_Media_Image' ) ) {
+	/**
+	 * 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,34 @@
+<?php
+/**
+ * Class AMP_Widget_Media_Video
+ *
+ * @package AMP
+ */
+
+if ( class_exists( 'WP_Widget_Media_Video' ) ) {
+	/**
+	 * 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.
+	}
+
+}