How to Parse Wordpress Block to HTML

I found this package, and the implementation is not complicated.

You can install this package in any JavaScript project.

npm install @wordpress/block-serialization-default-parser --save

In your JavaScript file, you can write the code inside a function or according to your needs.

import { parse } from "@wordpress/block-serialization-default-parser";

const handleParseWordpress = raw => {
  const convertedTag = parse(raw.trim());
  return convertedTag;
};

This is the raw data that I will convert:

<!-- wp:page/subheading --><h2>How to Parse Wordpress Block to HTML</h2><!-- /wp:page/subheading --><!-- wp:paragraph --><p>Learn how to parse wordpress content block to html tag using this library</p><!-- /wp:paragraph -->

The result:

[
  {
    "blockName": "page/subheading",
    "attrs": {},
    "innerBlocks": [],
    "innerHTML": "<h2>How to Parse Wordpress Block to HTML</h2>",
    "innerContent": ["<h2>How to Parse Wordpress Block to HTML</h2>"]
  },
  {
    "blockName": "core/paragraph",
    "attrs": {},
    "innerBlocks": [],
    "innerHTML": "<p>Learn how to parse wordpress content block to html tag using this library</p>",
    "innerContent": [
      "<p>Learn how to parse wordpress content block to html tag using this library</p>"
    ]
  }
]

That’s it. Hope this helps, and see you in the next post!