diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index 2c47b2c7096521..120bece3d39ae3 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -17,12 +17,6 @@
},
"placeholder": {
"type": "string"
- },
- "textColor": {
- "type": "string"
- },
- "customTextColor": {
- "type": "string"
}
}
}
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 3e43660a300efe..487eb0b4e6adb2 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -19,22 +19,10 @@ import {
BlockControls,
InspectorControls,
RichText,
- __experimentalUseColors,
__experimentalBlock as Block,
} from '@wordpress/block-editor';
-import { useRef } from '@wordpress/element';
function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
- const ref = useRef();
- const { TextColor, InspectorControlsColorPanel } = __experimentalUseColors(
- [ { name: 'textColor', property: 'color' } ],
- {
- contrastCheckers: { backgroundColor: true, textColor: true },
- colorDetector: { targetRef: ref },
- },
- []
- );
-
const { align, content, level, placeholder } = attributes;
const tagName = 'h' + level;
@@ -70,35 +58,29 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
/>
- { InspectorControlsColorPanel }
-
-
- setAttributes( { content: value } )
+ setAttributes( { content: value } ) }
+ onMerge={ mergeBlocks }
+ onSplit={ ( value ) => {
+ if ( ! value ) {
+ return createBlock( 'core/paragraph' );
}
- onMerge={ mergeBlocks }
- onSplit={ ( value ) => {
- if ( ! value ) {
- return createBlock( 'core/paragraph' );
- }
- return createBlock( 'core/heading', {
- ...attributes,
- content: value,
- } );
- } }
- onReplace={ onReplace }
- onRemove={ () => onReplace( [] ) }
- className={ classnames( {
- [ `has-text-align-${ align }` ]: align,
- } ) }
- placeholder={ placeholder || __( 'Write heading…' ) }
- />
-
+ return createBlock( 'core/heading', {
+ ...attributes,
+ content: value,
+ } );
+ } }
+ onReplace={ onReplace }
+ onRemove={ () => onReplace( [] ) }
+ className={ classnames( {
+ [ `has-text-align-${ align }` ]: align,
+ } ) }
+ placeholder={ placeholder || __( 'Write heading…' ) }
+ />
>
);
}
diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
index de82e618486222..05a44aac9e1a90 100644
--- a/packages/block-library/src/heading/index.js
+++ b/packages/block-library/src/heading/index.js
@@ -34,6 +34,7 @@ export const settings = {
anchor: true,
__unstablePasteTextInline: true,
lightBlockWrapper: true,
+ __experimentalColor: true,
},
example: {
attributes: {
diff --git a/packages/block-library/src/heading/save.js b/packages/block-library/src/heading/save.js
index 5b2adacec2a633..00ecf40e1c27ce 100644
--- a/packages/block-library/src/heading/save.js
+++ b/packages/block-library/src/heading/save.js
@@ -6,17 +6,13 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { getColorClassName, RichText } from '@wordpress/block-editor';
+import { RichText } from '@wordpress/block-editor';
export default function save( { attributes } ) {
- const { align, content, customTextColor, level, textColor } = attributes;
+ const { align, content, level } = attributes;
const tagName = 'h' + level;
- const textClass = getColorClassName( 'color', textColor );
-
const className = classnames( {
- [ textClass ]: textClass,
- 'has-text-color': textColor || customTextColor,
[ `has-text-align-${ align }` ]: align,
} );
@@ -24,9 +20,6 @@ export default function save( { attributes } ) {
);
diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss
new file mode 100644
index 00000000000000..8eb03551e9c675
--- /dev/null
+++ b/packages/block-library/src/heading/style.scss
@@ -0,0 +1,13 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ background-color: var(--wp--color--background);
+ color: var(--wp--color--text);
+
+ &.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 ab0c0e47ff22ea..99e738bf9fc5fd 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -14,6 +14,7 @@
@import "./file/style.scss";
@import "./gallery/style.scss";
@import "./group/style.scss";
+@import "./heading/style.scss";
@import "./image/style.scss";
@import "./latest-comments/style.scss";
@import "./latest-posts/style.scss";