Trying To Stuff That Full HTML into the SPLOT Editor

Oh as no one really sings, the SPLOTs Go On. Indeed, I have not touched/updated the SPLOT themes in so long I can’t remember, but strangely and happily enough, for the most part they keep working. Not bad for stuff hatched 2014 onward.

I remain mostly the sole contributor to Sadly Robotic Metaphors for AI (using TRU Collector)- i thought that someone would find this fun or a form of commentary. And while checking for some old bits, I see the Amazing/True Stories of Openness (using SPLOTbox) runs quite well- I added 2 over the last few months.

And I know from a recent email from Maha Bali that she uses TRU Writer for some of her class projects. In fact, she contacted me after sharing an example of an interactive activity spawned by Gemini AI that she was able to insert into her blog post using the HTML code it provided (standalone HTML file with CSS and Javascript inside).

I am guessing the WordPress Custom HTML block renders a full HTML file within the HTML of the published page, without problem. Maha asked if it was possible for her students to do the same thing with ones they created, but be able to insert that same code into the SPLOT editor of TRU Writer.

It should be possible, right? It’s still WordPress under there. Maha had sent me the HTML code Gemini produced, and my first test was to check on my WordPress blog (done as a Page, but tis the same use of the Custom HTML block). And yes it not only works, in the source code I can see that nothing is stripped out.

But the SPLOTs use the WordPress wp_editor function to put an editor on the front of the site, which is more or less the “Classic” editor many still love and cling to. It does have the feature, to insert / edit HTML via the “code” tab.

As Maha had already trie, when that full HTML goes into the editor, chunks of it disappear, like CSS and anything in script tags, likely a security thing. This is the TinyMCE editor which likely is designed to not put everything into the post. What you get is … well not much. It strips the <style> and <script> tags and you get blobs of code. No game.

I did some looking around to see if maybe there was someway to put the block editor on a page, but that seems not in pay or even possible. But I do know from previous work on the editor, there is functionality to modify it- I had removed a few buttons and added an image uploader one.

So I started looking around for ideas on how you can tell the editor to allow more tags. And cn you believe it? The terrible web search got me to a near answer in Stack Overflow – a pair of functions. One to tell TinyMCE to acceopt specific tags and the obscure kses that tells WordPress to allow more code in an editor “KSES is a recursive acronym which stands for ‘KSES Strips Evil Scripts'”.

Fun.

I decided to see if I could make it go on one of my test versions of TRU Writer. I already have a function to change the TinyMCE settings (for adding the image button) so I just added this line to put all the HTML tags I saw it stripping out.

$settings['extended_valid_elements'] = 
   'script[src|async|defer|type|charset],
    link[rel|href|crossorigin],style[src],html[lang]'; 

The extended elements is a comma seperated list of tags like <script> and `<link>`, and in brackets are the attributes to allow.

I thern added a kses allow function and hook.

// test allowing sript tags for script, link tags
function allow_extras_tags( $allowedposttags ){
  $allowedposttags['script'] = array(
      'src' => true,
      'height' => true,
      'width' => true,
      'charset' => true,
      'async' => true
    );
    
     $allowedposttags['link'] = array(
     	'rel' => true,
     	'href' => true,
     	'crossorigin' => true
     );
     
    $allowedposttags['style'] = array(
     	'src' => true,
     );
     
    $allowedposttags['html'] = array(
     	'lang' => true
     );
    
     $allowedposttags['head'] = array(
     ); 
     
    $allowedposttags['body'] = array(
     	'class' => true
     );

  return $allowedposttags;
}

add_filter('wp_kses_allowed_html','allow_extras_tags', 50);

I was able to get a little more going, but not the full functionality, see https://lab.cogdogblog.com/writer/published/can-we-insert-a-game/

It’s a step, but the game has no functionality. Some of the code ends up with <p> tags which likes breaks it, but the <html> <head> and <body> tags are still tripped out. My guess is the javascript cannot access the DOM elements and operate.

That’s as far as I got. It should be doable since it works in Custom HTML block. Maybe I am too rusty. Or maybe someone out there will vibe code with their pals Claude and Jimini.

It was fun to get in the code again, even if I could not get it there for you, Maha. I would not have rolled this into the theme, since allowing script tags in a public editor is bad mojo, but it could have been added per site with an little plugin.

I can’t stuff a full HTML suitcase of code into the SPLOT.

For Maha, her students can still add their posts, but the only way I can see is she having to edit the submissions in the WordPress admin, convert to block format, and add the code in a Custom HTML block.

---

Featured Image: Publicdomainpictures image of a stuffed suitcase by George Hodan in the public doman (doh) modified by me to include the SPLOT logo I designed myself.