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.
WordPress · Jun 24, 2021 · 6c81984 · 6c81984
1 parent b7ccbbf
commit 6c81984
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;