Update the paragraph block to use the colors support key (#21037)

WordPress · Mar 27, 2020 · 0aec10d · 0aec10d
1 parent be1bfb7
commit 0aec10d
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 126 deletions.
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -94,10 +94,16 @@ export function addSaveProps( props, blockType, attributes ) {
 		backgroundColor
 	);
 	const textClass = getColorClassName( 'color', textColor );
-	props.className = classnames( props.className, backgroundClass, textClass, {
-		'has-text-color': textColor || style?.color?.text,
-		'has-background': backgroundColor || style?.color?.background,
-	} );
+	const newClassName = classnames(
+		props.className,
+		backgroundClass,
+		textClass,
+		{
+			'has-text-color': textColor || style?.color?.text,
+			'has-background': backgroundColor || style?.color?.background,
+		}
+	);
+	props.className = newClassName ? newClassName : undefined;
 
 	return props;
 }

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/deprecated.js b/packages/block-library/src/paragraph/deprecated.js
@@ -38,15 +38,9 @@ const blockAttributes = {
 	textColor: {
 		type: 'string',
 	},
-	customTextColor: {
-		type: 'string',
-	},
 	backgroundColor: {
 		type: 'string',
 	},
-	customBackgroundColor: {
-		type: 'string',
-	},
 	fontSize: {
 		type: 'string',
 	},
@@ -57,12 +51,103 @@ const blockAttributes = {
 		type: 'string',
 		enum: [ 'ltr', 'rtl' ],
 	},
+	style: {
+		type: 'object',
+	},
+};
+
+const migrateCustomColors = ( attributes ) => {
+	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
+		return attributes;
+	}
+	const style = { color: {} };
+	if ( attributes.customTextColor ) {
+		style.color.text = attributes.customTextColor;
+	}
+	if ( attributes.customBackgroundColor ) {
+		style.color.background = attributes.customBackgroundColor;
+	}
+	return {
+		...attributes,
+		style,
+	};
 };
 
 const deprecated = [
 	{
 		supports,
-		attributes: blockAttributes,
+		attributes: {
+			...omit( blockAttributes, [ 'style' ] ),
+			customTextColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+		},
+		migrate: migrateCustomColors,
+		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,
+			};
+
+			return (
+				<RichText.Content
+					tagName="p"
+					style={ styles }
+					className={ className ? className : undefined }
+					value={ content }
+					dir={ direction }
+				/>
+			);
+		},
+	},
+	{
+		supports,
+		attributes: {
+			...omit( blockAttributes, [ 'style' ] ),
+			customTextColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+		},
+		migrate: migrateCustomColors,
 		save( { attributes } ) {
 			const {
 				align,
@@ -116,11 +201,18 @@ const deprecated = [
 	{
 		supports,
 		attributes: {
-			...blockAttributes,
+			...omit( blockAttributes, [ 'style' ] ),
+			customTextColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
 			width: {
 				type: 'string',
 			},
 		},
+		migrate: migrateCustomColors,
 		save( { attributes } ) {
 			const {
 				width,
@@ -179,9 +271,7 @@ const deprecated = [
 					type: 'number',
 				},
 			},
-			'customFontSize',
-			'customTextColor',
-			'customBackgroundColor'
+			[ 'customFontSize', 'style' ]
 		),
 		save( { attributes } ) {
 			const {
@@ -215,8 +305,8 @@ const deprecated = [
 			);
 		},
 		migrate( attributes ) {
-			return omit(
-				{
+			return migrateCustomColors(
+				omit( {
 					...attributes,
 					customFontSize: isFinite( attributes.fontSize )
 						? attributes.fontSize
@@ -231,8 +321,8 @@ const deprecated = [
 						'#' === attributes.backgroundColor[ 0 ]
 							? attributes.backgroundColor
 							: undefined,
-				},
-				[ 'fontSize', 'textColor', 'backgroundColor' ]
+				} ),
+				[ 'fontSize', 'textColor', 'backgroundColor', 'style' ]
 			);
 		},
 	},

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' ) {