Custom Code Blocks

Custom Code Blocks are builder blocks made of raw HTML, CSS and JavaScript — defined entirely in the admin, no deployment needed. Perfect for site-specific sections, third-party embeds or experiments that don't warrant a PHP block class.

Custom Code Blocks vs. PHP blocks#

See Custom Blocks for the PHP variant.

Creating one#

1. In the admin menu, open Custom Code Blocks (Content group).
2. Click the create button and fill in:
   • Name — shown on the block tile in the builder.
   • Icon — a Font Awesome icon for the tile.
   • HTML tab — the block's markup.
   • CSS tab — styles for the block.
   • JavaScript tab — behavior.
3. Save.

The block immediately appears in the visual builder under the Custom Blocks category — for this site only.

How the pieces are delivered#

When an editor drops the block onto a page, the HTML is inserted wrapped in a lx-custom-block container. The CSS and JS travel with it as data attributes and are activated on the public page:

• the CSS is injected into the document head,
• the JavaScript runs with this bound to the block's root element — so this.querySelector('.button') scopes to your block.

Because CSS is global once injected, prefix your selectors with a block-specific class to avoid styling the rest of the page:

.promo-banner { background: #111; color: #fff; }
.promo-banner .cta { color: #ff0465; }

<div class="promo-banner">
  <h2>Summer sale</h2>
  <a class="cta" href="/sale">Shop now</a>
</div>

Editing an existing block#

Changing a Custom Code Block in the admin changes the template — pages where the block was already placed keep the copy they were built with. Re-drop the block (and remove the old instance) on pages that should pick up the new version.

Limits worth knowing#

• Blocks are per site — recreate them on other sites if needed.
• There is no server-side rendering: no Blade, no PHP, no access to content data.
• Scripts run on the public page for every visitor; keep them small and defensive.

Related articles#

• Custom Blocks
• Block Reference — the client-facing overview