Make example for ACF gutenberg blocks

Author: itsamoreh

components/blocks/ACF/AcfBlockMediaText/AcfBlockMediaText.js

@@ -0,0 +1,32 @@
+import AcfMediaText from '@/components/organisms/AcfMediaText'
+import PropTypes from 'prop-types'
+
+/**
+ * Handle the LzbMediaText block.
+ *
+ * @author WebDevStudios
+ * @param {object} props            The props.
+ * @param {object} props.attributes The attributes object.
+ * @return {Element}                The component.
+ */
+export default function LzbBlockMediaText({attributes}) {
+  // TODO: Query the DB for the image ID and replace the attributes.data with the correct information.
+  attributes.data = {
+    ...attributes.data,
+    image: {}
+  }
+
+  return (
+    <>
+      {attributes ? (
+        <AcfMediaText {...attributes.data} />
+      ) : (
+        'There was a problem with attributes in AcfBlockMediaText.js.'
+      )}
+    </>
+  )
+}
+
+LzbBlockMediaText.propTypes = {
+  attributes: PropTypes.object
+}

components/blocks/ACF/AcfBlockMediaText/index.js

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

components/blocks/index.js

@@ -1,9 +1,12 @@
 // Export the blocks.
+export {default as AcfBlockMediaText} from './ACF/AcfBlockMediaText'
 export {default as BlockButton} from './Gutenberg/BlockButton'
 export {default as BlockButtons} from './Gutenberg/BlockButtons'
 export {default as BlockCode} from './Gutenberg/BlockCode'
 export {default as BlockColumns} from './Gutenberg/BlockColumns'
 export {default as BlockCover} from './Gutenberg/BlockCover'
+export {default as BlockEmbed} from './Gutenberg/BlockEmbed'
+export {default as BlockGravityForm} from './Gutenberg/BlockGravityForm'
 export {default as BlockHeadings} from './Gutenberg/BlockHeadings'
 export {default as BlockImage} from './Gutenberg/BlockImage'
 export {default as BlockImageGallery} from './Gutenberg/BlockImageGallery'
@@ -16,7 +19,5 @@ export {default as BlockSeparator} from './Gutenberg/BlockSeparator'
 export {default as BlockShortcode} from './Gutenberg/BlockShortcode'
 export {default as BlockSpacer} from './Gutenberg/BlockSpacer'
 export {default as BlockTable} from './Gutenberg/BlockTable'
-export {default as BlockEmbed} from './Gutenberg/BlockEmbed'
-export {default as BlockGravityForm} from './Gutenberg/BlockGravityForm'
 export {default as LzbBlockHero} from './LazyBlocks/LzbBlockHero'
 export {default as LzbBlockMediaText} from './LazyBlocks/LzbBlockMediaText'

components/organisms/AcfMediaText/AcfMediaText.js

