如何在Slick Slider中独立渲染WordPress Gutenberg InnerBlocks

问题核心：直接使用useInnerBlocksProps().children会将所有内部区块包裹在一个默认容器div中，无法让每个区块单独成为Slick Slider的独立slide。

解决方案：手动遍历内部区块并单独渲染 #

通过useSelect钩子从Gutenberg的store中获取当前区块的内部区块列表，逐个渲染每个区块，每个区块外层包裹滑块项容器，即可实现每个内部区块对应一个slide。

修改后的完整代码如下：

import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default function Edit() {
    const blockProps = useBlockProps({ className: `customerlogos` });
    const { clientId } = blockProps;

    // 获取当前区块下的所有内部区块
    const innerBlocks = useSelect(
        (select) => select('core/block-editor').getBlocks(clientId),
        [clientId]
    );

    const settings = {
        slidesToShow: 5,
    };

    return (
        <div {...blockProps}>
            <Slider {...settings}>
                {/* 遍历每个内部区块，单独作为滑块项 */}
                {innerBlocks.map((block) => (
                    <div key={block.clientId} className="slick-slide-item">
                        <InnerBlocks.Block block={block} />
                    </div>
                ))}
            </Slider>
            {/* 保留编辑器的内部区块编辑入口 */}
            <InnerBlocks
                allowedBlocks={['core/image']} // 可选：限制仅允许添加图片区块
                templateLock={false}
            />
        </div>
    );
}

// 区块保存函数示例
export function save() {
    const blockProps = useBlockProps.save({ className: `customerlogos` });
    return (
        <div {...blockProps}>
            <div className="slick-slider-container">
                <InnerBlocks.Content />
            </div>
        </div>
    );
}

关键说明： #

1. 获取内部区块：通过useSelect从core/block-editor store中获取当前区块的内部区块数组，依赖clientId确保数据实时更新。
2. 单独渲染区块：用map遍历区块数组，每个区块用<InnerBlocks.Block />渲染，外层包裹div作为滑块项，key使用区块的clientId保证唯一性。
3. 保留编辑功能：添加<InnerBlocks />组件，让用户在编辑器中正常添加、编辑内部区块，可通过allowedBlocks限制允许的区块类型。
4. 前端渲染适配：如果需要在网站前端（非编辑器）也显示滑块，需在前端模板中同样遍历内部区块并初始化Slick Slider，或者在保存的HTML结构中直接集成Slider容器。

内容的提问来源于stack exchange，提问作者Miquel Castro