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

Filters the finished card of one control in the block builder's Controls list, after the icon, the label, the name and the duplicate and remove buttons are already in it. Use it to put extra markup next to a card, for instance a badge marking the controls that write to post meta.

## Attributes

| Name           | Type       | Description                                                                            |
| -------------- | ---------- | -------------------------------------------------------------------------------------- |
| `controlsItem` | **JSX**    | the card element, a `div` carrying the drag handle and buttons                         |
| `props`        | **Object** | `data`, `id`, `controls`, `updateData`, `addControl`, `removeControl`, `printControls` |

| Name            | Type         | Description                                                                                  |
| --------------- | ------------ | -------------------------------------------------------------------------------------------- |
| `data`          | **Object**   | the control's own settings: `type`, `name`, `label`, `required`, `save_in_meta` and the rest |
| `id`            | **String**   | key of this control inside the block's `controls` object                                     |
| `controls`      | **Object**   | every control on the block, keyed by id                                                      |
| `updateData`    | **Function** | merges settings into this control, `updateData({ label: "New label" })`                      |
| `addControl`    | **Function** | adds a control, taking its settings and the id to sort it after                              |
| `removeControl` | **Function** | deletes this control and every control whose `child_of` points at it                         |
| `printControls` | **Function** | renders the nested list, taking `childOf` and `placement`                                    |

## Additional Filters

| Name                                         | Description                                                  |
| -------------------------------------------- | ------------------------------------------------------------ |
| `lzb.constructor.controls.CONTROL_TYPE.item` | one control type only, and it runs before the generic filter |

## Usage

```js title="JS"
wp.hooks.addFilter(
  "lzb.constructor.controls.item",
  "my.custom.namespace",
  function (controlsItem, props) {
    if (props.data.save_in_meta !== "true") {
      return controlsItem;
    }

    const metaName = props.data.save_in_meta_name || props.data.name;

    return (
      <div className="my-control-item-with-meta">
        {controlsItem}
        <span className="my-control-item-meta-badge">meta: {metaName}</span>
      </div>
    );
  },
);
```

The card keeps the `ref` and the `style` that `useSortable` puts on it, so wrapping it the way the example does leaves the drag transform on the inner element while the outer one stays still. When all you want is a class name or a `data-` attribute, filter the props instead with [lzb.constructor.controls.item-attributes](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-controls-item-attributes/), which runs before the element is built and keeps the card as the single node.

## 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