Updated component props

Author: dcooney

components/atoms/Separator/Separator.js

@@ -10,7 +10,7 @@ import styles from './Separator.module.css'
  * @param {object}  props           The component attributes as props.
  * @param {string}  props.className Optional classname.
  * @param {boolean} props.fullWidth Is this a fullwidth block.
- * @return {Element}                 The Separator component.
+ * @return {Element}                The Separator component.
  */
 export default function Separator(props) {
   const {className, fullWidth} = props

components/atoms/Spacer/Spacer.js

@@ -3,10 +3,16 @@ import React from 'react'
 import tailwindConfig from '../../../tailwind.config'
 
 /**
- * @param props
+ * Render the Spacer component.
+ *
+ * @author WebDevStudios
+ * @param {object} props        The component attributes as props.
+ * @param {string} props.anchor Optional anchor/id.
+ * @param {number} props.height The height of the spacer.
+ * @return {Element}            The Spacer component.
  */
 export default function Spacer(props) {
-  const {pxHeight, anchor} = props
+  const {height, anchor} = props
 
   const rootEmVal = parseFloat(tailwindConfig.theme.fontSize['root-em'])
 
@@ -15,7 +21,7 @@ export default function Spacer(props) {
       id={anchor || null}
       style={{
         /* stylelint-disable-next-line value-keyword-case */
-        height: `${pxHeight / rootEmVal}rem`
+        height: `${height / rootEmVal}rem`
       }}
       aria-hidden="true"
     />
@@ -24,9 +30,9 @@ export default function Spacer(props) {
 
 Spacer.propTypes = {
   anchor: PropTypes.string,
-  pxHeight: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired
 }
 
 Spacer.defaultProps = {
-  pxHeight: 40
+  height: 40
 }

components/blocks/BlockHeadings/BlockHeadings.js

@@ -9,17 +9,20 @@ import React from 'react'
  * The core Headings block from Gutenberg.
  *
  * @author WebDevStudios
- * @param props.props
- * @param {object}    props           The component attributes as props.
- * @param {string}    props.className Optional classnames.
- * @param {string}    props.align     Optional alignment style.
- * @param {string}    props.anchor    Optional anchor/id.
- * @param {string}    props.content   The content of the block.
- * @param {string}    props.level     The heading level.
- * @return {Element}               The RichText component.
+ * @param {string} className Optional classnames.
+ * @param {string} align     Optional alignment style.
+ * @param {string} anchor    Optional anchor/id.
+ * @param {string} content   The content of the block.
+ * @param {string} level     The heading level.
+ * @return {Element}         The RichText component.
  */
-export default function BlockHeadings({props}) {
-  const {className, align, anchor, content, level} = props
+export default function BlockHeadings({
+  className,
+  align,
+  anchor,
+  content,
+  level
+}) {
   const alignment = !align ? 'left' : align
 
   return (
@@ -34,7 +37,6 @@ export default function BlockHeadings({props}) {
 }
 
 BlockHeadings.propTypes = {
-  props: PropTypes.object.isRequired,
   anchor: PropTypes.string,
   align: PropTypes.string,
   className: PropTypes.string,

components/blocks/BlockParagraph/BlockParagraph.js

@@ -16,8 +16,7 @@ import PropTypes from 'prop-types'
  * @param {string}    props.content   The content of the block.
  * @return {Element}               The RichText component.
  */
-export default function BlockParagraph({props}) {
-  const {className, align, anchor, content} = props
+export default function BlockParagraph({className, align, anchor, content}) {
   // TODO Add settings for unused props in default WP Paragraph Block
   const alignment = !align ? 'left' : align
   return (
@@ -32,7 +31,6 @@ export default function BlockParagraph({props}) {
 }
 
 BlockParagraph.propTypes = {
-  props: PropTypes.object.isRequired,
   align: PropTypes.string,
   anchor: PropTypes.string,
   className: PropTypes.string,

components/blocks/BlockSpacer/BlockSpacer.js

@@ -13,13 +13,13 @@ import PropTypes from 'prop-types'
  * @return {Element}               The Spacer component.
  */
 export default function BlockSpacer({anchor, height}) {
-  return <Spacer pxHeight={height} id={anchor} />
+  return <Spacer height={height} id={anchor} />
 }
 
 BlockSpacer.propTypes = {
   anchor: PropTypes.string,
   height: PropTypes.number
 }
 BlockSpacer.defaultProps = {
-  anchor: 50
+  height: 40
 }

functions/displayBlock.js

@@ -15,29 +15,29 @@ export default function displayBlock(block, index) {
   // prettier-ignore
   switch (name) {
     case 'acf/accordions':
-      return <Blocks.BlockAccordions props={attributes} key={index} />
+      return <Blocks.BlockAccordions {...attributes} key={index} />
     case 'acf/netflix':
       return (
-        <Blocks.BlockNetflixCarousel props={attributes} key={index} />
+        <Blocks.BlockNetflixCarousel {...attributes} key={index} />
       )
     case 'core/block-quote':
-      return <Blocks.BlockBlockquote props={attributes} key={index} />
+      return <Blocks.BlockBlockquote {...attributes} key={index} />
     case 'core/embed':
-      return <Blocks.BlockVideoEmbed props={attributes} key={index} />
+      return <Blocks.BlockVideoEmbed {...attributes} key={index} />
     case 'core/heading':
-      return <Blocks.BlockHeadings props={attributes} key={index} />
+      return <Blocks.BlockHeadings {...attributes} key={index} />
     case 'core/image':
-      return <Blocks.BlockImage props={attributes} key={index} />
+      return <Blocks.BlockImage {...attributes} key={index} />
     case 'core/image-gallery':
-      return <Blocks.BlockImageGallery props={attributes} key={index} />
+      return <Blocks.BlockImageGallery {...attributes} key={index} />
     case 'core/list':
-      return <Blocks.BlockList props={attributes} key={index} />
+      return <Blocks.BlockList {...attributes} key={index} />
     case 'core/paragraph':
-      return <Blocks.BlockParagraph props={attributes} key={index} />
+      return <Blocks.BlockParagraph {...attributes} key={index} />
     case 'core/separator':
       return <Blocks.BlockSeparator {...attributes} key={index} />
     case 'core/shortcode':
-      return <Blocks.BlockShortcode props={attributes} key={index} />
+      return <Blocks.BlockShortcode {...attributes} key={index} />
     case 'core/spacer':
       return <Blocks.BlockSpacer {...attributes} key={index} />
     default: