Cass-E Design

Design, Experiments, Games, Resources

p5.js WordPress Legacy Update

Someone contacted me recently about the p5.js WordPress Plugin I created for this site, and I've started looking into a rework that's both Gutenberg friendly & supports more features. In the meantime, I've decided to update and publish the current version of my plugin under the title 'p5js-wp-legacy'.

To recap, this plugin creates a Shortcode, [p5jswp]. This shortcode allows users to embed a p5.js script safely alongside other content, using an iframe like the p5.js web editor. Included with the plugin is a copy of p5.js. Other libraries can be included per p5.js sketch via the shortcode.

The plugin is currently available on GitHub, under GPL v2 or later. Once I've tested it and I'm fully comfortable it's in a release state I'll upload it to the Plugin Directory.

Updates

Somehow last time I did this, I missed out on the srcdoc attribute, which explicitly exists to let you specify the content of an iframe on the server/parent side. Just about every browser supports it besides Internet Explorer, which means all the browsers - and maybe more - that p5.js supports.

Data on support for the iframe-srcdoc feature across the major browsers from caniuse.com

So I've dropped the complicated iframe-isolation-url-passing-stuff I was doing before in favour of the srcdoc attribute, and been able to add a few more features. This is far from everything I could want, but it's significantly better than it was before.

New Features

For an in-depth description of features & usage guide, check the GitHub. I'm updating the documentation and changelog there as the plugin evolves. This is a description of how I've made certain features work rather than a usage guide.

Inline JavaScript

Inline JavaScript has been tricky, but it's feature I consider largely necessary for using something as convenient as p5.js with WordPress. There were two barriers in the way, but they solved eachother.

  • The content of the attributes of a shortcode is stored as HTML instead of plaintext. Any multiline attribute contains <br> and <p> tags.
    • The only way to strip this out, short of parsing the JavaScript, is to strip all <br> and <p> tags, even any that might be there intentionally.
  • WordPress (WP) doesn't like special characters, so all the special characters have to be encoded.
    • WP will encode any unencoded content on save. But if WP has to do so, it will unencode "s, which will break Shortcode parsing.
    • Browsers don't support HTML Entities as valid JavaScript characters.

Helpfully, the iframe will decode HTML entities naturally when it interprets the srcdoc attribute. And because everything is encoded in the editor, the only raw HTML present on the server side is created by WordPress and can safely be stripped out.

I'd still like not to require the user encoding their scripts manually / in the editor, but ironically it might make things harder.

Other New Features

  • Inline CSS Inline CSS for the interior of the iframe, much like Inline Javascript.
  • Libraries Include multiple JavaScript libraries via URL in the head.
  • Manual Width/Height Specify the HTML width/height attributes.

Other Classic Features

  • Not Inline JavaScript: JavaScript file(s) can be included in the body via URL via the script attribute.
  • Caption: The p5.js script is placed inside a figure, so this attribute specifies a caption. Supports HTML.

You can find more usage information on the GitHub page. You can find my original post about the plugin here.

Go forth and make p5.js wordpress content!

Other fun stuff!

Autoptimize Compatibility: When first released, I found a "bug" that Autoptimize stole CSS/JS out of iframe srcdocs. See issue #356 on the Autoptimize GitHub. I've updated the plugin with the recommended workaround, so it should be compatible with Autoptimize.

Upload Directory Fix WordPress Plugin

So around a week ago, every image on my site broke.

TL;DR

This plugin should allow you to hardcode your upload directory in the event that the UPLOADS constant doesn't work. This is a quick, and incredibly dirty fix. You can find it on github:

Fix-uploads-dir on github
(Sidenote: this is the Github Embed plugin by Lee Willis in action!)

Backstory

WordPress, by default, uses /wp-content/uploads for uploads, usually images. You can customize this and other directories using PHP constants, usually set in wp-config.php. WordPress briefly documents these constants here.

I use the UPLOADS constant to put my uploads in /media instead because I like it more. Until about a week ago.

I'm not sure if it was a wordpress update, a plugin, or a change with my hosting behind the scenes. I was working on developing a plugin at the time, I suspected that I'd just broken something. I tried disabling 99% of my plugins, with no dice. I triple checked the database. Etcetera. For one reason or another, wordpress started ignoring the UPLOADS constant.

Fix Uploads Dir uses the WordPress filter upload_dir to manually ater the url WordPress fetches for attachments. It's messy and far from perfect, but functional for me. I've also created a basic settings page (an act that took twice the code of the original plugin) to allow you to configure it without just hardcoding.

I guiltily hope that this has ever been an issue for someone else, so that this proves useful. I know there were approximately 0 helpful results when I started looking into this. And it'd be neat to be that helpful person once.

p5.js WordPress Plugin

Update March 2021: I polished and published the plugin. Find out more here: p5.js WordPress Legacy Update or head straight to the GitHub.

This custom plugin allows me to embed p5.js projects in my WordPress posts/pages using a shortcode!

I use it in posts like AnAbstractHug, Pixel Summer Storm, and more!

As always if you're interested in one of my plugins, please contact me! I haven't released this officially yet because the code is unpolished, but if you're interested I can give it another pass!

The Grand Story

I started trying with a plugin called ProcessingJS for WordPress by Rolf van Gelder - Which was for ProcessingJS and not p5js! p5js scripts seem to require a blank document, with p5js and the script placed in the header.

My answer was an iframe, which lets you embed a mini-webpage into another page - this way, multiple p5js scripts can be added to posts!

I couldn't find a way to specify the contents of an iframe in-line in php, because iframes embed pre-existing content. I created a php template file for all p5js scripts called p5js-iframe.php for this.

Because the iframe was an independent document, I couldn't tell it directly what scripts to include, so I passed the script file locations via GET request / query string in the source url:

<!-- the iframe source url with file locations passed -->
iframe src="p5js-iframe.php?p5js=/wp-content/plugins/p5js-wp/js/p5.min.js&src=/media/AnAbstractHug.js"
<!-- the php document translating those into script embeds -->
<script type="text/javascript" src="<?php echo $_GET['p5js']; ?>"></script>
	<?php if (isset($_GET['src'])) { ?>
		<script type="text/javascript" src=<?php echo $_GET['src']; ?>></script>

This means I can't embed the script contents directly in the post. I can't pass the script to the iframe directly because urls have a max length on some platforms, so it might work inconsistently. This means I need to pass the link to an external file into the iframe for it to reference. I upload these like you would an image, and it seems to work fine. It's much cleaner than trying to edit the code inside the post anyhow.

Thanks for reading and I hope you found it interesting!