Merge pull request #516 from WebDevStudios/feature/410-cover-block

Feature/410 cover block

components/atoms/Image/Image.js

@@ -68,7 +68,12 @@ export default function DisplayImage(props) {
       imageProps.width = imageSize?.width
     }
 
-    return <Image {...imageProps} />
+    return (
+      <Image
+        {...imageProps}
+        className={cn(props?.nextImageFill ? styles.imageFill : null)}
+      />
+    )
   }
 
   /**
@@ -134,7 +139,8 @@ export default function DisplayImage(props) {
         className={cn(
           styles.image,
           props?.className,
-          props?.id ? `image-${props?.id}` : ''
+          props?.id ? `image-${props?.id}` : '',
+          props?.nextImageFill ? styles.hasImageFill : null
         )}
       >
         {props?.href ? (

components/atoms/Image/Image.module.css

@@ -8,4 +8,12 @@
   & .caption {
     @apply text-center text-xs pt-4;
   }
+
+  &.hasImageFill {
+    @apply mb-0;
+  }
+
+  & .imageFill {
+    @apply object-cover rounded;
+  }
 }

components/blocks/Gutenberg/BlockCover/BlockCover.js

@@ -1,6 +1,8 @@
 import Blocks from '@/components/molecules/Blocks'
 import Hero from '@/components/organisms/Hero'
+import formatFocalPoint from '@/functions/formatFocalPoint'
 import PropTypes from 'prop-types'
+import {useEffect, useState} from 'react'
 
 /**
  * Cover Block
@@ -14,25 +16,114 @@ import PropTypes from 'prop-types'
  * @return {Element}                   The Cover component.
  */
 export default function BlockCover({media, innerBlocks}) {
+  const {
+    align,
+    anchor,
+    className,
+    contentPosition,
+    customGradient,
+    dimRatio,
+    focalPoint,
+    gradientHex,
+    hasParallax,
+    isRepeated,
+    minHeight,
+    minHeightUnit,
+    overlayColorHex,
+    style,
+    url
+  } = media
+
+  const overlayColor = overlayColorHex || '#000000'
+  const overlayGradient = customGradient || gradientHex
+  const overlayOpacity = url ? dimRatio / 100 : 1
+
+  // Add custom styles for Hero.
+  const coverStyle = {}
+
+  if (overlayColor && !overlayGradient) {
+    coverStyle.backgroundColor = overlayColor
+  }
+
+  if (overlayGradient) {
+    coverStyle.background = overlayGradient
+  }
+
+  if (minHeight && minHeightUnit !== 'vh') {
+    coverStyle.minHeight = `${minHeight}px`
+  }
+
+  const newFocalPoint = formatFocalPoint(focalPoint)
+
+  const [newInnerBlocks, setInnerBlocks] = useState()
+
+  // Add extra class(es) to inner blocks on initial load.
+  useEffect(() => {
+    setInnerBlocks(
+      !innerBlocks?.length
+        ? []
+        : innerBlocks.map((block) => {
+            const classes = (block?.attributes?.className ?? '').split(' ')
+
+            // Extra check to only add class once.
+            if (classes.includes('relative')) {
+              return block
+            }
+
+            block.attributes = {
+              ...block?.attributes,
+              className: `${block?.attributes?.className || ''} relative z-10`
+            }
+
+            return block
+          })
+    )
+  }, [innerBlocks])
+
+  // Only proceed if we're provided a media URL or a user-selected overlay color/gradient.
+  if (!url && !overlayColorHex && !overlayGradient) {
+    return null
+  }
+
   return (
-    <>
-      {!!media?.url && (
-        <Hero
-          backgroundImage={media}
-          id={media?.anchor}
-          className={media?.className}
-        >
-          {!!innerBlocks?.length && <Blocks blocks={innerBlocks} />}
-        </Hero>
-      )}
-    </>
+    <Hero
+      align={align}
+      contentAlign={contentPosition}
+      backgroundImage={{url}}
+      className={className}
+      duotone={style?.color?.duotone}
+      fixed={hasParallax}
+      focalPoint={newFocalPoint}
+      fullHeight={minHeight === 100 && minHeightUnit === 'vh'}
+      id={anchor}
+      overlayOpacity={overlayOpacity}
+      repeat={isRepeated}
+      style={coverStyle}
+    >
+      {!!newInnerBlocks?.length && <Blocks blocks={newInnerBlocks} />}
+    </Hero>
   )
 }
 
 BlockCover.propTypes = {
   media: PropTypes.shape({
+    align: PropTypes.string,
     anchor: PropTypes.string,
     className: PropTypes.string,
+    contentPosition: PropTypes.string,
+    customGradient: PropTypes.string,
+    dimRatio: PropTypes.number,
+    focalPoint: PropTypes.shape({
+      x: PropTypes.string,
+      y: PropTypes.string
+    }),
+    gradientHex: PropTypes.string,
+    hasParallax: PropTypes.bool,
+    isRepeated: PropTypes.bool,
+    minHeight: PropTypes.number,
+    minHeightUnit: PropTypes.string,
+    overlayColorHex: PropTypes.string,
+    style: PropTypes.object,
     url: PropTypes.string
   }),
   innerBlocks: PropTypes.arrayOf(

components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js

@@ -1,5 +1,6 @@
 import Blocks from '@/components/molecules/Blocks'
 import MediaText from '@/components/organisms/MediaText'
+import formatFocalPoint from '@/functions/formatFocalPoint'
 import getBlockStyles from '@/functions/wordpress/blocks/getBlockStyles'
 import PropTypes from 'prop-types'
 
@@ -53,16 +54,7 @@ export default function BlockMediaText({innerBlocks, media}) {
     mediaPosition === 'left' ? `${mediaWidth}% 1fr` : `1fr ${mediaWidth}%`
   mediaTextStyle.gridTemplateColumns = gridtemplatecolumns
 
-  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}%`
-  }
+  const newFocalPoint = imageFill ? formatFocalPoint(focalPoint) : {}
 
   return (
     <>