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

Filters the Slug field of the block builder general settings. Wrap it to put a control of your own beside the slug, swap it for a picker, or return a falsy value to take the field off the screen.

## Attributes

| Name           | Type       | Description                          |
| -------------- | ---------- | ------------------------------------ |
| `element`      | **JSX**    | `PanelBody` holding the slug control |
| `settingsData` | **Object** | `data`, `updateData`                 |

`settingsData.data` is the whole block data, so `data.slug` holds the current value and `data.icon`, `data.category`, `data.keywords` and `data.description` hold the values behind the other four general settings. `settingsData.updateData` shallow merges the object you pass it into that block data.

The five general settings render in a fixed order: slug, icon, category, keywords, description. This filter changes what stands in the slug position, it cannot move the field.

## Usage

Pro adds its namespace selector by wrapping the default element rather than replacing it.

```js title="JS"
const { PanelBody, ToggleControl } = wp.components;

wp.hooks.addFilter(
  "lzb.constructor.general-settings.slug",
  "my.custom.namespace",
  function (element, settingsData) {
    const { data, updateData } = settingsData;

    return (
      <>
        {element}
        <PanelBody>
          <ToggleControl
            label="Hide this block from the inserter"
            checked={data.my_hidden === "true"}
            onChange={(value) =>
              updateData({ my_hidden: value ? "true" : "false" })
            }
          />
        </PanelBody>
      </>
    );
  },
);
```

The builder renders the filtered value as `{settingsSlug || null}`, so returning `false`, `null` or an empty string removes the Slug field and nothing on that screen can edit the block slug any more. Returning a component function instead of an element makes React warn `Functions are not valid as a React child` and render nothing. The other four fields go through [lzb.constructor.general-settings.icon](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-icon/), [lzb.constructor.general-settings.category](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-category/), [lzb.constructor.general-settings.keywords](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-keywords/) and [lzb.constructor.general-settings.description](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-description/).

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