How Do We Add Custom Data-attributes To Gutenburg's Editor.blocklistblock?

For Gutenburg's 'core/image' block, they have different alignment options, specifically two that expose 'full' and 'wide'. When you click on either one of these options, you will s

Solution 1:

I just ran into the same problem. I found two solutions.

With getEditWrapperProps()

If you define your block yourself through registerBlockType(), then you can use getEditWrapperProps to define the data-align attribute:

registerBlockType('my-fully-aligned-block', {
  title: 'My Fully Aligned Block',
  category: 'common',
  icon: 'admin-appearance',

  /**
   * Sets alignment.
   *
   * @paramattributes
   * @returns {{'data-align': *}}
   */getEditWrapperProps(attributes) {
    return {
      'data-align': 'full'
    };
  },

  edit,

  save: () =>null
});

With the editor.BlockListBlock filter

If you want to change the alignment for an existing block, you can use the editor.BlockListBlock filter that you already tried. Instead of setting the className property, like in the example in the documentation, you can pass in wrapperProps, that is going to be merged with what is defined in getEditWrapperProps().

functionFullAlign(BlockListBlock) {
  returnprops => {
    const { block } = props;

    // Bail out if it’s not the block we want to target.if ('cgb/block-ee-hero-slider' !== block.name) {
      return<BlockListBlock {...props} />;
    }

    return (
      <BlockListBlock {...props} wrapperProps={{ 'data-align': 'full' }} />
    );
  };
}

wp.hooks.addFilter(
  'editor.BlockListBlock',
  'cgb/block-ee-hero-slider',
  FullAlign
);