Add support for lazyblocks hero

Author: itsamoreh

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/index.js

@@ -1,19 +1,20 @@
 // 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 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 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,34 +9,44 @@ 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.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.
  * @return {Element}                     The Hero component.
  */
-export default function Hero({backgroundImage, body, cta, subtitle, title}) {
+export default function Hero({
+  backgroundImage,
+  body,
+  className,
+  ctaText,
+  ctaUrl,
+  subtitle,
+  title
+}) {
   return (
     <section
-      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}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}>
         {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
         <h1 className={styles.title}>{title}</h1>
         {body && <p className={styles.body}>{body}</p>}
-        {cta && (
+        {ctaText && ctaUrl && (
           <Button
             className={styles.button}
-            url={cta.url ? cta.url : null}
-            icon={cta.icon ? cta.icon : null}
-            text={cta.text ? cta.text : null}
+            url={ctaUrl}
+            text={ctaText}
+            icon="arrowRight"
             type="primary"
             size="md"
           />
@@ -46,13 +57,14 @@ export default function Hero({backgroundImage, body, cta, subtitle, title}) {
 }
 
 Hero.propTypes = {
-  backgroundImage: 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,
   title: PropTypes.string.isRequired
 }

functions/displayBlock.js

@@ -34,6 +34,13 @@ export default function displayBlock(block, index) {
           key={index}
         />
       )
+    case 'lazyblock/hero':
+      return (
+        <Blocks.BlockHero
+          attributes={attributes}
+          key={index}
+        />
+      )
     case 'core/button':
       return (
         <Blocks.BlockButton