RichText: improve format boundary style (#14519)

* RichText: improve format boundary style * rgb => rgba
WordPress · Apr 3, 2019 · 5f006f6 · 5f006f6
1 parent 1352010
commit 5f006f6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git 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
@@ -45,27 +45,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;
-		}
-
-		// <code> 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
@@ -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
@@ -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);
-		}
 	}
 }