admin管理员组

文章数量:1130349

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 8943 gold badges14 silver badges34 bronze badges
Add a comment  | 

1 Answer 1

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.

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 8943 gold badges14 silver badges34 bronze badges
Add a comment  | 

1 Answer 1

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.

本文标签： block editorGutenberg gallery hook errors

版权声明：本文标题：block editor - Gutenberg gallery hook errors 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/questions/1749028749a2305524.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。