Revert "Add color options to heading block. (#15625)"

This reverts commit 22ab406.

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

@@ -23,12 +23,6 @@
 		},
 		"customTextColor": {
 			"type": "string"
-		},
-		"backgroundColor": {
-			"type": "string"
-		},
-		"customBackgroundColor": {
-			"type": "string"
 		}
 	}
 }

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

@@ -12,7 +12,7 @@ import HeadingToolbar from './heading-toolbar';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, withFallbackStyles } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import {
@@ -22,59 +22,26 @@ import {
 	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,
-	};
-} );
-
 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>
+			/>
 		);
 	}
 );
@@ -85,12 +52,8 @@ function HeadingEdit( {
 	mergeBlocks,
 	onReplace,
 	className,
-	backgroundColor,
 	textColor,
-	setBackgroundColor,
 	setTextColor,
-	fallbackBackgroundColor,
-	fallbackTextColor,
 } ) {
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
@@ -113,10 +76,6 @@ function HeadingEdit( {
 					/>
 				</PanelBody>
 				<HeadingColorUI
-					backgroundColorValue={ backgroundColor.color }
-					fallbackBackgroundColor={ fallbackBackgroundColor }
-					fallbackTextColor={ fallbackTextColor }
-					setBackgroundColor={ setBackgroundColor }
 					setTextColor={ setTextColor }
 					textColorValue={ textColor.color }
 				/>
@@ -141,14 +100,11 @@ function HeadingEdit( {
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
 				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,
 				} }
@@ -159,5 +115,4 @@ function HeadingEdit( {
 
 export default compose( [
 	withColors( 'backgroundColor', { textColor: 'color' } ),
-	applyFallbackStyles,
 ] )( HeadingEdit );

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

@@ -14,8 +14,6 @@ import {
 export default function save( { attributes } ) {
 	const {
 		align,
-		backgroundColor,
-		customBackgroundColor,
 		level,
 		content,
 		textColor,
@@ -24,12 +22,9 @@ export default function save( { 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 (
@@ -38,7 +33,6 @@ export default function save( { attributes } ) {
 			tagName={ tagName }
 			style={ {
 				textAlign: align,
-				backgroundColor: backgroundClass ? undefined : customBackgroundColor,
 				color: textClass ? undefined : customTextColor,
 			} }
 			value={ content }

packages/block-library/src/style.scss

@@ -9,7 +9,6 @@
 @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";