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

0 Answered Questions

Gutenberg extending the existing class

  • 2019-01-02 08:59:02
  • jogesh_pi
  • 45 View
  • 0 Score
  • 0 Answer
  • Tags:   block-editor

1 Answered Questions

[SOLVED] Access GutenBerg data with Javascript?

  • 2019-01-01 23:13:16
  • T.Todua
  • 36 View
  • 2 Score
  • 1 Answer
  • Tags:   block-editor

0 Answered Questions

Adding Class to Default Wordpress Gutenberg Blocks?

  • 2018-12-10 20:49:20
  • user9664977
  • 24 View
  • 1 Score
  • 0 Answer
  • Tags:   block-editor

0 Answered Questions

Modifying the Gutenberg Button Block

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

1 Answered Questions

[SOLVED] Add To Gutenberg Sidebar

  • 2018-05-14 19:48:58
  • Alex Standiford
  • 757 View
  • 8 Score
  • 1 Answer
  • Tags:   block-editor

1 Answered Questions

1 Answered Questions

[SOLVED] Validation error: Extending Gutenberg gallery block

0 Answered Questions

Gutenberg: Dynamic rendering of RichText

  • 2018-06-18 09:06:18
  • kater louis
  • 83 View
  • 1 Score
  • 0 Answer
  • Tags:   block-editor

0 Answered Questions

Gutenberg: @element queries

  • 2018-04-20 09:58:19
  • Iadi
  • 74 View
  • 0 Score
  • 0 Answer
  • Tags:   block-editor

2 Answered Questions

[SOLVED] Gutenberg Inspector Controls

  • 2018-03-20 14:05:14
  • Danny Cooper
  • 2465 View
  • 4 Score
  • 2 Answer
  • Tags:   block-editor

Sponsored Content