WordPress 5.8 css issue

  • I integrated tailwind with gutenberg without any kind of css conflict. It was before 5.8. Now after updating to 5.8, I can see that there are two new css files thats conflicting with my css.

    Two new css file in wordpress 5.8 is causing css conflict in gutenberg blocks:
    1. /block-library/reset.css and
    2. /css/buttons.css

    Does anyone know how to remove them only in gutenberg editor page? Tried many hooks nothing seems to be working.

    • This topic was modified 3 years, 3 months ago by Yui.
    • This topic was modified 3 years, 3 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 6 replies - 1 through 6 (of 6 total)

  • I have this issue too, although not with Tailwind.

    The problem seems to be a style being loaded in load-styles.php which I can’t seem to overwrite:

    .editor-styles-wrapper p {
	font-size: revert;
	line-height: revert;
	margin: revert;
}

    I’m struggling with this too. It doesn’t seem like it’s happening for everyone who updated, or else I’m sure I’d be able to find more information online. The tight line height is glaring and I don’t want to impose it the rest of my team, so I’m holding off on updating on production until I figure this out.

    Same. The /block-library/reset.css styles are causing issues when using Tailwind with blocks. I’d like to disable all block editor styles since everything is being handled by Tailwind.

    As a follow up, I installed the Gutenberg plugin since I believe it is ahead of what is bundled with core. The default block editor styling is working better with Tailwind now.

    I have not tried to update Gutenberg by itself, but hopefully WP v5.8.4 will address and resolve the issue. In the mean time, I have found the following to be helpful:

    add_action('enqueue_block_editor_assets', function () {
    // Removes editor styles
    wp_deregister_style('wp-reset-editor-styles');
    // Add back key styles, there may be more
    // change the path as needed
    wp_enqueue_style('wp-block-editor-styles', '../../../wp/wp-includes/css/dist/block-editor/style.css', false);
    wp_enqueue_style('wp-edit-post-styles', '../../../wp/wp-includes/css/dist/edit-post/style.css', false);
}, 102);

    Ref: https://stackoverflow.com/questions/69800090/deregister-admin-editor-reset-styles-with-the-handle-of-wp-reset-editor-styles

    Same frustrating problem. Only thing I have found that seems to help is adding !important to my css, to override those “revert”s, which is hardly an ideal solution.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WordPress 5.8 css issue’ is closed to new replies.