Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add default editor styles applied to themes without theme.json and without editor styles #34439

Merged
merged 6 commits into from
Sep 3, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions lib/compat/wordpress-5.9/default-editor-styles.php
Original file line number Diff line number Diff line change
@@ -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' );
12 changes: 7 additions & 5 deletions lib/global-styles.php
Original file line number Diff line number Diff line change
Expand Up @@ -141,15 +141,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.
Expand Down
1 change: 1 addition & 0 deletions lib/load.php
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
24 changes: 24 additions & 0 deletions packages/block-editor/src/default-editor-styles.scss
Original file line number Diff line number Diff line change
@@ -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;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jasmussen this is the styles file if you want to tweak it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've got a related PR at #34334 that enqueues the global styles for all themes. After it lands, shouldn't these styles live at lib/theme.json?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know, what I know is that they need to be in a dedicated setting in order for this logic to apply https://github.com/WordPress/gutenberg/pull/34439/files#diff-d00cfe048041886ee9b16f6f42422317b6e770cbea20cbe0e4d0ca7c8e0ec0e1R159-R161

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey, so since #35424 all themes provide some styles to settings: at least they'll have the core preset styles. That inadvertently cause a bug for themes that don't provide any editor styles: they no longer had any defaults. See issue at #35730

I've created a fix for this at #35736 but I'm not convinced is the right approach. So I've prepared a second fix to absorb the defaults as part of the styles we send to the client in global-styles.php, see #35737

I'd love hearing your thoughts on which approach makes more sense to you.

4 changes: 3 additions & 1 deletion packages/edit-post/src/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down