How to build a custom WordPress block with Telex – Speckyboy

WordPress is known for its flexibility. The ability to build custom blocks continues that tradition. There are so many possible use cases. It feels like the sky is the limit.

However, building a custom block wasn’t always easy. Even seasoned WordPress developers can have trouble learning the process. Blocks are based on React, rather than PHP. As such, there is a serious learning curve. That has prompted many to look at alternative methods or use third-party block suites.

There’s a new tool that wants to change the story. Telex is Automattic’s AI-powered block builder. Tell the app what you want and Telex gets to work. It generates code and, once you’re happy with the result, creates a custom plugin that you can install on your website.

Telex is ripe for experiments. Let’s get started with it and see what it can do.

Getting started with Telex

To get started, you’ll need a free WordPress.com account to use Telex and save your projects. Click on the Login button at the top right of the screen to get started.

Once that has been arranged, it is time to tell Telex about your project. The interface should be familiar to anyone who has used ChatGPT, Gemini or other popular AI models.

Enter your idea in the text field and the tool will do the rest. It generates the code of your custom block and even lets you test it in a real WordPress installation (thanks WordPress playground).

Doesn’t that sound alien? Follow along as we create a demo block.

Create a custom timeline block

From the looks of it, there’s no idea that this is too far away for Telex. There is an abundance of it creative examples pop up on the internet.

For our purposes, we’ll try to keep things practical. We’ll create a timeline block that will allow us to mark important dates with style.

This is the prompt we used:

Create a Timeline block that allows me to highlight important dates in a vertical format. It should have fields for the following:

1. Year
2. Content

The design should feature the Year on the left and the Content on the right. A vertical line should be displayed between the Year and the Content. The Year should be bold text and stand out.

Tip: Telex has an “Enhance Prompt” feature that allows you to rewrite your prompt using AI. If you’re having trouble describing what you want, give it a try. We tried the feature and it added a few elements we hadn’t thought of, including a responsive style.

Click on the Build button once you are satisfied with your prompt.

Generating and testing our custom block

Telex starts building your block in plain view. The UI shows your prompt at the top of the screen, while the app’s internal dialog scrolls below.

In our case, the process took about two minutes. Once done, we were redirected to a WordPress installation and placed into the Block Editor.

This is where the fun begins! Telex offers the opportunity to test our new block and see how it works. We can use the chat panel on the right side of the screen to ask questions or make changes.

Assessing the first result

At first glance, our timeline block looks like what we envisioned. Telex followed our instructions using the AI ​​improvement feature. It also added a few details we hadn’t thought of, like the ability to style the colors and spacing of the block.

There’s even a handy plus sign (+) to add additional milestones to our block. As promised, the block is also responsive. The Year and Content blocks are stacked on small screens for easier reading.

It’s a strong start. However, we think there is room for improvement. Can Telex help?

Improving our timeline block

Perhaps the biggest thing missing from our block is the ability to customize the typography. We would like to change the font size and spacing. Let’s ask Telex for help:

Can you add font size and spacing settings to the Year and Content fields?

Telex receives our prompt and immediately begins revising the block. Once you’re done, the Block Editor will refresh and it’s time to inspect the changes.

Sure enough, our block now contains typography settings for the Year and Content fields. Nice!

We are one step closer to completion. However, there are still a few minor adjustments we would like to make:

I notice the line between entries isn't connected. Can we change that?

Also, I'd love the ability to horizontally align each entry to the Top, Middle, or Bottom.

Telex got both requests correct to a certain extent. We can now align our milestones horizontally. However, the connecting line has now been moved to the left side and that is not what we wanted. Remember that the line was in the middle.

Can you move the connecting line back to the middle? It should be connected to the icon between the Year and Content fields.

It took a few tries and recovery from a PHP crash in WordPress Playground. Telex eventually moved the line to the center and adjusted the styling so that the milestones were connected at the front (there was still some room in the editor).

It looks good, so we click on the Download button at the top right of the screen. Telex provides a ZIP file containing a plug-in for our custom block.

Now we can install the plugin on any WordPress website!

Create custom blocks in a snap

Our experience with Telex was pleasant. Within 30 minutes we had a working prototype of our custom timeline block. Even the most talented React developers would struggle to match that pace.

Of course, there were a few hiccups along the way. You can expect that from any AI tool. However, Telex delivered the result we hoped for.

What about security? We ran the plugin through Plugin Check, which got us a thumbs up. We recommend that you use the tool for each custom block you generate. Also check the code manually. Don’t take safety for granted.

At the time of writing, Telex is still in the ‘experimental’ phase. However, it’s safe to say that the future looks very bright.

---

Top