---
title: "lzb.constructor.code-settings"
description: "JS filter `lzb.constructor.code-settings` of the Lazy Blocks WordPress plugin."
url: "https://www.lazyblocks.com/docs/js-filters/lzb-constructor-code-settings/"
lastUpdated: 2026-09-09
source: "js-filters/lzb-constructor-code-settings.mdx"
---
# lzb.constructor.code-settings

The Code box in the block builder renders through six filters, one per part. Reach for them to put a control of your own in the code toolbar, or to fill the empty slot under the editor with a live preview.

There is no filter under the bare `lzb.constructor.code-settings` name. Every one of the six carries a suffix.

## Available Filters

| Name                                            | Description                                                                                   |
| ----------------------------------------------- | --------------------------------------------------------------------------------------------- |
| `lzb.constructor.code-settings.output-method`   | the output method `Select`, or the plain `CSS` / `JS` label shown on a style or script tab    |
| `lzb.constructor.code-settings.additional`      | the sliders dropdown, holding Unified Block Code, With Editor Style and Code Output in Editor |
| `lzb.constructor.code-settings.info`            | the question mark dropdown, a `Notice` describing the current output method                   |
| `lzb.constructor.code-settings.output-code`     | the toolbar and the code editor, `null` when the output method is Theme Template              |
| `lzb.constructor.code-settings.output-template` | the toolbar and the read-only theme file tree, `null` for every other output method           |
| `lzb.constructor.code-settings.preview`         | an empty slot below the editor, `null` by default                                             |

## Attributes

| Name     | Type            | Description                                            |
| -------- | --------------- | ------------------------------------------------------ |
| `render` | **JSX \| null** | the element about to be rendered, different per filter |
| `data`   | **Object**      | `props`, `tab`, `setTab`                               |

| Name     | Type         | Description                                                                      |
| -------- | ------------ | -------------------------------------------------------------------------------- |
| `props`  | **Object**   | the Code box props: `data`, `updateData`, `onTabChange`                          |
| `tab`    | **String**   | active tab: `frontend`, `editor`, `block-style`, `editor-style` or `view-script` |
| `setTab` | **Function** | switches the active tab                                                          |

The block being edited sits one level deeper than it looks. Read it as `data.props.data`, not `data.data`, and write to it with `data.props.updateData({ code_output_method: "php" })`, which shallow-merges the object you pass in, replacing whole values rather than merging into them.

`preview` is handed `null` and has no core UI behind it, so it is a slot to fill rather than markup to change. Whatever it returns is wrapped in a `Box` under the code editor.

`additional` and `info` are the bodies of two `Dropdown` components, so they fire only while their dropdown is open, not on every render of the box.

`output-method`, `additional` and `info` render inside the toolbars that `output-code` and `output-template` return. Replacing either of those two therefore takes the output method selector and both dropdown buttons off the screen with it.

## Usage

```js title="JS"
wp.hooks.addFilter(
  "lzb.constructor.code-settings.info",
  "my.custom.namespace",
  function (render, data) {
    if (data.props.data.code_output_method !== "php") {
      return render;
    }

    return (
      <>
        {render}
        <p className="description">
          Render callbacks for this site live in <code>inc/blocks.php</code>.
        </p>
      </>
    );
  },
);
```

The empty `preview` slot takes the same two arguments:

```js title="JS"
wp.hooks.addFilter(
  "lzb.constructor.code-settings.preview",
  "my.custom.namespace",
  function (render, data) {
    const controls = data.props.data.controls || {};
    const names = Object.keys(controls)
      .map((id) => controls[id].name)
      .filter(Boolean);

    if (!names.length) {
      return render;
    }

    return (
      <p className="description">
        Available tags: {names.map((name) => `{{${name}}}`).join(", ")}
      </p>
    );
  },
);
```

Return `render` untouched for the cases you do not handle. Returning `null` from `output-code` or `output-template` empties the Code box for that output method, and returning a string instead of an element renders that string as text where the editor used to be.

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt