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

Filters the DOM props of a control card in the block builder controls list. Use it to add a class or a data attribute to the card so your own stylesheet or script can find that control.

## Attributes

| Name                     | Type       | Description                                                                            |
| ------------------------ | ---------- | -------------------------------------------------------------------------------------- |
| `controlsItemAttributes` | **Object** | props spread onto the card `<div>`                                                     |
| `props`                  | **Object** | `addControl`, `removeControl`, `updateData`, `printControls`, `data`, `id`, `controls` |

The default object has eight keys:

| Name                 | Type         | Description                                                                           |
| -------------------- | ------------ | ------------------------------------------------------------------------------------- |
| `className`          | **String**   | `lzb-block-builder-controls-item` plus the undefined, selected and dragging modifiers |
| `onClick`            | **Function** | selects the control, which is what opens its settings sidebar                         |
| `role`               | **String**   | `none`                                                                                |
| `data-control-type`  | **String**   | control type, for example `text`                                                      |
| `data-control-name`  | **String**   | control name as entered in the builder                                                |
| `data-control-label` | **String**   | control type again, the same value as `data-control-type`                             |
| `ref`                | **Function** | dnd-kit node ref that makes the card sortable                                         |
| `style`              | **Object**   | drag transform and transition                                                         |

`props.data` holds the settings of this control, `props.id` its uid, and `props.controls` every control on the block keyed by uid.

## Additional Filters

| Name                                                    | Description            |
| ------------------------------------------------------- | ---------------------- |
| `lzb.constructor.controls.CONTROL_TYPE.item-attributes` | specific controls only |

The type-specific filter runs first and the generic one receives its result, so a handler on `lzb.constructor.controls.item-attributes` can overwrite what a type-specific handler set.

## Usage

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

    return {
      ...attributes,
      className: `${attributes.className} my-meta-control`,
      "data-meta-name": props.data.save_in_meta_name || props.data.name,
    };
  },
);
```

Spread the incoming object instead of building a new one. Dropping `ref` detaches the card from dnd-kit and the control can no longer be dragged into a new position, and dropping `onClick` makes the control unselectable so its settings never open. To change the rendered card rather than its props, use [lzb.constructor.controls.item](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-controls-item/), which filters the finished element.

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