From 19e4446f8143f119c3094c7c159bd13b036b277a Mon Sep 17 00:00:00 2001
From: Anurag Vasanwala <75766877+AnuragVasanwala@users.noreply.github.com>
Date: Fri, 27 Oct 2023 18:39:02 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20`style-preset=3D"default"`=20?=
 =?UTF-8?q?for=20`amp-story-captions`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/KSES.php                   |  3 ++-
 packages/output/src/page.js         |  3 ++-
 packages/output/src/utils/styles.js | 16 ----------------
 3 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/includes/KSES.php b/includes/KSES.php
index 9e8e6026d92d..7d902f7f4045 100644
--- a/includes/KSES.php
+++ b/includes/KSES.php
@@ -571,7 +571,8 @@ public function filter_kses_allowed_html( $allowed_tags ) {
 				'title'                => true,
 			],
 			'amp-story-captions'            => [
-				'height' => true,
+				'height'       => true,
+				'style-preset' => true,
 			],
 			'amp-story-shopping-attachment' => [
 				'cta-text' => true,
diff --git a/packages/output/src/page.js b/packages/output/src/page.js
index a1f78a266dbf..1b8d25f22969 100644
--- a/packages/output/src/page.js
+++ b/packages/output/src/page.js
@@ -200,9 +200,10 @@ function OutputPage({
           <div className="captions-area">
             {videoCaptions.map((captionId) => (
               <amp-story-captions
-                key={captionId}
                 id={captionId}
+                key={captionId}
                 layout="container" // "container" layout will only occupy required height.
+                style-preset="default"
               />
             ))}
           </div>
diff --git a/packages/output/src/utils/styles.js b/packages/output/src/utils/styles.js
index 85d0da2ccdfe..40534c52c986 100644
--- a/packages/output/src/utils/styles.js
+++ b/packages/output/src/utils/styles.js
@@ -152,22 +152,6 @@ function CustomStyles() {
                 margin-bottom: 16px;
                 text-align: center;
               }
-
-              amp-story-captions span {
-                display: inline-block;
-                margin: 0;
-                padding: 6px 12px;
-                vertical-align: middle;
-                border-radius: 15px;
-                background: rgba(11, 11, 11, 0.6);
-                color: rgba(255, 255, 255, 1);
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;;
-                font-size: calc(4 * var(--story-page-vw));
-                line-height: 1.4;
-                word-break: break-word;
-                word-wrap: break-word;
-                overflow-wrap: break-word;
-              }
               `,
       }}
     />