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 see that the data attribute "data-align" is added to the block editor's wrapper ponent with a value of either "full" or "wide".

I'm trying to create a custom block that has a similar features as the above. But I'm having a hard time figuring out how to add that custom attribute to my ponent's block editor wrapper.

Some things that I've tried are:

Using the block filter editor.BlockListBlock but the most I could do with this with my own knowledge is adjust the props, and the className. Adding a data-align="full" just meant adding a prop called data-alignment here.

I also tried doing this with jQuery. Even if this worked, I definitely didn't want to use it as a permanent solution, I just wanted to see if it would work. So I added an on('click') event to one of my buttons so that it would target the wrapper ponent and modify the node, but that didn't work either. Probably because the block element is a dynamic element, it couldn't even be selected.

This is the wrapper that I'm trying to add a custom attribute to,

<div id="block-388288fa-ff20-459e-bce7-543b94fd77c4" class="wp-block editor-block-list__block block-editor-block-list__block is-selected" data-type="cgb/block-ee-hero-slider" tabindex="0" aria-label="Block: Hero Slider">

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 see that the data attribute "data-align" is added to the block editor's wrapper ponent with a value of either "full" or "wide".

I'm trying to create a custom block that has a similar features as the above. But I'm having a hard time figuring out how to add that custom attribute to my ponent's block editor wrapper.

Some things that I've tried are:

Using the block filter editor.BlockListBlock but the most I could do with this with my own knowledge is adjust the props, and the className. Adding a data-align="full" just meant adding a prop called data-alignment here.

https://developer.wordpress/block-editor/developers/filters/block-filters/#editor-blocklistblock

I also tried doing this with jQuery. Even if this worked, I definitely didn't want to use it as a permanent solution, I just wanted to see if it would work. So I added an on('click') event to one of my buttons so that it would target the wrapper ponent and modify the node, but that didn't work either. Probably because the block element is a dynamic element, it couldn't even be selected.

This is the wrapper that I'm trying to add a custom attribute to,

<div id="block-388288fa-ff20-459e-bce7-543b94fd77c4" class="wp-block editor-block-list__block block-editor-block-list__block is-selected" data-type="cgb/block-ee-hero-slider" tabindex="0" aria-label="Block: Hero Slider">

• javascript
• wordpress
• reactjs

• Do you define your own block or do you only have access to the block settings through filters? – Gchtr Commented Jun 11, 2019 at 7:19

1 Answer 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: 'mon',
  icon: 'admin-appearance',

  /**
   * Sets alignment.
   *
   * @param attributes
   * @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().

function FullAlign(BlockListBlock) {
  return props => {
    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
);