---
title: "useBlockProps"
description: "The useBlockProps attribute puts WordPress block classes and ID on a block's wrapper in the editor and on the front end, merged with your own classes."
url: "https://www.lazyblocks.com/docs/blocks-code/use-block-props/"
lastUpdated: 2026-09-23
source: "blocks-code/use-block-props.mdx"
---
# useBlockProps

The `useBlockProps` attribute is a special attribute that automatically generates proper block wrapper attributes including block classes, block ID, and other WordPress-specific attributes. This attribute works both in the editor and on the frontend, ensuring consistent block behavior.

If you landed here before building your first block, start with [WordPress custom blocks](https://www.lazyblocks.com/wordpress-custom-blocks/).

## Basic Usage

Add the `useBlockProps` attribute to your block wrapper element:

```html
<div useBlockProps>
  {{control_name}}
</div>
```

When rendered, this automatically becomes:

```html
<div class="wp-block-lazyblock-your-block-name" id="block-123abc">
  <!-- Your block content -->
</div>
```

## Custom Classes and Attributes

You can add your own classes and attributes alongside `useBlockProps`:

```html
<div useBlockProps class="custom-class another-class" data-hello="world">
  {{control_name}}
</div>
```

This will merge your custom attributes with the WordPress block attributes:

```html
<div class="wp-block-lazyblock-your-block-name custom-class another-class" id="block-123abc" data-hello="world">
  <!-- Your block content -->
</div>
```

## Automatic Wrapper

If you don't include `useBlockProps` in your block code, Lazy Blocks will automatically wrap your entire block output:

**Your code:**
```html
<h2>{{title}}</h2>
<p>{{content}}</p>
```

**Automatically becomes:**
```html
<div useBlockProps>
  <h2>{{title}}</h2>
  <p>{{content}}</p>
</div>
```

## Why Use useBlockProps?

### WordPress Compatibility
- Ensures proper block identification in WordPress
- Maintains consistency with core WordPress blocks
- Supports block themes and Full Site Editing

### Editor Integration
- Provides proper block selection and highlighting
- Enables block toolbar positioning
- Supports block spacing and alignment controls

### Theme Support
- Allows theme styles to target your blocks correctly
- Supports WordPress block spacing (gap, margin, padding)
- Enables proper block alignment classes

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