Block editor: separate content styles for the iframe (WordPress#44298)

lib/client-assets.php

@@ -251,6 +251,15 @@ function gutenberg_register_packages_styles( $styles ) {
 	// else (for development or test) default to use the current time.
 	$version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
 
+	gutenberg_override_style(
+		$styles,
+		'wp-block-editor-content',
+		gutenberg_url( 'build/block-editor/content.css' ),
+		array(),
+		$version
+	);
+	$styles->add_data( 'wp-block-editor-content', 'rtl', 'replace' );
+
 	// Editor Styles.
 	gutenberg_override_style(
 		$styles,
@@ -315,6 +324,9 @@ function gutenberg_register_packages_styles( $styles ) {
 		'wp-reset-editor-styles',
 		'wp-block-library',
 		'wp-reusable-blocks',
+		// Until #37466, we can't specifically add them as editor styles yet,
+		// so we must hard-code it here as a dependency.
+		'wp-block-editor-content',
 	);
 
 	// Only load the default layout and margin styles for themes without theme.json file.

lib/compat/wordpress-6.2/script-loader.php

@@ -63,3 +63,80 @@ static function () use ( $style ) {
 		$priority
 	);
 }
+
+/**
+ * Sets the content assets for the block editor.
+ *
+ * Note for core merge: see inline comment on what's been updated.
+ */
+function gutenberg_resolve_assets_override() {
+	global $pagenow;
+
+	$script_handles = array();
+	// Note for core merge: only 'wp-edit-blocks' should be in this array.
+	$style_handles = array(
+		'wp-edit-blocks',
+	);
+
+	if ( current_theme_supports( 'wp-block-styles' ) ) {
+		$style_handles[] = 'wp-block-library-theme';
+	}
+
+	if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
+		$style_handles[] = 'wp-widgets';
+		$style_handles[] = 'wp-edit-widgets';
+	}
+
+	$block_registry = WP_Block_Type_Registry::get_instance();
+
+	foreach ( $block_registry->get_all_registered() as $block_type ) {
+		$style_handles = array_merge(
+			$style_handles,
+			$block_type->style_handles,
+			$block_type->editor_style_handles
+		);
+
+		$script_handles = array_merge(
+			$script_handles,
+			$block_type->script_handles
+		);
+	}
+
+	$style_handles = array_unique( $style_handles );
+	$done          = wp_styles()->done;
+
+	ob_start();
+
+	// We do not need reset styles for the iframed editor.
+	wp_styles()->done = array( 'wp-reset-editor-styles' );
+	wp_styles()->do_items( $style_handles );
+	wp_styles()->done = $done;
+
+	$styles = ob_get_clean();
+
+	$script_handles = array_unique( $script_handles );
+	$done           = wp_scripts()->done;
+
+	ob_start();
+
+	wp_scripts()->done = array();
+	wp_scripts()->do_items( $script_handles );
+	wp_scripts()->done = $done;
+
+	$scripts = ob_get_clean();
+
+	return array(
+		'styles'  => $styles,
+		'scripts' => $scripts,
+	);
+}
+
+add_filter(
+	'block_editor_settings_all',
+	function( $settings ) {
+		// We must override what core is passing now.
+		$settings['__unstableResolvedAssets'] = gutenberg_resolve_assets_override();
+		return $settings;
+	},
+	100
+);

packages/block-editor/src/components/block-draggable/content.scss

@@ -0,0 +1,20 @@
+// This creates a "slot" where the block you're dragging appeared.
+// We use !important as one of the rules are meant to be overriden.
+.block-editor-block-list__layout .is-dragging {
+	background-color: currentColor !important;
+	opacity: 0.05 !important;
+	border-radius: $radius-block-ui !important;
+
+	// Disabling pointer events during the drag event is necessary,
+	// lest the block might affect your drag operation.
+	pointer-events: none !important;
+
+	// Hide the multi selection indicator when dragging.
+	&::selection {
+		background: transparent !important;
+	}
+
+	&::after {
+		content: none !important;
+	}
+}

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

@@ -44,24 +44,3 @@
 		font-size: $default-font-size;
 	}
 }
-
-// This creates a "slot" where the block you're dragging appeared.
-// We use !important as one of the rules are meant to be overriden.
-.block-editor-block-list__layout .is-dragging {
-	background-color: currentColor !important;
-	opacity: 0.05 !important;
-	border-radius: $radius-block-ui !important;
-
-	// Disabling pointer events during the drag event is necessary,
-	// lest the block might affect your drag operation.
-	pointer-events: none !important;
-
-	// Hide the multi selection indicator when dragging.
-	&::selection {
-		background: transparent !important;
-	}
-
-	&::after {
-		content: none !important;
-	}
-}

