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.

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