Reply To: Is there any way to style the container for InnerBlocks?

• KMDG

• November 19, 2021 at 4:56 pm

ok, I found a really janky way to do this, but it works. Open to ideas for improvements:

In JS you can use the blocks.registerBlockType filter to add a getEditWrapperProps function to all blocks (or just the ones you need). Ex:

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'plugin/add-acf-ids',
    function ( settings, name ) {
        return lodash.assign( {}, settings, {
            getEditWrapperProps: (props) => {
                return {'data-acfid': props.id}
            },
        });
    }
);

Then in my renderBlock function I have something like this:

$previewStyles = "";
if($isPreview) {
    $previewStyles = "<style>#editor .wp-block[data-acfid='{$acf['id']}'] {{$styles}}</style>";
    $styles = "";
}

$preBlock = $this->filter("Block/$slug/start", "<{$tag} class='aesir-builder__block {$slug} {$classes}' style='{$styles}'>\n{$previewStyles}", $block, $classes, $styles, $previewStyles, $slug, $tag, $content, $isPreview, $postID);

That’s boilerplate wrapped around all my blocks, so I provide $styles from a class that defines my block, and it gets translated into either inline styles for frontend, or a style tag for the editor.

I hate everything about this, but at least it’s kinda working.