1

In my wordpress page I have html Blocks with html, css and javascript. When I save the page Wordpress keeps adding <br /> and <p> tags on each line making the JS and CSS invalid.

It actually saves it correctly, but when you reopen the page in the editor then it adds in all your HTML blocks those tags on each line. How can I prevent this? This wasn't like this 3 Weeks ago.

enter image description here

6
  • there's been a fundamental misunderstanding of what the HTML block does, the HTML block is not an arbitrary HTML entry box that you can just enter anything into, HTML in a post is limited to a subset, and the only reason you're able to put script and style tags in there is because as an admin you have the unfiltered_html capability which bypasses all the safety and security precautions. This also means if someone who is not an admin tries to edit that page it'll all get stripped out, and that you're able to do really seriously dangerous stuff.
    – Tom J Nowell
    Apr 13, 2023 at 14:48
  • also note that in the latest WP version there are official ways to enter CSS for blocks via the advanced panel which you should use instead, and that entering arbitrary JS on a page shouldn't be done and never has been done by putting it into the posts content as that has major security issues. That's not to say that you can't add JS on specific pages, or embed things, just that this is not the way
    – Tom J Nowell
    Apr 13, 2023 at 14:49
  • 1
    @TomJNowell but what is the way to do that? Do I have always write a plugin just to do an hello world alert in my javascript? When I know what I am doing, why shouldn't it be possible to write some frontend js code in the posts? Apr 18, 2023 at 12:46
  • writing JS directly inside a post is a massive security risk, but it is possible to embed custom JS safely, just not like that. How you would do that has been answered many times elsewhere on the site in far greater detail than I could leave in a comment, and there are multiple methods, e.g. widgets/oembed/shortcode/blocks/filters/page templates/etc/etc/etc
    – Tom J Nowell
    Apr 18, 2023 at 12:54
  • @TomJNowell just so you know, adding <script> tags to a template or template part doesn't work either. (Specifically, as soon as a change in the template code is saved in the editor, your script tag is mangled.)
    – nydame
    Sep 20, 2023 at 22:51

1 Answer 1

0

It doesn't work because the HTML block isn't a raw arbitrary HTML block. At the end of the day, all HTML in a posts content is passed through security filters that strip out anything that doesn't appear in a whitelist of tags and attributes. Wether you entered those manually, they were inserted by a block, or entered into a custom HTML block is irrelevant.

This is why blocks that depend on style and script tags render those tags dynamically in PHP, or rely on APIs such as OEmbed.

If you want to write custom CSS for a specific page or block you have the following options:

  • Use the advanced panel to add a HTML class to target from a static CSS file, block styles/variants can be used to make this easy and let the block editor show this with GUI buttons and previews
  • Use the custom CSS box in the global styles editor or the customizer
  • If your CSS is specific to a page, you don't have to put the CSS in that pages content, WordPress puts classes on the <body> tag you can use to target, everything from home or single, the post type, the template used, to classes containing the page name and ID so you can precision target a specific post with a CSS rule

Do keep in mind though, you do not want to store CSS or JS in post content, be that a post/page/template. This is for security reasons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.