Get possible block transforms in Gutenberg block editor

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]) : [];
}
Member since January 2, 2019

Fullstack Web Developer with more than 12 years of experience in web development. Adept in all stages of advanced web development. Knowledgeable in the user interface, backend, testing, and debugging processes. Bringing forth expertise in design, installation, testing, and maintenance of web systems. Working exclusively and professionally with WordPress since 2010.

Comments

    Your email address will not be published. Required fields are marked *