From 787c4f53cf28e5b15a55e1c6ce56fd1a58e1ea28 Mon Sep 17 00:00:00 2001
From: Matias Szylkowski <mszylkowski@google.com>
Date: Fri, 29 Jul 2022 10:38:50 -0400
Subject: [PATCH 1/3] Made grid layer content not click shield other elements

---
 extensions/amp-story-360/0.1/amp-story-360.css               | 1 +
 extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css | 1 +
 extensions/amp-story/1.0/amp-story.css                       | 5 +++--
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/extensions/amp-story-360/0.1/amp-story-360.css b/extensions/amp-story-360/0.1/amp-story-360.css
index 0007c34971a6..7d31df9fd948 100644
--- a/extensions/amp-story-360/0.1/amp-story-360.css
+++ b/extensions/amp-story-360/0.1/amp-story-360.css
@@ -27,6 +27,7 @@ amp-story-360 amp-img {
   display: flex !important;
   align-items: center !important;
   z-index: 100000 !important;
+  pointer-events: auto !important;
 }
 
 .i-amphtml-story-360-activate-button-icon {
diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
index 3010dc49c786..abf365990af1 100644
--- a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
+++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
@@ -6,6 +6,7 @@ amp-story-shopping-tag {
   width: auto !important;
   color: white !important;
   position: absolute !important;
+  pointer-events: auto !important;
   /* Height and width ensures layoutCallback is called. */
   min-height: 1px !important;
   min-width: 1px !important;
diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css
index 159729325f2e..54677c41ae56 100644
--- a/extensions/amp-story/1.0/amp-story.css
+++ b/extensions/amp-story/1.0/amp-story.css
@@ -337,8 +337,9 @@ amp-story-page[active]:not(.i-amphtml-layout) amp-video.i-amphtml-poolbound:not(
   display: none !important;
 }
 
-amp-story-grid-layer > * {
-  pointer-events: auto !important;
+/** Make clickable elements in light dom accept pointer events */
+amp-story-grid-layer a, amp-story-grid-layer amp-twitter {
+  pointer-events: all !important;
 }
 
 /** Ensure clicks inside anchor tags are handled by the tooltip. */

From 4a8e7313c2c30f43e775897dd837ac69d9dcf113 Mon Sep 17 00:00:00 2001
From: Matias Szylkowski <mszylkowski@google.com>
Date: Mon, 1 Aug 2022 14:20:17 -0400
Subject: [PATCH 2/3] Update extensions/amp-story/1.0/amp-story.css

---
 extensions/amp-story/1.0/amp-story.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css
index 54677c41ae56..43d9077c14df 100644
--- a/extensions/amp-story/1.0/amp-story.css
+++ b/extensions/amp-story/1.0/amp-story.css
@@ -339,7 +339,7 @@ amp-story-page[active]:not(.i-amphtml-layout) amp-video.i-amphtml-poolbound:not(
 
 /** Make clickable elements in light dom accept pointer events */
 amp-story-grid-layer a, amp-story-grid-layer amp-twitter {
-  pointer-events: all !important;
+  pointer-events: auto !important;
 }
 
 /** Ensure clicks inside anchor tags are handled by the tooltip. */

From 747f70892e0bb4a3e2a283edfb7c82753c4aeb59 Mon Sep 17 00:00:00 2001
From: Matias Szylkowski <mszylkowski@google.com>
Date: Fri, 23 Sep 2022 14:22:07 -0400
Subject: [PATCH 3/3] Added example of unclickable div on top of quiz

---
 examples/amp-story/interactives.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/amp-story/interactives.html b/examples/amp-story/interactives.html
index ff1656fa3e8e..4df91bd9f69b 100644
--- a/examples/amp-story/interactives.html
+++ b/examples/amp-story/interactives.html
@@ -84,7 +84,6 @@ <h2>What is the best story ever?</h2>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer template="center">
-
             <amp-story-interactive-quiz
                 id="first-cup-dark"
                 endpoint="https://webstoriesinteractivity-beta.web.app/api/v1"
@@ -98,6 +97,10 @@ <h2>What is the best story ever?</h2>
                 option-4-text="Brazil">
             </amp-story-interactive-quiz>
           </amp-story-grid-layer>
+          <amp-story-grid-layer template="center">
+            <!-- Add div in front, should not be clickable (but the quiz behind should) -->
+            <div style="display: flex; align-items: center; justify-content: center"><p>🇺🇾</p></div>
+          </amp-story-grid-layer>
         </amp-story-page>
         <amp-story-page id="quiz-1b">
           <amp-story-grid-layer template="fill">