Fix widgets background when loading theme styles (#32683)

* Fix widgets background when loading theme styles * Adjust for dark background colors. * Fix heading hover styles * Fix theme styles in legacy widget preview * Remove theme colour from editor background * Remove border styling as not needed anymore * Add toggle and fix background styles * Fix padding issue * Add back interface background color * Fix legacy widget select padding * Fix theme style bleed * Fix space around widget area heading * Move .editor-styles-wrapper to the widget area * Create temp canvas only if no canvas exists; inserter fix * Add theme styles for older versions of WP Co-authored-by: Robert Anderson <robert@noisysocks.com>
WordPress · Jun 21, 2021 · 1c01f3c · 1c01f3c
1 parent ef4d395
commit 1c01f3c
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 26 deletions.
diff --git a/lib/widgets-page.php b/lib/widgets-page.php
@@ -20,6 +20,50 @@ class="blocks-widgets-container"
 	<?php
 }
 
+/**
+ * Creates an array of theme styles to load into the block editor.
+ *
+ * @since 5.8.0
+ *
+ * @global array $editor_styles
+ *
+ * @return array
+ */
+function gutenberg_get_block_editor_theme_styles() {
+	global $editor_styles;
+
+	$styles = array(
+		array(
+			'css'            => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }',
+			'__unstableType' => 'core',
+		),
+	);
+	if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) {
+		foreach ( $editor_styles as $style ) {
+			if ( preg_match( '~^(https?:)?//~', $style ) ) {
+				$response = wp_remote_get( $style );
+				if ( ! is_wp_error( $response ) ) {
+					$styles[] = array(
+						'css'            => wp_remote_retrieve_body( $response ),
+						'__unstableType' => 'theme',
+					);
+				}
+			} else {
+				$file = get_theme_file_path( $style );
+				if ( is_file( $file ) ) {
+					$styles[] = array(
+						'css'            => file_get_contents( $file ),
+						'baseURL'        => get_theme_file_uri( $style ),
+						'__unstableType' => 'theme',
+					);
+				}
+			}
+		}
+	}
+
+	return $styles;
+}
+
 /**
  * Initialize the Gutenberg widgets page.
  *
@@ -37,7 +81,8 @@ function gutenberg_widgets_init( $hook ) {
 	$widgets_editor_context = new WP_Block_Editor_Context();
 	$settings               = array_merge(
 		gutenberg_get_default_block_editor_settings(),
-		gutenberg_get_legacy_widget_settings()
+		gutenberg_get_legacy_widget_settings(),
+		array( 'styles' => gutenberg_get_block_editor_theme_styles() )
 	);
 
 	// This purposefully does not rely on apply_filters( 'block_editor_settings', $settings, null );

diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
@@ -27,9 +27,27 @@ function useDarkThemeBodyClassName( styles ) {
 			const canvas = ownerDocument.querySelector(
 				EDITOR_STYLES_SELECTOR
 			);
-			const backgroundColor = defaultView
-				.getComputedStyle( canvas, null )
-				.getPropertyValue( 'background-color' );
+
+			let backgroundColor;
+
+			if ( ! canvas ) {
+				// The real .editor-styles-wrapper element might not exist in the
+				// DOM, so calculate the background color by creating a fake
+				// wrapper.
+				const tempCanvas = ownerDocument.createElement( 'div' );
+				tempCanvas.classList.add( EDITOR_STYLES_SELECTOR );
+				body.appendChild( tempCanvas );
+
+				backgroundColor = defaultView
+					.getComputedStyle( tempCanvas, null )
+					.getPropertyValue( 'background-color' );
+
+				body.removeChild( tempCanvas );
+			} else {
+				backgroundColor = defaultView
+					.getComputedStyle( canvas, null )
+					.getPropertyValue( 'background-color' );
+			}
 
 			// If background is transparent, it should be treated as light color.
 			if (

diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/index.js b/packages/edit-widgets/src/blocks/widget-area/edit/index.js
@@ -64,16 +64,20 @@ export default function WidgetAreaEdit( {
 				scrollAfterOpen={ ! isDragging }
 			>
 				{ ( { opened } ) => (
-					// This is required to ensure LegacyWidget blocks are not unmounted when the panel is collapsed.
-					// Unmounting legacy widgets may have unintended consequences (e.g. TinyMCE not being properly reinitialized)
+					// This is required to ensure LegacyWidget blocks are not
+					// unmounted when the panel is collapsed. Unmounting legacy
+					// widgets may have unintended consequences (e.g.  TinyMCE
+					// not being properly reinitialized)
 					<DisclosureContent visible={ opened }>
-						<EntityProvider
-							kind="root"
-							type="postType"
-							id={ `widget-area-${ id }` }
-						>
-							<WidgetAreaInnerBlocks />
-						</EntityProvider>
+						<div className="editor-styles-wrapper">
+							<EntityProvider
+								kind="root"
+								type="postType"
+								id={ `widget-area-${ id }` }
+							>
+								<WidgetAreaInnerBlocks />
+							</EntityProvider>
+						</div>
 					</DisclosureContent>
 				) }
 			</PanelBody>

diff --git a/packages/edit-widgets/src/blocks/widget-area/editor.scss b/packages/edit-widgets/src/blocks/widget-area/editor.scss
@@ -5,17 +5,27 @@
 
 	.components-panel__body > .components-panel__body-title {
 		font-family: $default-font;
+		margin-bottom: 0;
 
 		// Remove default hover background in panel title. See #25752.
 		&:hover {
 			background: inherit;
 		}
 	}
+
+	.components-panel__body .editor-styles-wrapper {
+		margin: 0 (-$grid-unit-20) (-$grid-unit-20) (-$grid-unit-20);
+		padding: $grid-unit-20;
+	}
+
+	.block-list-appender.wp-block {
+		width: initial;
+	}
 }
 
 // Add some spacing above the inner blocks so that the block toolbar doesn't
 // overlap the panel header.
-.wp-block-widget-area > .components-panel__body > div > .block-editor-inner-blocks {
+.wp-block-widget-area > .components-panel__body > div > .editor-styles-wrapper > .block-editor-inner-blocks {
 	padding-top: $grid-unit-30;
 
 	// Ensure the widget area block lists have a minimum height so that it doesn't

diff --git a/packages/edit-widgets/src/components/more-menu/index.js b/packages/edit-widgets/src/components/more-menu/index.js
@@ -122,6 +122,13 @@ export default function MoreMenu() {
 									'Contain text cursor inside block deactivated'
 								) }
 							/>
+							<FeatureToggle
+								feature="themeStyles"
+								info={ __(
+									'Make the editor look like your theme.'
+								) }
+								label={ __( 'Use theme styles' ) }
+							/>
 							{ isLargeViewport && (
 								<FeatureToggle
 									feature="showBlockBreadcrumbs"

diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -10,32 +10,43 @@ import {
 	ObserveTyping,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Notices from '../notices';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import { store as editWidgetsStore } from '../../store';
 
 export default function WidgetAreasBlockEditorContent( {
 	blockEditorSettings,
 } ) {
+	const { hasThemeStyles } = useSelect( ( select ) => ( {
+		hasThemeStyles: select( editWidgetsStore ).__unstableIsFeatureActive(
+			'themeStyles'
+		),
+	} ) );
+
+	const styles = useMemo( () => {
+		return hasThemeStyles ? blockEditorSettings.styles : [];
+	}, [ blockEditorSettings, hasThemeStyles ] );
+
 	return (
 		<div className="edit-widgets-block-editor">
 			<Notices />
 			<BlockTools>
 				<KeyboardShortcuts />
 				<BlockEditorKeyboardShortcuts />
-				<div className="editor-styles-wrapper">
-					<EditorStyles styles={ blockEditorSettings.styles } />
-					<BlockSelectionClearer>
-						<WritingFlow>
-							<ObserveTyping>
-								<BlockList className="edit-widgets-main-block-list" />
-							</ObserveTyping>
-						</WritingFlow>
-					</BlockSelectionClearer>
-				</div>
+				<EditorStyles styles={ styles } />
+				<BlockSelectionClearer>
+					<WritingFlow>
+						<ObserveTyping>
+							<BlockList className="edit-widgets-main-block-list" />
+						</ObserveTyping>
+					</WritingFlow>
+				</BlockSelectionClearer>
 			</BlockTools>
 		</div>
 	);

diff --git a/packages/edit-widgets/src/store/defaults.js b/packages/edit-widgets/src/store/defaults.js
@@ -3,5 +3,6 @@ export const PREFERENCES_DEFAULTS = {
 		fixedToolbar: false,
 		welcomeGuide: true,
 		showBlockBreadcrumbs: true,
+		themeStyles: true,
 	},
 };
diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
@@ -50,7 +50,7 @@ body.widgets-php {
 	}
 }
 
-.blocks-widgets-container .editor-style-wrapper {
+.blocks-widgets-container .editor-styles-wrapper {
 	max-width: $widget-area-width;
 	margin: auto;
 }

diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss
@@ -95,3 +95,10 @@
 		min-height: 50px;
 	}
 }
+
+.wp-block-legacy-widget {
+	.components-select-control__input {
+		padding: 0;
+		font-family: system-ui;
+	}
+}
diff --git a/packages/widgets/src/blocks/legacy-widget/index.php b/packages/widgets/src/blocks/legacy-widget/index.php
@@ -90,7 +90,6 @@ function handle_legacy_widget_preview_iframe() {
 		<style>
 			/* Reset theme styles */
 			html, body, #page, #content {
-				background: #FFF !important;
 				padding: 0 !important;
 				margin: 0 !important;
 			}