WPHTML Converter

WPHTML is a page that converts WPHTML (WordPress block markup) to its JS/JSON or PHP forms.

https://happyprime.github.io/wphtml-converter/

It parses WPHTML into JS/JSON with a direct copy of Gutenberg's (GPL 2.0 or later licensed) Block Serialization Default Parser.

What is it?

When first building a template of blocks to be used as part of a block varation or other template, it is useful to do this work in the block editor. This results in markup like:

<!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
<h1 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30)">An example headline</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>An example paragraph.</p>
<!-- /wp:paragraph -->

When adding the template to JavaScript in an innerBlocks property, it needs to be formatted like:

[
	'core/heading',
	{
		"level": 1,
		"style": {
			"spacing": {
				"margin": {
					"top": "var:preset|spacing|30"
				}
			}
		}
	},
	[]
],
[
	'core/paragraph',
	{},
	[]
],

And when adding it to PHP, it needs to be formatted like:

array(
	'core/heading',
	array(
		'level' => 1,
		'style' => array(
			'spacing' => array(
				'margin' => array(
					'top' => 'var:preset|spacing|30'
				)
			)
		)
	),
	array()
),
array(
	'core/paragraph',
	array(),
	array()
),

As your templates get more complicated, so does this translation—when done manually.

So, copy some block markup, open WPHTML Converter, paste, and click. 🕺