Remove parts of Gutenberg CSS that is loaded by load-styles.php

  • Hi, we are creating a custom block builder, so we used the wp-reset-editor-styles to reset the default styles in the back-end and load our own.

    However, some code is still loaded inline by wp-admin/load-styles.php. Some of this CSS is required, for example dash icons are good to have in the editor (to use icons for our custom blocks). But others are not, to give a very specific example this is one of the styles that bothers us (this code overwrites all heights we specify with Tailwind.):

    .block-editor__container img {
    height: auto;
    }

    We have been searching for an answer for quite a long time, but can’t seem to find a solution for this. Can somebody help us fix this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hey there @tomowow – I asked a couple of developers to have a look at this, and here are their thoughts:

    They weren’t sure what hook you’re using, but they both agree that enqueue_block_editor_assets seems to be the correct one (example). @greenshady also said that you should be able to dequeue/deregister any other stylesheets for the editor on that hook, adding that it would also be helpful to know which specific stylesheet the CSS code you’re referencing is coming from, as that would make it easier to test.

    Thread Starter tomowow

    (@tomowow)

    Hi Kathryn,

    Thanks for your answer, this helped me get on the right track! I detected the right library to disable, it was coming from the ‘wp-block-editor’.

    Disabled that one like this wp_deregister_style('wp-block-editor')

    However, this library is obviously also taking care of some primary styling in the editor, so I think there are 2 options left for me:

    1. Disable the styling, and load a custom version of it myself by copying it and delete one line of code. But this is too risky in my opinion because of upcoming WP updates.
    2. Alter the editor HTML so my img is not being affected by the code .block-editor__container img. The HTML is defined in /wp-admin/edit-form-blocks.php, so I can’t edit that as well. Is there any way I can alter it clean and solid? Javascript is always an option, but definitly not clean and solid.

    Do you have other options I can try, or can we submit a feature request to fix this? It could be as simple as, changing the CSS selector to .block-editor__container img:not(.custom-block-image) for example.

    Ps: can imagine more developers are dealing with this, while all height attributes are overwritten when using images in custom blocks.

    Apologies if you have tried this already but could you perhaps try creating a selector with higher specificity?

    Perhaps adding a selector to your CSS similar to the following. 

    .block-editor__container img.{classname} {
}

    Please note I have not tested this and don’t know all of specifics of your code so keep that in mind ??

    Moderator Kathryn Presner

    (@zoonini)

    Thanks a bunch, Ryan. ??

    Also wanted to add another suggestion from @greenshady, who agrees that higher specificity would be the best solution, in other words, prefixing all of the Tailwind CSS for the editor.?(He acknowledged that “It’d bloat their custom stylesheet a bit, but I’d still say it’s the best option.”) The prefix you could try looks like .editor-styles-wrapper

    Let me know how it goes!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Remove parts of Gutenberg CSS that is loaded by load-styles.php’ is closed to new replies.