Refactor MediaText for lazyblocks

Author: itsamoreh

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/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.
  */
 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,10 @@ 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}
         />
       )