You might have noticed my comment section looks a little.. blocky..
After my WordCamp Europe talk in Berlin about the block list module, I decided to polish up my examples some more and deploy to production.
How Does it Work?
It uses the
<BlockList> component from Gutenberg to list blocks, with some wrapper components. This is then packaged up into a React component and wrapped in a friendly helper function, allowing me to replace any HTML input, with a basic block editor
Are There Any Issues?
Yes and no, use the latest version of the Gutenberg plugin for best results. Otherwise keep a close eye on clashes between editor UI CSS and theme CSS. If you need to add any styling to the editor to fix things, report it in the Gutenberg GitHub issues so that it’s fixed for everybody.
I Installed it On My Website And Now Everybody’s Dead
This isn’t on the wordpress.org plugins section yet as it’s more beta than GM/RC/finished. Take it as inspiration to learn and apply the lessons elsewhere.
How Do Images Work? What About Other Blocks?
If you scroll down and try out an image block, you’ll notice uploading isn’t an option, but using a URL is. I’ve included a whitelist of core blocks, but keep in mind that the plugin doesn’t change how WP processes comments, you are still restricted to the markup allowed in comments. So if you added a new block to the whitelist that used script tags, they’d be stripped out by WordPress on submission
What License is This Under?
I’ve chosen the GPL v2, the same as WordPress and the Gutenberg project.
Feel free to test out the comments below