diff --git a/.markdownlint.json b/.markdownlint.json index d4e6b0ad7..80622a6af 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -1,6 +1,7 @@ { "MD003": {"style": "atx"}, "MD007": {"indent": 2}, + "MD026": {"punctuation": ".,;!。，；：！"}, "default": true, "line-length": false, "no-duplicate-heading": false, diff --git a/components/atoms/Columns/Columns.js b/components/atoms/Columns/Columns.js index 46721c4bb..9bd78e84a 100644 --- a/components/atoms/Columns/Columns.js +++ b/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 (
- {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 + })}
) } @@ -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 diff --git a/components/atoms/Columns/Columns.module.css b/components/atoms/Columns/Columns.module.css index 9dd8e5ccd..1b9a25fde 100644 --- a/components/atoms/Columns/Columns.module.css +++ b/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; + } + } } diff --git a/components/atoms/RichText/RichText.js b/components/atoms/RichText/RichText.js index 4ea50d6c2..c5ff037b8 100644 --- a/components/atoms/RichText/RichText.js +++ b/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 = { diff --git a/components/blocks/Gutenberg/BlockButton/BlockButton.js b/components/blocks/Gutenberg/BlockButton/BlockButton.js index ce5bd5b72..43ec7478c 100644 --- a/components/blocks/Gutenberg/BlockButton/BlockButton.js +++ b/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') diff --git a/components/blocks/Gutenberg/BlockCode/BlockCode.js b/components/blocks/Gutenberg/BlockCode/BlockCode.js index a640fb457..540271ab0 100644 --- a/components/blocks/Gutenberg/BlockCode/BlockCode.js +++ b/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 ( {!!innerBlocks?.length && ( - {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 (
- {!!block?.innerBlocks?.length && ( - - )} + {!!innerBlocks?.length && }
) })} @@ -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 }) ) } diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js index 5b75496bc..74b9f97bc 100644 --- a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js +++ b/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 = {} diff --git a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js index de4294149..a86f6fd6f 100644 --- a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js +++ b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js @@ -1,4 +1,5 @@ import RichText from '@/components/atoms/RichText' +import getBlockStyles from '@/functions/wordpress/blocks/getBlockStyles' import cn from 'classnames' import PropTypes from 'prop-types' @@ -30,15 +31,20 @@ export default function BlockParagraph({ textColorHex }) { const alignment = !align ? 'left' : align + + const paragraphStyle = getBlockStyles({ + backgroundColorHex, + textColorHex, + style + }) + return ( {content} diff --git a/functions/wordpress/blocks/getBlockStyles.js b/functions/wordpress/blocks/getBlockStyles.js new file mode 100644 index 000000000..cd7f6ac64 --- /dev/null +++ b/functions/wordpress/blocks/getBlockStyles.js @@ -0,0 +1,50 @@ +/** + * Get formatted block styles. + * + * @author WebDevStudios + * @param {object} styles Various block custom and preset styles. + * @param {string} styles.backgroundColorHex The background color hex value. + * @param {string} styles.gradientHex The background gradient hex value. + * @param {string} styles.textColorHex The text color hex value. + * @param {number} styles.width The width in percent. + * @param {object} styles.style The style attributes. + * @return {object} The formatted style object. + */ +export default function getBlockStyles({ + backgroundColorHex, + gradientHex, + textColorHex, + width, + style +}) { + const blockStyle = {} + + // Determine styles, using stylelint-accepted const names. + const background = gradientHex || style?.color?.gradient + const backgroundcolor = backgroundColorHex || style?.color?.background + const fontsize = style?.typography?.fontSize + const textcolor = textColorHex || style?.color?.text + + // Only add styles if set. + if (background) { + blockStyle.background = background + } + + if (fontsize) { + blockStyle.fontSize = fontsize + } + + if (backgroundcolor) { + blockStyle.backgroundColor = backgroundcolor + } + + if (textcolor) { + blockStyle.color = textcolor + } + + if (width) { + blockStyle.width = width ? `${width}%` : 'auto' + } + + return blockStyle +}