Spreading props to blocks

Author: dcooney

components/blocks/BlockSeparator/BlockSeparator.js

@@ -7,15 +7,12 @@ import PropTypes from 'prop-types'
  * The core Separator 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.anchor    Optional anchor/id.
+ * @param {object} props           The component attributes as props.
+ * @param {string} props.className Optional classnames.
+ * @param {string} props.anchor    Optional anchor/id.
  * @return {Element}               The Separator component.
  */
-export default function BlockSeparator({props}) {
-  const {className, anchor} = props
-
+export default function BlockSeparator({className, anchor}) {
   const isFullWidth =
     (className && className.includes('is-style-full-width')) > 0 ? true : false
 
@@ -25,7 +22,6 @@ export default function BlockSeparator({props}) {
 }
 
 BlockSeparator.propTypes = {
-  props: PropTypes.object.isRequired,
   className: PropTypes.string,
   anchor: PropTypes.string
 }

components/blocks/BlockSpacer/BlockSpacer.js

@@ -7,19 +7,19 @@ import PropTypes from 'prop-types'
  * The core Spacer block from Gutenberg.
  *
  * @author WebDevStudios
- * @param props.props
- * @param {object}    props        The component attributes as props.
- * @param {string}    props.anchor Optional anchor/id.
- * @param {string}    props.height The height of the spacer.
+ * @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 BlockSpacer({props}) {
-  const {anchor, height} = props
+export default function BlockSpacer({anchor, height}) {
   return <Spacer pxHeight={height} id={anchor} />
 }
 
 BlockSpacer.propTypes = {
-  props: PropTypes.object.isRequired,
   anchor: PropTypes.string,
   height: PropTypes.number
 }
+BlockSpacer.defaultProps = {
+  anchor: 50
+}

functions/displayBlock.js

@@ -35,11 +35,11 @@ export default function displayBlock(block, index) {
     case 'core/paragraph':
       return <Blocks.BlockParagraph props={attributes} key={index} />
     case 'core/separator':
-      return <Blocks.BlockSeparator props={attributes} key={index} />
+      return <Blocks.BlockSeparator {...attributes} key={index} />
     case 'core/shortcode':
       return <Blocks.BlockShortcode props={attributes} key={index} />
     case 'core/spacer':
-      return <Blocks.BlockSpacer props={attributes} key={index} />
+      return <Blocks.BlockSpacer {...attributes} key={index} />
     default:
       return <pre key={index}>{JSON.stringify(attributes, null, 2)}</pre>
   }