Merge pull request #162 from WebDevStudios/feature/lazy-blocks

Feature/lazy blocks

Author: Greg Rickaby

components/blocks/BlockHero/BlockHero.js

@@ -0,0 +1,31 @@
+import Hero from '@/components/organisms/Hero'
+import PropTypes from 'prop-types'
+
+/**
+ * Handle the Hero block.
+ *
+ * @author WebDevStudios
+ * @param {object} props            The props.
+ * @param {object} props.attributes The attributes object.
+ * @return {Element}                The component.
+ */
+export default function BlockHero({attributes}) {
+  attributes = {
+    ...attributes,
+    backgroundImage: JSON.parse(decodeURIComponent(attributes.backgroundImage))
+  }
+
+  return (
+    <>
+      {attributes ? (
+        <Hero {...attributes} />
+      ) : (
+        'There was a problem with attributes in BlockHero.js.'
+      )}
+    </>
+  )
+}
+
+BlockHero.propTypes = {
+  attributes: PropTypes.object
+}

components/blocks/BlockHero/index.js

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

components/blocks/BlockMediaText/BlockMediaText.js

@@ -1,72 +1,31 @@
-import Image from '@/components/atoms/Image'
-import Blocks from '@/components/molecules/Blocks'
 import MediaText from '@/components/organisms/MediaText'
 import PropTypes from 'prop-types'
 
-// TODO: Swap `img` in `MediaText` component with `Image` atom component.
-
 /**
- * Code Block
- *
- * The core Code block from Gutenberg.
+ * Handle the MediaText block.
  *
  * @author WebDevStudios
- * @param {object} media               media props.
- * @param {string} media.anchor        The anchor/id of the block.
- * @param {string} media.mediaAlt      The image alt text.
- * @param {string} media.caption       The image caption.
- * @param {string} media.className     The image class.
- * @param {string} media.mediaId       The image ID.
- * @param {string} media.href          The URL of the link.
- * @param {string} media.linkTarget    Target for the link.
- * @param {string} media.linkClass     Class for the link.
- * @param {string} media.rel           The rel attribute for the link.
- * @param {string} media.sizeSlug      The WP image size.
- * @param {string} media.mediaUrl      The full URL path of the image.
- * @param {string} media.mediaPosition The position of the image, left or right.
- * @param {Array}  innerBlocks         The array of inner blocks to display.
- * @return {Element}                   The Code component.
+ * @param {object} props            The props.
+ * @param {object} props.attributes The attributes object.
+ * @return {Element}                The component.
  */
-export default function BlockMediaText({media, innerBlocks}) {
+export default function BlockMediaText({attributes}) {
+  attributes = {
+    ...attributes,
+    image: JSON.parse(decodeURIComponent(attributes.image))
+  }
+
   return (
     <>
-      {!!media && innerBlocks?.length && (
-        <MediaText
-          mediaLeft={media?.mediaPosition === 'left' ? true : false}
-          image={{url: media?.mediaUrl, alt: media?.mediaAlt}}
-        >
-          <Blocks blocks={innerBlocks} />
-        </MediaText>
+      {attributes ? (
+        <MediaText {...attributes} />
+      ) : (
+        'There was a problem with attributes in BlockMediaText.js.'
       )}
     </>
   )
 }
 
 BlockMediaText.propTypes = {
-  media: PropTypes.shape({
-    anchor: PropTypes.string,
-    caption: PropTypes.string,
-    className: PropTypes.string,
-    href: PropTypes.string,
-    linkTarget: PropTypes.string,
-    linkClass: PropTypes.string,
-    rel: PropTypes.string,
-    sizeSlug: PropTypes.string,
-    mediaAlt: PropTypes.string,
-    mediaId: PropTypes.number,
-    mediaType: PropTypes.string,
-    mediaUrl: PropTypes.string,
-    mediaPosition: PropTypes.string
-  }),
-  innerBlocks: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      attributes: PropTypes.object
-    })
-  )
-}
-BlockMediaText.defaultProps = {
-  media: PropTypes.shape({
-    mediaPosition: 'left'
-  })
+  attributes: PropTypes.object
 }

components/blocks/index.js

@@ -1,21 +1,22 @@
 // Create default exports for each Block.
 export {default as BlockAccordions} from './BlockAccordions'
