{"id":21201,"date":"2025-09-18T13:46:13","date_gmt":"2025-09-18T12:46:13","guid":{"rendered":"https:\/\/johnjohnston.info\/blog\/?p=21201"},"modified":"2025-12-05T11:18:53","modified_gmt":"2025-12-05T11:18:53","slug":"block-vibes","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/blog\/block-vibes\/","title":{"rendered":"Block Vibes"},"content":{"rendered":"\n

I saw a link to Telex \u2013 AI-Assisted Authoring Environment for WordPress Blocks<\/a> this week and thought I would give it a try.<\/p>\n\n\n\n

A few (eek, 10) years ago I tried to make a plug-in for WordPress that would take a gif url and an audio url, it would then, on the fly, make a static version of the gif. Clicking that would play the gif and loop the audio. I did get it working, eventually adding a dialogue to search for gifs on giphy & audio on freesound. I even managed to incorporate it into the tinyMCE editor in WordPress. It never got finished, but it was fun. I didn’t see any make a site for it: GifMovie<\/a>.<\/p>\n\n\n\n

Making that plug-in involved a big effort on my part, and a ton of searching. I’ve occasionally thought it might make a WordPress block, but didn’t know where to start. I have baby steps, php, JavaScript and css. I’ve occasionally manages to add something to WordPress that I’ve needed mostly through creating shortcode. Simple stuff far short of creating a block.<\/p>\n\n\n\n

Test Telex, I thought something similar might be an idea. I simplified a bit leaving out the freesound and giphy searches.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

On opening Telex you are shown a typical ai prompt box. But behind that is a WordPress site. I am presuming this is WordPress playground, everything in the browser? I am not familiar enough with playground to be sure. I put in the prompt:<\/p>\n\n\n\n

I’d like a block that would allow me to add a gif from the media library. It would allow me to choose a sound from the media library. When the block loads it would show a static image from the gif, generated on the fly with JavaScript with a play button. Clicking the static image would show the gif and loop the audio file.<\/p>\n\n\n\n

And off the ai went, showing me some codes scrolling past and telling me how many lines of code it had written. After a while I had the block in the editor in front of me!<\/p>\n\n\n\n

I could upload a gif and a mp3 to the block and it showed a preview. All looking good, I could preview the block right in the page. When I went to look at the published page, it looked ok, clicking the image started the sound, but the image vanished.<\/p>\n\n\n\n

So I reported this and the ai offered a fix. At that point things went a bit wrong. The page stopped loading and restarting the whole thing failed to load the editor. After a few tries I gave up as I’d run out of time.<\/p>\n\n\n\n

This evening I thought I’d try again, but a on a desktop rather than my now aging, 8th gen iPad. As this is all linked to my WordPress account I just opened the project. Getting the same problem I reported it to the ai and it fixed it again. To no avail. I repeated this a couple of times and tested each iteration. After a few goes everything just worked.<\/p>\n\n\n\n

<\/canvas>
<\/circle><\/path><\/svg><\/div><\/div><\/div>\"\"

I also ran the plugin check<\/a> plugin and almost no few errors. Presumably because this sort of plugin has fewer opportunities to make mistakes.<\/p>\n\n\n\n

I guess this is as near to pure vibe coding<\/em> as you get? I didn’t see any code at all in the process or discuss it with the ai. I just reported the problem. There is a code view where you can see all of the files created. They look as if they are very well organised and commented. I am sure if I was learning to make blocks this would help a lot.<\/p>\n\n\n\n

The few times I’ve asked Claude.ai or chatGPT to do some coding I’ve had more of a view and understanding of what is going on. I’ve also noticed that if chatGPT tried to fix something it either manages straightaway or just repeatedly fails. Telex made a better job of fixing things on at least this one off.<\/p>\n\n\n\n

I wonder if this will eventually make its way in to WordPress itself? What sort of overhead would having a bunch of extra block plugins added?<\/p>\n\n\n\n

I guess that this could be a good learning tool, but that might require a bit more discipline in reading the code produced and other tutorials on creating blocks. I do feel I’ve learnt something when I’ve DIYed some simple stuff. Not that I’ve retained a lot, that would need more frequent application on my behalf.<\/p>\n\n\n\n

I am looking forward to watching the progress with Telex and see where it goes if it gets out of the experimental phase.<\/p>\n\n\n\n

Gif my own creation, ripped from video years ago. Sound from https:\/\/samplefocus.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

I saw a link to Telex \u2013 AI-Assisted Authoring Environment for WordPress Blocks this week and thought I would give it a try. A few (eek, 10) years ago I tried to make a plug-in for WordPress that would take a gif url and an audio url, it would then, on the fly, make a […]<\/p>\n","protected":false},"author":1,"featured_media":21202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":["https:\/\/social.ds106.us\/@johnjohnston\/115225369224679289","https:\/\/bsky.app\/profile\/johnjohnston.info\/post\/3lz4kentiic24"],"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[953],"tags":[957,1558,2004,11],"post_format":[],"class_list":{"0":"post-21201","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-posse","8":"tag-ai","9":"tag-blocks","10":"tag-telex","11":"tag-wordpress","12":"kind-article","14":"h-entry","15":"hentry"},"better_featured_image":{"id":21202,"alt_text":"Screenshot of the telex WordPress AI interface. Showing a new block created.","caption":"","description":"","media_type":"image","media_details":{"width":1200,"height":783,"file":"2025\/09\/texex-1.png","filesize":121676,"sizes":{"medium":{"file":"texex-1-620x405.png","width":620,"height":405,"mime-type":"image\/png","filesize":159371,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1-620x405.png"},"large":{"file":"texex-1-1024x668.png","width":1024,"height":668,"mime-type":"image\/png","filesize":343683,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1-1024x668.png"},"thumbnail":{"file":"texex-1-150x150.png","width":150,"height":150,"mime-type":"image\/png","filesize":21891,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1-150x150.png"},"medium_large":{"file":"texex-1-768x501.png","width":768,"height":501,"mime-type":"image\/png","filesize":220474,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1-768x501.png"},"post-thumbnail":{"file":"texex-1-668x436.png","width":668,"height":436,"mime-type":"image\/png","filesize":178115,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1-668x436.png"},"sempress-image-post":{"file":"texex-1-668x436.png","width":668,"height":436,"mime-type":"image\/png","filesize":178115,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1-668x436.png"},"jetpack-portfolio-admin-thumb":{"file":"texex-1-50x50.png","width":50,"height":50,"mime-type":"image\/png","filesize":3980,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1-50x50.png"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":21201,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1.png"},"jetpack_featured_media_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/09\/texex-1.png","jetpack_shortlink":"https:\/\/wp.me\/p57zFQ-5vX","jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"kind":false,"_links":{"self":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/comments?post=21201"}],"version-history":[{"count":6,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21201\/revisions"}],"predecessor-version":[{"id":21613,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21201\/revisions\/21613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media\/21202"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media?parent=21201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/categories?post=21201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/tags?post=21201"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/post_format?post=21201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}