p5.js Block

I’ve long been experimenting with p5.js and Processing. Using it to connect to the WordPress REST API has been fun and educational. With the introduction of blocks into WordPress 5.0 as part of the new block editor (Gutenberg), I thought it would be fun to create a block that handled and rendered p5.js code.

Problem

For people creating generative art or data visualizations, displaying these on one’s own website is difficult. You need to import the libraries, hope your platform allows you to render JavaScript on the front-end, etc. Most people opt to share their projects on a 3rd party platform/site. Unfortunately it’s not your own site.

Process

This block could help pave the way for other languages that want to render code on the front-end. While I’ve got a working prototype, it still needs to be optimized.

Solution

Creating a block for WordPress is by far the best solution. At this point in time, WordPress runs about 33% of the web. It’s a natural solution for people wanting their own site and hosting their own content. This block will make it easy for users to add their creations to their pages or posts.