WordPress Tools

Gutenberg RawHTML Online Converter to PHP & JSON

28 August 2021

How to Use RawHTML Converter

The Gutenberg block API allows post templates to be specified in JS or PHP as an array of blockTypes; this is useful if you want to offer a default editor template for a certain post type you’re generating, for example:

function prosvit_register_book_post_type() {
$args = array(
'public' => true,
'label' => 'Books',
'show_in_rest' => true,
'template' => array(
array( 'core/image', array(
'align' => 'left',
) ),
array( 'core/heading', array(
'placeholder' => 'Add Author...',
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add Description...',
) ),
),
);
register_post_type( 'book', $args );
}
add_action( 'init', 'prosvit_register_book_post_type' );

Block API Templates Reference

Nevertheless, creating templates by hand using this array-based format is a cumbersome and is also prone to error with complex layouts. That is why we added this block converter, it allows converting copied block content into the array format required by the template without having to do it by hand.

The easiest way to create block templates is directly in the editor. Once you have a finalized template with the combination of different blocks, click “Copy all Content”, which will result in RawHtml like this:

<!-- wp:group {"style":{"color":{"background":"#0c3f55"}},"className":"custom-group-class"} -->
<div class="wp-block-group custom-group-class has-background" style="background-color:#0c3f55"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-color" style="color:#ffffff">Column 1 </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-color" style="color:#ffffff">Column 2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-color" style="color:#ffffff">Column 3</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Paste the resulting content in the converter and select the desired format ( PHP or JSON ) you need it to be converted to.

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We would be happy to revise the snippet if you report otherwise (please provide screenshots).

Leave a Reply

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

Some of Our Clients

Join clients who enjoy 96% satisfaction

Schedule a Free Strategy Call with a WordPress Expert