How can I add a wrapper class to individual blocks inside of an InnerBlocks component?

admin管理员组

文章数量:1122846

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!

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!

• block-editor

Share Improve this question asked May 6, 2024 at 2:02 itsseanlitsseanl 3344 bronze badges 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. – Jacob Peattie Commented May 6, 2024 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, 2024 at 21:39

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： How can I add a wrapper class to individual blocks inside of an InnerBlocks component