Feature/410 image block

components/atoms/Image/Image.js

@@ -12,7 +12,9 @@ import styles from './Image.module.css'
  * @param  {string}  props.alt           The image alt attribute.
  * @param  {string}  props.anchor        The image anchor.
  * @param  {string}  props.caption       The image caption.
+ * @param  {any}     props.children      React children.
  * @param  {string}  props.className     The image class name.
+ * @param  {number}  props.height        The image height.
  * @param  {string}  props.href          A link wrapping the image.
  * @param  {number}  props.id            The image id.
  * @param  {object}  props.imageMeta     The image meta.
@@ -21,13 +23,14 @@ import styles from './Image.module.css'
  * @param  {boolean} props.nextImageFill Whether next/image should be set to fill or have height/width defined.
  * @param  {string}  props.rel           The relationship of the linked URL.
  * @param  {string}  props.url           The image src attribute.
+ * @param  {number}  props.width         The image width.
  * @return {Element}                     The DisplayImage component.
  */
 export default function DisplayImage(props) {
   // Set the image size.
   const imageSize = {
-    height: props?.imageMeta?.mediaDetails?.height ?? props?.height,
-    width: props?.imageMeta?.mediaDetails?.width ?? props?.width
+    height: props?.height ?? props?.imageMeta?.mediaDetails?.height,
+    width: props?.width ?? props?.imageMeta?.mediaDetails?.width
   }
 
   // Set the image src.
@@ -179,7 +182,7 @@ DisplayImage.propTypes = {
   caption: PropTypes.string,
   children: PropTypes.any,
   className: PropTypes.string,
-  height: PropTypes.string,
+  height: PropTypes.number,
   href: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   imageMeta: PropTypes.shape({
@@ -196,5 +199,5 @@ DisplayImage.propTypes = {
   nextImageFill: PropTypes.bool,
   rel: PropTypes.string,
   url: PropTypes.string,
-  width: PropTypes.string
+  width: PropTypes.number
 }

components/atoms/Image/Image.stories.mdx

@@ -12,9 +12,9 @@ Use this component to display a image.
   <Story name="Component">
     <DisplayImage
       alt="Image alt text"
-      height="480"
+      height={480}
       url="https://nextjs.wpengine.com/wp-content/uploads/2021/02/nextjs-wordpress-starter.jpg"
-      width="640"
+      width={640}
     />
   </Story>
 </Canvas>
@@ -28,10 +28,10 @@ Add a link to the image using the `href` prop.
     <DisplayImage
       alt="Image alt text"
       caption="This is the image caption"
-      height="480"
+      height={480}
       href="https://webdevstudios.com"
       url="https://nextjs.wpengine.com/wp-content/uploads/2021/02/nextjs-wordpress-starter.jpg"
-      width="640"
+      width={640}
     />
   </Story>
 </Canvas>
@@ -48,10 +48,9 @@ export const Template = (args) => <DisplayImage {...args} />
     args={{
       alt: 'A screenshot of the codebase.',
       caption: 'A screenshot of the codebase.',
-      height: '480',
-      url:
-        'https://nextjs.wpengine.com/wp-content/uploads/2021/02/nextjs-wordpress-starter.jpg',
-      width: '640'
+      height: 480,
+      url: 'https://nextjs.wpengine.com/wp-content/uploads/2021/02/nextjs-wordpress-starter.jpg',
+      width: 640
     }}
   >
     {Template.bind({})}

components/blocks/Gutenberg/BlockImage/BlockImage.js

@@ -7,13 +7,80 @@ import PropTypes from 'prop-types'
  * The core Image block from Gutenberg.
  *
  * @author WebDevStudios
- * @param  {object}  props The component props.
- * @return {Element}       The Block Image component.
+ * @param  {object}  props            The component props.
+ * @param  {string}  props.alt        The image alt attribute.
+ * @param  {string}  props.anchor     The image anchor.
+ * @param  {string}  props.caption    The image caption.
+ * @param  {string}  props.className  The image class name.
+ * @param  {number}  props.height     The image height.
+ * @param  {string}  props.href       A link wrapping the image.
+ * @param  {number}  props.id         The image id.
+ * @param  {object}  props.imageMeta  The image meta.
+ * @param  {string}  props.linkClass  The image link class name.
+ * @param  {string}  props.linkTarget The image link target.
+ * @param  {string}  props.rel        The relationship of the linked URL.
+ * @param  {string}  props.url        The image src attribute.
+ * @param  {number}  props.width      The image width.
+ * @return {Element}                  The Block Image component.
  */
 export default function BlockImage(props) {
-  return <DisplayImage {...props} />
+  const {
+    alt,
+    anchor,
+    caption,
+    className,
+    height,
+    href,
+    id,
+    imageMeta,
+    linkClass,
+    linkTarget,
+    rel,
+    url,
+    width
+  } = props
+
+  return (
+    <DisplayImage
+      alt={alt}
+      anchor={anchor}
+      caption={caption}
+      className={className}
+      height={height}
+      href={href}
+      id={id}
+      imageMeta={imageMeta}
+      linkClass={linkClass}
+      linkTarget={linkTarget}
+      rel={rel}
+      url={url}
+      width={width}
+    />
+  )
 }
 
 BlockImage.propTypes = {
-  props: PropTypes.object
+  props: PropTypes.shape({
+    alt: PropTypes.string,
+    anchor: PropTypes.string,
+    caption: PropTypes.string,
+    className: PropTypes.string,
+    height: PropTypes.number,
+    href: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    imageMeta: PropTypes.shape({
+      altText: PropTypes.string,
+      mediaItemUrl: PropTypes.string,
+      mediaDetails: PropTypes.shape({
+        height: PropTypes.number,
+        sizes: PropTypes.array,
+        width: PropTypes.number
+      })
+    }),
+    linkClass: PropTypes.string,
+    linkTarget: PropTypes.string,
+    rel: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number
+  })
 }