Custom JS for blocks

Blog Staff

June 21, 2025

GreenLight blocks have special option to add JS directly in blocks. But it’s not just JS panel, it’s much bigger. Let’s dive in

Screenshot

Security for JS

First of all, due to security reasons, it works only for admin and editors with capability to edit options. Script will be saved in database in time when you save post, so, hackers can’t inject them just by adding code inside block

Editor execution

You can enable execution directly in editor by enabling special button. This will register script and attach it to Body of page. Please, note, that when you edit script, it will not be updated in editor, for this you need to reload page.

Smart Loading

Another good feature. Sometimes you need scripts that are not executed immediately on page. For example, it’s heavy 3d script. Smart loading feature will execute script only after some user interactions (scrolling, hovering, etc)

AI helper

You can ask AI helper to build you script that you need. Just click on relevant button

Placeholders

This is very cool – you can mix dynamic placeholders of GS (custom fields, options, etc) and put them directly inside script code. It will be replaced by dynamic data on frontend. Read more about inner placeholder system

Custom Input Placeholders

You can create own inputs and placeholders. It’s very useful, because if you have huge code, you may want to add custom values easily from simple interface without searching it in code. And it’s easy, just create unlimited inputs and put their placeholders directly to code

Support for modern JS import

Plugin automatically detects if you use import syntax and if yes, it will register script as module script

Copy this post’s content

<!-- wp:paragraph -->
<p>GreenLight blocks have special option to add JS directly in blocks. But it's not just JS panel, it's much bigger. Let's dive in</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5828,"width":"400px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/06/[email protected]" alt="" class="wp-image-5828" style="width:400px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="security-for-js">Security for JS</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First of all, due to security reasons, it works only for admin and editors with capability to edit options. Script will be saved in database in time when you save post, so, hackers can't inject them just by adding code inside block</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="editor-execution">Editor execution</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can enable execution directly in editor by enabling special button. This will register script and attach it to Body of page. Please, note, that when you edit script, it will not be updated in editor, for this you need to reload page.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="smart-loading">Smart Loading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Another good feature. Sometimes you need scripts that are not executed immediately on page. For example, it's heavy 3d script. Smart loading feature will execute script only after some user interactions (scrolling, hovering, etc)</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="ai-helper">AI helper</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can ask AI helper to build you script that you need. Just click on relevant button</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="placeholders">Placeholders</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is very cool - you can mix dynamic placeholders of GS (custom fields, options, etc) and put them directly inside script code. It will be replaced by dynamic data on frontend.  Read more about inner <a href="https://greenshiftwp.com/dynamic-placeholders/" data-type="post" data-id="5575">placeholder system</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="custom-input-placeholders">Custom Input Placeholders</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can create own inputs and placeholders. It's very useful, because if you have huge code, you may want to add custom values easily from simple interface without searching it in code. And it's easy, just create unlimited inputs and put their placeholders directly to code</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="support-for-modern-js-import">Support for modern JS import</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Plugin automatically detects if you use import syntax and if yes, it will register script as module script</p>
<!-- /wp:paragraph -->

interactions