By fefe


2019-01-06 17:34:31 8 Comments

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?

1 comments

@T.Todua 2019-01-09 14:38:52

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.

@fefe 2019-01-13 20:57:53

I made a custom gallery block based on the source code, but taking a consideration the effort I would say it is bit too much. Would be great to can modify some markup attributes on the flow of the core blocks.

Related Questions

Sponsored Content

1 Answered Questions

2 Answered Questions

[SOLVED] Gutenberg get block name

  • 2019-03-02 19:40:26
  • CyberJ
  • 40 View
  • 1 Score
  • 2 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Wordpress-gutenberg - Block validation: Expected text

0 Answered Questions

change font in gutenberg

  • 2019-02-28 19:34:08
  • kosher
  • 19 View
  • 0 Score
  • 0 Answer
  • Tags:   block-editor

0 Answered Questions

srcset attribute in Gutenberg gallery blocks

  • 2019-02-19 17:13:57
  • aitor
  • 36 View
  • 2 Score
  • 0 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] gutenberg attributes

  • 2019-02-15 17:24:41
  • honk31
  • 34 View
  • 0 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Gutenberg MediaUpload component with default gallery functionality?

1 Answered Questions

[SOLVED] How to check if post has Video or Gallery block in Gutenberg blocks?

  • 2019-01-15 12:53:35
  • Uń£is
  • 69 View
  • 1 Score
  • 1 Answer
  • Tags:   block-editor

0 Answered Questions

Modify the core/paragraph block

  • 2019-01-06 15:05:36
  • Michael
  • 133 View
  • 2 Score
  • 0 Answer
  • Tags:   block-editor

0 Answered Questions

Modifying the Gutenberg Button Block

  • 2018-12-02 14:26:13
  • Moshe
  • 168 View
  • 2 Score
  • 0 Answer
  • Tags:   block-editor

Sponsored Content