-export {default as BlockQuote} from './BlockQuote'
-export {default as BlockPullQuote} from './BlockPullQuote'
+export {default as BlockButton} from './BlockButton'
+export {default as BlockButtons} from './BlockButtons'
+export {default as BlockCode} from './BlockCode'
+export {default as BlockColumns} from './BlockColumns'
+export {default as BlockCover} from './BlockCover'
+export {default as BlockHeadings} from './BlockHeadings'
+export {default as BlockHero} from './BlockHero'
 export {default as BlockImage} from './BlockImage'
 export {default as BlockImageGallery} from './BlockImageGallery'
 export {default as BlockList} from './BlockList'
+export {default as BlockMediaText} from './BlockMediaText'
 export {default as BlockNetflixCarousel} from './BlockNetflixCarousel'
 export {default as BlockParagraph} from './BlockParagraph'
-export {default as BlockHeadings} from './BlockHeadings'
+export {default as BlockPullQuote} from './BlockPullQuote'
+export {default as BlockQuote} from './BlockQuote'
 export {default as BlockSeparator} from './BlockSeparator'
 export {default as BlockShortcode} from './BlockShortcode'
 export {default as BlockSpacer} from './BlockSpacer'
-export {default as BlockVideoEmbed} from './BlockVideoEmbed'
 export {default as BlockTable} from './BlockTable'
-export {default as BlockCode} from './BlockCode'
-export {default as BlockMediaText} from './BlockMediaText'
-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 BlockVideoEmbed} from './BlockVideoEmbed'

components/organisms/Hero/Hero.js

@@ -1,4 +1,5 @@
 import Button from '@/components/atoms/Button'
+import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import tailwindConfig from '../../../tailwind.config'
@@ -8,69 +9,63 @@ import styles from './Hero.module.css'
  * Render the Hero component.
  *
  * @param {object} props                 Hero component props.
- * @param {string} props.backgroundImage The background image url.
- * @param {string} props.id              Optional ID for component.
+ * @param {string} props.backgroundImage The background image object.
  * @param {string} props.body            Text for the body.
