Feature/410 preformatted block

components/atoms/Code/Code.js

@@ -37,19 +37,26 @@ export default function Code({id, className, content, style}) {
     return code.replace(/>/g, '>')
   }
 
-  const fontsize = style?.typography?.fontSize
+  const prismProps = {style: tomorrow, customStyle: style, language: language}
+
+  // Add color to code tag props if custom color provided.
+  if (style?.color) {
+    prismProps.codeTagProps = {
+      style: {
+        color: 'inherit'
+      }
+    }
+  }
 
   return (
     <>
       {!!content && (
         <div
           id={id ? id : null}
           className={cn(styles.code, classNames.join(' '))}
-          style={{
-            fontSize: fontsize
-          }}
+          style={style}
         >
-          <SyntaxHighlighter style={tomorrow} language={language}>
+          <SyntaxHighlighter {...prismProps}>
             {codeFormatter(content)}
           </SyntaxHighlighter>
         </div>
@@ -63,8 +70,9 @@ Code.propTypes = {
   content: PropTypes.string,
   className: PropTypes.string,
   style: PropTypes.shape({
-    typography: PropTypes.shape({
-      fontSize: PropTypes.string
-    })
+    background: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    color: PropTypes.string,
+    fontSize: PropTypes.string
   })
 }

components/blocks/Gutenberg/BlockCode/BlockCode.js

@@ -7,22 +7,61 @@ import PropTypes from 'prop-types'
  * The core Code block from Gutenberg.
  *
  * @author WebDevStudios
- * @param  {object}  props           The component props.
- * @param  {string}  props.className Optional classnames.
- * @param  {string}  props.anchor    Optional anchor/id.
- * @param  {string}  props.content   The content of the block.
- * @param  {object}  props.style     The style attributes (Typography panel).
- * @return {Element}                 The Code component.
+ * @param  {object}  props                    The component props.
+ * @param  {string}  props.anchor             Optional anchor/id.
+ * @param  {string}  props.backgroundColorHex The background color hex value.
+ * @param  {string}  props.className          Optional classnames.
+ * @param  {string}  props.content            The content of the block.
+ * @param  {object}  props.style              The style attributes (Typography panel).
+ * @param  {string}  props.textColorHex       The text color hex value.
+ * @return {Element}                          The Code component.
  */
-export default function BlockCode({anchor, className, content, style}) {
+export default function BlockCode({
+  anchor,
+  backgroundColorHex,
+  className,
+  content,
+  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
+
+  // 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
+  }
+
   return (
-    <Code className={className} id={anchor} content={content} style={style} />
+    <Code
+      className={className}
+      id={anchor}
+      content={content}
+      style={codeStyle}
+    />
   )
 }
 
 BlockCode.propTypes = {
   anchor: PropTypes.string,
+  backgroundColorHex: PropTypes.string,
   content: PropTypes.string,
   className: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  textColorHex: PropTypes.string
 }