✨ Add style-preset="default" for amp-story-captions

GoogleForCreators · Oct 27, 2023 · 19e4446 · 19e4446
1 parent ac7445a
commit 19e4446
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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;
-              }
               `,
       }}
     />