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 }