✨Bento amp-wordpress-embed

build-system/compile/bundles.config.extensions.json

@@ -1237,6 +1237,15 @@
     "version": "0.1",
     "latestVersion": "0.1"
   },
+  {
+    "name": "amp-wordpress-embed",
+    "version": "1.0",
+    "latestVersion": "1.0",
+    "options": {
+      "npm": true,
+      "wrappers": "bento"
+    }
+  },
   {
     "name": "amp-yotpo",
     "version": "0.1",

extensions/amp-wordpress-embed/1.0/amp-wordpress-embed.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {BaseElement} from './base-element';
+import {dict} from '#core/types/object';
+import {isExperimentOn} from '#experiments';
+import {userAssert} from '../../../src/log';
+
+/** @const {string} */
+const TAG = 'amp-wordpress-embed';
+
+class AmpWordPressEmbed extends BaseElement {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-wordpress-embed'),
+      'expected global "bento" or specific "bento-wordpress-embed" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+
+  /** @override */
+  init() {
+    return dict({
+      'requestResize': (height) =>
+        this.attemptChangeHeight(height).catch(() => {
+          /* ignore failures */
+        }),
+    });
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpWordPressEmbed);
+});

extensions/amp-wordpress-embed/1.0/base-element.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {PreactBaseElement} from '#preact/base-element';
+import {WordPressEmbed} from './component';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = WordPressEmbed;
+
+/** @override */
+BaseElement['props'] = {
+  url: {attr: 'data-url', default: ''},
+  title: {attr: 'title'},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;

extensions/amp-wordpress-embed/1.0/component.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Preact from '#preact';
+import {IframeEmbed} from '#preact/component/iframe';
+import {addParamToUrl} from '../../../src/url';
+import {dict} from '#core/types/object';
+import {forwardRef} from '#preact/compat';
+import {getData} from '../../../src/event-helper';
+
+const {useCallback, useEffect, useMemo, useRef, useState} = Preact;
+
+const NO_HEIGHT_STYLE = dict();
+
+/**
+ * @param {!WordPressEmbedDef.Props} props
+ * @param {{current: ?WordPressEmbedDef.Api}} ref
+ * @return {PreactDef.Renderable}
+ */
+function WordPressEmbedWithRef(
+  {requestResize, title = 'WordPressEmbed', url, ...rest},
+  ref
+) {
+  const [heightStyle, setHeightStyle] = useState(NO_HEIGHT_STYLE);
+  const [opacity, setOpacity] = useState(0);
+  const contentRef = useRef(null);
+  const [win, setWin] = useState(null);
+
+  const iframeURL = useMemo(() => {
+    return addParamToUrl(url, 'embed', 'true');
+  }, [url]);
+
+  const matchesMessagingOrigin = useCallback(
+    (testURL) => {
+      const embeddedUrl = new URL(url);
+      const checkedUrl = new URL(testURL);
+      return embeddedUrl.origin === checkedUrl.origin;
+    },
+    [url]
+  );
+
+  const messageHandler = useCallback(
+    (event) => {
+      const data = getData(event);
+
+      switch (data.message) {
+        case 'height':
+          if (typeof data.value === 'number') {
+            const height = data.value;
+            if (requestResize) {
+              requestResize(height);
+            }
+            setHeightStyle(dict({'height': height}));
+            setOpacity(1);
+          }
+          break;
+        case 'link':
+          // Only follow a link message for the currently-active iframe if the link is for the same origin.
+          // This replicates a constraint in WordPress's wp.receiveEmbedMessage() function.
+          if (matchesMessagingOrigin(data.value) && win) {
+            win.top.location.href = data.value;
+          }
+          break;
+      }
+    },
+    [requestResize, matchesMessagingOrigin, win]
+  );
+
+  useEffect(() => {
+    setWin(contentRef.current?.ownerDocument?.defaultView);
+  }, []);
+
+  // Checking for valid props
+  if (!checkProps(url)) {
+    return null;
+  }
+
+  return (
+    <IframeEmbed
+      allowTransparency
+      iframeStyle={{opacity}}
+      matchesMessagingOrigin={matchesMessagingOrigin}
+      messageHandler={messageHandler}
+      ref={ref}
+      contentRef={contentRef}
+      src={iframeURL}
+      wrapperStyle={heightStyle}
+      title={title}
+      {...rest}
+    />
+  );
+}
+
+const WordPressEmbed = forwardRef(WordPressEmbedWithRef);
+WordPressEmbed.displayName = 'WordPressEmbed'; // Make findable for tests.
+export {WordPressEmbed};
+
+/**
+ * Verify required props and throw error if necessary.
+ * @param {string|undefined} url
+ * @return {boolean} true on valid
+ */
+function checkProps(url) {
+  // Perform manual checking as assertion is not available for Bento: Issue #32739
+  try {
+    new URL(url);
+    return true;
+  } catch (error) {
+    displayWarning('Please provide a valid url');
+    return false;
+  }
+}
+
+/**
+ * @param {?string} message
+ */
+function displayWarning(message) {
+  console /*OK*/
+    .warn(message);
+}

extensions/amp-wordpress-embed/1.0/component.type.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @externs */
+
+/** @const */
+var WordPressEmbedDef = {};
+
+/**
+ * @typedef {{
+ *   url: string,
+ *   title: (string|undefined),
+ *   requestResize: (function(number):*|undefined),
+ *   loading: (string|undefined),
+ *   onReadyState: (function(string, *=)|undefined),
+ * }}
+ */
+WordPressEmbedDef.Props;
+
+/** @constructor */
+WordPressEmbedDef.Api = function () {};
+
+/** @type {string} */
+WordPressEmbedDef.Api.prototype.readyState;

extensions/amp-wordpress-embed/1.0/storybook/Basic.amp.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Preact from '#preact';
+import {number, text, withKnobs} from '@storybook/addon-knobs';
+import {withAmp} from '@ampproject/storybook-addon';
+
+export default {
+  title: 'amp-wordpress-embed-1_0',
+  decorators: [withKnobs, withAmp],
+
+  parameters: {
+    extensions: [{name: 'amp-wordpress-embed', version: '1.0'}],
+    experiments: ['bento'],
+  },
+};
+
+export const BasicEmbedExample = () => {
+  const url = text(
+    'url',
+    'https://wordpress.org/news/2021/06/gutenberg-highlights'
+  );
+  const width = number('width', 500);
+  const height = number('height', 200);
+  const layout = text('layout', 'fixed');
+
+  return (
+    <>
+      <amp-wordpress-embed
+        data-url={url}
+        width={width}
+        height={height}
+        layout={layout}
+      >
+        <button overflow>Load more</button>
+      </amp-wordpress-embed>
+      <p>text below</p>
+    </>
+  );
+};
+
+BasicEmbedExample.story = {
+  name: 'Basic example',
+};

extensions/amp-wordpress-embed/1.0/storybook/Basic.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Preact from '#preact';
+import {WordPressEmbed} from '../component';
+import {number, text, withKnobs} from '@storybook/addon-knobs';
+
+export default {
+  title: 'WordPressEmbed',
+  component: WordPressEmbed,
+  decorators: [withKnobs],
+};
+
+export const _default = () => {
+  const url = text(
+    'url',
+    'https://wordpress.org/news/2021/06/gutenberg-highlights'
+  );
+  const width = number('width', 500);
+  const height = number('height', 200);
+
+  return <WordPressEmbed url={url} style={{width, height}} />;
+};