From 053fea01730f785d321dff78f44153c47f29b637 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 12:26:39 -0600
Subject: [PATCH 01/24] Organize props

---
 .../BlockMediaText/BlockMediaText.js          | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index a1d93e35b..6700c1b67 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -9,11 +9,11 @@ import PropTypes from 'prop-types'
  *
  * @author WebDevStudios
  * @param  {object}  props             The component properties.
- * @param  {object}  props.media       Media props.
  * @param  {Array}   props.innerBlocks The array of inner blocks to display.
+ * @param  {object}  props.media       Media props.
  * @return {Element}                   The Code component.
  */
-export default function BlockMediaText({media, innerBlocks}) {
+export default function BlockMediaText({innerBlocks, media}) {
   return (
     <>
       {!!media && innerBlocks?.length && (
@@ -31,27 +31,27 @@ export default function BlockMediaText({media, innerBlocks}) {
 }
 
 BlockMediaText.propTypes = {
+  innerBlocks: PropTypes.arrayOf(
+    PropTypes.shape({
+      attributes: PropTypes.object,
+      name: PropTypes.string
+    })
+  ),
   media: PropTypes.shape({
     anchor: PropTypes.string,
     caption: PropTypes.string,
     className: PropTypes.string,
     href: PropTypes.string,
-    linkTarget: PropTypes.string,
     linkClass: PropTypes.string,
-    rel: PropTypes.string,
-    sizeSlug: PropTypes.string,
+    linkTarget: PropTypes.string,
     mediaAlt: PropTypes.string,
     mediaId: PropTypes.number,
+    mediaPosition: PropTypes.string,
     mediaType: PropTypes.string,
     mediaUrl: PropTypes.string,
-    mediaPosition: PropTypes.string
-  }),
-  innerBlocks: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      attributes: PropTypes.object
-    })
-  )
+    rel: PropTypes.string,
+    sizeSlug: PropTypes.string
+  })
 }
 BlockMediaText.defaultProps = {
   media: PropTypes.shape({

From 6ab69a6473231aa214506c4d94d19fe86c7048cc Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 14:20:25 -0600
Subject: [PATCH 02/24] Handle color props in media text block

---
 .../BlockMediaText/BlockMediaText.js          | 48 +++++++++++++++++--
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index 6700c1b67..45ef03a94 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -14,14 +14,49 @@ import PropTypes from 'prop-types'
  * @return {Element}                   The Code component.
  */
 export default function BlockMediaText({innerBlocks, media}) {
+  /* eslint-disable no-unused-vars */
+  const {
+    anchor,
+    backgroundColorHex,
+    caption,
+    className,
+    href,
+    linkClass,
+    linkTarget,
+    mediaAlt,
+    mediaId,
+    mediaPosition,
+    mediaType,
+    mediaUrl,
+    rel,
+    sizeSlug,
+    style,
+    textColorHex
+  } = media
+  /* eslint-enable no-unused-vars */
+
+  // Determine background and text colors, using stylelint-accepted const names.
+  const backgroundcolor =
+    backgroundColorHex || style?.color?.background || 'inherit'
+  const textcolor = textColorHex || style?.color?.text || 'inherit'
+
+  // Create style object for button.
+  const mediaTextStyle = {
+    background: style?.color?.gradient || 'inherit',
+    backgroundColor: backgroundcolor,
+    color: textcolor
+    // width: width ? `${width}%` : 'auto'
+  }
+
   return (
     <>
       {!!media && innerBlocks?.length && (
         <MediaText
-          id={media?.anchor}
-          className={media?.className}
-          mediaLeft={media?.mediaPosition === 'left' ? true : false}
-          image={{url: media?.mediaUrl, alt: media?.mediaAlt}}
+          className={className}
+          id={anchor}
+          image={{url: mediaUrl, alt: mediaAlt}}
+          mediaLeft={mediaPosition === 'left' ? true : false}
+          style={mediaTextStyle}
         >
           <Blocks blocks={innerBlocks} />
         </MediaText>
@@ -39,6 +74,7 @@ BlockMediaText.propTypes = {
   ),
   media: PropTypes.shape({
     anchor: PropTypes.string,
+    backgroundColorHex: PropTypes.string,
     caption: PropTypes.string,
     className: PropTypes.string,
     href: PropTypes.string,
@@ -50,7 +86,9 @@ BlockMediaText.propTypes = {
     mediaType: PropTypes.string,
     mediaUrl: PropTypes.string,
     rel: PropTypes.string,
-    sizeSlug: PropTypes.string
+    sizeSlug: PropTypes.string,
+    style: PropTypes.object,
+    textColorHex: PropTypes.string
   })
 }
 BlockMediaText.defaultProps = {

From ddb257e8b2dbf1c4a72d5ecf2c6f5019b4790242 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 14:20:54 -0600
Subject: [PATCH 03/24] Handle style in mediatext

---
 components/organisms/MediaText/MediaText.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index ae6f10ecd..62e64cf1c 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -16,6 +16,7 @@ import styles from './MediaText.module.css'
  * @param  {string}  props.id        Optional element ID.
  * @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  {object}  props.style     Custom media text styles.
  * @param  {string}  props.title     The title.
  * @return {Element}                 The MediaText component.
  */
@@ -27,6 +28,7 @@ export default function MediaText({
   id,
   image,
   mediaLeft,
+  style,
   title
 }) {
   useEffect(() => {
@@ -45,6 +47,7 @@ export default function MediaText({
         mediaLeft ? styles.mediaLeft : null,
         className
       )}
+      style={style}
     >
       <div className={styles.text}>
         {children ? (
@@ -95,6 +98,11 @@ MediaText.propTypes = {
     alt: PropTypes.string
   }),
   mediaLeft: PropTypes.bool,
+  style: PropTypes.shape({
+    background: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    color: PropTypes.string
+  }),
   title: PropTypes.string
 }
 

From f5792dba26eeb9840efa46f1a413b5e5b876772c Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 14:24:03 -0600
Subject: [PATCH 04/24] Remove bottom margin

---
 components/organisms/MediaText/MediaText.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index 69de53c26..d01c31a13 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -20,7 +20,7 @@
 
   & .media {
     & .imageWrap {
-      @apply relative h-0 w-full rounded bg-opacity-20;
+      @apply relative h-0 w-full rounded bg-opacity-20 mb-0;
 
       padding-top: 67.58%; /* Aspect ratio box - https://css-tricks.com/aspect-ratio-boxes */
     }

From f1883177899895735a726db98e31b73e5f570064 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 14:36:04 -0600
Subject: [PATCH 05/24] Fix spacing/padding

---
 components/organisms/MediaText/MediaText.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index d01c31a13..c3e6e9baa 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -1,5 +1,5 @@
 .mediaText {
-  @apply md:grid md:grid-cols-12 md:gap-16 mb-12;
+  @apply md:grid md:grid-cols-12 mb-12;
 
   & .text,
   & .media {
@@ -7,7 +7,7 @@
   }
 
   & .text {
-    @apply items-start;
+    @apply items-start ml-8 mr-8;
 
     & .title {
       @apply mb-8;

From 5cf5654bc35958a991dbb51c65aaef2a85484114 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 14:36:19 -0600
Subject: [PATCH 06/24] Remove rounded corners

---
 components/organisms/MediaText/MediaText.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index c3e6e9baa..a87332eef 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -20,13 +20,13 @@
 
   & .media {
     & .imageWrap {
-      @apply relative h-0 w-full rounded bg-opacity-20 mb-0;
+      @apply relative h-0 w-full bg-opacity-20 mb-0;
 
       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;
+      @apply absolute top-0 left-0 w-full h-full object-cover rounded-none;
     }
   }
 

From 6acd6dda561d3af1acf9da0821ad586a40301ed2 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 14:56:18 -0600
Subject: [PATCH 07/24] Pass media width from block

---
 components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index 45ef03a94..bbb3e37a7 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -27,6 +27,7 @@ export default function BlockMediaText({innerBlocks, media}) {
     mediaId,
     mediaPosition,
     mediaType,
+    mediaWidth,
     mediaUrl,
     rel,
     sizeSlug,
@@ -45,7 +46,6 @@ export default function BlockMediaText({innerBlocks, media}) {
     background: style?.color?.gradient || 'inherit',
     backgroundColor: backgroundcolor,
     color: textcolor
-    // width: width ? `${width}%` : 'auto'
   }
 
   return (
@@ -56,6 +56,7 @@ export default function BlockMediaText({innerBlocks, media}) {
           id={anchor}
           image={{url: mediaUrl, alt: mediaAlt}}
           mediaLeft={mediaPosition === 'left' ? true : false}
+          mediaWidth={mediaWidth}
           style={mediaTextStyle}
         >
           <Blocks blocks={innerBlocks} />
@@ -84,6 +85,7 @@ BlockMediaText.propTypes = {
     mediaId: PropTypes.number,
     mediaPosition: PropTypes.string,
     mediaType: PropTypes.string,
+    mediaWidth: PropTypes.number,
     mediaUrl: PropTypes.string,
     rel: PropTypes.string,
     sizeSlug: PropTypes.string,

From 6534f316dde2e18bec2802ef78bea68a8a1dc1a2 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 15:08:28 -0600
Subject: [PATCH 08/24] Change margin to padding

---
 components/organisms/MediaText/MediaText.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index a87332eef..fd379ce85 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -7,7 +7,7 @@
   }
 
   & .text {
-    @apply items-start ml-8 mr-8;
+    @apply items-start pl-8 pr-8;
 
     & .title {
       @apply mb-8;

From 51ecc4feee367cedb712574a34dfb5ed887ded9a Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 15:09:06 -0600
Subject: [PATCH 09/24] Set media & text width

---
 components/organisms/MediaText/MediaText.js | 33 +++++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index 62e64cf1c..0cd6e9948 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -8,17 +8,18 @@ import styles from './MediaText.module.css'
 /**
  * Render the MediaText component.
  *
- * @param  {object}  props           MediaText component props.
- * @param  {string}  props.body      The body text.
- * @param  {Element} props.children  The child elements.
- * @param  {string}  props.className The className.
- * @param  {object}  props.cta       The cta object with text and url strings.
- * @param  {string}  props.id        Optional element ID.
- * @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  {object}  props.style     Custom media text styles.
- * @param  {string}  props.title     The title.
- * @return {Element}                 The MediaText component.
+ * @param  {object}  props            MediaText component props.
+ * @param  {string}  props.body       The body text.
+ * @param  {Element} props.children   The child elements.
+ * @param  {string}  props.className  The className.
+ * @param  {object}  props.cta        The cta object with text and url strings.
+ * @param  {string}  props.id         Optional element ID.
+ * @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  {number}  props.mediaWidth The media width in percent.
+ * @param  {object}  props.style      Custom media text styles.
+ * @param  {string}  props.title      The title.
+ * @return {Element}                  The MediaText component.
  */
 export default function MediaText({
   body,
@@ -28,6 +29,7 @@ export default function MediaText({
   id,
   image,
   mediaLeft,
+  mediaWidth,
   style,
   title
 }) {
@@ -39,6 +41,10 @@ export default function MediaText({
     }
   })
 
+  // Calculate media and text widths in percent.
+  const mediawidth = `${mediaWidth ?? 50}%`
+  const textwidth = `${100 - (mediaWidth ?? 50)}%`
+
   return (
     <section
       id={id}
@@ -49,7 +55,7 @@ export default function MediaText({
       )}
       style={style}
     >
-      <div className={styles.text}>
+      <div className={styles.text} style={{width: textwidth}}>
         {children ? (
           children
         ) : (
@@ -69,7 +75,7 @@ export default function MediaText({
           </>
         )}
       </div>
-      <div className={styles.media}>
+      <div className={styles.media} style={{width: mediawidth}}>
         {image && image.url && (
           <DisplayImage
             className={styles.imageWrap}
@@ -98,6 +104,7 @@ MediaText.propTypes = {
     alt: PropTypes.string
   }),
   mediaLeft: PropTypes.bool,
+  mediaWidth: PropTypes.number,
   style: PropTypes.shape({
     background: PropTypes.string,
     backgroundColor: PropTypes.string,

From 1d9bd5aaa755419a35bb0d97f530ec2dea7fb097 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 15:10:58 -0600
Subject: [PATCH 10/24] Handle width changes in grid

---
 .../BlockMediaText/BlockMediaText.js          |  3 +-
 components/organisms/MediaText/MediaText.js   | 33 ++++++++-----------
 .../organisms/MediaText/MediaText.module.css  | 10 +++++-
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index bbb3e37a7..4cefab749 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -45,7 +45,8 @@ export default function BlockMediaText({innerBlocks, media}) {
   const mediaTextStyle = {
     background: style?.color?.gradient || 'inherit',
     backgroundColor: backgroundcolor,
-    color: textcolor
+    color: textcolor,
+    gridTemplateColumns: `1fr ${mediaWidth}%`
   }
 
   return (
diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index 0cd6e9948..62e64cf1c 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -8,18 +8,17 @@ import styles from './MediaText.module.css'
 /**
  * Render the MediaText component.
  *
- * @param  {object}  props            MediaText component props.
- * @param  {string}  props.body       The body text.
- * @param  {Element} props.children   The child elements.
- * @param  {string}  props.className  The className.
- * @param  {object}  props.cta        The cta object with text and url strings.
- * @param  {string}  props.id         Optional element ID.
- * @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  {number}  props.mediaWidth The media width in percent.
- * @param  {object}  props.style      Custom media text styles.
- * @param  {string}  props.title      The title.
- * @return {Element}                  The MediaText component.
+ * @param  {object}  props           MediaText component props.
+ * @param  {string}  props.body      The body text.
+ * @param  {Element} props.children  The child elements.
+ * @param  {string}  props.className The className.
+ * @param  {object}  props.cta       The cta object with text and url strings.
+ * @param  {string}  props.id        Optional element ID.
+ * @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  {object}  props.style     Custom media text styles.
+ * @param  {string}  props.title     The title.
+ * @return {Element}                 The MediaText component.
  */
 export default function MediaText({
   body,
@@ -29,7 +28,6 @@ export default function MediaText({
   id,
   image,
   mediaLeft,
-  mediaWidth,
   style,
   title
 }) {
@@ -41,10 +39,6 @@ export default function MediaText({
     }
   })
 
-  // Calculate media and text widths in percent.
-  const mediawidth = `${mediaWidth ?? 50}%`
-  const textwidth = `${100 - (mediaWidth ?? 50)}%`
-
   return (
     <section
       id={id}
@@ -55,7 +49,7 @@ export default function MediaText({
       )}
       style={style}
     >
-      <div className={styles.text} style={{width: textwidth}}>
+      <div className={styles.text}>
         {children ? (
           children
         ) : (
@@ -75,7 +69,7 @@ export default function MediaText({
           </>
         )}
       </div>
-      <div className={styles.media} style={{width: mediawidth}}>
+      <div className={styles.media}>
         {image && image.url && (
           <DisplayImage
             className={styles.imageWrap}
@@ -104,7 +98,6 @@ MediaText.propTypes = {
     alt: PropTypes.string
   }),
   mediaLeft: PropTypes.bool,
-  mediaWidth: PropTypes.number,
   style: PropTypes.shape({
     background: PropTypes.string,
     backgroundColor: PropTypes.string,
diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index fd379ce85..cd7b948fc 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -4,11 +4,15 @@
   & .text,
   & .media {
     @apply col-span-6 flex flex-col items-start justify-center;
+
+    grid-row: 1;
   }
 
   & .text {
     @apply items-start pl-8 pr-8;
 
+    grid-column: 1;
+
     & .title {
       @apply mb-8;
     }
@@ -19,6 +23,8 @@
   }
 
   & .media {
+    grid-column: 2;
+
     & .imageWrap {
       @apply relative h-0 w-full bg-opacity-20 mb-0;
 
@@ -32,12 +38,14 @@
 
   &.mediaLeft {
     & .media {
-      grid-row-start: 1;
+      grid-column: 1;
     }
 
     & .text {
       @apply items-end;
 
+      grid-column: 2;
+
       & .body {
         @apply text-right;
       }

From e698baeb57d9105bddd1935887992a99582f789a Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 15:26:34 -0600
Subject: [PATCH 11/24] Add handling for not stacking on mobile

---
 .../BlockMediaText/BlockMediaText.js          |  3 ++
 components/organisms/MediaText/MediaText.js   | 28 +++++++++++--------
 .../organisms/MediaText/MediaText.module.css  |  4 +++
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index 4cefab749..f8022e9d4 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -21,6 +21,7 @@ export default function BlockMediaText({innerBlocks, media}) {
     caption,
     className,
     href,
+    isStackedOnMobile,
     linkClass,
     linkTarget,
     mediaAlt,
@@ -59,6 +60,7 @@ export default function BlockMediaText({innerBlocks, media}) {
           mediaLeft={mediaPosition === 'left' ? true : false}
           mediaWidth={mediaWidth}
           style={mediaTextStyle}
+          stackOnMobile={isStackedOnMobile}
         >
           <Blocks blocks={innerBlocks} />
         </MediaText>
@@ -80,6 +82,7 @@ BlockMediaText.propTypes = {
     caption: PropTypes.string,
     className: PropTypes.string,
     href: PropTypes.string,
+    isStackedOnMobile: PropTypes.bool,
     linkClass: PropTypes.string,
     linkTarget: PropTypes.string,
     mediaAlt: PropTypes.string,
diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index 62e64cf1c..c673fb236 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -8,17 +8,18 @@ import styles from './MediaText.module.css'
 /**
  * Render the MediaText component.
  *
- * @param  {object}  props           MediaText component props.
- * @param  {string}  props.body      The body text.
- * @param  {Element} props.children  The child elements.
- * @param  {string}  props.className The className.
- * @param  {object}  props.cta       The cta object with text and url strings.
- * @param  {string}  props.id        Optional element ID.
- * @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  {object}  props.style     Custom media text styles.
- * @param  {string}  props.title     The title.
- * @return {Element}                 The MediaText component.
+ * @param  {object}  props               MediaText component props.
+ * @param  {string}  props.body          The body text.
+ * @param  {Element} props.children      The child elements.
+ * @param  {string}  props.className     The className.
+ * @param  {object}  props.cta           The cta object with text and url strings.
+ * @param  {string}  props.id            Optional element ID.
+ * @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  {boolean} props.stackOnMobile Whether to stack media and text on mobile.
+ * @param  {object}  props.style         Custom media text styles.
+ * @param  {string}  props.title         The title.
+ * @return {Element}                     The MediaText component.
  */
 export default function MediaText({
   body,
@@ -28,6 +29,7 @@ export default function MediaText({
   id,
   image,
   mediaLeft,
+  stackOnMobile,
   style,
   title
 }) {
@@ -45,7 +47,8 @@ export default function MediaText({
       className={cn(
         styles.mediaText,
         mediaLeft ? styles.mediaLeft : null,
-        className
+        className,
+        !stackOnMobile ? styles.noStack : null
       )}
       style={style}
     >
@@ -98,6 +101,7 @@ MediaText.propTypes = {
     alt: PropTypes.string
   }),
   mediaLeft: PropTypes.bool,
+  stackOnMobile: PropTypes.bool,
   style: PropTypes.shape({
     background: PropTypes.string,
     backgroundColor: PropTypes.string,
diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index cd7b948fc..20c444db5 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -1,6 +1,10 @@
 .mediaText {
   @apply md:grid md:grid-cols-12 mb-12;
 
+  &.noStack {
+    @apply grid grid-cols-12;
+  }
+
   & .text,
   & .media {
     @apply col-span-6 flex flex-col items-start justify-center;

From b17a39e3fc9830a03a6e737b5d803464659a9985 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 15:38:54 -0600
Subject: [PATCH 12/24] Add back rounding

---
 components/organisms/MediaText/MediaText.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index 20c444db5..b7849baa6 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -1,5 +1,5 @@
 .mediaText {
-  @apply md:grid md:grid-cols-12 mb-12;
+  @apply md:grid md:grid-cols-12 mb-12 rounded;
 
   &.noStack {
     @apply grid grid-cols-12;
@@ -30,13 +30,13 @@
     grid-column: 2;
 
     & .imageWrap {
-      @apply relative h-0 w-full bg-opacity-20 mb-0;
+      @apply relative h-0 w-full rounded bg-opacity-20 mb-0;
 
       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-none;
+      @apply absolute top-0 left-0 w-full h-full object-cover rounded;
     }
   }
 

From a401cfbeb141c94a0609a023e83240f4b2e44976 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 15:41:32 -0600
Subject: [PATCH 13/24] Expand padding to all sides

---
 components/organisms/MediaText/MediaText.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index b7849baa6..24f91b4d5 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -13,7 +13,7 @@
   }
 
   & .text {
-    @apply items-start pl-8 pr-8;
+    @apply items-start p-8;
 
     grid-column: 1;
 

From e620b36f42e12cbc88a774f4153454def50f4793 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 15:46:17 -0600
Subject: [PATCH 14/24] Add handling for text alignment

---
 .../BlockMediaText/BlockMediaText.js          |  7 ++--
 components/organisms/MediaText/MediaText.js   | 35 +++++++++++--------
 .../organisms/MediaText/MediaText.module.css  | 12 +++++++
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index f8022e9d4..0d0cc73db 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -33,7 +33,8 @@ export default function BlockMediaText({innerBlocks, media}) {
     rel,
     sizeSlug,
     style,
-    textColorHex
+    textColorHex,
+    verticalAlignment
   } = media
   /* eslint-enable no-unused-vars */
 
@@ -61,6 +62,7 @@ export default function BlockMediaText({innerBlocks, media}) {
           mediaWidth={mediaWidth}
           style={mediaTextStyle}
           stackOnMobile={isStackedOnMobile}
+          verticalAlignment={verticalAlignment}
         >
           <Blocks blocks={innerBlocks} />
         </MediaText>
@@ -94,7 +96,8 @@ BlockMediaText.propTypes = {
     rel: PropTypes.string,
     sizeSlug: PropTypes.string,
     style: PropTypes.object,
-    textColorHex: PropTypes.string
+    textColorHex: PropTypes.string,
+    verticalAlignment: PropTypes.string
   })
 }
 BlockMediaText.defaultProps = {
diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index c673fb236..f8209db7a 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -8,18 +8,19 @@ import styles from './MediaText.module.css'
 /**
  * Render the MediaText component.
  *
- * @param  {object}  props               MediaText component props.
- * @param  {string}  props.body          The body text.
- * @param  {Element} props.children      The child elements.
- * @param  {string}  props.className     The className.
- * @param  {object}  props.cta           The cta object with text and url strings.
- * @param  {string}  props.id            Optional element ID.
- * @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  {boolean} props.stackOnMobile Whether to stack media and text on mobile.
- * @param  {object}  props.style         Custom media text styles.
- * @param  {string}  props.title         The title.
- * @return {Element}                     The MediaText component.
+ * @param  {object}  props                   MediaText component props.
+ * @param  {string}  props.body              The body text.
+ * @param  {Element} props.children          The child elements.
+ * @param  {string}  props.className         The className.
+ * @param  {object}  props.cta               The cta object with text and url strings.
+ * @param  {string}  props.id                Optional element ID.
+ * @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  {boolean} props.stackOnMobile     Whether to stack media and text on mobile.
+ * @param  {object}  props.style             Custom media text styles.
+ * @param  {string}  props.title             The title.
+ * @param  {string}  props.verticalAlignment Vertical alignment of text.
+ * @return {Element}                         The MediaText component.
  */
 export default function MediaText({
   body,
@@ -31,7 +32,8 @@ export default function MediaText({
   mediaLeft,
   stackOnMobile,
   style,
-  title
+  title,
+  verticalAlignment
 }) {
   useEffect(() => {
     if ((children && title) || (children && body) || (children && cta)) {
@@ -48,7 +50,9 @@ export default function MediaText({
         styles.mediaText,
         mediaLeft ? styles.mediaLeft : null,
         className,
-        !stackOnMobile ? styles.noStack : null
+        !stackOnMobile ? styles.noStack : null,
+        verticalAlignment === 'top' ? styles.alignTop : null,
+        verticalAlignment === 'bottom' ? styles.alignBottom : null
       )}
       style={style}
     >
@@ -107,7 +111,8 @@ MediaText.propTypes = {
     backgroundColor: PropTypes.string,
     color: PropTypes.string
   }),
-  title: PropTypes.string
+  title: PropTypes.string,
+  verticalAlignment: PropTypes.string
 }
 
 MediaText.defaultProps = {
diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index 24f91b4d5..38667f2b6 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -55,4 +55,16 @@
       }
     }
   }
+
+  &.alignTop {
+    & .text {
+      @apply justify-start;
+    }
+  }
+
+  &.alignBottom {
+    & .text {
+      @apply justify-end;
+    }
+  }
 }

From 251ff91ab798f748125b64e274f0c494a782691c Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Tue, 8 Jun 2021 15:58:39 -0600
Subject: [PATCH 15/24] Handle imagefill attr

---
 .../blocks/Gutenberg/BlockMediaText/BlockMediaText.js       | 3 +++
 components/organisms/MediaText/MediaText.js                 | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index 0d0cc73db..6c8dc0772 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -21,6 +21,7 @@ export default function BlockMediaText({innerBlocks, media}) {
     caption,
     className,
     href,
+    imageFill,
     isStackedOnMobile,
     linkClass,
     linkTarget,
@@ -58,6 +59,7 @@ export default function BlockMediaText({innerBlocks, media}) {
           className={className}
           id={anchor}
           image={{url: mediaUrl, alt: mediaAlt}}
+          imageFill={imageFill}
           mediaLeft={mediaPosition === 'left' ? true : false}
           mediaWidth={mediaWidth}
           style={mediaTextStyle}
@@ -84,6 +86,7 @@ BlockMediaText.propTypes = {
     caption: PropTypes.string,
     className: PropTypes.string,
     href: PropTypes.string,
+    imageFill: PropTypes.bool,
     isStackedOnMobile: PropTypes.bool,
     linkClass: PropTypes.string,
     linkTarget: PropTypes.string,
diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index f8209db7a..4bf335313 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -15,6 +15,7 @@ import styles from './MediaText.module.css'
  * @param  {object}  props.cta               The cta object with text and url strings.
  * @param  {string}  props.id                Optional element ID.
  * @param  {object}  props.image             The image object with url and alt text.
+ * @param  {boolean} props.imageFill         Whether to crop image to fill.
  * @param  {boolean} props.mediaLeft         Whether to show media on the left of the text.
  * @param  {boolean} props.stackOnMobile     Whether to stack media and text on mobile.
  * @param  {object}  props.style             Custom media text styles.
@@ -29,6 +30,7 @@ export default function MediaText({
   cta,
   id,
   image,
+  imageFill,
   mediaLeft,
   stackOnMobile,
   style,
@@ -52,7 +54,8 @@ export default function MediaText({
         className,
         !stackOnMobile ? styles.noStack : null,
         verticalAlignment === 'top' ? styles.alignTop : null,
-        verticalAlignment === 'bottom' ? styles.alignBottom : null
+        verticalAlignment === 'bottom' ? styles.alignBottom : null,
+        imageFill ? styles.imageFill : null
       )}
       style={style}
     >
@@ -104,6 +107,7 @@ MediaText.propTypes = {
     url: PropTypes.string,
     alt: PropTypes.string
   }),
+  imageFill: PropTypes.bool,
   mediaLeft: PropTypes.bool,
   stackOnMobile: PropTypes.bool,
   style: PropTypes.shape({

From f118be14b20a1f1b4de2f4c0ef4cc72081ff8088 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:04:26 -0600
Subject: [PATCH 16/24] Add basic image-fill handling, styling

---
 components/organisms/MediaText/MediaText.js   |  9 +++++++--
 .../organisms/MediaText/MediaText.module.css  | 20 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index 4bf335313..8103584f1 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -55,7 +55,7 @@ export default function MediaText({
         !stackOnMobile ? styles.noStack : null,
         verticalAlignment === 'top' ? styles.alignTop : null,
         verticalAlignment === 'bottom' ? styles.alignBottom : null,
-        imageFill ? styles.imageFill : null
+        imageFill && image?.url ? styles.imageFill : null
       )}
       style={style}
     >
@@ -79,7 +79,12 @@ export default function MediaText({
           </>
         )}
       </div>
-      <div className={styles.media}>
+      <div
+        className={styles.media}
+        style={{
+          backgroundImage: `url(${image?.url || ''})`
+        }}
+      >
         {image && image.url && (
           <DisplayImage
             className={styles.imageWrap}
diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index 38667f2b6..ddb16afd4 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -28,6 +28,7 @@
 
   & .media {
     grid-column: 2;
+    min-height: 15.5rem;
 
     & .imageWrap {
       @apply relative h-0 w-full rounded bg-opacity-20 mb-0;
@@ -67,4 +68,23 @@
       @apply justify-end;
     }
   }
+
+  &.imageFill {
+    & .media {
+      @apply h-full max-w-full;
+
+      min-height: 16rem;
+
+      & .imageWrap {
+        @apply pt-0;
+      }
+
+      & img {
+        clip: rect(0, 0, 0, 0);
+        height: 1px;
+        margin: -1px;
+        width: 1px;
+      }
+    }
+  }
 }

From 925227b297adca7147649931ad1ef2fe52777fa1 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:13:19 -0600
Subject: [PATCH 17/24] Add focal point support

---
 .../Gutenberg/BlockMediaText/BlockMediaText.js  | 17 +++++++++++++++++
 components/organisms/MediaText/MediaText.js     |  9 ++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index 6c8dc0772..d0d1d1ade 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -20,6 +20,7 @@ export default function BlockMediaText({innerBlocks, media}) {
     backgroundColorHex,
     caption,
     className,
+    focalPoint,
     href,
     imageFill,
     isStackedOnMobile,
@@ -52,11 +53,23 @@ export default function BlockMediaText({innerBlocks, media}) {
     gridTemplateColumns: `1fr ${mediaWidth}%`
   }
 
+  const newFocalPoint = {}
+
+  // Convert focal point values to percent.
+  if (imageFill) {
+    const x = parseFloat(focalPoint?.x || '.5') ?? 0.5
+    const y = parseFloat(focalPoint?.y || '.5') ?? 0.5
+
+    newFocalPoint.x = `${x * 100}%`
+    newFocalPoint.y = `${y * 100}%`
+  }
+
   return (
     <>
       {!!media && innerBlocks?.length && (
         <MediaText
           className={className}
+          focalPoint={newFocalPoint}
           id={anchor}
           image={{url: mediaUrl, alt: mediaAlt}}
           imageFill={imageFill}
@@ -85,6 +98,10 @@ BlockMediaText.propTypes = {
     backgroundColorHex: PropTypes.string,
     caption: PropTypes.string,
     className: PropTypes.string,
+    focalPoint: PropTypes.shape({
+      x: PropTypes.string,
+      y: PropTypes.string
+    }),
     href: PropTypes.string,
     imageFill: PropTypes.bool,
     isStackedOnMobile: PropTypes.bool,
diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index 8103584f1..667a25efd 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -13,6 +13,7 @@ import styles from './MediaText.module.css'
  * @param  {Element} props.children          The child elements.
  * @param  {string}  props.className         The className.
  * @param  {object}  props.cta               The cta object with text and url strings.
+ * @param  {object}  props.focalPoint        The focal point coordinates for the image fill setting.
  * @param  {string}  props.id                Optional element ID.
  * @param  {object}  props.image             The image object with url and alt text.
  * @param  {boolean} props.imageFill         Whether to crop image to fill.
@@ -28,6 +29,7 @@ export default function MediaText({
   children,
   className,
   cta,
+  focalPoint,
   id,
   image,
   imageFill,
@@ -82,7 +84,8 @@ export default function MediaText({
       <div
         className={styles.media}
         style={{
-          backgroundImage: `url(${image?.url || ''})`
+          backgroundImage: `url(${image?.url || ''})`,
+          backgroundPosition: `${focalPoint.x} ${focalPoint.y}`
         }}
       >
         {image && image.url && (
@@ -107,6 +110,10 @@ MediaText.propTypes = {
     url: PropTypes.string,
     icon: PropTypes.string
   }),
+  focalPoint: PropTypes.shape({
+    x: PropTypes.string,
+    y: PropTypes.string
+  }),
   id: PropTypes.string,
   image: PropTypes.shape({
     url: PropTypes.string,

From 3653c006c77f1a142423407250828071602d44b1 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:15:58 -0600
Subject: [PATCH 18/24] Fix image fill styling

---
 components/organisms/MediaText/MediaText.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
index 667a25efd..7a1fa535d 100644
--- a/components/organisms/MediaText/MediaText.js
+++ b/components/organisms/MediaText/MediaText.js
@@ -47,6 +47,13 @@ export default function MediaText({
     }
   })
 
+  const imageFillStyle = !imageFill
+    ? null
+    : {
+        backgroundImage: `url(${image?.url || ''})`,
+        backgroundPosition: `${focalPoint.x} ${focalPoint.y}`
+      }
+
   return (
     <section
       id={id}
@@ -81,13 +88,7 @@ export default function MediaText({
           </>
         )}
       </div>
-      <div
-        className={styles.media}
-        style={{
-          backgroundImage: `url(${image?.url || ''})`,
-          backgroundPosition: `${focalPoint.x} ${focalPoint.y}`
-        }}
-      >
+      <div className={styles.media} style={imageFillStyle}>
         {image && image.url && (
           <DisplayImage
             className={styles.imageWrap}

From 98761e9a82fc6ac082db95a466773842b65df998 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:18:09 -0600
Subject: [PATCH 19/24] Add rounded corners

---
 components/organisms/MediaText/MediaText.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index ddb16afd4..90ce7a870 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -71,7 +71,7 @@
 
   &.imageFill {
     & .media {
-      @apply h-full max-w-full;
+      @apply h-full max-w-full rounded;
 
       min-height: 16rem;
 

From 0ed77f7921e33f8dc6f7e437c86852b18e41dd5a Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:21:09 -0600
Subject: [PATCH 20/24] Add gradient hex style handling

---
 components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index d0d1d1ade..f62633655 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -21,6 +21,7 @@ export default function BlockMediaText({innerBlocks, media}) {
     caption,
     className,
     focalPoint,
+    gradientHex,
     href,
     imageFill,
     isStackedOnMobile,
@@ -47,7 +48,7 @@ export default function BlockMediaText({innerBlocks, media}) {
 
   // Create style object for button.
   const mediaTextStyle = {
-    background: style?.color?.gradient || 'inherit',
+    background: gradientHex || style?.color?.gradient || 'inherit',
     backgroundColor: backgroundcolor,
     color: textcolor,
     gridTemplateColumns: `1fr ${mediaWidth}%`
@@ -102,6 +103,7 @@ BlockMediaText.propTypes = {
       x: PropTypes.string,
       y: PropTypes.string
     }),
+    gradientHex: PropTypes.string,
     href: PropTypes.string,
     imageFill: PropTypes.bool,
     isStackedOnMobile: PropTypes.bool,

From bb4cdc0ec5dfcdebfc92d4db10b79a62247f0854 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:26:01 -0600
Subject: [PATCH 21/24] Extract background to const

---
 components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index f62633655..fb88c162e 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -45,10 +45,11 @@ export default function BlockMediaText({innerBlocks, media}) {
   const backgroundcolor =
     backgroundColorHex || style?.color?.background || 'inherit'
   const textcolor = textColorHex || style?.color?.text || 'inherit'
+  const background = gradientHex || style?.color?.gradient || 'inherit'
 
   // Create style object for button.
   const mediaTextStyle = {
-    background: gradientHex || style?.color?.gradient || 'inherit',
+    background: background,
     backgroundColor: backgroundcolor,
     color: textcolor,
     gridTemplateColumns: `1fr ${mediaWidth}%`

From 7c0c19b64ad1e22ac8a59ccf9c3ea57e40e02973 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:33:04 -0600
Subject: [PATCH 22/24] Fix media width handling

---
 components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
index fb88c162e..5b75496bc 100644
--- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
+++ b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -46,13 +46,15 @@ export default function BlockMediaText({innerBlocks, media}) {
     backgroundColorHex || style?.color?.background || 'inherit'
   const textcolor = textColorHex || style?.color?.text || 'inherit'
   const background = gradientHex || style?.color?.gradient || 'inherit'
+  const gridtemplatecolumns =
+    mediaPosition === 'left' ? `${mediaWidth}% 1fr` : `1fr ${mediaWidth}%`
 
   // Create style object for button.
   const mediaTextStyle = {
     background: background,
     backgroundColor: backgroundcolor,
     color: textcolor,
-    gridTemplateColumns: `1fr ${mediaWidth}%`
+    gridTemplateColumns: gridtemplatecolumns
   }
 
   const newFocalPoint = {}

From 24463658941c61cbd1c22e94313f11c198e91d01 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:35:30 -0600
Subject: [PATCH 23/24] Add vertical alignment to media

---
 components/organisms/MediaText/MediaText.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index 90ce7a870..7ba64d5ca 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -58,13 +58,15 @@
   }
 
   &.alignTop {
-    & .text {
+    & .text,
+    & .media {
       @apply justify-start;
     }
   }
 
   &.alignBottom {
-    & .text {
+    & .text,
+    & .media {
       @apply justify-end;
     }
   }
@@ -73,8 +75,6 @@
     & .media {
       @apply h-full max-w-full rounded;
 
-      min-height: 16rem;
-
       & .imageWrap {
         @apply pt-0;
       }

From 65512f9a6e8b3c4c1c4d3a536ad4b6ca198b226d Mon Sep 17 00:00:00 2001
From: R A Van Epps <rave@ravanepps.com>
Date: Wed, 9 Jun 2021 11:38:38 -0600
Subject: [PATCH 24/24] Only apply min-height for image fill

---
 components/organisms/MediaText/MediaText.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
index 7ba64d5ca..bddbf3c4f 100644
--- a/components/organisms/MediaText/MediaText.module.css
+++ b/components/organisms/MediaText/MediaText.module.css
@@ -28,7 +28,6 @@
 
   & .media {
     grid-column: 2;
-    min-height: 15.5rem;
 
     & .imageWrap {
       @apply relative h-0 w-full rounded bg-opacity-20 mb-0;
@@ -75,6 +74,8 @@
     & .media {
       @apply h-full max-w-full rounded;
 
+      min-height: 15.5rem;
+
       & .imageWrap {
         @apply pt-0;
       }