How to share Html2React processors

Hi everyone :slightly_smiling_face:

I’d like to start a conversation about the best way to share Gutenberg processors between Frontity projects.

@mmczaplinski did a PR to add syntax highlighting to the Gutenberg <code> block using Prism.js:

It’s really cool and it works great, but that feature is only in our theme. No other Frontity theme can use it without copy-pasting the code in their own project.

It is in Frontity’s vision that:

  • We encourage the community to share the code they create for their projects.
  • We provide extensibility patterns and best-practices to make sharing features easy.
  • People are able to add functionalities without having to modify the code of their themes (like they do in WordPress by installing plugins).

So far we have shared some processors in the @frontity/html2react package: https://github.com/frontity/frontity/tree/dev/packages/html2react/processors

We have image and iframe that add native lazy load. I think that we should remove them at some point, because WordPress 5.5 already provides that functionality.

These processors are not included by default and it’s up to the theme to add them or not.

And we have script, which is added by default because this is more of a fix: React breaks <script> tags and that processor “fixes” them.


I think a “Syntax highlighting processor for the Gutenberg <code> block” it’s something different, something that doesn’t depend on the theme, but on the type of content you are creating in WordPress.

Ideally, a Frontity user should be able to add that functionality to its project without having to write a single line of code, just by using their frontity.settings.js file.

Possible extensibility patterns that come to my mind:

  1. Create a package for that processor: @frontity/prism-code-blocks.
  2. Add that processor and similar ones to the upcoming @frontity/gutenberg package.
  3. Add it to @frontity/html2react/processors like the existing ones.

For options 2 and 3 we could expose the processors in the settings so people can choose the ones they want. Something like this:

const settings = {
  packages: [
    {
      name: "@frontity/html2react",
      state: {
        html2react: {
          processors: {
            code: true,
          },
        },
      },
    },
  ],
};

Or even with options:

const settings = {
  packages: [
    {
      name: "@frontity/html2react",
      state: {
        html2react: {
          processors: {
            code: {
              theme: "funky",
              languages: ["javascript", "json"],
            },
          },
        },
      },
    },
  ],
};

More ideas are welcomed :smile:

4 Likes