diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 006ec4a697760..b49b05f63ad7c 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -82,6 +82,13 @@ const INSERTION_INPUT_TYPES_TO_IGNORE = new Set( [ 'insertLink', ] ); +/** + * Global stylesheet. + */ +const globalStyle = document.createElement( 'style' ); + +document.head.appendChild( globalStyle ); + export class RichText extends Component { constructor( { value, onReplace, multiline } ) { super( ...arguments ); @@ -472,10 +479,11 @@ export class RichText extends Component { } let selectedFormat; + const formatsAfter = formats[ start ] || []; + const collapsed = isCollapsed( value ); - if ( isCollapsed( value ) ) { + if ( collapsed ) { const formatsBefore = formats[ start - 1 ] || []; - const formatsAfter = formats[ start ] || []; selectedFormat = Math.min( formatsBefore.length, formatsAfter.length ); } @@ -484,6 +492,25 @@ export class RichText extends Component { this.applyRecord( { ...value, selectedFormat }, { domOnly: true } ); delete this.formatPlaceholder; + + if ( collapsed ? selectedFormat > 0 : formatsAfter.length > 0 ) { + this.recalculateBoundaryStyle(); + } + } + } + + recalculateBoundaryStyle() { + const boundarySelector = '*[data-rich-text-format-boundary]'; + const element = this.editableRef.querySelector( boundarySelector ); + + if ( element ) { + const computedStyle = getComputedStyle( element ); + const newColor = computedStyle.color + .replace( ')', ', 0.2)' ) + .replace( 'rgb', 'rgba' ); + + globalStyle.innerHTML = + `${ boundarySelector }{background-color: ${ newColor }}`; } } @@ -793,6 +820,9 @@ export class RichText extends Component { } } + // Wait for boundary class to be added. + setTimeout( () => this.recalculateBoundaryStyle() ); + if ( newSelectedFormat !== selectedFormat ) { this.applyRecord( { ...value, selectedFormat: newSelectedFormat } ); this.setState( { selectedFormat: newSelectedFormat } ); diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index 437bb95557c49..5a2e7155e5800 100644 --- a/packages/block-editor/src/components/rich-text/style.scss +++ b/packages/block-editor/src/components/rich-text/style.scss @@ -44,27 +44,6 @@ *[data-rich-text-format-boundary] { border-radius: 2px; - box-shadow: 0 0 0 1px $light-gray-400; - background: $light-gray-400; - - // Enforce a dark text color so active inline boundaries - // are always readable. - // See https://github.com/WordPress/gutenberg/issues/9508 - color: $dark-gray-900; - } - - // Link inline boundaries get special colors. - a[data-rich-text-format-boundary] { - box-shadow: 0 0 0 1px $blue-medium-100; - background: $blue-medium-100; - color: $blue-medium-900; - } - - // inline boundaries need special treatment because their - // un-selected style is already padded. - code[data-rich-text-format-boundary] { - background: $light-gray-400; - box-shadow: 0 0 0 1px $light-gray-400; } } diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index c74979dc0969d..b368b3ee24c05 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -1,10 +1,5 @@ .wp-block-cover-image, .wp-block-cover { - .block-editor-rich-text__editable:focus a[data-rich-text-format-boundary] { - box-shadow: none; - background: rgba(255, 255, 255, 0.3); - } - &.components-placeholder h2 { color: inherit; } diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 0340f66a31e8e..34b08797e2e55 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -82,10 +82,6 @@ ul.wp-block-gallery li { a { color: $white; } - - &:focus a[data-rich-text-format-boundary] { - color: rgba(0, 0, 0, 0.2); - } } }