Question 258933 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress: How to include JavaScript as block element

What is the correct way to add JavaScript in a block to WordPress?

I have the following JavaScript, which I want to add into a specific position of a WordPress page:

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script><br>
<script id="widget_id_2082" type="text/javascript" src="https://11076.wundercoach.net/api/v1/jsonp/full_filterable_list/b93c78f1-77b9-4096-ba1a-adb1d7fdbb2e.js?locale=de/b93c78f1-77b9-4096-ba1a-adb1d7fdbb2e.js" async="true"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

I can’t add it to the theme or the page in general, because the code is from a third party provider and will render a widget at the position where it is added.

If I add a normal paragraph and put the code into it with the code editor:

<!-- wp:paragraph -->
<p>
<!-- [The code from above] -->
</p>
<!-- /wp:paragraph -->

Then this is correctly displayed on the real page. But on the administration page I get wired empty tags marked in yellow:

enter image description here

Why is that? Is there a block element in which I can add javascript (and css tags), which is displayed as something like "JavaScript block" or even some text in the admin panel that I could edit?

I don’t want my customer to see this wired tags and maybe delete them by chance. So I want a user editing the page, understand that code lives in this element.

Also I don’t want to add any of the above JavaScript into elements of a plugin or the theme, since the JavaScript needs to be able to be updated by my customer, which doesn not have access to the WordPress sources.

Is that possible?

Tags:

2

Answers


  1. 0

    Try this simple tool(WPCode), which comes in the form of a WordPress plugin. It will help you add many codes in many languages within WordPress.

    Login or Signup to reply.
  2. 0

    You can use the "Custom HTML" block types to add that code.

    Although you are adding scripts, they are just HTML tags, so this block will do what you need.

    Add block -> Custom HTML

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search