@@ -0,0 +1,81 @@
+import Button from '@/components/atoms/Button'
+import Container from '@/components/atoms/Container'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './AcfMediaText.module.css'
+
+/**
+ * Render the AcfMediaText component.
+ *
+ * @param {object}  props           AcfMediaText component props.
+ * @param {string}  props.body      The body text.
+ * @param {string}  props.className The className.
+ * @param {object}  props.ctaText   The cta text.
+ * @param {object}  props.ctaUrl    The cta url.
+ * @param {object}  props.image     The image object with url and alt text.
+ * @param {boolean} props.mediaLeft Whether to show media on the left of the text.
+ * @param {string}  props.title     The title.
+ * @return {Element}                The AcfMediaText component.
+ */
+export default function AcfMediaText({
+  body,
+  className,
+  ctaText,
+  ctaUrl,
+  image,
+  mediaLeft,
+  title
+}) {
+  return (
+    <Container>
+      <section
+        className={cn(
+          styles.acfMediaText,
+          mediaLeft ? styles.mediaLeft : null,
+          className
+        )}
+      >
+        <div className={styles.text}>
+          <>
+            {title && <h1 className={styles.title}>{title}</h1>}
+            {body && <p className={styles.body}>{body}</p>}
+            {ctaText && ctaUrl && (
+              <Button
+                className={styles.button}
+                url={ctaUrl}
+                text={ctaText}
+                type="primary"
+                size="md"
+              />
+            )}
+          </>
+        </div>
+        <div className={styles.media}>
+          {image && image.url && (
+            <div className={styles.imageWrap}>
+              <img src={image.url} alt={image.alt} />
+            </div>
+          )}
+        </div>
+      </section>
+    </Container>
+  )
+}
+
+AcfMediaText.propTypes = {
+  body: PropTypes.string,
+  className: PropTypes.string,
+  ctaText: PropTypes.string,
+  ctaUrl: PropTypes.string,
+  image: PropTypes.shape({
+    url: PropTypes.string,
+    alt: PropTypes.string
+  }),
+  mediaLeft: PropTypes.bool,
+  title: PropTypes.string
+}
+
+AcfMediaText.defaultProps = {
+  mediaLeft: false
+}

components/organisms/AcfMediaText/AcfMediaText.module.css

@@ -0,0 +1,46 @@
+.acfMediaText {
+  @apply md:grid md:grid-cols-12 md:gap-16 mb-12;
+
+  & .text,
+  & .media {
+    @apply col-span-6 flex flex-col items-start justify-center;
+  }
+
+  & .text {
+    @apply items-start;
+
+    & .title {
+      @apply mb-8;
+    }
+
+    & .body {
+      @apply mb-24;
+    }
+  }
+
+  & .media {
+    & .imageWrap {
+      @apply relative h-0 w-full rounded bg-opacity-20;
+
+      padding-top: 67.58%; /* Aspect ratio box - https://css-tricks.com/aspect-ratio-boxes */
+    }
+
+    & img {
+      @apply absolute top-0 left-0 w-full h-full object-cover rounded;
+    }
+  }
+
+  &.mediaLeft {
+    & .media {
+      grid-row-start: 1;
+    }
+
+    & .text {
+      @apply items-end;
+
+      & .body {
+        @apply text-right;
+      }
+    }
+  }
+}

components/organisms/AcfMediaText/AcfMediaText.stories.mdx

@@ -0,0 +1,43 @@
+import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
+import AcfMediaText from './'
+
+<Meta title="Components/Molecules/AcfMediaText" component={AcfMediaText} />
+
+# Component
+
+Use this to display media and text in a 50/50 layout.
+
+<Canvas>
+  <Story name="Component">
+    <AcfMediaText
+      title="New Designs"
+      body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
+      image={{
+        url:
+          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
+        alt: 'Some alt text'
+      }}
+      cta={{icon: 'arrowRight', text: 'Take a look'}}
+    />
+  </Story>
+</Canvas>
+
+## Media Left
+
+Media will display on the right on large screens by default. Use the `mediaLeft` prop to display the media on the left side.
+
+<Canvas>
+  <Story name="MediaLeft">
+    <AcfMediaText
+      title="New Designs"
+      body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
+      image={{
+        url:
+          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
+        alt: 'Some alt text'
+      }}
+      cta={{icon: 'arrowRight', text: 'Take a look'}}
+      mediaLeft
+    />
+  </Story>
+</Canvas>

components/organisms/AcfMediaText/index.js

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

functions/displayBlock.js

@@ -55,6 +55,8 @@ export default function displayBlock(block, index) {
       return <Blocks.LzbBlockMediaText attributes={attributes} key={index} />
     case 'lazyblock/hero':
       return <Blocks.LzbBlockHero attributes={attributes} key={index} />
+    case 'acf/acf-media-text':
+      return <Blocks.AcfBlockMediaText attributes={attributes} key={index} />
     default:
       return <pre key={index}>{JSON.stringify(block, null, 2)}</pre>
   }