Add default editor styles applied to themes without theme.json and wi…

…thout editor styles (#34439)

Co-authored-by: jasmussen <joen@automattic.com>
Co-authored-by: Kjell Reigstad <kjell.reigstad@automattic.com>

lib/compat/wordpress-5.9/default-editor-styles.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Loads the default editor styles.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Load the default editor styles.
+ * These styles are used if the "no theme styles" options is triggered
+ * or on themes without their own editor styles.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_extend_block_editor_settings_with_default_editor_styles( $settings ) {
+	$default_editor_styles_file      = gutenberg_dir_path() . 'build/block-editor/default-editor-styles.css';
+	$settings['defaultEditorStyles'] = array(
+		array(
+			'css' => file_get_contents( $default_editor_styles_file ),
+		),
+	);
+
+	// Remove the default font addition from Core Code.
+	$styles_without_core_styles = array();
+	if ( isset( $settings['styles'] ) ) {
+		foreach ( $settings['styles'] as $style ) {
+			if ( 'core' !== $style['__unstableType'] ) {
+				$styles_without_core_styles[] = $style;
+			}
+		}
+	}
+	$settings['styles'] = $styles_without_core_styles;
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_extend_block_editor_settings_with_default_editor_styles' );

lib/global-styles.php

@@ -139,15 +139,17 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 		}
 
 		// Reset existing global styles.
-		foreach ( $settings['styles'] as $key => $style ) {
-			if ( isset( $style['__unstableType'] ) && 'globalStyles' === $style['__unstableType'] ) {
-				unset( $settings['styles'][ $key ] );
+		$styles_without_existing_global_styles = array();
+		foreach ( $settings['styles'] as $style ) {
+			if ( ! isset( $style['__unstableType'] ) || 'globalStyles' !== $style['__unstableType'] ) {
+				$styles_without_existing_global_styles[] = $style;
 			}
 		}
 
 		// Add the new ones.
-		$settings['styles'][] = $css_variables;
-		$settings['styles'][] = $block_styles;
+		$styles_without_existing_global_styles[] = $css_variables;
+		$styles_without_existing_global_styles[] = $block_styles;
+		$settings['styles']                      = $styles_without_existing_global_styles;
 	}
 
 	// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.

lib/load.php

@@ -83,6 +83,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat.php';
 require __DIR__ . '/compat/wordpress-5.8/index.php';
 require __DIR__ . '/compat/wordpress-5.8.1/index.php';
+require __DIR__ . '/compat/wordpress-5.9/default-editor-styles.php';
 require __DIR__ . '/utils.php';
 require __DIR__ . '/editor-settings.php';
 

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

@@ -68,6 +68,7 @@ export default function EditorStyles( { styles } ) {
 		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
 		[ styles ]
 	);
+
 	return (
 		<>
 			{ /* Use an empty style element to have a document reference,

packages/block-editor/src/default-editor-styles.scss

@@ -0,0 +1,24 @@
+/**
+ * Default editor styles.
+ *
+ * These styles are shown if a theme does not register its own editor style,
+ * a theme.json file, or has toggled off "Use theme styles" in preferences.
+ */
+
+body {
+	font-family: $default-font;
+	font-size: 18px;
+	line-height: 1.5;
+	--wp--style--block-gap: 2em;
+}
+
+p {
+	line-height: 1.8;
+}
+
+.editor-post-title__block {
+	margin-top: 2em;
+	margin-bottom: 1em;
+	font-size: 2.5em;
+	font-weight: 800;
+}

packages/edit-post/src/editor.js

@@ -156,7 +156,9 @@ function Editor( {
 	] );
 
 	const styles = useMemo( () => {
-		return hasThemeStyles ? settings.styles : [];
+		return hasThemeStyles && settings.styles?.length
+			? settings.styles
+			: settings.defaultEditorStyles;
 	}, [ settings, hasThemeStyles ] );
 
 	if ( ! post ) {