diff --git a/lib/compat/wordpress-5.9/default-editor-styles.php b/lib/compat/wordpress-5.9/default-editor-styles.php new file mode 100644 index 0000000000000..9ad83c1b19f8e --- /dev/null +++ b/lib/compat/wordpress-5.9/default-editor-styles.php @@ -0,0 +1,38 @@ + 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' ); diff --git a/lib/global-styles.php b/lib/global-styles.php index 9469b79d06448..59e392830517b 100644 --- a/lib/global-styles.php +++ b/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. diff --git a/lib/load.php b/lib/load.php index 57692dc37319c..096fe553d95e1 100644 --- a/lib/load.php +++ b/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'; diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js index 4b0286d8eba71..c2c5f77ff600b 100644 --- a/packages/block-editor/src/components/editor-styles/index.js +++ b/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, diff --git a/packages/block-editor/src/default-editor-styles.scss b/packages/block-editor/src/default-editor-styles.scss new file mode 100644 index 0000000000000..e63291a30d7d1 --- /dev/null +++ b/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; +} diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index e2781d1a6a444..3f34c2a5f32bd 100644 --- a/packages/edit-post/src/editor.js +++ b/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 ) {