Get the Additional CSS Class on an ACF Block

Access the “Additional CSS class(es)” value from the block sidebar to apply custom styles in your render template.

The $block variable passed to your render template contains a className key with any additional CSS classes added by the editor:

<?php
/**
 * Card Block Template.
 *
 * @param array $block The block settings and attributes.
 */
$classes = [ 'card-block' ];

if ( ! empty( $block['className'] ) ) {
    $classes[] = $block['className'];
}

if ( ! empty( $block['align'] ) ) {
    $classes[] = 'align' . $block['align'];
}
?>

<div class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">
    <h3><?php the_field( 'title' ); ?></h3>
    <p><?php the_field( 'description' ); ?></p>
</div>

A common helper pattern to build the class string:

<?php
$wrapper_attrs = get_block_wrapper_attributes( [
    'class' => 'my-custom-block',
] );
?>

<div <?php echo $wrapper_attrs; ?>>
    <!-- Block content -->
</div>

get_block_wrapper_attributes() (WordPress 5.6+) automatically includes the additional CSS classes, alignment classes, and any other block-level attributes. This is the recommended approach for WordPress 5.6+.

Other useful properties available on the $block array:

<?php
$block['id'];        // Unique block instance ID (e.g. "block_64a1b2c3")
$block['name'];      // Block name (e.g. "acf/card")
$block['align'];     // Alignment ("wide", "full", "center", etc.)
$block['className']; // Additional CSS classes from the editor
$block['anchor'];    // HTML anchor/ID from the block sidebar