I'm attempting to put together a variable/mixed content carousel block. I'm having issues trying to figure out how to create/delete individual slides in the carousel (using something like rangecontrol).

So far I have this:

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>
        );
    },
} );

So I'm not entirely sure what I need to allow for creating/deleting the slides via the range. If someone could offer me a rough solution and/or point me at some documentation I'd appreciate it.

I'm attempting to put together a variable/mixed content carousel block. I'm having issues trying to figure out how to create/delete individual slides in the carousel (using something like rangecontrol).

So far I have this:

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>
        );
    },
} );

So I'm not entirely sure what I need to allow for creating/deleting the slides via the range. If someone could offer me a rough solution and/or point me at some documentation I'd appreciate it.

• plugin-development
• javascript
• block-editor

Share Improve this question asked Aug 9, 2019 at 18:01 jshwlkrjshwlkr 54411 gold badge66 silver badges2424 bronze badges 1

• 1 While i will try and answer this tomorrow (if nobody beats me to it), you should really reconsider if you want to build a slider where you have to enter the number of slides instead of just giving the user the opportunity to add slides as they go (e.g. with a "placeholder" slide that can be clicked to add another slide to the slider). – HU is Sebastian Commented Aug 12, 2019 at 15:31

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 4 +100

The code from core/columns and core/column blocks are a good example of how to achieve this behaviour. Basically we register 2 block types: Carousel and Slide.

• Slide block type does not appear in the inserter.
• Carousel block type is the root block which appears in the inserter. Instead of keeping the count of slides in an attribute we listen to getBlocks selector. We use the replaceInnerBlocks action to update the number of slides.

If you need further explanation please let me know.

const { times } = lodash;
const { __ } = wp.i18n;
const { registerBlockType, createBlock } = wp.blocks;
const { PanelBody, RangeControl } = wpponents;
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>
        );
    }
});

Something like this...

Creating slides elements

const slides = [];

for ( let i = 0; i < attributes.count; i ++ ) {
    slides.push(
        <li className="slide" key={'slide-' + i}>
            <img src='img-url.jpg'/>
        </li>
    );
}

Adding slides to block content

<ul classname="slides">{slides}</ul>

You can use any elements per slides...

And similarly add add additional fields for slide image and stuff if you like and later put them inside InspectorControls element instead of ul like we did for slides.