Merge pull request #41 from WebDevStudios/feature/block-handling

Feature/block handling

Author: gregrickaby

components/blocks/BlockAccordions/BlockAccordions.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+
+/**
+ * Accordion Block
+ *
+ * A custom ACF Block for displaying accordions.
+ *
+ * @author WebDevStudios
+ * @param {object} props The component attributes as props.
+ */
+export default function BlockAccordions({props}) {
+  const {
+    id,
+    anchor,
+    className,
+    data: {accordions, button_label, button_url, title}
+  } = props
+
+  return (
+    <pre>
+      {JSON.stringify(
+        {
+          id,
+          anchor,
+          className,
+          data: {accordions, button_label, button_url, title}
+        },
+        null,
+        2
+      )}
+    </pre>
+  )
+}
+
+BlockAccordions.propTypes = {
+  anchor: PropTypes.string,
+  className: PropTypes.string,
+  data: PropTypes.shape({
+    accordions: PropTypes.object,
+    button_label: PropTypes.string,
+    button_url: PropTypes.string,
+    description: PropTypes.string,
+    title: PropTypes.string
+  }),
+  id: PropTypes.string,
+  props: PropTypes.object.isRequired
+}

components/blocks/BlockAccordions/index.js

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

components/blocks/BlockAlgolia/BlockAlgolia.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+
+/**
+ * Algolia Block
+ *
+ * A custom ACF Block for displaying Algolia results.
+ *
+ * @author WebDevStudios
+ * @param {object} props The component attributes as props.
+ */
+export default function BlockAlgolia({props, indexName}) {
+  const {
+    data: {title, post_type, show_filters, sort_order}
+  } = props
+
+  return (
+    <pre>
+      {JSON.stringify(
+        indexName,
+        {title, post_type, show_filters, sort_order},
+        null,
+        2
+      )}
+    </pre>
+  )
+}
+
+BlockAlgolia.propTypes = {
+  indexName: PropTypes.string.isRequired,
+  props: PropTypes.object.isRequired,
+  id: PropTypes.string,
+  anchor: PropTypes.string,
+  align: PropTypes.string,
+  className: PropTypes.string,
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    post_type: PropTypes.string,
+    show_filters: PropTypes.string,
+    sort_order: PropTypes.string
+  })
+}

components/blocks/BlockAlgolia/index.js

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

components/blocks/BlockBlockquote/BlockBlockquote.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+
+/**
+ * Block Quote Block
+ *
+ * The core Block Quote block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {object} props The component attributes as props.
+ */
+export default function BlockBlockquote({props}) {
+  const {
+    id,
+    anchor,
+    className,
+    data: {quote, style}
+  } = props
+
+  const type = style === 'misc-white' ? 'a' : 'b'
+  return (
+    <pre>
+      {JSON.stringify(
+        type,
+        {
+          id,
+          anchor,
+          className,
+          data: {quote, style}
+        },
+        null,
+        2
+      )}
+    </pre>
+  )
+}
+
+BlockBlockquote.propTypes = {
+  props: PropTypes.object.isRequired,
+  id: PropTypes.string,
+  anchor: PropTypes.string,
+  className: PropTypes.string,
+  data: PropTypes.shape({
+    quote: PropTypes.string,
+    style: PropTypes.string
+  })
+}

components/blocks/BlockBlockquote/index.js

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

components/blocks/BlockHeadings/BlockHeadings.js

@@ -0,0 +1,37 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+
+/**
+ * Headings Block
+ *
+ * The core Headings block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {object} props The component attributes as props.
+ */
+export default function BlockHeadings({props}) {
+  const {anchor, align, className, content, level} = props
+  const alignment = !align ? 'left' : align
+
+  return (
+    <h1
+      tag={'h' + level}
+      className={cn('container container--sm', `text-${alignment}`, className)}
+      id={anchor}
+    >
+      {content}
+    </h1>
+  )
+}
+
+BlockHeadings.propTypes = {
+  props: PropTypes.object.isRequired,
+  anchor: PropTypes.string,
+  align: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  content: PropTypes.string,
+  fontSize: PropTypes.string,
+  level: PropTypes.string,
+  textColor: PropTypes.string
+}

components/blocks/BlockHeadings/index.js

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

components/blocks/BlockImage/BlockImage.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+
+/**
+ * Image Block
+ *
+ * The core Image block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {object} props The component attributes as props.
+ */
+export default function BlockImage({props: {alt, anchor, caption, image}}) {
+  return <pre>{JSON.stringify({alt, anchor, caption, image}, null, 2)}</pre>
+}
+
+BlockImage.propTypes = {
+  props: PropTypes.shape({
+    alt: PropTypes.string,
+    anchor: PropTypes.string,
+    caption: PropTypes.string,
+    className: PropTypes.string,
+    id: PropTypes.number,
+    image: PropTypes.object,
+    linkClass: PropTypes.string,
+    title: PropTypes.string,
+    url: PropTypes.string
+  })
+}

components/blocks/BlockImage/index.js

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