{"id":311071,"date":"2020-05-19T16:52:58","date_gmt":"2020-05-19T23:52:58","guid":{"rendered":"https:\/\/css-tricks.com\/?p=311071"},"modified":"2020-05-19T19:24:26","modified_gmt":"2020-05-20T02:24:26","slug":"wordpress-block-transforms","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/wordpress-block-transforms\/","title":{"rendered":"WordPress Block Transforms"},"content":{"rendered":"\n

This has been the year of Gutenberg for us here at CSS-Tricks. In fact, that’s a goal we set<\/a> at the end of last year. We’re much further along that I thought we’d be, authoring all new<\/em> content in the block editor\u00b9<\/a>, enabling the block editor for all<\/em> content now. That means when we open most old posts, we see all the content in the “Classic” block. It looks like this:<\/p>\n\n\n\n\n\n\n\n

\"\"
A post written on CSS-Tricks before we were using the block editor. <\/figcaption><\/figure>\n\n\n\n

The entire contents of the post is in a single block, so not exactly making any use of the block editor. It’s still “visual,” like the block editor, but it’s more like the old visual editor using TinyMCE. I never used that as it kinda forcefully mangled HTML in a way I didn’t like.<\/p>\n\n\n

This is the #1 thing I was worried about<\/h3>\n\n\n

Transforming a Classic block into new blocks is as trivial as selecting the Classic block and selecting the “Convert to Blocks” option.<\/p>\n\n\n\n

\"\"
Select the option and the one block becomes many blocks.<\/figcaption><\/figure>\n\n\n\n

How does the block editor handle block-izing old content, when we tell it to do that from the “Convert to Blocks” option? What if it totally screws up content during the conversion? Will we ever<\/em> be able to switch?<\/p>\n\n\n\n

The answer: it does a pretty darn good job.<\/em> But… there are still issues. Not “bugs” but situations where we have custom HTML in our old content and it doesn’t know what to do with it \u2014 let alone how to convert it into exactly the blocks we wish it would. There is a way! <\/p>\n\n\n

Basic Block Transforms<\/h3>\n\n\n

That’s where this idea of “Block Transforms” comes in. All (well, most?) native blocks have “to” and “from” transformations. You’re probably already familiar with how it manifests in the UI. Like a paragraph can transform “to” a quote and vice versa. Here’s a super meta screenshot of this very paragraph:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Those transforms aren’t magic; they are very explicitly coded. When you register a block, you specify the transforms. Say you were registering your own custom code block. You’d want to make sure that you could transform it…<\/p>\n\n\n\n