Media & Text: Provide a way to transform into both image & paragraph

[melchoyce]

Sometimes when I'm trying out different layouts in a page, I'll try out a media & text block, and then realize it might just be better as an image and a paragraph underneath. You can transform media & text into an image, but not into an image and a paragraph. In order to make a paragraph, you need to copy and paste the text from the media & text block into a new paragraph block, then transform the block

Likewise, it would be great to be able to do the opposite — highlight and image and paragraph block, and transform into a media & text block.

[karmatosed]

I agree this makes sense as a transformation. To me, this feels like it may not need design but just be something happens? @youknowriad looping you in to see if this doesn't need design as much as can be done in transforming?

[youknowriad]

I think it makes sense too. I know we had limitations due to InnerBlocks not available in transforms at some point but this might be solved now.

[paaljoachim]

What if the Media & Text block consisted of an nested image and paragraph blocks. If one wanted to separate them one could drag the image or paragraph out from the nested area to become full single blocks.

[Mamaduka]

While this is technically possible, "Transforms To" doesn't support wildcard transformations. It will require a unique menu item when the blocks param is set to wildcard.

The wildcard support for "Transforms To" can be a nice addition to the new convert API.

This is a simplified example where I used core/paragraph as a hack to display transformation in the menu.

{
    type: 'block',
    blocks: [ 'core/paragraph' ], // No menu items is displayed when using `*`.
    isMatch: ( { mediaType, mediaUrl } ) => {
        return ! mediaUrl || mediaType === 'image';
    },
    transform: (
        { mediaAlt, mediaId, mediaUrl, anchor },
        innerBlocks
    ) => {
        return [
            createBlock( 'core/image', {
                alt: mediaAlt,
                id: mediaId,
                url: mediaUrl,
                anchor,
            } ),
            ...innerBlocks,
        ];
    },
}