diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 4f1d668b7c4d5..ff252ec7760a3 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -18,18 +18,6 @@ "placeholder": { "type": "string" }, - "textColor": { - "type": "string" - }, - "customTextColor": { - "type": "string" - }, - "backgroundColor": { - "type": "string" - }, - "customBackgroundColor": { - "type": "string" - }, "fontSize": { "type": "string" }, diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 105b1a502c763..cda1879390d2c 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -15,7 +15,6 @@ import { InspectorControls, RichText, withFontSizes, - __experimentalUseColors, __experimentalBlock as Block, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; @@ -87,27 +86,6 @@ function ParagraphBlock( { const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ fontSize.size, ] ); - const { - TextColor, - BackgroundColor, - InspectorControlsColorPanel, - } = __experimentalUseColors( - [ - { name: 'textColor', property: 'color' }, - { name: 'backgroundColor', className: 'has-background' }, - ], - { - contrastCheckers: [ - { - backgroundColor: true, - textColor: true, - fontSize: fontSize.size, - }, - ], - colorDetector: { targetRef: ref }, - }, - [ fontSize.size ] - ); return ( <> @@ -145,60 +123,51 @@ function ParagraphBlock( { /> </PanelBody> </InspectorControls> - { InspectorControlsColorPanel } - <BackgroundColor> - <TextColor> - <RichText - ref={ ref } - identifier="content" - tagName={ Block.p } - className={ classnames( { - 'has-drop-cap': dropCap, - [ `has-text-align-${ align }` ]: align, - [ fontSize.class ]: fontSize.class, - } ) } - style={ { - fontSize: fontSize.size - ? fontSize.size + 'px' - : undefined, - direction, - minHeight: dropCapMinimumHeight, - } } - value={ content } - onChange={ ( newContent ) => - setAttributes( { content: newContent } ) - } - onSplit={ ( value ) => { - if ( ! value ) { - return createBlock( name ); - } + <RichText + ref={ ref } + identifier="content" + tagName={ Block.p } + className={ classnames( { + 'has-drop-cap': dropCap, + [ `has-text-align-${ align }` ]: align, + [ fontSize.class ]: fontSize.class, + } ) } + style={ { + fontSize: fontSize.size ? fontSize.size + 'px' : undefined, + direction, + minHeight: dropCapMinimumHeight, + } } + value={ content } + onChange={ ( newContent ) => + setAttributes( { content: newContent } ) + } + onSplit={ ( value ) => { + if ( ! value ) { + return createBlock( name ); + } - return createBlock( name, { - ...attributes, - content: value, - } ); - } } - onMerge={ mergeBlocks } - onReplace={ onReplace } - onRemove={ - onReplace ? () => onReplace( [] ) : undefined - } - aria-label={ - content - ? __( 'Paragraph block' ) - : __( - 'Empty block; start writing or type forward slash to choose a block' - ) - } - placeholder={ - placeholder || - __( 'Start writing or type / to choose a block' ) - } - __unstableEmbedURLOnPaste - __unstableAllowPrefixTransformations - /> - </TextColor> - </BackgroundColor> + return createBlock( name, { + ...attributes, + content: value, + } ); + } } + onMerge={ mergeBlocks } + onReplace={ onReplace } + onRemove={ onReplace ? () => onReplace( [] ) : undefined } + aria-label={ + content + ? __( 'Paragraph block' ) + : __( + 'Empty block; start writing or type forward slash to choose a block' + ) + } + placeholder={ + placeholder || + __( 'Start writing or type / to choose a block' ) + } + __unstableEmbedURLOnPaste + __unstableAllowPrefixTransformations + /> </> ); } diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index 7fa310086cb45..c04c011c1b0c6 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -40,6 +40,7 @@ export const settings = { className: false, __unstablePasteTextInline: true, lightBlockWrapper: true, + __experimentalColor: true, }, __experimentalLabel( attributes, { context } ) { if ( context === 'accessibility' ) { diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js index 2cdeeb46e60c9..9dadd6e01a7ac 100644 --- a/packages/block-library/src/paragraph/save.js +++ b/packages/block-library/src/paragraph/save.js @@ -6,46 +6,27 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { - getColorClassName, - getFontSizeClass, - RichText, -} from '@wordpress/block-editor'; +import { getFontSizeClass, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const { align, content, dropCap, - backgroundColor, - textColor, - customBackgroundColor, - customTextColor, fontSize, customFontSize, direction, } = attributes; - const textClass = getColorClassName( 'color', textColor ); - const backgroundClass = getColorClassName( - 'background-color', - backgroundColor - ); const fontSizeClass = getFontSizeClass( fontSize ); const className = classnames( { - 'has-text-color': textColor || customTextColor, - 'has-background': backgroundColor || customBackgroundColor, 'has-drop-cap': dropCap, [ `has-text-align-${ align }` ]: align, [ fontSizeClass ]: fontSizeClass, - [ textClass ]: textClass, - [ backgroundClass ]: backgroundClass, } ); const styles = { - backgroundColor: backgroundClass ? undefined : customBackgroundColor, - color: textClass ? undefined : customTextColor, fontSize: fontSizeClass ? undefined : customFontSize, }; diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index ddea388de29ba..6fc2288e8a6b0 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -1,3 +1,8 @@ +p { + background-color: var(--wp--background-color); + color: var(--wp--text-color); +} + .is-small-text { font-size: 14px; }