From 461e94bd4c71e34289e4c502d199c46ab83a4569 Mon Sep 17 00:00:00 2001 From: Amor Date: Mon, 26 Apr 2021 10:30:35 -0400 Subject: [PATCH 1/6] Add drop cap support to gutenberg paragraph --- components/atoms/RichText/RichText.js | 19 +++++++++++++++++-- components/atoms/RichText/RichText.module.css | 6 ++++++ .../BlockParagraph/BlockParagraph.js | 13 +++++++++++-- 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/components/atoms/RichText/RichText.js b/components/atoms/RichText/RichText.js index 4690c8c97..c5d9c11b0 100644 --- a/components/atoms/RichText/RichText.js +++ b/components/atoms/RichText/RichText.js @@ -11,15 +11,28 @@ import styles from './RichText.module.css' * @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 {string} props.tag The type of element to render. * @return {Element} The RichText component. */ -export default function RichText({attributes, children, className, id, tag}) { +export default function RichText({ + attributes, + children, + className, + id, + tag, + dropCap +}) { const tagClassName = tag !== 'div' ? tag : '' return React.createElement(tag, { ...attributes, - className: cn(styles.richtext, styles?.[tagClassName], className), + className: cn( + styles.richtext, + styles?.[tagClassName], + dropCap && styles.dropcap, + className + ), id: id || null, dangerouslySetInnerHTML: createMarkup(children) }) @@ -29,10 +42,12 @@ RichText.propTypes = { attributes: PropTypes.object, children: PropTypes.string.isRequired, className: PropTypes.string, + dropCap: PropTypes.bool, id: PropTypes.string, tag: PropTypes.string } RichText.defaultProps = { + dropCap: false, tag: 'div' } diff --git a/components/atoms/RichText/RichText.module.css b/components/atoms/RichText/RichText.module.css index e2e02a5d8..5e7f28cae 100644 --- a/components/atoms/RichText/RichText.module.css +++ b/components/atoms/RichText/RichText.module.css @@ -3,6 +3,12 @@ @apply text-center; } + &.dropcap { + &::first-letter { + @apply float-left mr-4 text-8xl font-bold; + } + } + /* List Styles */ &.ul, &.ol { diff --git a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js index d3a519088..a0c5f1dce 100644 --- a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js +++ b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js @@ -13,9 +13,16 @@ import PropTypes from 'prop-types' * @param {string} props.align Optional alignment style. * @param {string} props.anchor Optional anchor/id. * @param {string} props.content The content of the block. + * @param {boolean} props.dropCap Whether the paragraph has a drop cap. * @return {Element} The RichText component. */ -export default function BlockParagraph({className, align, anchor, content}) { +export default function BlockParagraph({ + className, + align, + anchor, + content, + dropCap +}) { // TODO Add settings for unused props in default WP Paragraph Block const alignment = !align ? 'left' : align return ( @@ -23,6 +30,7 @@ export default function BlockParagraph({className, align, anchor, content}) { className={cn(`text-${alignment}`, className)} id={anchor} tag="p" + dropCap={dropCap} > {content} @@ -33,5 +41,6 @@ BlockParagraph.propTypes = { align: PropTypes.string, anchor: PropTypes.string, className: PropTypes.string, - content: PropTypes.string + content: PropTypes.string, + dropCap: PropTypes.bool } From e3ce90019597c1bee06c0266424d951bb442f12b Mon Sep 17 00:00:00 2001 From: Amor Date: Mon, 26 Apr 2021 15:45:10 -0400 Subject: [PATCH 2/6] Add text, bg color support to gutenberg paragraph --- components/atoms/RichText/RichText.js | 32 ++++++++++++------- .../BlockParagraph/BlockParagraph.js | 28 ++++++++++------ 2 files changed, 39 insertions(+), 21 deletions(-) diff --git a/components/atoms/RichText/RichText.js b/components/atoms/RichText/RichText.js index c5d9c11b0..3828e2e56 100644 --- a/components/atoms/RichText/RichText.js +++ b/components/atoms/RichText/RichText.js @@ -7,22 +7,26 @@ 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.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 {string} props.tag The type of element to render. - * @return {Element} 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 {string} props.tag The type of element to render. + * @param {string} props.textColor The text color. + * @return {Element} The RichText component. */ export default function RichText({ attributes, + backgroundColor, children, className, + dropCap, id, tag, - dropCap + textColor }) { const tagClassName = tag !== 'div' ? tag : '' return React.createElement(tag, { @@ -34,17 +38,23 @@ export default function RichText({ className ), id: id || null, - dangerouslySetInnerHTML: createMarkup(children) + dangerouslySetInnerHTML: createMarkup(children), + style: { + color: textColor ?? 'inherit', + 'background-color': backgroundColor ?? 'inherit' + } }) } RichText.propTypes = { attributes: PropTypes.object, + backgroundColor: PropTypes.string, children: PropTypes.string.isRequired, className: PropTypes.string, dropCap: PropTypes.bool, id: PropTypes.string, - tag: PropTypes.string + tag: PropTypes.string, + textColor: PropTypes.string } RichText.defaultProps = { diff --git a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js index a0c5f1dce..3e1a4a489 100644 --- a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js +++ b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js @@ -8,20 +8,24 @@ import PropTypes from 'prop-types' * The core Paragraph block from Gutenberg. * * @author WebDevStudios - * @param {object} props The component props. - * @param {string} props.className Optional classnames. - * @param {string} props.align Optional alignment style. - * @param {string} props.anchor Optional anchor/id. - * @param {string} props.content The content of the block. - * @param {boolean} props.dropCap Whether the paragraph has a drop cap. - * @return {Element} The RichText component. + * @param {object} props The component props. + * @param {string} props.backgroundColor The background color. + * @param {string} props.className Optional classnames. + * @param {string} props.align Optional alignment style. + * @param {string} props.anchor Optional anchor/id. + * @param {string} props.content The content of the block. + * @param {boolean} props.dropCap Whether the paragraph has a drop cap. + * @param {string} props.textColor The text color. + * @return {Element} The RichText component. */ export default function BlockParagraph({ - className, align, anchor, + backgroundColor, + className, content, - dropCap + dropCap, + textColor }) { // TODO Add settings for unused props in default WP Paragraph Block const alignment = !align ? 'left' : align @@ -31,6 +35,8 @@ export default function BlockParagraph({ id={anchor} tag="p" dropCap={dropCap} + textColor={textColor} + backgroundColor={backgroundColor} > {content} @@ -40,7 +46,9 @@ export default function BlockParagraph({ BlockParagraph.propTypes = { align: PropTypes.string, anchor: PropTypes.string, + backgroundColor: PropTypes.string, className: PropTypes.string, content: PropTypes.string, - dropCap: PropTypes.bool + dropCap: PropTypes.bool, + textColor: PropTypes.string } From fea353e665fbce34d492a6565476748e7affacb7 Mon Sep 17 00:00:00 2001 From: Amor Date: Mon, 26 Apr 2021 17:58:31 -0400 Subject: [PATCH 3/6] Add font size support to gutenberg paragraph --- components/atoms/RichText/RichText.js | 8 +++++++- .../blocks/Gutenberg/BlockParagraph/BlockParagraph.js | 5 ++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/components/atoms/RichText/RichText.js b/components/atoms/RichText/RichText.js index 3828e2e56..6688c7c94 100644 --- a/components/atoms/RichText/RichText.js +++ b/components/atoms/RichText/RichText.js @@ -14,6 +14,7 @@ import styles from './RichText.module.css' * @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. @@ -25,6 +26,7 @@ export default function RichText({ className, dropCap, id, + inlineStyles, tag, textColor }) { @@ -41,7 +43,10 @@ export default function RichText({ dangerouslySetInnerHTML: createMarkup(children), style: { color: textColor ?? 'inherit', - 'background-color': backgroundColor ?? 'inherit' + 'background-color': backgroundColor ?? 'inherit', + 'font-size': + inlineStyles?.typography?.fontSize && + `${inlineStyles.typography.fontSize}` } }) } @@ -53,6 +58,7 @@ RichText.propTypes = { className: PropTypes.string, dropCap: PropTypes.bool, id: PropTypes.string, + inlineStyles: PropTypes.object, tag: PropTypes.string, textColor: PropTypes.string } diff --git a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js index 3e1a4a489..be9761fbb 100644 --- a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js +++ b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js @@ -15,6 +15,7 @@ import PropTypes from 'prop-types' * @param {string} props.anchor Optional anchor/id. * @param {string} props.content The content of the block. * @param {boolean} props.dropCap Whether the paragraph has a drop cap. + * @param {object} props.style The style attributes (Typography panel). * @param {string} props.textColor The text color. * @return {Element} The RichText component. */ @@ -25,9 +26,9 @@ export default function BlockParagraph({ className, content, dropCap, + style, textColor }) { - // TODO Add settings for unused props in default WP Paragraph Block const alignment = !align ? 'left' : align return ( {content} @@ -50,5 +52,6 @@ BlockParagraph.propTypes = { className: PropTypes.string, content: PropTypes.string, dropCap: PropTypes.bool, + style: PropTypes.object, textColor: PropTypes.string } From 659a507a3db90d4d1172eb114d5658957cc34f5f Mon Sep 17 00:00:00 2001 From: Amor Date: Tue, 27 Apr 2021 16:12:21 -0400 Subject: [PATCH 4/6] Fix doc block spacing --- components/atoms/RichText/RichText.js | 22 +++++++++---------- .../BlockParagraph/BlockParagraph.js | 20 ++++++++--------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/components/atoms/RichText/RichText.js b/components/atoms/RichText/RichText.js index 6688c7c94..2d6378a62 100644 --- a/components/atoms/RichText/RichText.js +++ b/components/atoms/RichText/RichText.js @@ -7,17 +7,17 @@ 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.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. */ export default function RichText({ attributes, diff --git a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js index be9761fbb..1394d7e7a 100644 --- a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js +++ b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js @@ -8,16 +8,16 @@ import PropTypes from 'prop-types' * The core Paragraph block from Gutenberg. * * @author WebDevStudios - * @param {object} props The component props. - * @param {string} props.backgroundColor The background color. - * @param {string} props.className Optional classnames. - * @param {string} props.align Optional alignment style. - * @param {string} props.anchor Optional anchor/id. - * @param {string} props.content The content of the block. - * @param {boolean} props.dropCap Whether the paragraph has a drop cap. - * @param {object} props.style The style attributes (Typography panel). - * @param {string} props.textColor The text color. - * @return {Element} The RichText component. + * @param {object} props The component props. + * @param {string} props.backgroundColor The background color. + * @param {string} props.className Optional classnames. + * @param {string} props.align Optional alignment style. + * @param {string} props.anchor Optional anchor/id. + * @param {string} props.content The content of the block. + * @param {boolean} props.dropCap Whether the paragraph has a drop cap. + * @param {object} props.style The style attributes (Typography panel). + * @param {string} props.textColor The text color. + * @return {Element} The RichText component. */ export default function BlockParagraph({ align, From 64063ead13add4decfef3db9cbb97fa8cb9287dd Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Wed, 28 Apr 2021 14:31:20 -0600 Subject: [PATCH 5/6] Fix style props in richtext --- components/atoms/RichText/RichText.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/atoms/RichText/RichText.js b/components/atoms/RichText/RichText.js index 2d6378a62..a6579de9c 100644 --- a/components/atoms/RichText/RichText.js +++ b/components/atoms/RichText/RichText.js @@ -43,8 +43,8 @@ export default function RichText({ dangerouslySetInnerHTML: createMarkup(children), style: { color: textColor ?? 'inherit', - 'background-color': backgroundColor ?? 'inherit', - 'font-size': + backgroundColor: backgroundColor ?? 'inherit', + fontSize: inlineStyles?.typography?.fontSize && `${inlineStyles.typography.fontSize}` } From f0e84b139c921ee30c8a318c325bcd0462b728e1 Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Wed, 28 Apr 2021 14:31:28 -0600 Subject: [PATCH 6/6] Pull in custom and preset colors for paragraph block --- .../BlockParagraph/BlockParagraph.js | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js index 1394d7e7a..26b40151e 100644 --- a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js +++ b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js @@ -8,26 +8,26 @@ import PropTypes from 'prop-types' * The core Paragraph block from Gutenberg. * * @author WebDevStudios - * @param {object} props The component props. - * @param {string} props.backgroundColor The background color. - * @param {string} props.className Optional classnames. - * @param {string} props.align Optional alignment style. - * @param {string} props.anchor Optional anchor/id. - * @param {string} props.content The content of the block. - * @param {boolean} props.dropCap Whether the paragraph has a drop cap. - * @param {object} props.style The style attributes (Typography panel). - * @param {string} props.textColor The text color. - * @return {Element} The RichText component. + * @param {object} props The component props. + * @param {string} props.backgroundColorHex The background color hex value. + * @param {string} props.className Optional classnames. + * @param {string} props.align Optional alignment style. + * @param {string} props.anchor Optional anchor/id. + * @param {string} props.content The content of the block. + * @param {boolean} props.dropCap Whether the paragraph has a drop cap. + * @param {object} props.style The style attributes (Typography panel). + * @param {string} props.textColorHex The text color hex value. + * @return {Element} The RichText component. */ export default function BlockParagraph({ align, anchor, - backgroundColor, + backgroundColorHex, className, content, dropCap, style, - textColor + textColorHex }) { const alignment = !align ? 'left' : align return ( @@ -36,8 +36,8 @@ export default function BlockParagraph({ id={anchor} tag="p" dropCap={dropCap} - textColor={textColor} - backgroundColor={backgroundColor} + textColor={textColorHex || style?.color?.text || null} + backgroundColor={backgroundColorHex || style?.color?.background || null} inlineStyles={style} > {content} @@ -48,10 +48,10 @@ export default function BlockParagraph({ BlockParagraph.propTypes = { align: PropTypes.string, anchor: PropTypes.string, - backgroundColor: PropTypes.string, + backgroundColorHex: PropTypes.string, className: PropTypes.string, content: PropTypes.string, dropCap: PropTypes.bool, style: PropTypes.object, - textColor: PropTypes.string + textColorHex: PropTypes.string }