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";