diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js index 588633686f941..b252f1d8c6894 100644 --- a/blocks/library/paragraph/index.js +++ b/blocks/library/paragraph/index.js @@ -377,12 +377,23 @@ export const settings = { edit: ParagraphBlock, save( { attributes } ) { - const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes; + const { + width, + align, + content, + dropCap, + backgroundColor, + textColor, + textClass, + fontSize, + } = attributes; + const className = classnames( { [ `align${ width }` ]: width, 'has-background': backgroundColor, 'has-drop-cap': dropCap, - } ); + }, textClass ); + const styles = { backgroundColor: backgroundColor, color: textColor, diff --git a/blocks/library/paragraph/style.scss b/blocks/library/paragraph/style.scss index ba590421b23b9..7d8da4883876f 100644 --- a/blocks/library/paragraph/style.scss +++ b/blocks/library/paragraph/style.scss @@ -1,13 +1,31 @@ -p.has-drop-cap { - &:first-letter { - float: left; - font-size: 4.1em; - line-height: 0.7; - font-family: serif; - font-weight: bold; - margin: .07em .23em 0 0; - text-transform: uppercase; - font-style: normal; +p { + &.is-small-text { + font-size: 14px; + } + + &.is-regular-text { + font-size: 16px; + } + + &.is-large-text { + font-size: 36px; + } + + &.is-larger-text { + font-size: 48px; + } + + &.has-drop-cap { + &:first-letter { + float: left; + font-size: 4.1em; + line-height: 0.7; + font-family: serif; + font-weight: bold; + margin: .07em .23em 0 0; + text-transform: uppercase; + font-style: normal; + } } }