Update the paragraph block to use the colors support key

WordPress · Mar 20, 2020 · 97fbcbf · 97fbcbf
1 parent 47c3d35
commit 97fbcbf
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 107 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,8 @@
+p {
+	background-color: var(--wp--background-color);
+	color: var(--wp--text-color);
+}
+
 .is-small-text {
 	font-size: 14px;
 }