- * @param {object} props.cta             Object with text and url props for the CTA button.
+ * @param {string} props.className       The className.
+ * @param {object} props.ctaText         The cta text.
+ * @param {object} props.ctaUrl          The cta url.
  * @param {string} props.subtitle        Text for the subtitle.
  * @param {string} props.title           Text for the title.
  * @param {object} props.children        React children.
  * @return {Element}                     The Hero component.
  */
 export default function Hero({
   backgroundImage,
-  id,
   body,
-  cta,
+  className,
+  ctaText,
+  ctaUrl,
   subtitle,
-  title,
-  children
+  title
 }) {
   return (
     <section
-      id={id || null}
-      className={styles.hero}
+      className={cn(styles.hero, className)}
       style={{
         // These css custom properties are used inside the css module file to set the card's background image, tint overlay, and fallback bg color.
-        '--image-url': `url(${backgroundImage})`,
-        '--image-tint-color': `${tailwindConfig.theme.colors.black.DEFAULT}50`,
+        '--image-url': `url(${backgroundImage.url})`,
+        '--image-tint-color': `${tailwindConfig.theme.colors.black['DEFAULT']}50`,
         '--image-fallback-color': `${tailwindConfig.theme.colors.grey['darkest']}`
       }}
     >
       <div className={styles.content}>
-        {children ? (
-          children
-        ) : (
-          <>
-            {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
-            <h1 className={styles.title}>{title}</h1>
-            {body && <p className={styles.body}>{body}</p>}
-            {cta && (
-              <Button
-                className={styles.button}
-                url={cta.url ? cta.url : null}
-                icon={cta.icon ? cta.icon : null}
-                text={cta.text ? cta.text : null}
-                type="primary"
-                size="md"
-              />
-            )}
-          </>
+        {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+        <h1 className={styles.title}>{title}</h1>
+        {body && <p className={styles.body}>{body}</p>}
+        {ctaText && ctaUrl && (
+          <Button
+            className={styles.button}
+            url={ctaUrl}
+            text={ctaText}
+            icon="arrowRight"
+            type="primary"
+            size="md"
+          />
         )}
       </div>
     </section>
   )
 }
 
 Hero.propTypes = {
-  backgroundImage: PropTypes.string,
-  id: PropTypes.string,
-  body: PropTypes.string,
-  cta: PropTypes.shape({
-    icon: PropTypes.string,
-    text: PropTypes.string,
-    url: PropTypes.string
+  backgroundImage: PropTypes.shape({
+    url: PropTypes.string,
+    alt: PropTypes.string
   }),
+  body: PropTypes.string,
+  className: PropTypes.string,
+  ctaText: PropTypes.string,
+  ctaUrl: PropTypes.string,
   subtitle: PropTypes.string,
   children: PropTypes.node,
   title: PropTypes.string

components/organisms/MediaText/MediaText.js

@@ -2,39 +2,31 @@ import Button from '@/components/atoms/Button'
 import Container from '@/components/atoms/Container'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
-import React, {useEffect} from 'react'
+import React from 'react'
 import styles from './MediaText.module.css'
 
 /**
  * Render the MediaText component.
  *
  * @param {object}  props           MediaText component props.
  * @param {string}  props.body      The body text.
- * @param {element} props.children  The child elements.
  * @param {string}  props.className The className.
- * @param {object}  props.cta       The cta object with text and url strings.
+ * @param {object}  props.ctaText   The cta text.
+ * @param {object}  props.ctaUrl    The cta url.
  * @param {object}  props.image     The image object with url and alt text.
  * @param {boolean} props.mediaLeft Whether to show media on the left of the text.
  * @param {string}  props.title     The title.
- * @return {Element} The MediaText component.
+ * @return {Element}                The MediaText component.
  */
 export default function MediaText({
   body,
-  children,
   className,
-  cta,
+  ctaText,
+  ctaUrl,
   image,
   mediaLeft,
   title
 }) {
-  useEffect(() => {
-    if ((children && title) || (children && body) || (children && cta)) {
-      console.warn(
-        'The title, body and cta props are ignored when using children.'
-      )
-    }
-  })
-
   return (
     <Container>
       <section
@@ -45,24 +37,19 @@ export default function MediaText({
         )}
       >
         <div className={styles.text}>
-          {children ? (
-            children
-          ) : (
-            <>
-              {title && <h1 className={styles.title}>{title}</h1>}
-              {body && <p className={styles.body}>{body}</p>}
-              {cta && (
-                <Button
-                  className={styles.button}
-                  url={cta.url ? cta.url : null}
-                  text={cta.text ? cta.text : null}
-                  icon={cta.icon ? cta.icon : null}
-                  type="primary"
-                  size="md"
-                />
-              )}
-            </>
-          )}
+          <>
+            {title && <h1 className={styles.title}>{title}</h1>}
+            {body && <p className={styles.body}>{body}</p>}
+            {ctaText && ctaUrl && (
+              <Button
+                className={styles.button}
+                url={ctaUrl}
+                text={ctaText}
+                type="primary"
+                size="md"
+              />
+            )}
+          </>
         </div>
         <div className={styles.media}>
           {image && image.url && (
@@ -79,12 +66,8 @@ export default function MediaText({
 MediaText.propTypes = {
   body: PropTypes.string,
   className: PropTypes.string,
-  children: PropTypes.element,
-  cta: PropTypes.shape({
-    text: PropTypes.string,
-    url: PropTypes.string,
-    icon: PropTypes.string
-  }),
+  ctaText: PropTypes.string,
+  ctaUrl: PropTypes.string,
   image: PropTypes.shape({
     url: PropTypes.string,
     alt: PropTypes.string

functions/displayBlock.js

@@ -27,11 +27,17 @@ export default function displayBlock(block, index) {
       return <Blocks.BlockCode {...attributes} key={index} />
     // case 'core/embed':
     //   return <Blocks.BlockVideoEmbed {...attributes} key={index} />
-    case 'core/media-text':
+    case 'lazyblock/mediatext':
       return (
         <Blocks.BlockMediaText
-          media={attributes}
-          innerBlocks={innerBlocks}
+          attributes={attributes}
+          key={index}
+        />
+      )
+    case 'lazyblock/hero':
+      return (
+        <Blocks.BlockHero
+          attributes={attributes}
           key={index}
         />
       )