blocks/expanded_editor_overlay_class

---

• Description
• Parameters
• Example
• Add a custom class to the overlay
• Apply different classes based on block name
• Replace the class entirely
• Changelog
• Notes

---

Customize the CSS class on the Expanded Editor modal overlay.

Description

This JavaScript filter allows you to modify the CSS class applied to the Expanded Editor modal overlay in ACF Blocks V3. This is useful for applying custom styling to the overlay.

Parameters

acf.addFilter( 'blocks/expanded_editor_overlay_class', function( className, block ) {
    return className;
});

className (string) The CSS class name for the overlay. Default: 'acf-expanded-editor-overlay'

block (object) The block object containing block data and attributes.

Example

Add a custom class to the overlay

acf.addFilter( 'blocks/expanded_editor_overlay_class', function( className, block ) {
    return className + ' my-custom-overlay';
});

Apply different classes based on block name

acf.addFilter( 'blocks/expanded_editor_overlay_class', function( className, block ) {
    if ( block.name === 'acf/hero' ) {
        return className + ' hero-overlay';
    }
    return className;
});

Replace the class entirely

acf.addFilter( 'blocks/expanded_editor_overlay_class', function( className, block ) {
    return 'my-overlay-class';
});

Changelog

• Added in version 6.8

Notes

• This is a JavaScript filter, not a PHP filter
• Use acf.addFilter() to register the filter in your block editor scripts
• The filter runs when the Expanded Editor modal is opened
• This filter only applies to ACF Blocks V3