Support

Account

Register Login

Home › Forums › Gutenberg › Is there any way to style the container for InnerBlocks?

Solving

Is there any way to style the container for InnerBlocks?

  • I’ve been beating my head against a wall on this for hours now, and it doesn’t seem like there’s any way to even get information about the parent HTML elements of a block. In the editor the HTML of the blocks is altered by WordPress to wrap them with several divs, starting with one that has data-block=”3a7e3cae-b677-4f71-9567-727e61368f09″ (or similar) – this is what I need access to. I understand that the value there is called the clientID, but I can find no way to get access to it in my block (else I could output a style tag with a [data-block] selector using that value). I also can’t find any way to directly add inline styles to that element or modify it’s HTML.

    I cannot believe this is impossible, it seems like a basic necessity for having the front and backend styles match when any sort of layout is involved.

  • 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.

  • Ok, I’ve run into another issue with this and really think there needs to be an official way to do this. Not only is there no way to add styles to the actual block element, there’s also no way to add classes. The end result of this is that when working with inner blocks you effectively cannot make the frontend and backend match.

    I’d expect to have to use some different styles on the backend to support editing, but as is you effectively have to style everything twice, and if you have dynamically added classes those are completely impossible to style correctly.

    We need some mechanism of adding styles and classes (possibly other attributes) to the .wp-block element for our blocks using the values from get_field().

  • Is there any solution yet? I’m trying to set up a Bootstrap Container with multiple Columns. I’m not able to get the styling right in FE and BE.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.