Gatsby + Wordpress reparser

ParseHTML.js

import React from 'react';
import ReactHtmlParser, { processNodes } from 'react-html-parser';
import generatePropsFromAttributes from 'react-html-parser/lib/utils/generatePropsFromAttributes';

import ModuleName from 'mymodules/ModuleName';

// This module lowercases tags, why?
const overrideComponents = {
  modulename: ModuleName,
}

const transform = (node, index) => {
  if (node.type === 'tag' && overrideComponents[node.name]) {
    return React.createElement(
      overrideComponents[node.name],
      generatePropsFromAttributes(node.attribs, index),
      processNodes(node.children, transform)
    )
  }
}

const ParseHTML = html => ReactHtmlParser(html, { transform });

export default ParseHTML;

wordpress_page.jsx

// Gatsby Wordpress page template
import ParseHTML from './ParseHTML';

// ... 

{ ParseHTML(content) }

// ...

wordpress_plugin.js

import ModuleName from 'mymodules/ModuleName';

const dynamicBlocks = {
    'ModuleName': {
        title: 'Module Name',
        component: () => <ModuleName />,
        componentName: 'ModuleName',
    }
}
Object.keys(dynamicBlocks).map(k =>
    wp.blocks.registerBlockType(k, {
        icon: 'shield',
        category: 'common',
        keywords: [],
        edit: dynamicBlocks[k].component,
        save: () => React.createElement(dynamicBlocks[k].componentName),
        title: dynamicBlocks[k].title,
    })
);