I'm trying the create a custom carousel block and I would like to have the same functionality that the gallery core block.

When I chose the images for the first time, everything works fine, but when I try to add extra images it actually wipes off the first ones and substitutes for the latest chosen ones.

export const carouselBlock = (
registerBlockType('gutenberg/custom-carousel', {
    title: 'Carousel',
    description: 'Block to generate a custom carousel',
    icon: 'images-alt2',
    category: 'layout',

    attributes: {
        selectedImages: {
            type: 'string',
            default: {},
        }
    },

    edit({ attributes, setAttributes}){
        const { selectedImages } = attributes;

        function onSelectImages(media) {
            const imagesUrl = values({...media}).map((item, i) => {
                return ({id: item.id, url:item.url});
            })
            setAttributes({ selectedImages: (values({...imagesUrl})) });
        }

        return (
            <div>
                {selectedImages.length > 0 &&
                    <figure className='wp-block-gallery columns-3'>
                        <ul className="blocks-gallery-grid">
                            {selectedImages.map((image, i) => {
                                return (
                                    <li key={i} className='blocks-gallery-item'>
                                        <figure>
                                            <img 
                                                src={image.url}
                                            />
                                        </figure>
                                    </li>
                                )
                            })}
                        </ul>
                    </figure>
                }
                <div className='carousel-block'>
                    <MediaUploadCheck>
                        <MediaUpload
                            onSelect={(media) => onSelectImages(media)}
                            // value={media => selectedImages.push(media)}
                            multiple={'add'}
                            render={ ( { open } ) => (
                                <IconButton 
                                    onClick={open}
                                    icon="upload"
                                    className="editor-media-placeholder__button is-button is-default is-large"
                                >
                                    Open Media Library
                                </IconButton>
                            ) }
                        />
                    </MediaUploadCheck>
                </div>
            </div>
        );
    },
    save({attributes}){
        const { selectedImages } = attributes;

        return (
            <div>
                {selectedImages.map((image, i) => {
                    return (<p key={i}>{image}</p>)
                })}
            </div>
        )
    }

})

)

I also tried to extend the gallery like so:

but then the user won't know that the gallery also can be a carousel unless he clicks on the block.

Is there a way that I can "clone" a core block? (situation 1) Or that I can change its name? (situation 2)

Thanks in advance!

Dani

I'm trying the create a custom carousel block and I would like to have the same functionality that the gallery core block.

When I chose the images for the first time, everything works fine, but when I try to add extra images it actually wipes off the first ones and substitutes for the latest chosen ones.

export const carouselBlock = (
registerBlockType('gutenberg/custom-carousel', {
    title: 'Carousel',
    description: 'Block to generate a custom carousel',
    icon: 'images-alt2',
    category: 'layout',

    attributes: {
        selectedImages: {
            type: 'string',
            default: {},
        }
    },

    edit({ attributes, setAttributes}){
        const { selectedImages } = attributes;

        function onSelectImages(media) {
            const imagesUrl = values({...media}).map((item, i) => {
                return ({id: item.id, url:item.url});
            })
            setAttributes({ selectedImages: (values({...imagesUrl})) });
        }

        return (
            <div>
                {selectedImages.length > 0 &&
                    <figure className='wp-block-gallery columns-3'>
                        <ul className="blocks-gallery-grid">
                            {selectedImages.map((image, i) => {
                                return (
                                    <li key={i} className='blocks-gallery-item'>
                                        <figure>
                                            <img 
                                                src={image.url}
                                            />
                                        </figure>
                                    </li>
                                )
                            })}
                        </ul>
                    </figure>
                }
                <div className='carousel-block'>
                    <MediaUploadCheck>
                        <MediaUpload
                            onSelect={(media) => onSelectImages(media)}
                            // value={media => selectedImages.push(media)}
                            multiple={'add'}
                            render={ ( { open } ) => (
                                <IconButton 
                                    onClick={open}
                                    icon="upload"
                                    className="editor-media-placeholder__button is-button is-default is-large"
                                >
                                    Open Media Library
                                </IconButton>
                            ) }
                        />
                    </MediaUploadCheck>
                </div>
            </div>
        );
    },
    save({attributes}){
        const { selectedImages } = attributes;

        return (
            <div>
                {selectedImages.map((image, i) => {
                    return (<p key={i}>{image}</p>)
                })}
            </div>
        )
    }

})

)

I also tried to extend the gallery like so:

but then the user won't know that the gallery also can be a carousel unless he clicks on the block.

Is there a way that I can "clone" a core block? (situation 1) Or that I can change its name? (situation 2)

Thanks in advance!

Dani

• custom-post-types
• block-editor

Share Improve this question asked Feb 26, 2020 at 12:48 danihazlerdanihazler 13977 bronze badges 4

• Would it be useful to add a style to the gallery block instead? I also wouldn't use gutenberg as your blocks namespace. Also, you declare that the selectedImages attribute is a string, but then iterate over it as an array

  发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744714301a4589524.html