通过范围控制创建元素/内部块

时间：2019-08-09 作者：jshwlkr

我正在尝试组合一个可变/混合内容旋转木马块。我在试图弄清楚如何在旋转木马中创建/删除单个幻灯片时遇到了一些问题（使用rangecontrol之类的工具）。

到目前为止，我有：

const ALLOWED_BLOCKS = [ \'core/paragraph\' ];
const BLOCKS_TEMPLATE = [
    [ \'core/columns\', {}, [] ],
];

registerBlockType( \'blocks/carousel\', {
    title: __( \'Carousel\' ),
    icon: \'layout\',
    attributes: {
        count: {
            type: \'number\',
        },

    },

    edit( { attributes, setAttributes, className } ) {

        const onChangeCount = value => {
            setAttributes( { count: value } );
        };

        return [
            <InspectorControls key="controls">
                <PanelBody>
                    <RangeControl
                        label={ __( \'Slides\' ) }
                        value={ attributes.count }
                        onChange={ onChangeCount }
                        min={ 2 }
                        max={ 6 }
                    />
                </PanelBody>
            </InspectorControls>,
            <div className={ className } key="content">
                <InnerBlocks
                    template={ BLOCKS_TEMPLATE }
                    allowedBlocks={ ALLOWED_BLOCKS }
                    templateLock="all"
                />
            </div>,
        ];
    },

    save( { attributes } ) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },
} );
因此，我不完全确定通过范围创建/删除幻灯片需要什么。如果有人能给我提供一个粗略的解决方案和/或指向我一些文档，我将不胜感激。

2 个回复
最合适的回答,由SO网友:Alvaro 整理而成

代码来自core/columns 和core/column 块是如何实现此行为的一个很好的示例。基本上我们注册了两种块类型：旋转木马和幻灯片。

  • Slide 插入器中不显示块类型
  • Carousel 块类型是插入器中显示的根块。我们听的是getBlocks选择器，而不是在属性中保留幻灯片数。我们使用replaceInnerBlocks操作来更新幻灯片的数量

    const { times } = lodash;
const { __ } = wp.i18n;
const { registerBlockType, createBlock } = wp.blocks;
const { PanelBody, RangeControl } = wp.components;
const { InnerBlocks, InspectorControls } = wp.blockEditor;
const { useDispatch, useSelect } = wp.data;
const { Fragment } = wp.element;

registerBlockType("my-plugin/slide", {
    title: __("Slide"),
    icon: "carrot",
    category: "common",
    attributes: {},
    supports: { inserter: false },
    edit(props) {
        const { className } = props;

        return (
            <div className={className}>
                <InnerBlocks
                    allowedBlocks={["core/quote", "core/gallery"]}
                    templateLock={false}
                />
            </div>
        );
    },
    save(props) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    }
});

registerBlockType("my-plugin/carousel", {
    title: __("Carousel"),
    icon: "layout",
    category: "common",
    attributes: {},
    edit(props) {
        const { className, clientId } = props;
        const { replaceInnerBlocks } = useDispatch("core/block-editor");
        const { slides } = useSelect(select => ({
            slides: select("core/block-editor").getBlocks(clientId)
        }));

        return (
            <div className={className}>
                <InspectorControls>
                    <PanelBody>
                        <RangeControl
                            label={__("Slides")}
                            value={slides.length}
                            min={2}
                            max={6}
                            onChange={count => {
                                let inner_blocks = slides;

                                if (slides.length < count) {
                                    inner_blocks = [
                                        ...inner_blocks,
                                        ...times(count - slides.length, () =>
                                            createBlock("my-plugin/slide")
                                        )
                                    ];
                                } else if (slides.length > count) {
                                    inner_blocks = inner_blocks.slice(0, count);
                                }

                                replaceInnerBlocks(clientId, inner_blocks, false);
                            }}
                        />
                    </PanelBody>
                </InspectorControls>
                <InnerBlocks
                    template={[["my-plugin/slide"], ["my-plugin/slide"]]}
                    allowedBlocks={["my-plugin/slide"]}
                    templateLock="all"
                />
            </div>
        );
    },
    save(props) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    }
});

SO网友:shramee

像这样的。。。

创建幻灯片元素

const slides = [];

for ( let i = 0; i < attributes.count; i ++ ) {
    slides.push(
        <li className="slide" key={\'slide-\' + i}>
            <img src=\'img-url.jpg\'/>
        </li>
    );
}
添加幻灯片以阻止内容
<ul classname="slides">{slides}</ul>
每个幻灯片可以使用任何元素。。。

类似地，如果您愿意，可以为幻灯片图像和其他内容添加其他字段，然后将其放入其中InspectorControls 元素而不是ul 就像我们为幻灯片所做的那样。

标签： plugin-development   javascript   block-editor   小码农  

相关推荐

由于出现javascript MIME类型错误，无法加载脚本

我正在尝试让jQuery砌体插件在站点上运行。我已经更新了模板文件，以获得插件需要的适当类。然后我将脚本按如下方式排队：function masonry_scripts() { wp_enqueue_script(\'masonry\'); wp_enqueue_script( \'masonry-script\', get_template_directory_uri() . \'/assets/js/masonry-script.js\', array(), false