block editor - Gutenberg gallery hook errors

I try to modify the gallery block of Gutenberg and I use the following snippet

export function defaultColumnsNumber( attributes ) {
    console.log(attributes.images.length)
    return Math.min( 3, attributes.images.length );
}

function modifyGalleryMarkup( element, blockType, attributes ) {

    if ( blockType.name !== 'core/gallery' ) {
        return element;
    }

    const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;

    console.log(attributes)
    var newElement = wp.element.createElement(
        'ul',
        {
            'className': `lightbox columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }`,
        },
        attributes.images.map(
            function( image ) {
                return wp.element.createElement(
                    'li',
                    {
                        'className': 'blocks-gallery-item my-gallery-item',
                    },
                    wp.element.createElement(
                        'img',
                        {
                            'src': image.url,
                        }
                    )
                )
            }
        )
    )

    return newElement
}

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'plugin/modify-gallery',
    modifyGalleryMarkup
);

I can save it but on page reload I get the following error in console

Block validation failed for `core/gallery`

Expected:

<ul class="lightbox columns-0 is-cropped"></ul>

Actual:

<ul class="lightbox columns-3 is-cropped">< ....

what I'm missing in my snippet?

I try to modify the gallery block of Gutenberg and I use the following snippet

export function defaultColumnsNumber( attributes ) {
    console.log(attributes.images.length)
    return Math.min( 3, attributes.images.length );
}

function modifyGalleryMarkup( element, blockType, attributes ) {

    if ( blockType.name !== 'core/gallery' ) {
        return element;
    }

    const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;

    console.log(attributes)
    var newElement = wp.element.createElement(
        'ul',
        {
            'className': `lightbox columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }`,
        },
        attributes.images.map(
            function( image ) {
                return wp.element.createElement(
                    'li',
                    {
                        'className': 'blocks-gallery-item my-gallery-item',
                    },
                    wp.element.createElement(
                        'img',
                        {
                            'src': image.url,
                        }
                    )
                )
            }
        )
    )

    return newElement
}

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'plugin/modify-gallery',
    modifyGalleryMarkup
);

I can save it but on page reload I get the following error in console

Block validation failed for `core/gallery`

Expected:

<ul class="lightbox columns-0 is-cropped"></ul>

Actual:

<ul class="lightbox columns-3 is-cropped">< ....

what I'm missing in my snippet?

• hooks
• block-editor

Share Improve this question asked Jan 6, 2019 at 17:34 fefefefe 89433 gold badges1414 silver badges3434 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Seems that when you modify the existing block's HTML, then it is no longer being validated. Instead, you might try to create your own block. Look here is a good approach and here too.