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]) : [];
}