refactor: Scope editor content styles to block canvas

Load these styles in the editor block canvas `iframe` to minimize
potential style collisions in the top-level editor. These styles are
only intended for content within the editor, not the editor UI itself.

Author: dcalhoun

src/components/visual-editor/index.jsx

@@ -16,6 +16,11 @@ import { store as editorStore, PostTitle } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { store as editPostStore } from '@wordpress/edit-post';
 import '@wordpress/format-library';
+// Base styles for the content within the block canvas iframe.
+import blockEditorContentStyles from '@wordpress/block-editor/build-style/content.css?inline';
+import blocksStyles from '@wordpress/block-library/build-style/style.css?inline';
+import blocksEditorStyles from '@wordpress/block-library/build-style/editor.css?inline';
+import blocksThemeStyles from '@wordpress/block-library/build-style/theme.css?inline';
 
 /**
  * Internal dependencies
@@ -89,7 +94,11 @@ function VisualEditor( { hideTitle } ) {
 		// context.
 		commonStyles,
 		// Add sensible default styles if theme styles are not present.
-		hasThemeStyles ? '' : defaultThemeStyles
+		hasThemeStyles ? '' : defaultThemeStyles,
+		blockEditorContentStyles,
+		blocksStyles,
+		blocksEditorStyles,
+		blocksThemeStyles
 	);
 
 	const editorClasses = clsx( 'gutenberg-kit-visual-editor', {

src/utils/editor-styles.js

@@ -4,10 +4,5 @@
 // Default styles that are needed for the editor.
 import '@wordpress/components/build-style/style.css';
 import '@wordpress/block-editor/build-style/style.css';
-// Default styles that are needed for the core blocks.
-import '@wordpress/block-library/build-style/style.css';
-import '@wordpress/block-library/build-style/editor.css';
-import '@wordpress/block-library/build-style/theme.css';
 import '@wordpress/format-library/build-style/style.css';
-import '@wordpress/block-editor/build-style/content.css';
 import '@wordpress/editor/build-style/style.css';