Adding embed blocks

Author: dcooney

components/blocks/BlockEmbed/BlockEmbed.js

@@ -0,0 +1,56 @@
+import VideoEmbed from '@/components/molecules/VideoEmbed'
+import PropTypes from 'prop-types'
+import React, {useState, useEffect} from 'react'
+
+/**
+ * Embed Block
+ *
+ * The core Embed block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {string} className Optional classnames.
+ * @param {string} align     Optional alignment style.
+ * @param {string} anchor    Optional anchor/id.
+ * @param {string} content   The content of the block.
+ * @param {string} level     The heading level.
+ * @return {Element}         The component to embed.
+ */
+export default function BlockEmbed({
+  className,
+  url,
+  caption,
+  providerNameSlug
+}) {
+  if (providerNameSlug === 'twitter') {
+    fetch(
+      'https://publish.twitter.com/oembed?url=https://twitter.com/Interior/status/463440424141459456'
+    )
+      .then((response) => response.json())
+      .then((data) => console.log(data))
+  }
+
+  return (
+    <>
+      {!!url && (
+        <>
+          {providerNameSlug === 'twitter' ? (
+            <div></div>
+          ) : (
+            <VideoEmbed className={className} url={url} caption={caption} />
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+BlockEmbed.propTypes = {
+  className: PropTypes.string,
+  url: PropTypes.string,
+  align: PropTypes.string,
+  caption: PropTypes.string,
+  providerNameSlug: PropTypes.string
+}
+BlockEmbed.defaultProps = {
+  align: 'left'
+}

components/blocks/BlockEmbed/index.js

@@ -0,0 +1 @@
+export {default} from './BlockEmbed'

components/blocks/BlockVideoEmbed/BlockVideoEmbed.js

@@ -19,3 +19,4 @@ export {default as BlockButton} from './BlockButton'
 export {default as BlockButtons} from './BlockButtons'
 export {default as BlockColumns} from './BlockColumns'
 export {default as BlockCover} from './BlockCover'
+export {default as BlockEmbed} from './BlockEmbed'

components/blocks/BlockVideoEmbed/index.js

@@ -0,0 +1,52 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './VideoEmbed.module.css'
+
+export default function VideoEmbed({className, title, url}) {
+  /**
+   * Create URL embed for YouTube or Vimeo videos.
+   *
+   * @param {string} url The video URL.
+   */
+  function createVideoUrl(url) {
+    if (!url) {
+      return false
+    }
+
+    let videoUrl, videoId
+
+    videoId = url.indexOf('v=') !== -1 ? url.split('v=') : url.split('/')
+    videoId = videoId[videoId.length - 1]
+
+    videoUrl = url.includes('vimeo')
+      ? `//player.vimeo.com/video/${videoId}`
+      : `//youtube.com/embed/${videoId}`
+
+    return videoUrl
+  }
+
+  /* eslint-disable jsx-a11y/iframe-has-title */
+  return (
+    <div className={cn(styles.videoEmbed, className)}>
+      <iframe
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        frameBorder="0"
+        height="315"
+        loading="lazy"
+        src={createVideoUrl(url)}
+        width="560"
+        title={title}
+        className={className}
+      ></iframe>
+    </div>
+  )
+  /* eslint-enable jsx-a11y/iframe-has-title */
+}
+
+VideoEmbed.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  url: PropTypes.string.isRequired
+}

components/blocks/index.js

@@ -0,0 +1,9 @@
+.videoEmbed {
+  @apply w-full relative overflow-hidden mb-24;
+
+  padding-top: 56.25%;
+
+  & iframe {
+    @apply absolute w-full h-full inset-0;
+  }
+}

components/molecules/VideoEmbed/VideoEmbed.js

@@ -0,0 +1,32 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import VideoEmbed from '.'
+
+<Meta title="Design System/Organisms/VideoEmbed" component={VideoEmbed} />
+
+# Video Embed
+
+Use this to display a video in iFrame, pass the YouTube video ID to the `VideoEmbed` component.
+
+<Canvas>
+  <Story name="Component">
+    <VideoEmbed url="https://www.youtube.com/watch?v=ebQbQufIb0E" />
+  </Story>
+</Canvas>
+
+## Controls
+
+Play around with `<VideoEmbed />` props in the [Canvas tab of the Controls story](?path=/story/design-system-organisims-videoembed--controls).
+
+export const Template = (args) => <VideoEmbed {...args} />
+
+<Canvas>
+  <Story
+    name="Controls"
+    args={{
+      url: 'https://www.youtube.com/watch?v=ebQbQufIb0E'
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/molecules/VideoEmbed/VideoEmbed.module.css

@@ -0,0 +1 @@
+export {default} from './VideoEmbed'

components/molecules/VideoEmbed/VideoEmbed.stories.mdx

@@ -25,8 +25,9 @@ export default function displayBlock(block, index) {
     case 'core/code':
     case 'core/preformatted':
       return <Blocks.BlockCode {...attributes} key={index} />
-    // case 'core/embed':
-    //   return <Blocks.BlockVideoEmbed {...attributes} key={index} />
+    case 'core/embed':
+      console.log(attributes)
+      return <Blocks.BlockEmbed {...attributes} key={index} />
     case 'core/media-text':
       return (
         <Blocks.BlockMediaText