HTML block wraps CSS in tags and line breaks

Since there is not other convenient way, I’m using the native HTML block to add CSS. There is a plugin, but it was also not working properly.

Hi @bilion which theme are you using, if you are using one of the block themes there is an option to add additional CSS in the site editor.

While in the site editor, open Global Styles then click on 3-Dots that appear on the top-right. You will then see the option to access the Additional CSS section for your site.

Hi @thelmachido

Thanks for the response.
That is for global styles. It loads on every page.
To reduce bloat, we should be loading CSS rules only where they are used.
Is there a way to add CSS, so that it loads only on that page / template?

Thank you

This is a MAJOR issue since it happens also with JS code! It happens with plain HTML as well. If you go and delete the weird <p> and </br> tags they get added again by themselves!

Is there a fix for that issue?

https://ibb.co/qJNnfvT

Thank you for providing more information, I checked with the developing team, the line breaks being added in the HTML block its a bug with the site editor.

There is an open issue reflecting this bug here: https://github.com/WordPress/gutenberg/issues/49166

Please feel free to add your experience to help push this forward.

I did write a comment on the thread.
But, also started a new one, which may be an even better solution for CSS.
I mean, we do need both these options to work better.

Add Template Specific CSS instead of only global in the Additional CSS section
https://github.com/WordPress/gutenberg/issues/50160
Please, chime in. Let’s make this happen!

Hi @bilion thank you for making the feature requests and giving us an update.