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

As a seasoned WordPress developer with expertise in various tech stacks and languages, I bring years of experience to every project I handle. My passion for coding and dedication to delivering exceptional work ensures that each project I take on is of the highest quality. I specialize in creating custom themes, developing plugins, and building full-scale web systems. By staying up-to-date with the latest industry trends and best practices, I incorporate cutting-edge solutions into my work.

Comments

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