Add color options to heading block.

packages/block-library/src/heading/block.json

@@ -17,6 +17,18 @@
 		},
 		"placeholder": {
 			"type": "string"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"customTextColor": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
 		}
 	}
 }

packages/block-library/src/heading/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -7,22 +12,86 @@ import HeadingToolbar from './heading-toolbar';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
+import { PanelBody, withFallbackStyles } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import {
-	RichText,
+	AlignmentToolbar,
 	BlockControls,
 	InspectorControls,
-	AlignmentToolbar,
+	RichText,
+	withColors,
+	PanelColorSettings,
+	ContrastChecker,
 } from '@wordpress/block-editor';
+import { memo } from '@wordpress/element';
+
+const { getComputedStyle } = window;
+const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
+	const { textColor, backgroundColor, fontSize, customFontSize } = ownProps.attributes;
+	const editableNode = node.querySelector( '[contenteditable="true"]' );
+	//verify if editableNode is available, before using getComputedStyle.
+	const computedStyles = editableNode ? getComputedStyle( editableNode ) : null;
+	return {
+		fallbackBackgroundColor: backgroundColor || ! computedStyles ? undefined : computedStyles.backgroundColor,
+		fallbackTextColor: textColor || ! computedStyles ? undefined : computedStyles.color,
+		fallbackFontSize: fontSize || customFontSize || ! computedStyles ? undefined : parseInt( computedStyles.fontSize ) || undefined,
+	};
+} );
 
-export default function HeadingEdit( {
+const HeadingColorUI = memo(
+	function( {
+		backgroundColorValue,
+		setBackgroundColor,
+		textColorValue,
+		setTextColor,
+		fallbackTextColor,
+		fallbackBackgroundColor,
+	} ) {
+		return (
+			<PanelColorSettings
+				title={ __( 'Color Settings' ) }
+				initialOpen={ false }
+				colorSettings={ [
+					{
+						value: backgroundColorValue,
+						onChange: setBackgroundColor,
+						label: __( 'Background Color' ),
+					},
+					{
+						value: textColorValue,
+						onChange: setTextColor,
+						label: __( 'Text Color' ),
+					},
+				] }
+			>
+				<ContrastChecker
+					{ ...{
+						textColor: textColorValue,
+						backgroundColor: backgroundColorValue,
+						fallbackTextColor,
+						fallbackBackgroundColor,
+					} }
+					isLargeText
+				/>
+			</PanelColorSettings>
+		);
+	}
+);
+
+function HeadingEdit( {
 	attributes,
 	setAttributes,
 	mergeBlocks,
 	insertBlocksAfter,
 	onReplace,
 	className,
+	backgroundColor,
+	textColor,
+	setBackgroundColor,
+	setTextColor,
+	fallbackBackgroundColor,
+	fallbackTextColor,
 } ) {
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
@@ -44,6 +113,14 @@ export default function HeadingEdit( {
 						} }
 					/>
 				</PanelBody>
+				<HeadingColorUI
+					backgroundColorValue={ backgroundColor.color }
+					fallbackBackgroundColor={ fallbackBackgroundColor }
+					fallbackTextColor={ fallbackTextColor }
+					setBackgroundColor={ setBackgroundColor }
+					setTextColor={ setTextColor }
+					textColorValue={ textColor.color }
+				/>
 			</InspectorControls>
 			<RichText
 				identifier="content"
@@ -64,10 +141,24 @@ export default function HeadingEdit( {
 						undefined
 				}
 				onRemove={ () => onReplace( [] ) }
-				style={ { textAlign: align } }
-				className={ className }
+				className={ classnames( className, {
+					'has-background': backgroundColor.color,
+					'has-text-color': textColor.color,
+					[ backgroundColor.class ]: backgroundColor.class,
+					[ textColor.class ]: textColor.class,
+				} ) }
 				placeholder={ placeholder || __( 'Write heading…' ) }
+				style={ {
+					backgroundColor: backgroundColor.color,
+					color: textColor.color,
+					textAlign: align,
+				} }
 			/>
 		</>
 	);
 }
+
+export default compose( [
+	withColors( 'backgroundColor', { textColor: 'color' } ),
+	applyFallbackStyles,
+] )( HeadingEdit );

packages/block-library/src/heading/save.js

@@ -1,16 +1,46 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	getColorClassName,
+	RichText,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { align, level, content } = attributes;
+	const {
+		align,
+		backgroundColor,
+		customBackgroundColor,
+		level,
+		content,
+		textColor,
+		customTextColor,
+	} = attributes;
 	const tagName = 'h' + level;
 
+	const textClass = getColorClassName( 'color', textColor );
+	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+
+	const className = classnames( {
+		'has-background': backgroundColor || customBackgroundColor,
+		[ textClass ]: textClass,
+		[ backgroundClass ]: backgroundClass,
+	} );
+
 	return (
 		<RichText.Content
+			className={ className ? className : undefined }
 			tagName={ tagName }
-			style={ { textAlign: align } }
+			style={ {
+				textAlign: align,
+				backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+				color: textClass ? undefined : customTextColor,
+			} }
 			value={ content }
 		/>
 	);

packages/block-library/src/heading/style.scss

@@ -0,0 +1,10 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	&.has-background {
+		padding: $block-bg-padding--v $block-bg-padding--h;
+	}
+}

packages/block-library/src/style.scss

@@ -9,6 +9,7 @@
 @import "./embed/style.scss";
 @import "./file/style.scss";
 @import "./gallery/style.scss";
+@import "./heading/style.scss";
 @import "./image/style.scss";
 @import "./latest-comments/style.scss";
 @import "./latest-posts/style.scss";