Hi everyone
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:
- Create a package for that processor:
@frontity/prism-code-blocks
. - Add that processor and similar ones to the upcoming
@frontity/gutenberg
package. - 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