From 6c81984d294dbe49bc3a0520537d792cf696878d Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Thu, 24 Jun 2021 13:23:13 +1000
Subject: [PATCH] Fix legacy widget edit style bleed (#32871)

* Fix legacy widget edit style bleed

* Match block width with inserter.

* Make sure all text in legacy widget placeholders is legible.

* Fix background color issue.
---
 .../src/components/editor-styles/index.js     |  2 +-
 .../src/blocks/widget-area/editor.scss        |  4 +++
 .../src/blocks/legacy-widget/editor.scss      | 36 ++++++++++++++++++-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index 413be50389029..4b0286d8eba71 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -35,7 +35,7 @@ function useDarkThemeBodyClassName( styles ) {
 				// DOM, so calculate the background color by creating a fake
 				// wrapper.
 				const tempCanvas = ownerDocument.createElement( 'div' );
-				tempCanvas.classList.add( EDITOR_STYLES_SELECTOR );
+				tempCanvas.classList.add( 'editor-styles-wrapper' );
 				body.appendChild( tempCanvas );
 
 				backgroundColor = defaultView
diff --git a/packages/edit-widgets/src/blocks/widget-area/editor.scss b/packages/edit-widgets/src/blocks/widget-area/editor.scss
index 2f36e3b4a763a..e1c1fcbc69bc0 100644
--- a/packages/edit-widgets/src/blocks/widget-area/editor.scss
+++ b/packages/edit-widgets/src/blocks/widget-area/editor.scss
@@ -21,6 +21,10 @@
 	.block-list-appender.wp-block {
 		width: initial;
 	}
+	// Override theme custom widths for blocks.
+	.editor-styles-wrapper .wp-block.wp-block.wp-block.wp-block.wp-block {
+		max-width: 100%;
+	}
 }
 
 // Add some spacing above the inner blocks so that the block toolbar doesn't
diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss
index bd4f505e8b6d9..8ad7a3faa5c33 100644
--- a/packages/widgets/src/blocks/legacy-widget/editor.scss
+++ b/packages/widgets/src/blocks/legacy-widget/editor.scss
@@ -12,7 +12,7 @@
 		margin: 0 0 $grid-unit-15 0;
 	}
 
-	.widget-inside {
+	.widget-inside.widget-inside {
 		border: none;
 		box-shadow: none;
 		display: block;
@@ -25,6 +25,34 @@
 		label + .widefat {
 			margin-top: $grid-unit-15;
 		}
+
+		// Override theme style bleed.
+		label,
+		input,
+		a {
+			color: $black;
+		}
+		select {
+			font-family: system-ui;
+			-webkit-appearance: revert;
+			color: revert;
+			border: revert;
+			border-radius: revert;
+			background: revert;
+			box-shadow: revert;
+			text-shadow: revert;
+			outline: revert;
+			cursor: revert;
+			transform: revert;
+			font-size: revert;
+			line-height: revert;
+			padding: revert;
+			margin: revert;
+			min-height: revert;
+			max-width: revert;
+			vertical-align: revert;
+			font-weight: revert;
+		}
 	}
 
 	// Reset z-index set on https://github.com/WordPress/wordpress-develop/commit/f26d4d37351a55fd1fc5dad0f5fef8f0f964908c.
@@ -33,6 +61,12 @@
 	}
 }
 
+// Make sure edit form text and no preview warning are always visible.
+.wp-block-legacy-widget__edit-form.wp-block-legacy-widget__edit-form,
+.wp-block-legacy-widget__edit-no-preview.wp-block-legacy-widget__edit-no-preview {
+	color: $black;
+}
+
 .wp-block-legacy-widget__edit-preview,
 .wp-block-legacy-widget__edit-no-preview {
 	cursor: pointer;