AMP Support for Cookies and Consent (#15722)

Author: MattGeri

bin/phpcs-whitelist.js

@@ -54,6 +54,7 @@ module.exports = [
 	'modules/theme-tools/devicepx.php',
 	'modules/verification-tools.php',
 	'modules/widgets/contact-info.php',
+	'modules/widgets/eu-cookie-law/widget-amp.php',
 	'modules/widgets/social-icons.php',
 	'modules/woocommerce-analytics.php',
 	'modules/wpcom-block-editor/class-jetpack-wpcom-block-editor.php',

modules/widgets/eu-cookie-law.php

@@ -98,17 +98,20 @@ function __construct() {
 		 * Enqueue scripts and styles.
 		 */
 		function enqueue_frontend_scripts() {
-			wp_enqueue_style( 'eu-cookie-law-style', plugins_url( 'eu-cookie-law/style.css', __FILE__ ), array(), '20170403' );
-			wp_enqueue_script(
-				'eu-cookie-law-script',
-				Assets::get_file_url_for_environment(
-					'_inc/build/widgets/eu-cookie-law/eu-cookie-law.min.js',
-					'modules/widgets/eu-cookie-law/eu-cookie-law.js'
-				),
-				array(),
-				'20180522',
-				true
-			);
+			wp_enqueue_style( 'eu-cookie-law-style', plugins_url( 'eu-cookie-law/style.css', __FILE__ ), array(), JETPACK__VERSION );
+
+			if ( ! class_exists( 'Jetpack_AMP_Support' ) || ! Jetpack_AMP_Support::is_amp_request() ) {
+				wp_enqueue_script(
+					'eu-cookie-law-script',
+					Assets::get_file_url_for_environment(
+						'_inc/build/widgets/eu-cookie-law/eu-cookie-law.min.js',
+						'modules/widgets/eu-cookie-law/eu-cookie-law.js'
+					),
+					array(),
+					'20180522',
+					true
+				);
+			}
 		}
 
 		/**
@@ -156,6 +159,11 @@ public function widget( $args, $instance ) {
 
 			$instance = wp_parse_args( $instance, $this->defaults() );
 
+			if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) {
+				require dirname( __FILE__ ) . '/eu-cookie-law/widget-amp.php';
+				return;
+			}
+
 			$classes         = array();
 			$classes['hide'] = 'hide-on-' . esc_attr( $instance['hide'] );
 			if ( 'negative' === $instance['color-scheme'] ) {

modules/widgets/eu-cookie-law/style.css

@@ -25,6 +25,16 @@
 	top: 3em;
 }
 
+amp-consent.widget_eu_cookie_law_widget.widget.top {
+	top: 1em;
+	margin: 0;
+}
+
+.admin-bar amp-consent.widget_eu_cookie_law_widget.widget.top {
+	top: 0;
+	margin-top: 3em;
+}
+
 #eu-cookie-law {
 	background-color: #fff;
 	border: 1px solid #dedede;

modules/widgets/eu-cookie-law/widget-amp.php

@@ -0,0 +1,38 @@
+<?php // phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+/**
+ * AMP Widget for Cookies and Consent.
+ *
+ * @package Jetpack
+ */
+?>
+
+<amp-consent id="eu-cookie-consent" layout="nodisplay" class="widget widget_eu_cookie_law_widget<?php echo esc_attr( ! empty( $instance['position'] ) && 'top' === $instance['position'] ? ' top' : '' ); ?>">
+	<script type="application/json">
+		{
+			"consentInstanceId": "eu-cookie-consent",
+			"consentRequired": true,
+			"promptUI": "eu-cookie-consent-prompt"
+		}
+	</script>
+	<div class="popupOverlay" id="eu-cookie-consent-prompt">
+		<div class="consentPopup<?php echo esc_attr( ! empty( $instance['color-scheme'] ) && 'negative' === $instance['color-scheme'] ? ' negative' : '' ); ?>" id="eu-cookie-law">
+			<form>
+				<input type="button" on="tap:eu-cookie-consent.accept" class="accept" value="<?php echo esc_attr( $instance['button'] ); ?>" />
+			</form>
+			<?php
+			if ( 'default' === $instance['text'] || empty( $instance['customtext'] ) ) {
+				echo wp_kses_post( nl2br( $instance['default-text'] ) );
+			} else {
+				echo esc_html( $instance['customtext'] );
+			}
+
+			$policy_link_text = 'default' === $instance['policy-url'] || empty( $instance['custom-policy-url'] )
+					? $instance['default-policy-url']
+					: $instance['custom-policy-url'];
+			?>
+			<a href="<?php echo esc_url( $policy_link_text ); ?>">
+				<?php echo esc_html( $instance['policy-link-text'] ); ?>
+			</a>
+		</div>
+	</div>
+</amp-consent>