diff --git a/components/atoms/Code/Code.js b/components/atoms/Code/Code.js
index af13be212..481ce9a88 100644
--- a/components/atoms/Code/Code.js
+++ b/components/atoms/Code/Code.js
@@ -37,7 +37,16 @@ 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 (
<>
@@ -45,11 +54,9 @@ export default function Code({id, className, content, style}) {
-
+
{codeFormatter(content)}
@@ -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
})
}
diff --git a/components/blocks/Gutenberg/BlockCode/BlockCode.js b/components/blocks/Gutenberg/BlockCode/BlockCode.js
index 174e83c9c..64359c91e 100644
--- a/components/blocks/Gutenberg/BlockCode/BlockCode.js
+++ b/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 (
-
+
)
}
BlockCode.propTypes = {
anchor: PropTypes.string,
+ backgroundColorHex: PropTypes.string,
content: PropTypes.string,
className: PropTypes.string,
- style: PropTypes.object
+ style: PropTypes.object,
+ textColorHex: PropTypes.string
}