Block Data Attribute

FAQ

How do I add a data attribute to a block?

1. Open a page or post in the block editor.
2. Select a supported block (e.g. a Paragraph or Button block).
3. Open the block settings sidebar by clicking the ⚙ Settings icon in the top-right toolbar.
4. Scroll down to the Block Data Attribute panel and expand it.
5. Fill in the Name and Value fields. The name will automatically be prefixed with data- in the saved HTML.
6. Click + Add attribute to add more pairs as needed.
7. Save or publish your post.

What does the saved HTML look like?

A paragraph block with a data-highlight="true" attribute would produce:

<p data-highlight="true">Your content here.</p>

Which blocks are supported?

By default: core/button, core/column, core/columns, core/group, core/heading, and core/paragraph.

Can I add support for other blocks?

Yes. Use the mypreview.blockDataAttributeAllowedBlocks JavaScript filter:

wp.hooks.addFilter(
    'mypreview.blockDataAttributeAllowedBlocks',
    'my-plugin/extend-allowed-blocks',
    ( allowedBlocks ) => [ ...allowedBlocks, 'core/image', 'core/list' ]
);

Will adding attributes break my blocks?

No. Attributes are stored as part of the block’s serialised markup. The plugin uses the blocks.getSaveContent.extraProps filter, which is the officially supported WordPress API for this purpose.

Is the plugin compatible with full-site editing (FSE)?

Yes. The plugin works in any context where the block editor is used, including the Site Editor.