wp_enqueue_script() function to enqueue a script,and printing out inline js code with the wp_head or wp_footer action hook. These methods all require you to write php code in your theme’s functions.php file.
<script> alert("hello world"); </script>
But when I clicked the Update/Publish button to publish/update the post, the script became:
<script><br /> alert("hello world");<br /> </script>
remove_filter( 'the_content', 'wpautop' ); remove_filter( 'the_excerpt', 'wpautop' );
Unfortunately, this method does not work for me. I kept getting the extra <br/> tags. I observed that the Gutenberg editor only adds <br/> for lines inside the <script> tag, not the lines outside the script tag. I finally got the cure from this post: add the following line before and after the script tag:
<!-- /wp:html -->
This post says you can also disable wp from adding the line-breaks automatically by enclosing the js code inside <pre></prev>.
In the above example, we include the jQuery js in the post and write some js code to verify the jQuery is indeed loaded and running. We also import an external css to prove the custom css can also be embedded within wordpress posts without bothering to use any plugin or writing code like wp_enqueue_style. In practice, you should load js script near the end of the post to prevent it from delaying the parsing of the html.