diff --git a/examples/amp-story/attachment.html b/examples/amp-story/attachment.html
index 1477ba8e591e..87fb1883d17e 100644
--- a/examples/amp-story/attachment.html
+++ b/examples/amp-story/attachment.html
@@ -169,11 +169,11 @@
Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.
-
-
+
@@ -186,13 +186,13 @@
Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.
-
-
+
@@ -205,12 +205,12 @@
Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.
-
-
+
@@ -223,12 +223,12 @@
Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.
-
-
+
@@ -241,14 +241,14 @@
Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.
-
-
+
@@ -261,14 +261,14 @@
Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.
-
-
+
@@ -281,14 +281,14 @@
Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.
-
-
+
@@ -301,14 +301,14 @@
Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.
-
-
+
diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
index d2a50424a607..80bfb8aa3fb9 100644
--- a/extensions/amp-story/1.0/amp-story-page.js
+++ b/extensions/amp-story/1.0/amp-story-page.js
@@ -1739,8 +1739,9 @@ export class AmpStoryPage extends AMP.BaseElement {
* @private
*/
renderOpenAttachmentUI_() {
+ // AttachmentEl can be either amp-story-page-attachment or amp-story-page-outlink
const attachmentEl = this.element.querySelector(
- 'amp-story-page-attachment'
+ 'amp-story-page-attachment, amp-story-page-outlink'
);
if (!attachmentEl) {
return;
diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
index afd0104dfbab..e0b156deb128 100644
--- a/extensions/amp-story/1.0/amp-story.js
+++ b/extensions/amp-story/1.0/amp-story.js
@@ -2985,5 +2985,6 @@ AMP.extension('amp-story', '1.0', (AMP) => {
AMP.registerElement('amp-story-grid-layer', AmpStoryGridLayer);
AMP.registerElement('amp-story-page', AmpStoryPage);
AMP.registerElement('amp-story-page-attachment', AmpStoryPageAttachment);
+ AMP.registerElement('amp-story-page-outlink', AmpStoryPageAttachment); // Shares codepath with amp-story-page-attachment.
AMP.registerServiceForDoc('amp-story-render', AmpStoryRenderService);
});
diff --git a/extensions/amp-story/1.0/page-advancement.js b/extensions/amp-story/1.0/page-advancement.js
index 59bea3eeffa1..1f541af1ffc6 100644
--- a/extensions/amp-story/1.0/page-advancement.js
+++ b/extensions/amp-story/1.0/page-advancement.js
@@ -474,7 +474,10 @@ export class ManualAdvancement extends AdvancementConfig {
(el) => {
tagName = el.tagName.toLowerCase();
- if (tagName === 'amp-story-page-attachment') {
+ if (
+ tagName === 'amp-story-page-attachment' ||
+ tagName === 'amp-story-page-outlink'
+ ) {
shouldHandleEvent = false;
return true;
}
@@ -502,7 +505,7 @@ export class ManualAdvancement extends AdvancementConfig {
/**
* For an element to trigger a tooltip it has to be descendant of
- * amp-story-page but not of amp-story-cta-layer or amp-story-page-attachment.
+ * amp-story-page but not of amp-story-cta-layer, amp-story-page-attachment or amp-story-page-outlink.
* @param {!Event} event
* @param {!ClientRect} pageRect
* @return {boolean}
@@ -542,7 +545,8 @@ export class ManualAdvancement extends AdvancementConfig {
if (
tagName === 'amp-story-cta-layer' ||
- tagName === 'amp-story-page-attachment'
+ tagName === 'amp-story-page-attachment' ||
+ tagName === 'amp-story-page-outlink'
) {
valid = false;
return false;
diff --git a/extensions/amp-story/1.0/test/test-amp-story-page.js b/extensions/amp-story/1.0/test/test-amp-story-page.js
index b2657aa3fb50..ccf7ed9d5084 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-page.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-page.js
@@ -694,6 +694,21 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => {
expect(openAttachmentEl.getAttribute('target')).to.eql('_top');
});
+ it('should build the open outlink UI with same codepath as page attachment', async () => {
+ const outlinkEl = win.document.createElement('amp-story-page-outlink');
+ outlinkEl.setAttribute('layout', 'nodisplay');
+ element.appendChild(outlinkEl);
+
+ page.buildCallback();
+ await page.layoutCallback();
+ page.setState(PageState.PLAYING);
+
+ const openoutlinkEl = element.querySelector(
+ '.i-amphtml-story-page-open-attachment'
+ );
+ expect(openoutlinkEl).to.exist;
+ });
+
it('should build the inline page attachment UI with one image', async () => {
toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true);
diff --git a/extensions/amp-story/validator-amp-story.protoascii b/extensions/amp-story/validator-amp-story.protoascii
index 70d7083afd8d..bc193a02cfd6 100644
--- a/extensions/amp-story/validator-amp-story.protoascii
+++ b/extensions/amp-story/validator-amp-story.protoascii
@@ -848,6 +848,32 @@ tags: { # with href
spec_name: "amp-story-page-attachment[href]"
mandatory_ancestor: "AMP-STORY-PAGE"
mandatory_last_child: true
+ attrs: {
+ name: "cta-accent-color"
+ }
+ attrs: {
+ name: "cta-accent-element"
+ value: "background"
+ value: "text"
+ }
+ attrs: {
+ name: "cta-image"
+ value_url: {
+ protocol: "http"
+ protocol: "https"
+ }
+ }
+ attrs: {
+ name: "cta-text"
+ }
+ attrs: {
+ name: "href"
+ mandatory: true
+ value_url: {
+ protocol: "http"
+ protocol: "https"
+ }
+ }
attrs: {
name: "layout"
mandatory: true
@@ -859,51 +885,64 @@ tags: { # with href
value: "dark"
value: "light"
}
- attrs: {
- name: "cta-text"
- }
attrs: {
name: "title"
}
+ child_tags: {
+ mandatory_num_child_tags: 0
+ }
+}
+tags: { # with no href
+ html_format: AMP
+ tag_name: "AMP-STORY-PAGE-ATTACHMENT"
+ spec_name: "amp-story-page-attachment"
+ mandatory_ancestor: "AMP-STORY-PAGE"
+ descendant_tag_list: "amp-story-page-attachment-allowed-descendants"
+ mandatory_last_child: true
attrs: {
- name: "cta-accent-color"
+ name: "cta-text"
}
attrs: {
- name: "cta-accent-element"
- value: "background"
- value: "text"
+ name: "title"
}
attrs: {
- name: "href"
- mandatory: true
+ name: "cta-image"
value_url: {
protocol: "http"
protocol: "https"
}
}
attrs: {
- name: "cta-image"
+ name: "cta-image-2"
value_url: {
protocol: "http"
protocol: "https"
}
}
- child_tags: {
- mandatory_num_child_tags: 0
+ attrs: {
+ name: "layout"
+ mandatory: true
+ value: "nodisplay"
+ }
+ attrs: {
+ name: "theme"
+ value: "dark"
+ value: "light"
}
}
-tags: { # with no href
+tags: { # Same validation rules as ` with href`
html_format: AMP
- tag_name: "AMP-STORY-PAGE-ATTACHMENT"
- spec_name: "amp-story-page-attachment"
+ tag_name: "AMP-STORY-PAGE-OUTLINK"
+ spec_name: "amp-story-page-outlink"
mandatory_ancestor: "AMP-STORY-PAGE"
- descendant_tag_list: "amp-story-page-attachment-allowed-descendants"
mandatory_last_child: true
attrs: {
- name: "cta-text"
+ name: "cta-accent-color"
}
attrs: {
- name: "title"
+ name: "cta-accent-element"
+ value: "background"
+ value: "text"
}
attrs: {
name: "cta-image"
@@ -913,7 +952,11 @@ tags: { # with no href
}
}
attrs: {
- name: "cta-image-2"
+ name: "cta-text"
+ }
+ attrs: {
+ name: "href"
+ mandatory: true
value_url: {
protocol: "http"
protocol: "https"
@@ -926,9 +969,16 @@ tags: { # with no href
}
attrs: {
name: "theme"
+ value: "custom"
value: "dark"
value: "light"
}
+ attrs: {
+ name: "title"
+ }
+ child_tags: {
+ mandatory_num_child_tags: 0
+ }
}
tags: { #