0

Basically I'm working on a custom gutenberg block that utilizes the InnerBlocks component to generate a slider based on any blocks entered.

So my save.js looks like this

import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

export default function save({ attributes }) {
    return (
        <section {...useBlockProps.save()}>
            <div className="swiper">
                <div className="swiper-wrapper">
                    <InnerBlocks.Content />
                </div>
            </div>
        </section>
    );
}

This works to save and display the innerblocks content, but what I want to do is wrap each of the Inner Blocks in a wrapper div, so on the front-end they will all output with something like <div class="wrapper">{the block}</div>

I have been focusing on using the render_block hook to try and accomplish this, although I'm not sure if this works for InnerBlocks content. I have tried to target the innerHTML, the innerContent, and the attributes of the inner blocks, here's one example trying to target the attrs and add to the className value.

function gsslider_block_wrapper($block_content, $block)
{
//check my custom block
    if ($block['blockName'] === 'create-block/gutenberg-swiper-slider') {
//loop through innerBlocks of my custom block
        foreach ($block['innerBlocks'] as &$innerblock) {
            $attrs = $innerblock['attrs']['className'];
            $innerblock['attrs']['className'] =  $attrs . ' swiper-slide';
        }
        unset($innerblock);
        return $block_content;
    }
    return $block_content;
}

add_filter('render_block', 'gsslider_block_wrapper', 10, 2);

This is placed in the base php file of my custom block plugin. It's definitely running, as I'm getting output when I error_log within it, but it's not translating to the front-end. I'm not sure if I'm writing my render_block hook incorrectly, or if my entire approach is misguided. I haven't been able to find much info on this in my googling.

Any help would be greatly appreciated!

2
  • 1
    Typically how I've done this is to create a custom inner block for a slide that can contain inner blocks. That slide block adds the necessary wrapper. Commented May 6 at 7:25
  • @JacobPeattie yeah I guess that's the only clean way to do this. It feels like overkill to create a whole extra custom block just to wrap content in a div, but the render_block workaround seems like a disaster waiting to happen
    – itsseanl
    Commented May 6 at 21:39

1 Answer 1

0

Ok so I don't feel very good about this solution, but - using the render_block hook:

  1. conditional to find the custom block
  2. set the $block_content variable = ''; to clear it (or if you want to nest something inside tags, you can try to explode $block_content)
  3. loop through each child block and pull out the innerHTML, append to the $block_content variable and return that
function gss_block_wrapper($block_content, $block)
{
        if ($block['blockName'] === 'create-block/gutenberg-swiper-slider') {
            $block_content = '';
            foreach ($block['innerBlocks'] as $innerblock) {
                $innerHTML = $innerblock['innerHTML'];
                //innerHTML of each child block
                $content = '<div class="swiper-slide">' .  $innerHTML . '</div>';
                $block_content .= $content;
            }
        }
    return $block_content;
}

add_filter('render_block', 'gss_block_wrapper', 10, 2);

Maybe I'm just not doing gutenberg right, but it feels like the InnerBlocks component could do with a built-in way to wrap child blocks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.