diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js
index 229f6b429..aeaaafbeb 100644
--- a/components/atoms/Image/Image.js
+++ b/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
}
diff --git a/components/atoms/Image/Image.stories.mdx b/components/atoms/Image/Image.stories.mdx
index 6c3583e10..ccb6fc051 100644
--- a/components/atoms/Image/Image.stories.mdx
+++ b/components/atoms/Image/Image.stories.mdx
@@ -12,9 +12,9 @@ Use this component to display a image.
@@ -28,10 +28,10 @@ Add a link to the image using the `href` prop.
@@ -48,10 +48,9 @@ export const Template = (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({})}
diff --git a/components/blocks/Gutenberg/BlockImage/BlockImage.js b/components/blocks/Gutenberg/BlockImage/BlockImage.js
index 989f6fb71..5c656d12c 100644
--- a/components/blocks/Gutenberg/BlockImage/BlockImage.js
+++ b/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
+ const {
+ alt,
+ anchor,
+ caption,
+ className,
+ height,
+ href,
+ id,
+ imageMeta,
+ linkClass,
+ linkTarget,
+ rel,
+ url,
+ width
+ } = props
+
+ return (
+
+ )
}
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
+ })
}