Feature/410 columns block

.markdownlint.json

@@ -1,6 +1,7 @@
 {
   "MD003": {"style": "atx"},
   "MD007": {"indent": 2},
+  "MD026": {"punctuation": ".,;!。，；：！"},
   "default": true,
   "line-length": false,
   "no-duplicate-heading": false,

components/atoms/Columns/Columns.js

@@ -6,24 +6,55 @@ import styles from './Columns.module.css'
 /**
  * Render the Columns component.
  *
- * @param  {object}  props             Container component props.
- * @param  {string}  props.id          Optional ID/Anchor.
- * @param  {string}  props.className   Optional className.
- * @param  {string}  props.columnCount Total number of columns.
- * @param  {object}  props.children    React children.
- * @return {Element}                   The Columns component.
+ * @param  {object}  props                   Container component props.
+ * @param  {string}  props.id                Optional ID/Anchor.
+ * @param  {string}  props.className         Optional className.
+ * @param  {string}  props.columnCount       Total number of columns.
+ * @param  {object}  props.children          React children.
+ * @param  {object}  props.style             Custom columns styles.
+ * @param  {string}  props.verticalAlignment Vertical alignment of columns.
+ * @return {Element}                         The Columns component.
  */
-export default function Columns({id, className, columnCount, children}) {
+export default function Columns({
+  id,
+  className,
+  columnCount,
+  children,
+  style,
+  verticalAlignment
+}) {
   return (
     <div
       id={id || null}
       className={cn(
         styles.columns,
         columnCount && styles[`columns-${columnCount}`],
-        className
+        className,
+        verticalAlignment === 'center' ? styles.alignCenter : null,
+        verticalAlignment === 'bottom' ? styles.alignBottom : null,
+        style?.background || style?.backgroundColor
+          ? styles.hasBackground
+          : null
       )}
+      style={style}
     >
-      {children && children}
+      {!!children &&
+        !!children?.length &&
+        React.Children.map(children, (column) => {
+          // Create copy of child column to add custom classes.
+          const newColumn = React.cloneElement(column, {
+            className: cn(
+              column?.className,
+              styles?.column,
+              column?.props?.style?.background ||
+                column?.props?.style?.backgroundColor
+                ? styles.hasBackground
+                : null
+            )
+          })
+
+          return newColumn
+        })}
     </div>
   )
 }
@@ -32,7 +63,13 @@ Columns.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
   columnCount: PropTypes.number,
-  children: PropTypes.node
+  children: PropTypes.node,
+  style: PropTypes.shape({
+    background: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    color: PropTypes.string
+  }),
+  verticalAlignment: PropTypes.string
 }
 Columns.defaultProps = {
   columnCount: 3

components/atoms/Columns/Columns.module.css

@@ -24,4 +24,28 @@
   &.columns-6 {
     @apply grid-cols-6;
   }
+
+  &.alignCenter {
+    & .column {
+      @apply justify-center;
+    }
+  }
+
+  &.alignBottom {
+    & .column {
+      @apply justify-end;
+    }
+  }
+
+  &.hasBackground {
+    @apply p-8;
+  }
+
+  & .column {
+    @apply flex flex-col;
+
+    &.hasBackground {
+      @apply p-4;
+    }
+  }
 }

components/atoms/RichText/RichText.js

@@ -7,28 +7,24 @@ import styles from './RichText.module.css'
 /**
  * Render the RichText component.
  *
- * @param  {object}  props                 RichText component props.
- * @param  {string}  props.attributes      Optional element attributes.
- * @param  {string}  props.backgroundColor The background color.
- * @param  {string}  props.children        Child component(s) to render.
- * @param  {string}  props.className       Optional classNames.
- * @param  {boolean} props.dropCap         Whether or not there should be a drop cap.
- * @param  {string}  props.id              Optional element ID.
- * @param  {object}  props.inlineStyles    Inline styles.
- * @param  {string}  props.tag             The type of element to render.
- * @param  {string}  props.textColor       The text color.
- * @return {Element}                       The RichText component.
+ * @param  {object}  props            RichText component props.
+ * @param  {string}  props.attributes Optional element attributes.
+ * @param  {string}  props.children   Child component(s) to render.
+ * @param  {string}  props.className  Optional classNames.
+ * @param  {boolean} props.dropCap    Whether or not there should be a drop cap.
+ * @param  {string}  props.id         Optional element ID.
+ * @param  {object}  props.style      Inline styles.
+ * @param  {string}  props.tag        The type of element to render.
+ * @return {Element}                  The RichText component.
  */
 export default function RichText({
   attributes,
-  backgroundColor,
   children,
   className,
   dropCap,
   id,
-  inlineStyles,
-  tag,
-  textColor
+  style,
+  tag
 }) {
   const tagClassName = tag !== 'div' ? tag : ''
   return React.createElement(tag, {
@@ -41,26 +37,22 @@ export default function RichText({
     ),
     id: id || null,
     dangerouslySetInnerHTML: createMarkup(children),
-    style: {
-      color: textColor ?? 'inherit',
-      backgroundColor: backgroundColor ?? 'inherit',
-      fontSize:
-        inlineStyles?.typography?.fontSize &&
-        `${inlineStyles.typography.fontSize}`
-    }
+    style: style
   })
 }
 
 RichText.propTypes = {
   attributes: PropTypes.object,
-  backgroundColor: PropTypes.string,
   children: PropTypes.string.isRequired,
   className: PropTypes.string,
   dropCap: PropTypes.bool,
   id: PropTypes.string,
-  inlineStyles: PropTypes.object,
-  tag: PropTypes.string,
-  textColor: PropTypes.string
+  style: PropTypes.shape({
+    backgroundColor: PropTypes.string,
+    color: PropTypes.string,
+    fontSize: PropTypes.string
+  }),
+  tag: PropTypes.string
 }
 
 RichText.defaultProps = {

components/blocks/Gutenberg/BlockButton/BlockButton.js

@@ -1,4 +1,5 @@
 import Button from '@/components/atoms/Button'
+import getBlockStyles from '@/functions/wordpress/blocks/getBlockStyles'
 import PropTypes from 'prop-types'
 
 /**
@@ -36,20 +37,16 @@ export default function BlockButton({
   url,
   width
 }) {
-  // Determine background and text colors, using stylelint-accepted const names.
-  const backgroundcolor =
-    backgroundColorHex || style?.color?.background || 'inherit'
-  const textcolor = textColorHex || style?.color?.text || 'inherit'
-  const background = gradientHex || style?.color?.gradient || 'inherit'
+  const buttonStyle = getBlockStyles({
+    backgroundColorHex,
+    gradientHex,
+    textColorHex,
+    width,
+    style
+  })
 
-  // Create style object for button.
-  const buttonStyle = {
-    background: background,
-    backgroundColor: backgroundcolor,
-    borderRadius: `${borderRadius}px`,
-    color: textcolor,
-    width: width ? `${width}%` : 'auto'
-  }
+  // Add additional styles.
+  buttonStyle.borderRadius = `${borderRadius}px`
 
   // Extract button style.
   const styleOutline = className && className.includes('is-style-outline')

components/blocks/Gutenberg/BlockCode/BlockCode.js

@@ -1,4 +1,5 @@
 import Code from '@/components/atoms/Code'
+import getBlockStyles from '@/functions/wordpress/blocks/getBlockStyles'
 import PropTypes from 'prop-types'
 
 /**
@@ -26,32 +27,12 @@ export default function BlockCode({
   style,
   textColorHex
 }) {
-  // Determine background and text colors, and font size, using stylelint-accepted const names.
-  const backgroundcolor = backgroundColorHex || style?.color?.background
-  const textcolor = textColorHex || style?.color?.text
-  const fontsize = style?.typography?.fontSize
-  const background = gradientHex || style?.color?.gradient
-
-  // Create style object for code.
-  const codeStyle = {}
-
-  // Only add custom styles if set.
-  if (style?.color?.gradient) {
-    codeStyle.background = style.color.gradient
-  }
-  if (backgroundcolor) {
-    codeStyle.backgroundColor = backgroundcolor
-  }
-  if (textcolor) {
-    codeStyle.color = textcolor
-    codeStyle['code[class*="language-"]'] = textcolor
-  }
-  if (fontsize) {
-    codeStyle.fontSize = fontsize
-  }
-  if (background) {
-    codeStyle.background = background
-  }
+  const codeStyle = getBlockStyles({
+    backgroundColorHex,
+    gradientHex,
+    textColorHex,
+    style
+  })
 
   return (
     <Code

components/blocks/Gutenberg/BlockColumns/BlockColumns.js

@@ -1,5 +1,6 @@
 import Columns from '@/components/atoms/Columns'
 import Blocks from '@/components/molecules/Blocks'
+import getBlockStyles from '@/functions/wordpress/blocks/getBlockStyles'
 import PropTypes from 'prop-types'
 
 /**
@@ -14,24 +15,49 @@ import PropTypes from 'prop-types'
  * @return {Element}                   The Columns component.
  */
 export default function BlockColumns({columns, innerBlocks}) {
+  const {
+    anchor,
+    backgroundColorHex,
+    className,
+    gradientHex,
+    style,
+    textColorHex,
+    verticalAlignment
+  } = columns
+
+  const columnsStyle = getBlockStyles({
+    backgroundColorHex,
+    gradientHex,
+    textColorHex,
+    style
+  })
+
   return (
     <>
       {!!innerBlocks?.length && (
         <Columns
-          id={columns?.anchor}
-          className={columns?.className}
+          id={anchor}
+          className={className}
           columnCount={innerBlocks?.length}
+          style={columnsStyle}
+          verticalAlignment={verticalAlignment}
         >
-          {innerBlocks.map((block, index) => {
+          {innerBlocks.map(({attributes, innerBlocks}, index) => {
+            const columnStyle = getBlockStyles({
+              backgroundColorHex: attributes?.backgroundColorHex,
+              gradientHex: attributes?.gradientHex,
+              textColorHex: attributes?.textColorHex,
+              style: attributes?.style
+            })
+
             return (
               <div
                 key={`column-${index}`}
-                id={block?.attributes?.anchor}
-                className={block?.attributes?.className}
+                id={attributes?.anchor}
+                className={attributes?.className}
+                style={columnStyle}
               >
-                {!!block?.innerBlocks?.length && (
-                  <Blocks blocks={block.innerBlocks} />
-                )}
+                {!!innerBlocks?.length && <Blocks blocks={innerBlocks} />}
               </div>
             )
           })}
@@ -44,12 +70,17 @@ export default function BlockColumns({columns, innerBlocks}) {
 BlockColumns.propTypes = {
   columns: PropTypes.shape({
     anchor: PropTypes.string,
-    className: PropTypes.string
+    backgroundColorHex: PropTypes.string,
+    className: PropTypes.string,
+    gradientHex: PropTypes.string,
+    style: PropTypes.object,
+    textColorHex: PropTypes.string,
+    verticalAlignment: PropTypes.string
   }),
   innerBlocks: PropTypes.arrayOf(
     PropTypes.shape({
-      name: PropTypes.string,
-      attributes: PropTypes.object
+      block: PropTypes.object,
+      index: PropTypes.number
     })
   )
 }

components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js

@@ -1,5 +1,6 @@
 import Blocks from '@/components/molecules/Blocks'
 import MediaText from '@/components/organisms/MediaText'
+import getBlockStyles from '@/functions/wordpress/blocks/getBlockStyles'
 import PropTypes from 'prop-types'
 
 /**
@@ -40,22 +41,17 @@ export default function BlockMediaText({innerBlocks, media}) {
     verticalAlignment
   } = media
   /* eslint-enable no-unused-vars */
+  const mediaTextStyle = getBlockStyles({
+    backgroundColorHex,
+    gradientHex,
+    textColorHex,
+    style
+  })
 
-  // Determine background and text colors, using stylelint-accepted const names.
-  const backgroundcolor =
-    backgroundColorHex || style?.color?.background || 'inherit'
-  const textcolor = textColorHex || style?.color?.text || 'inherit'
-  const background = gradientHex || style?.color?.gradient || 'inherit'
+  // Add additional styles.
   const gridtemplatecolumns =
     mediaPosition === 'left' ? `${mediaWidth}% 1fr` : `1fr ${mediaWidth}%`
-
-  // Create style object for button.
-  const mediaTextStyle = {
-    background: background,
-    backgroundColor: backgroundcolor,
-    color: textcolor,
-    gridTemplateColumns: gridtemplatecolumns
-  }
+  mediaTextStyle.gridTemplateColumns = gridtemplatecolumns
 
   const newFocalPoint = {}