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.

Basic Usage

Add the useBlockProps attribute to your block wrapper element:

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

When rendered, this automatically becomes:

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

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

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

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

<h2>{{title}}</h2>
<p>{{content}}</p>

Automatically becomes:

<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