Enhancement/5451 twg widget

includes/Modules/Thank_With_Google.php

@@ -26,6 +26,7 @@
 use Google\Site_Kit\Core\Util\Method_Proxy_Trait;
 use Google\Site_Kit\Core\REST_API\Data_Request;
 use Google\Site_Kit\Modules\Thank_With_Google\Settings;
+use Google\Site_Kit\Modules\Thank_With_Google\Supporter_Wall_Widget;
 use Google\Site_Kit\Modules\Thank_With_Google\Web_Tag;
 
 /**
@@ -58,6 +59,38 @@ public function register() {
 		}
 
 		add_action( 'template_redirect', $this->get_method_proxy( 'register_tag' ) );
+
+		add_action(
+			'widgets_init',
+			function() {
+				register_widget( Supporter_Wall_Widget::class );
+			}
+		);
+
+		add_action(
+			'admin_init',
+			function() {
+				if (
+					! empty( $_GET['legacy-widget-preview']['idBase'] ) && // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+					Supporter_Wall_Widget::WIDGET_ID !== $_GET['legacy-widget-preview']['idBase'] // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+				) {
+					$this->register_tag();
+				}
+			}
+		);
+
+		add_filter(
+			'rest_pre_dispatch',
+			function( $result, $server, $request ) {
+				$needle = sprintf( 'widget-types/%s/render', Supporter_Wall_Widget::WIDGET_ID );
+				if ( stripos( $request->get_route(), $needle ) > 0 ) {
+					$this->register_tag();
+				}
+				return $result;
+			},
+			10,
+			3
+		);
 	}
 
 	/**
@@ -205,7 +238,6 @@ private function register_tag() {
 		$settings = $this->get_settings()->get();
 
 		$tag = new Web_Tag( $settings['publicationID'], self::MODULE_SLUG );
-
 		if ( $tag->is_tag_blocked() ) {
 			return;
 		}

includes/Modules/Thank_With_Google/Supporter_Wall_Widget.php

@@ -0,0 +1,109 @@
+<?php
+/**
+ * Class Google\Site_Kit\Modules\Thank_With_Google\Supporter_Wall_Widget
+ *
+ * @package   Google\Site_Kit\Modules\Thank_With_Google
+ * @copyright 2022 Google LLC
+ * @license   https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
+ * @link      https://sitekit.withgoogle.com
+ */
+
+namespace Google\Site_Kit\Modules\Thank_With_Google;
+
+use WP_Widget;
+
+/**
+ * The supporter wall widget for Thank with Google.
+ *
+ * @since n.e.x.t
+ * @access private
+ * @ignore
+ */
+class Supporter_Wall_Widget extends WP_Widget {
+
+	const WIDGET_ID = 'googlesitekit-twg-supporter-wall';
+
+	/**
+	 * Constructor.
+	 *
+	 * @since n.e.x.t
+	 */
+	public function __construct() {
+		parent::__construct(
+			self::WIDGET_ID,
+			__( 'Thank with Google: Supporter Wall', 'google-site-kit' )
+		);
+	}
+
+	/**
+	 * Renders the widget form.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param array $instance The widget instance.
+	 */
+	public function form( $instance ) {
+		$title    = ! empty( $instance['title'] ) ? $instance['title'] : '';
+		$title_id = $this->get_field_id( 'title' );
+
+		?>
+			<p>
+				<label for="<?php echo esc_attr( $title_id ); ?>">
+					<?php esc_html_e( 'Title:', 'google-site-kit' ); ?>
+				</label>
+				<input
+					type="text"
+					id="<?php echo esc_attr( $title_id ); ?>"
+					class="widefat"
+					name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
+					value="<?php echo esc_attr( $title ); ?>"
+				>
+			</p>
+			<p class="description">
+				<?php esc_html_e( 'The color of the supporter wall is based on the color theme you selected in the Thank with Google module settings.', 'google-site-kit' ); ?>
+			</p>
+		<?php
+	}
+
+	/**
+	 * Updates the widget settings.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param array $new_instance The array with new settings for the widget.
+	 * @param array $old_instance The array with old settings for the widget.
+	 * @return array New settings widgets.
+	 */
+	public function update( $new_instance, $old_instance ) {
+		$instance = array();
+
+		$instance['title'] = ! empty( $new_instance['title'] )
+			? sanitize_text_field( $new_instance['title'] )
+			: '';
+
+		return $instance;
+	}
+
+	/**
+	 * Displays the widget.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param array $args The widget arguments.
+	 * @param array $instance The widget settings.
+	 */
+	public function widget( $args, $instance ) {
+		wp_enqueue_script( 'google_thankjs' );
+
+		echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+
+		if ( ! empty( $instance['title'] ) ) {
+			echo $args['before_title'], apply_filters( 'widget_title', $instance['title'] ), $args['after_title'];  // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		}
+
+		echo '<div twg-thank-wall style="width:100%;height:490px;min-height:150px;overflow:hidden;border:1px solid #e3e3e3;border-radius:15px;margin:20px 0"></div>';
+
+		echo $args['after_widget'];  // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+	}
+
+}