What a fitting time for me to return to WordPress core, learning the framework deeply. I wouldn’t have quite put it how this WordPress developer puts it (quoted below), but I share the enthusiasm for the Interactivity API nevertheless. I didn’t realise it but I waned a bit in interest after Gutenberg was released, as I think I was too accustomed to building sites a specific way, and now doing that felt like an intrusion. I continued to install the Classic Editor on sites I built for a long time, until I began to experiment with, and learn Divi instead.

Here is how this Youtuber puts it:

I have never been more excited for the future of WordPress. This is seriously awesome. This new API renews my interest in WordPress all over again. Instead of needing a headless site built with something like Next.js or needing a library like HTMX or so on and so forth, we finally have that missing puzzle piece. That modern dance between server provided data and client side JavaScript is now officially supported and being improved on and polished and cared for by the official WordPress core. And that’s all I’ve ever wanted. So in other words, as a developer, I no longer feel abandoned and left to fend for myself in the WordPress world. I once again feel like WordPress cares about my experience and that I matter. And as a developer, I haven’t felt that way since 2018 or 2019 when Gutenberg and blocks were first added. So to summarize, I am super happy.

~ @LearnWPCode

Wow. Yes.

Positioning the Interactivity API alongside my JavaScript journey, is a perfect push, since the Block Editor is powered by React, a JavaScript library. I continue to be keenly aware of how how to avoid overloading myself so I’ve compartmentalized things to properly strategize how my brain perceives all the new information.

This is the outline. WordPress documentation explains itself and while I can read that and work at building things using examples and tutorials, it would, over time, make most sense to me conceptually as I continue to grasp JavaScript. So, I build things by rote and tutorials and intelligent guessing, while I simultaneously build a library of fundamental knowledge.

I’ve successfully moved my Block theme and plugin one major step forward. In this second month, I worked on creating my ‘Stylewriter Type’ Block plugin. Once I started to see the plugin come together, I was actually surprised at how much I was understanding.

I used ChatGPT to guide the process, helping me to troubleshoot when I got stuck and build out code according to my prompts. I had installed Node.js and npm on my laptop this month, and began to use this new WordPress plugin creation process. It’s new to me, but I know that it’s not exactly ‘new’. Using npm install to create the node_modules folder and npm run build to compile the JavaScript files from those packages was particularly enlightening. Best of all, with or without Geeps’ (ChatGPT) help, I understand what I’m doing, and that is remarkable. Learning something is always fascinating, I think. Going from “I have no idea“, to “I have an inkling” to “I might actually know this“, to “yaow! I GOT thisss” is a great journey. I am currently in between the “I have an inkling” and “I might actually know this” stages.

I created a WordPressBlock plugin that uses a CSS typewriter effect for displaying text as if it is being typewritten. The styles for this effect were included in the plugin’s style.css file. I utilized the Interactivity API to leverage components from other blocks – the Featured Image Block and the Title Block. These components were retrieved in view.js and then rendered in render.php, which is located in the plugin’s root folder. My ‘Stylewriter type’ Block is being used inside the Query Loop Block.

To manage the build process, I used npm. The build process not only compiled my JavaScript files but also ensured that view.js was copied from the src folder to the build folder, which is necessary for the Interactivity API.

I had three major sticking points while I was building it all out:

1. Duplicate Function Declarations: I initially declared the function for enqueuing CSS and JS twice—once in the theme’s functions.php and once in the plugin’s main PHP file. It kept giving me a fatal error until I figured out where to remove it from and where to keep it.

2. Missing Output: Before creating render.php, the Block Editor was displaying ‘Loading’ but nothing showed on the front end of the site, because the components were retrieved but not displayed.

3. Automated File Copying: To avoid manually copying view.js to the build folder every time I ran npm run build, I updated the package.json to automate this process using the copyfiles package. It wasn’t copying over, but I didn’t want to manually copy it over everytime I compiled the JavaScript.

After I made these adjustments, the plugin began to correctly display the featured image and the post title with the typewriter effect, and the build process ran smoothly. Bingo. 😉

Built, and voila. It worked. I shed a tear. I did. I’ve built things before, and brought visions to life, in CSS, and website designs, but I’ve wanted for so long to crack the code on code, which is not CSS, that seeing this process go from “I want to build a Stylewriter Block theme and plugin”, envisioning what I wanted them to do and look like, and then creating them is a really great moment.

Onwards and upwards, but before we do that, let’s take a look at where I am at now.

I want the typewriter effect to slow down just a smidgen, but I’ll adjust that in the CSS later on. I will move on in this next month to work on the style of the theme, and begin layering more aspects of the theme’s style and function.

Let’s go month 3!