diff --git a/lib/client-assets.php b/lib/client-assets.php
index c5b03b6833d030..2981523f98aa1e 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -284,7 +284,7 @@ function gutenberg_register_packages_styles( $styles ) {
$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 @@ function gutenberg_register_packages_styles( $styles ) {
);
$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 @@ function gutenberg_register_packages_styles( $styles ) {
$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 @@ function gutenberg_register_vendor_scripts( $scripts ) {
// 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 );
+ }
+ }
+} );
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index 70d6bbad99e522..a68189a6f99874 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/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 (
+
+ );
+}
export function ExperimentalBlockCanvas( {
shouldIframe = true,
@@ -34,6 +69,7 @@ export function ExperimentalBlockCanvas( {
if ( ! shouldIframe ) {
return (
<>
+