{"id":18052,"date":"2025-12-17T20:25:57","date_gmt":"2025-12-17T20:25:57","guid":{"rendered":"https:\/\/kmfinfotech.com\/blogs\/wordpress-how-to-build-a-custom-block-with-telex-ultimate-guide-2024\/"},"modified":"2025-12-17T20:25:58","modified_gmt":"2025-12-17T20:25:58","slug":"wordpress-how-to-build-a-custom-block-with-telex-ultimate-guide-2024","status":"publish","type":"post","link":"https:\/\/kmfinfotech.com\/blogs\/wordpress-how-to-build-a-custom-block-with-telex-ultimate-guide-2024\/","title":{"rendered":"

WordPress: How to Build a Custom Block with Telex | Ultimate Guide 2024<\/strong><\/p>"},"content":{"rendered":"

Building Custom Blocks with Telex – A WordPress Innovation<\/h1>\n

This article was made possible by funding from WordPress.com. All Opinions and rankings are independent and not reviewed by WordPress.com.<\/p>\n

WordPress is known for its flexibility. The ability to build custom blocks keeps with that tradition. There are so many potential use cases. It feels like the sky is the limit.<\/p>\n

However, building a custom block hasn\u2019t always been easy. Even seasoned WordPress developers can struggle to learn the process. Blocks are based on React, rather than PHP. As such, there\u2019s a serious learning curve. That has left many to look at alternative methods or use third-party block suites.<\/p>\n

There\u2019s a new tool looking to change the narrative. Telex is Automattic\u2019s AI-powered block builder. Tell the app what you want, and Telex goes to work. It generates code and, once you\u2019re satisfied with the result, creates a custom plugin to install on your website.<\/p>\n

Telex is ripe for experimentation. Let\u2019s take it for a spin and see what it can do.<\/p>\n

Getting Started With Telex<\/span><\/h2>\n

First things first, you\u2019ll need a free WordPress.com account to use Telex and save your projects. Click the Login<\/strong> button on the upper right of the screen to get started.<\/p>\n

Once that\u2019s taken care of, it\u2019s time to tell Telex about your project. The interface should be familiar to anyone who has used ChatGPT, Gemini, or other popular AI models.<\/p>\n

Enter your idea into the text field, and the tool takes care of the rest. It generates your custom block\u2019s code and even lets you test it in a real WordPress installation (thanks to WordPress Playground).<\/p>\n

Doesn\u2019t that sound otherworldly? Follow along as we create a demo block.<\/p>\n<\/p>\n

Creating a Custom Timeline Block<\/span><\/h2>\n

From the looks of things, there\u2019s no idea that\u2019s too far-flung for Telex. There is a plethora of creative examples popping up on the web.<\/p>\n

For our purposes, we\u2019ll try to keep things practical. We\u2019ll create a Timeline block that allows us to highlight important dates with style.<\/p>\n

Here\u2019s the prompt we used:<\/p>\n

Create a Timeline block that allows me to highlight important dates in a vertical format. It should have fields for the following:<\/p>\n

    \n
  1. Year<\/li>\n
  2. Content<\/li>\n<\/ol>\n

    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.<\/p>\n

    Hint:<\/strong> Telex has an \u201cEnhance Prompt\u201d feature that will rewrite your prompt using AI. Give it a try if you\u2019re having trouble describing what you want. We tried the feature, and it added a few elements we hadn\u2019t thought of, including responsive styling.<\/p>\n

    Click the Build<\/strong> button once you\u2019re satisfied with your prompt.<\/p>\n

    Generating & Testing Our Custom Block<\/span><\/h2>\n

    Telex will start building your block in plain view. The UI shows your prompt at the top of the screen, while the app\u2019s internal dialog scrolls by below.<\/p>\n

    \"Telex<\/p>\n

    In our case, the process took about two minutes to complete. Once finished, we were redirected to a WordPress install and placed into the Block Editor.<\/p>\n

    \"Our<\/p>\n

    This is where the fun begins! Telex provides an 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 edits.<\/p>\n

    Judging the Initial Result<\/span><\/h3>\n

    At first glance, our Timeline block looks similar to what we envisioned. Telex followed our instructions with the help of its AI enhancement feature. It also added a few details we didn\u2019t think of, such as the ability to style the block\u2019s colors and spacing.<\/p>\n

    \"The<\/p>\n

    There\u2019s even a handy plus (+) icon for adding 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.<\/p>\n

    It\u2019s a strong start. However, we think there\u2019s room for improvement. Can Telex help?<\/p>\n

    Improving Our Timeline Block<\/span><\/h3>\n

    Perhaps the biggest thing missing from our block is the ability to customize the typography. We\u2019d love to change the font sizing and spacing. Let\u2019s ask Telex for some help:<\/p>\n

    Can you add font size and spacing settings to the Year and Content fields?<\/p>\n

    Telex receives our prompt and immediately begins revising the block. Once finished, the Block Editor is refreshed, and it\u2019s time to inspect the changes.<\/p>\n

    \"We<\/p>\n

    Sure enough, our block now features typography settings for the Year and Content fields. Nice!<\/p>\n

    We\u2019re one step closer to completion. However, there are a few other small tweaks we\u2019d like to make:<\/p>\n

    I notice the line between entries isn’t connected. Can we change that?<\/p>\n

    Also, I’d love the ability to horizontally align each entry to the Top, Middle, or Bottom.<\/p>\n

    Telex got both requests correct, to a point. We can now align our milestones horizontally. However, the connecting line has now moved to the left side, which is not what we wanted. Recall that the line had been in the middle.<\/p>\n

    \"Telex<\/p>\n

    Can you move the connecting line back to the middle? It should be connected to the icon between the Year and Content fields.<\/p>\n

    It took a few tries and a recovery from a PHP crash inside WordPress Playground. Telex eventually moved the line to the middle and adjusted the styling so the milestones are connected on the front end (there was still a bit of space in the editor).<\/p>\n

    \"Telex<\/p>\n

    Things are looking good, so we\u2019ll click the Download button on the upper right of the screen. Telex provides a ZIP file containing a plugin for our custom block.<\/p>\n

    Now, we can install the plugin on any WordPress website!<\/p>\n

    Making Custom Blocks a Prompt Away<\/span><\/h2>\n

    Our experience with Telex was a pleasant one. Within 30 minutes, we had a working prototype of our custom Timeline block. Even the most talented of React developers would have difficulty matching that pace.<\/p>\n

    Sure, there were a few glitches along the way. That\u2019s to be expected from any AI tool. However, Telex produced the result we were hoping for.<\/p>\n

    What about security? We ran the plugin through Plugin Check, which gave us a thumbs-up. We recommend using the tool for every custom block you generate. Also, review the code manually. Don\u2019t take security for granted.<\/p>\n

    Telex is still in its \u201cexperimental\u201d phase as of this writing. However, it\u2019s safe to say that the future looks very bright.<\/p>\n

    Written by Eric Karkovack<\/span><\/h2>\n

    Eric Karkovack is a web designer and WordPress expert with over two decades of experience. You can visit his business site here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.<\/p>\n

    Read more articles by Eric Karkovack<\/p>\n

    FAQs<\/h2>\n

    1. What is Telex?<\/h3>\n

    Telex is an AI-powered block builder by Automattic that simplifies the process of creating custom blocks in WordPress.<\/p>\n

    2. Do I need coding skills to use Telex?<\/h3>\n

    No, Telex is designed to assist users in creating custom blocks without requiring coding knowledge.<\/p>\n

    3. Can I customize the generated blocks?<\/h3>\n

    Yes, Telex allows for various customizations including typography, alignment, and design choices.<\/p>\n

    4. How long does it take to create a block with Telex?<\/h3>\n

    Typically, it takes around 30 minutes to create a working prototype of a custom block using Telex.<\/p>\n

    5. Is Telex secure to use?<\/h3>\n

    Telex apps are generally safe, but it’s recommended to review generated plugins and use tools like Plugin Check for added security.<\/p>\n

    Top<\/p>\n","protected":false},"excerpt":{"rendered":"

    Building Custom Blocks with Telex – A WordPress Innovation This article was made possible by funding from WordPress.com. All Opinions and rankings are independent and not reviewed by WordPress.com. WordPress is known for its flexibility. The ability to build custom blocks keeps with that tradition. There are so many potential use cases. It feels like […]<\/p>\n","protected":false},"author":2,"featured_media":18053,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/speckyboy.com\/wp-content\/uploads\/2025\/11\/wp-telex-demo-thumb.webp","fifu_image_alt":"","footnotes":""},"categories":[59],"tags":[],"class_list":["post-18052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts\/18052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/comments?post=18052"}],"version-history":[{"count":1,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts\/18052\/revisions"}],"predecessor-version":[{"id":18054,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts\/18052\/revisions\/18054"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/media\/18053"}],"wp:attachment":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/media?parent=18052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/categories?post=18052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/tags?post=18052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}