packages/block-editor/src/components/block-preview/content.scss

@@ -0,0 +1,4 @@
+// Hide inserter from previews.
+.block-editor-block-preview__content-iframe .block-list-appender {
+	display: none;
+}

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

@@ -35,11 +35,6 @@
 	}
 }
 
-// Hide inserter from previews.
-.block-editor-block-preview__content-iframe .block-list-appender {
-	display: none;
-}
-
 .block-editor-block-preview__live-content {
 	* {
 		pointer-events: none;

packages/block-editor/src/components/rich-text/content.scss

@@ -0,0 +1,42 @@
+.rich-text {
+	[data-rich-text-placeholder] {
+		pointer-events: none;
+	}
+
+	[data-rich-text-placeholder]::after {
+		content: attr(data-rich-text-placeholder);
+		// Use opacity to work in various editor styles.
+		// We don't specify the color here, because blocks or editor styles might provide their own.
+		opacity: 0.62;
+	}
+
+	&:focus {
+		// Removes outline added by the browser.
+		outline: none;
+
+		[data-rich-text-format-boundary] {
+			border-radius: 2px;
+		}
+	}
+}
+
+.block-editor-rich-text__editable {
+	> p:first-child {
+		margin-top: 0;
+	}
+}
+
+// Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
+// To ensure legibility, we increase the default placeholder opacity to ensure contrast.
+figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
+	opacity: 0.8;
+}
+
+[data-rich-text-script] {
+	display: inline;
+
+	&::before {
+		content: "</>";
+		background: rgb(255, 255, 0);
+	}
+}

packages/block-editor/src/components/rich-text/style.scss

@@ -1,37 +1,3 @@
-.rich-text {
-	[data-rich-text-placeholder] {
-		pointer-events: none;
-	}
-
-	[data-rich-text-placeholder]::after {
-		content: attr(data-rich-text-placeholder);
-		// Use opacity to work in various editor styles.
-		// We don't specify the color here, because blocks or editor styles might provide their own.
-		opacity: 0.62;
-	}
-
-	&:focus {
-		// Removes outline added by the browser.
-		outline: none;
-
-		[data-rich-text-format-boundary] {
-			border-radius: 2px;
-		}
-	}
-}
-
-.block-editor-rich-text__editable {
-	> p:first-child {
-		margin-top: 0;
-	}
-}
-
-// Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
-// To ensure legibility, we increase the default placeholder opacity to ensure contrast.
-figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
-	opacity: 0.8;
-}
-
 .components-popover.block-editor-rich-text__inline-format-toolbar {
 	// Set z-index as if it's displayed on the bottom, otherwise the block
 	// switcher popover might overlap if displayed on the bottom.
@@ -80,12 +46,3 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		}
 	}
 }
-
-[data-rich-text-script] {
-	display: inline;
-
-	&::before {
-		content: "</>";
-		background: rgb(255, 255, 0);
-	}
-}

packages/block-editor/src/content.scss

@@ -0,0 +1,10 @@
+@import "./components/block-list/content.scss";
+@import "./components/block-list-appender/content.scss";
+@import "./components/block-content-overlay/content.scss";
+@import "./components/block-draggable/content.scss";
+@import "./components/block-preview/content.scss";
+@import "./components/default-block-appender/content.scss";
+@import "./components/inner-blocks/content.scss";
+@import "./components/media-placeholder/content.scss";
+@import "./components/plain-text/content.scss";
+@import "./components/rich-text/content.scss";

packages/block-editor/src/style.scss

@@ -2,15 +2,11 @@
 @import "./components/block-alignment-control/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
-@import "./components/block-list/style.scss";
 @import "./components/block-tools/style.scss";
-@import "./components/block-list-appender/style.scss";
 @import "./components/block-lock/style.scss";
 @import "./components/block-breadcrumb/style.scss";
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
-@import "./components/block-content-overlay/style.scss";
-@import "./components/block-draggable/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
 @import "./components/block-parent-selector/style.scss";
@@ -28,22 +24,18 @@
 @import "./components/button-block-appender/style.scss";
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
-@import "./components/default-block-appender/style.scss";
 @import "./components/date-format-picker/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
-@import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/inspector-popover-header/style.scss";
 @import "./components/justify-content-control/style.scss";
 @import "./components/link-control/style.scss";
 @import "./components/list-view/style.scss";
 @import "./components/media-replace-flow/style.scss";
-@import "./components/media-placeholder/style.scss";
 @import "./components/multi-selection-inspector/style.scss";
-@import "./components/plain-text/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";

packages/block-library/src/block/block.json

@@ -15,6 +15,5 @@
 		"customClassName": false,
 		"html": false,
 		"inserter": false
-	},
-	"editorStyle": "wp-block-editor"
+	}
 }