From 20c54fac005092a79dafda5009580feee24d4193 Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Tue, 19 Mar 2019 21:19:04 +0100
Subject: [PATCH 1/2] RichText: improve format boundary style

---
 .../src/components/rich-text/index.js         | 32 +++++++++++++++++--
 .../src/components/rich-text/style.scss       | 21 ------------
 packages/block-library/src/cover/editor.scss  |  5 ---
 .../block-library/src/gallery/editor.scss     |  4 ---
 4 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 006ec4a697760b..a56b2498b5b4ff 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,23 @@ 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)' );
+
+			globalStyle.innerHTML =
+				`${ boundarySelector }{background-color: ${ newColor }}`;
 		}
 	}
 
@@ -793,6 +818,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 16fdc282020e0c..4a52ddb56fcd37 100644
--- 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
index c74979dc0969d4..b368b3ee24c05d 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 0340f66a31e8e5..34b08797e2e558 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);
-		}
 	}
 }
 

From 3c71f06588ad6c663077cde0fe1473b92227538a Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Thu, 21 Mar 2019 00:55:17 +0100
Subject: [PATCH 2/2] rgb => rgba

---
 packages/block-editor/src/components/rich-text/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index a56b2498b5b4ff..b49b05f63ad7c1 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -505,7 +505,9 @@ export class RichText extends Component {
 
 		if ( element ) {
 			const computedStyle = getComputedStyle( element );
-			const newColor = computedStyle.color.replace( ')', ', 0.2)' );
+			const newColor = computedStyle.color
+				.replace( ')', ', 0.2)' )
+				.replace( 'rgb', 'rgba' );
 
 			globalStyle.innerHTML =
 				`${ boundarySelector }{background-color: ${ newColor }}`;