Remove block assets enqueuing from editor document

lib/client-assets.php

@@ -284,7 +284,7 @@
 		$styles,
 		'wp-edit-post',
 		gutenberg_url( 'build/edit-post/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-commands' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-block-library-editor', 'wp-block-library', 'wp-commands' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -369,6 +369,19 @@
 	);
 	$styles->add_data( 'wp-edit-blocks', 'rtl', 'replace' );
 
+	// Essentially the same as wp-edit-blocks, but without dependencies.
+	// wp-edit-blocks is for use in the editor iframe, while
+	// wp-block-library-editor is for use outside the iframe. Editor styles are
+	// expected to be enqueued both inside and outside the iframe.
+	gutenberg_override_style(
+		$styles,
+		'wp-block-library-editor',
+		gutenberg_url( 'build/block-library/editor.css' ),
+		array(),
+		$version
+	);
+	$styles->add_data( 'wp-edit-blocks', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-nux',
@@ -409,7 +422,7 @@
 		$styles,
 		'wp-edit-site',
 		gutenberg_url( 'build/edit-site/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-commands' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-block-library-editor', 'wp-commands' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-site', 'rtl', 'replace' );
@@ -594,3 +607,29 @@
 // Enqueue stored styles.
 add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_stored_styles' );
 add_action( 'wp_footer', 'gutenberg_enqueue_stored_styles', 1 );
+
+/*
+ * This action should be removed in core when backporting. We no longer want to
+ * enqueue all assets added through enqueue_block_assets, they are added
+ * separately to the editor through block editor settings.
+ * See https://github.com/WordPress/wordpress-develop/blob/362624176cba41a2dda57c3e89031aa6c3e4decf/src/wp-includes/default-filters.php#L573.
+ */
+remove_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
+
+/*
+ * We DO want to enqueue EDITOR scripts and styles.
+ */
+add_action( 'admin_enqueue_scripts', function() {
+	$block_registry = WP_Block_Type_Registry::get_instance();
+	foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
+		// Editor styles.
+		foreach ( $block_type->editor_style_handles as $editor_style_handle ) {
+			wp_enqueue_style( $editor_style_handle );
+		}
+
+		// Editor scripts.
+		foreach ( $block_type->editor_script_handles as $editor_script_handle ) {
+			wp_enqueue_script( $editor_script_handle );
+		}
+	}
+} );

packages/block-editor/src/components/block-canvas/index.js

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { useMergeRefs } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,6 +15,39 @@ import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useClipboardHandler } from '../copy-handler';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * This component is for rendering block assets when the editor canvas is not
+ * iframed. It might include assets that have already been enqueued for the
+ * editor, so we need to filter them out.
+ */
+function UnIframedBlockAssets() {
+	const blockAssets = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings()
+			.__unstableResolvedAssets;
+	}, [] );
+	const { styles: _styles = '', scripts: _scripts = '' } = blockAssets || {};
+	const assetsHtml = _styles + _scripts;
+	const filteredAssetsHtml = useMemo( () => {
+		if ( ! assetsHtml ) return '';
+		const doc = document.implementation.createHTMLDocument( '' );
+		doc.body.innerHTML = assetsHtml;
+		// Remove assets already enqueued in the editor document.
+		doc.querySelectorAll( '[id]' ).forEach( ( node ) => {
+			if ( document.getElementById( node.id ) ) {
+				node.remove();
+			}
+		} );
+		return doc.body.innerHTML;
+	}, [ assetsHtml ] );
+
+	if ( ! filteredAssetsHtml ) return null;
+
+	return (
+		<div dangerouslySetInnerHTML={ { __html: filteredAssetsHtml } }></div>
+	);
+}
 
 export function ExperimentalBlockCanvas( {
 	shouldIframe = true,
@@ -34,6 +69,7 @@ export function ExperimentalBlockCanvas( {
 	if ( ! shouldIframe ) {
 		return (
 			<>
+				<UnIframedBlockAssets />
 				<EditorStyles
 					styles={ styles }
 					scope=".editor-styles-wrapper"

packages/block-editor/src/components/block-tools/style.scss

@@ -78,6 +78,20 @@
 	}
 }
 
+// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
+// that exists only on empty documents.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
+.block-editor-default-block-appender .block-editor-inserter {
+	position: absolute;
+	top: 0;
+	right: 0;
+	line-height: 0;
+
+	&:disabled {
+		display: none;
+	}
+}
+
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
 	background: var(--wp-admin-theme-color);
 	&:hover {

packages/block-editor/src/components/default-block-appender/content.scss

@@ -60,20 +60,6 @@
 	}
 }
 
-// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
-// that exists only on empty documents.
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-	position: absolute;
-	top: 0;
-	right: 0;
-	line-height: 0;
-
-	&:disabled {
-		display: none;
-	}
-}
-
 
 /**
  * Fixed position appender.

packages/block-editor/src/components/iframe/use-compatibility-styles.js

@@ -45,6 +45,12 @@ export function useCompatibilityStyles() {
 					return accumulator;
 				}
 
+				// This is the same stylesheet as wp-edit-block but without
+				// its dependencies, so we don't need to add it.
+				if ( ownerNode.id === 'wp-block-library-editor-css' ) {
+					return accumulator;
+				}
+
 				// Don't try to add styles without ID. Styles enqueued via the WP dependency system will always have IDs.
 				if ( ! ownerNode.id ) {
 					return accumulator;

packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php

@@ -24,4 +24,4 @@ function enqueue_inner_blocks_allowed_blocks_script() {
 		true
 	);
 }
-add_action( 'enqueue_block_assets', 'enqueue_inner_blocks_allowed_blocks_script' );
+add_action( 'enqueue_block_editor_assets', 'enqueue_inner_blocks_allowed_blocks_script' );

packages/e2e-tests/plugins/meta-attribute-block.php

@@ -49,4 +49,4 @@ function enqueue_test_meta_attribute_block() {
 		true
 	);
 }
-add_action( 'enqueue_block_assets', 'enqueue_test_meta_attribute_block' );
+add_action( 'enqueue_block_editor_assets', 'enqueue_test_meta_attribute_block' );