WordPress

Get possible block transforms in Gutenberg block editor

Andrei Surdu Andrei Surdu ·

Each Gutenberg block can be transformed into another block type. For example, we can transform a paragraph into a heading and back to a paragraph again. This is a bidirectional transform that not all blocks support. Some blocks can be transformed but are not allowed to restore back.

However, this is not what I want to describe here. I’m more interested to determine how a block can be transformed. What are the possibilities…

Get possible block transforms of the currently selected block:

const selectedBlock = select('core/block-editor').getSelectedBlock();
const possibleBlockTransforms = selectedBlock ? getPossibleBlockTransformations([selectedBlock]) : [];

So possibleBlockTransforms now will be an array that may contain the supported transformations. The following screenshot shows what the data looks like for core/paragraph:

Final code:


import {select} from "@wordpress/data";
import {getPossibleBlockTransformations} from "@wordpress/blocks";

const getSelectedBlockTransforms = () => {
    const selectedBlock = select('core/block-editor').getSelectedBlock();
    return selectedBlock ? getPossibleBlockTransformations([selectedBlock]) : [];
}

Comments

Share your thoughts and join the conversation

Loading comments...

Leave a Comment

Your email will not be published

Comments are moderated and will appear after approval

0/2000