diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index 120bece3d39ae..5582c4bb40263 100644
--- a/packages/block-library/src/heading/block.json
+++ b/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"
}
}
}
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 5c57b5e5d57bc..7607dece181cf 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/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 (
+
+
+
+ );
+ }
+);
+
+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( {
} }
/>
+
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 );
diff --git a/packages/block-library/src/heading/save.js b/packages/block-library/src/heading/save.js
index 522013158ee99..139b4e81f29d6 100644
--- a/packages/block-library/src/heading/save.js
+++ b/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 (
);
diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss
new file mode 100644
index 0000000000000..31a6989c39c81
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 73325d5d9167c..e0bce8b7fd4d9 100644
--- a/packages/block-library/src/style.scss
+++ b/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";