Adding Button blocks

Author: dcooney

components/blocks/BlockButton/BlockButton.js

@@ -0,0 +1,50 @@
+import Button from '@/components/atoms/Button'
+import PropTypes from 'prop-types'
+
+/**
+ * Button Block
+ *
+ * The core Button block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {string} anchor     Optional anchor/id.
+ * @param {string} className  Optional classnames.
+ * @param {string} linkTarget The target for the link.
+ * @param {string} rel        The rel attribute for the link.
+ * @param {string} text       The link label.
+ * @param {string} title      The target for the link.
+ * @param {string} url        The link for the button.
+ * @return {Element} The Button component.
+ */
+export default function BlockButton({
+  anchor,
+  className,
+  linkTarget,
+  rel,
+  text,
+  url
+}) {
+  return (
+    <Button
+      className={className}
+      text={text}
+      url={url}
+      urlExternal={true}
+      attributes={{
+        id: anchor || null,
+        target: linkTarget || null,
+        rel: rel || null
+      }}
+    />
+  )
+}
+
+BlockButton.propTypes = {
+  anchor: PropTypes.string,
+  className: PropTypes.string,
+  linkTarget: PropTypes.string,
+  rel: PropTypes.string,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  url: PropTypes.string
+}

components/blocks/BlockButton/index.js

@@ -0,0 +1 @@
+export {default} from './BlockButton'

components/blocks/BlockButtons/BlockButtons.js

@@ -0,0 +1,51 @@
+import Blocks from '@/components/molecules/Blocks'
+import ButtonGroup from '@/components/molecules/ButtonGroup'
+import PropTypes from 'prop-types'
+
+/**
+ * Buttons Block
+ *
+ * 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.
+ */
+export default function BlockButtons({options, innerBlocks}) {
+  return (
+    <ButtonGroup
+      id={options?.anchor}
+      orientation={options?.orientation}
+      contentJustification={options?.contentJustification}
+    >
+      {!!innerBlocks?.length && <Blocks blocks={innerBlocks} />}
+    </ButtonGroup>
+  )
+}
+
+BlockButtons.propTypes = {
+  options: PropTypes.shape({
+    anchor: PropTypes.string,
+    contentJustification: PropTypes.string,
+    orientation: PropTypes.string
+  }),
+  innerBlocks: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      attributes: PropTypes.object
+    })
+  )
+}
+
+BlockButtons.defaultProps = {
+  options: PropTypes.shape({
+    orientation: 'horizontal',
+    contentJustification: 'left'
+  })
+}

components/blocks/BlockButtons/index.js

@@ -0,0 +1 @@
+export {default} from './BlockButtons'

components/blocks/BlockMediaText/BlockMediaText.js

@@ -8,13 +8,25 @@ import PropTypes from 'prop-types'
  * The core Code block from Gutenberg.
  *
  * @author WebDevStudios
- * @param {string} className Optional classnames.
- * @param {string} anchor    Optional anchor/id.
- * @param {string} content   The content of the block.
+ * @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.
  */
 export default function BlockMediaText({media, innerBlocks}) {
-  //const position = media?.mediaPosition === 'right' ? 'right' : 'left';
   return (
     <div>
       {!!media && (
@@ -60,3 +72,8 @@ BlockMediaText.propTypes = {
     })
   )
 }
+BlockMediaText.defaultProps = {
+  media: PropTypes.shape({
+    mediaPosition: 'left'
+  })
+}

components/blocks/index.js

@@ -15,3 +15,5 @@ export {default as BlockVideoEmbed} from './BlockVideoEmbed'
 export {default as BlockTable} from './BlockTable'
 export {default as BlockCode} from './BlockCode'
 export {default as BlockMediaText} from './BlockMediaText'
+export {default as BlockButton} from './BlockButton'
+export {default as BlockButtons} from './BlockButtons'

components/molecules/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,45 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './ButtonGroup.module.css'
+
+// TODO: Create storybook for ButtonGroup component.
+
+/**
+ * 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.
+ */
+export default function ButtonGroup({
+  id,
+  orientation,
+  contentJustification,
+  children
+}) {
+  return (
+    <>
+      <div
+        id={id || null}
+        className={cn(
+          styles.buttonGroup,
+          styles[orientation],
+          styles[contentJustification]
+        )}
+      >
+        {children}
+      </div>
+    </>
+  )
+}
+
+ButtonGroup.propTypes = {
+  id: PropTypes.string,
+  orientation: PropTypes.string,
+  contentJustification: PropTypes.string,
+  children: PropTypes.children
+}

components/molecules/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,15 @@
+.buttonGroup {
+  @apply mb-40;
+
+  &.horizontal {
+    @apply flex;
+  }
+
+  &.center {
+    @apply justify-center;
+  }
+
+  &.right {
+    @apply justify-end;
+  }
+}

components/molecules/ButtonGroup/index.js

@@ -0,0 +1 @@
+export {default} from './ButtonGroup'

functions/displayBlock.js

@@ -35,6 +35,21 @@ export default function displayBlock(block, index) {
           key={index}
         />
       )
+    case 'core/button':
+      return (
+        <Blocks.BlockButton
+          {...attributes}
+          key={index}
+        />
+      )
+    case 'core/buttons':
+      return (
+        <Blocks.BlockButtons
+          options={attributes}
+          innerBlocks={innerBlocks}
+          key={index}
+        />
+      )
     case 'core/heading':
       return <Blocks.BlockHeadings {...attributes} key={index} />
     case 'core/image':