Updates to MediaBlocks

Author: dcooney

components/blocks/BlockButtons/BlockButtons.js

@@ -8,14 +8,12 @@ import PropTypes from 'prop-types'
  * The core Buttons block from Gutenberg.
  *
  * @author WebDevStudios
- * @param options.options
- * @param {object}            options                      Option props.
- * @param {string}            options.anchor               The anchor/id of the block.
- * @param {string}            options.orientation          The orientation of buttons.
- * @param {string}            options.contentJustification The justification of the buttons.
- * @param options.innerBlocks
- * @param {Array}             innerBlocks                  The array of inner blocks to display.
- * @return {Element} The Buttons component.
+ * @param {object} options                      Option props.
+ * @param {string} options.anchor               The anchor/id of the block.
+ * @param {string} options.orientation          The orientation of buttons.
+ * @param {string} options.contentJustification The justification of the buttons.
+ * @param {Array}  innerBlocks                  The array of inner blocks to display.
+ * @return {Element}                            The Buttons component.
  */
 export default function BlockButtons({options, innerBlocks}) {
   return (

components/blocks/BlockMediaText/BlockMediaText.js

@@ -1,51 +1,44 @@
 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.
  *
  * @author WebDevStudios
- * @param media.media
- * @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 media.innerBlocks
- * @param {Array}           innerBlocks         The array of inner blocks to display.
- * @return {Element} The Code component.
+ * @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.
  */
 export default function BlockMediaText({media, innerBlocks}) {
   return (
-    <div>
-      {!!media && (
-        <Image
-          alt={media?.mediaAlt}
-          anchor={media?.anchor}
-          caption={media?.caption}
-          className={media?.className}
-          id={media?.mediaId}
-          href={media?.href}
-          linkTarget={media?.linkTarget}
-          linkClass={media?.linkClass}
-          rel={media?.rel}
-          sizeSlug={media?.sizeSlug}
-          url={media?.mediaUrl}
-        />
+    <>
+      {!!media && innerBlocks?.length && (
+        <MediaText
+          mediaLeft={media?.mediaPosition === 'left' ? true : false}
+          image={{url: media?.mediaUrl, alt: media?.mediaAlt}}
+        >
+          <Blocks blocks={innerBlocks} />
+        </MediaText>
       )}
-      {!!innerBlocks?.length && <Blocks blocks={innerBlocks} />}
-    </div>
+    </>
   )
 }
 

components/molecules/ButtonGroup/ButtonGroup.js

@@ -9,11 +9,11 @@ import styles from './ButtonGroup.module.css'
  * Render the ButtonGroup component.
  *
  * @author WebDevStudios
- * @param {string}   id                   The id of the block.
- * @param {string}   orientation          The orientation of buttons.
- * @param {string}   contentJustification The justification of the buttons.
- * @param {children} children             The children props to render.
- * @return {Element} The ButtonGroup component.
+ * @param {string}  id                   The id of the block.
+ * @param {string}  orientation          The orientation of buttons.
+ * @param {string}  contentJustification The justification of the buttons.
+ * @param {element} children             The children props to render.
+ * @return {Element}                     The ButtonGroup component.
  */
 export default function ButtonGroup({
   id,
@@ -41,5 +41,5 @@ ButtonGroup.propTypes = {
   id: PropTypes.string,
   orientation: PropTypes.string,
   contentJustification: PropTypes.string,
-  children: PropTypes.children
+  children: PropTypes.element
 }

functions/displayBlock.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
  * @author WebDevStudios
  * @param {object} block The block data.
  * @param {number} index A unique key required by React.
- * @return {Element} A block-based component.
+ * @return {Element}     A block-based component.
  */
 export default function displayBlock(block, index) {
   const {attributes, name, innerBlocks} = block