Telex: The Official WordPress Theme for Modern WordPress in One Click

Telex is an experimental AI programming and development tool developed by Automattic, the parent company of WordPress, specifically designed to help developers and site builders generate custom Gutenberg blocks. Users simply enter everyday natural language prompts describing the desired block structure, styling, and interaction behavior, and Telex automatically writes code in tens of seconds using a large language model to generate fully working WordPress block components.

The tool has deep integration with WebAssembly-based WordPress. Playground The serverless sandbox environment allows users to preview the front-end effect and test the editor back-end directly in the browser without deploying any local development environment after code generation.Telex provides continuous dialog iteration, allowing users to fine-tune the code in multiple rounds with the AI assistant. The finalized blocks can be packaged and exported as standardized .zip Format plugin file, can be seamlessly installed into any self-hosted live WordPress site to call directly, dramatically reducing the threshold for the development of functional modules.

Function List

• natural language code generation: Support for plain text prompts that describe the logic and appearance of the desired component, which the AI translates into native WordPress Gutenberg block code.
• Built-in Playground Sandbox Preview: Seamless integration of WordPress Playground in the bottom layer, virtualized WordPress environment running on the browser side, supporting real-time view of the rendering effect of the block on the front-end of the web page and the operation status of the background parameter setting panel.
• Dialogic Continuous Iteration: Provides a sidebar AI assistant that allows users to issue specific change commands (e.g., change colors, adjust spacing, add new interactions) to blocks generated in the first version, and the AI automatically understands the context and updates only the changed code.
• One Click Package Export Plugin: Support for concatenating debugged blocks with dependent code (React/JSX, CSS, PHP.),block.json etc.) into a standard WordPress plugin zip file (.zip) with one click.
• Native Compatibility Architecture: Tailored for the WordPress ecosystem, the generated code follows the official block editor development specifications and best practices, guaranteeing compatibility under all types of themes.
• Code Visualization and ReviewThe AI is not only a graphical preview, but also allows developers with a technical background to directly view the underlying source code written by the AI, ensuring that the logic is transparent and facilitates secondary manual development at a later stage.
• Visual reference chart analysis (progressive opening): Support users to upload visual materials such as interface screenshots or wireframes, combined with cue words to guide the large model to more accurately restore the layout of the design draft.

Using Help

Welcome to Telex, the AI programming platform from Automattic that turns your textual ideas directly into fully functional WordPress-native blocks. To help you get the most out of the platform, here's an extremely detailed guide.

special hint: Since Telex is currently in the Experimental phase, in order to provide a complete code generation, sandbox rendering, and interface interaction experience.The system is currently forced to run in a browser on the desktop side (desktop or laptop)The main workspace will not load when accessed using a mobile device such as a cell phone or tablet.

I. Account registration and workspace access

1. Access platforms: Open your modern browser on your desktop (Google Chrome or Microsoft Edge is recommended for optimal performance of the WebAssembly container) and visit the official URL https://telex.automattic.ai/。
2. Account Login AuthorizationTelex relies on the official eco-system and mainly uses WordPress.com account system for Single Sign-On (SSO). If you already have an account, you can directly click Authorize; if not, please register a free basic account with your email address.
3. Access to the console: After logging in, you'll see a minimalist prompt dialog window with an interface similar to that of a common AI chatbot, which is where the code generation begins.

Second, the core operating process: from the prompt word to the available plug-ins

Step 1: Write a high-quality structured prompt (Prompt)

The accuracy of code generation depends entirely on the details of the instructions you enter. Instead of giving vague terms, it is recommended to follow the structure of “Function Definition + Backend Configuration + Visual Style + Interaction Effect”.

• Examples of requirements: You want to make a “Team Member Introductions” block.
• Recommended prompts to write: “Please help me generate a Gutenberg block for ‘Team Member Display'. It supports displaying three members in a row.Backend Configuration: Allows me to upload each person's avatar, fill in their name, job title, and a one-sentence blurb separately in the WordPress editor.Visual Style: A minimalist style with an avatar designed as a square circle with light gray shading.interactive effect: When hovering over a member's card, the card needs to have a tiny animation that floats up 5px and displays its LinkedIn and Twitter icon links.”
• submit (a report etc): After confirming that the description is correct, press the Enter key or click the Send icon to start the generation engine.

Step 2: Automated Code Writing and Sandbox Dual View Validation

• visualization: After the command is sent, the system displays a progress indicator for code generation, so you can visualize the structure of the file and the number of lines of code generated by the AI, which usually takes about 30 seconds to 1 minute to compute.
• WordPress Playground Loading: Once the code is written, Telex instantly launches a serverless WordPress sandbox in the browser's memory. No need to buy a server or configure a database to test directly.
• Seamless switching between two viewpoints：
  • Editor view (Editor): This is the default view, which simulates the editing interface in the WordPress backend. You can select the block you just generated here and test whether the right property panel has successfully generated the input box you can modify (e.g. replace image, modify text).
  • Frontend view (Frontend): Click the “Frontend” button on the interface to switch to the visitor's perspective and check whether the visual layout of the block on the official web page is reasonable and whether CSS animations such as mouse hovering are triggered properly.

Step 3: Talk to the AI Assistant for Local Iteration

AI-generated first versions often require fine-tuning of details. There is no need to start from scratch, Telex offers state memorization.

• Outgoing Assistant (Assistant): In the right panel of the interface, click on the “Assistant” tab to enter the continuous dialog mode for the current block.
• Send Modify Command: Directly point out the problem in plain language. For example, “darken the shadows on the member cards”, “change the three members per row to four members per row”, or “add a centered ‘Our Core Team” main title input box at the top of the entire block".
• Automatic Application Updates: AI will read the previous code base and rewrite the code for the changes only for your requirements. The sandbox will be automatically refreshed when it is finished to show the latest effect of the changes.

Step 4: One-Click Package Export and Production Deployment

Once the block has been debugged to perfection in the sandbox, it can be ported to the site you actually run.

1. Exporting ZIP packages: Click the “Download” or “Export” button at the top right of the interface. The system will automatically include block.json Registration file,index.js(React logic),style.css(style sheet) and index.php All the dependencies are compressed into a standard WordPress plugin ZIP package.
2. Upload to personal website: Log in to the backend management system of your live WordPress site.
3. implementation: Navigate to the left menu 插件 -> 安装插件 -> 上传插件Select the ZIP file you just downloaded. Click “Install Now” and then click “Enable Plugin”.
4. actual call: Go to the block editor of any article or page, click the “+” sign to add a module, and search for the name of the block in the search box to drag and drop it into the page for use.

Third, the advanced use of skills and pothole prevention guide

• Code review model: If you are a developer yourself, you can click on the Code View tab to see the underlying source code. If the AI throws an error when implementing complex logic (e.g., an external API data request), you can instruct it directly in the dialog box using development terminology (e.g., “Please change to the useEffect Hooks handle data pulls and add try-catch Error Catching Mechanism”).
• Embrace the principle of modularityTelex is specifically designed to generate separate “function blocks” rather than complete “whole site themes”. It is recommended that large projects be broken down into multiple single-function blocks (e.g. Pricing Table block, FAQ Accordion block, Dynamic Countdown block), which are generated separately and then combined in WordPress for the highest success rate and code quality.
• Responding to generation failures: As an experimental tool, occasional rendering failures are normal. If the sandbox continues to report errors, it is recommended to click Regenerate, or simplify the functionality in the prompts to eliminate overly complex third-party library dependencies.

application scenario

1. Rapid Prototyping and Visual Presentation
   When a web designer or product manager is conceptualizing a new page interaction, they don't have to wait for a front-end engineer to get involved, they can use Telex to turn their textual ideas into actionable page components, and then quickly show them to their team or customers in a meeting.
2. Customized marketing campaign component development
   E-commerce and operations teams need to develop exclusive web elements (e.g. countdown signs with specific visual styles, dynamic promotional price lists) for specific holiday sales. Utilizing Telex can generate exclusive block plugins in minutes, eliminating the cost and time of procuring commercial plugins.
3. Helping WordPress Developers Increase Efficiency
   Professional WordPress plugin developers can use Telex as a code copilot. The AI is responsible for the tedious registration of Gutenberg base files, React scaffolding and basic CSS writing, while the developer downloads the source code and focuses on the secondary development of the core business logic, which greatly shortens the development cycle.
4. Functional Boundary Expansion for No-Code Builders
   For self-builders who don't have a programming background, when an existing theme or third-party page builder can't fulfill a specific long-tail function, Telex can break the limitations of no-code tools by “customizing” the components with natural language.

QA

1. Is Telex a paid tool?
   A: Currently, Telex, as an experimental project under Automattic, is completely free for all logged-in users, and there is no limit on the number of times it can be used for the time being. As the underlying layer consumes a lot of AI computational model resources, we may launch a subscription or fee program in the future after the transition.
2. Can the blocks I generate be installed directly on any WordPress site?
   A: Yes, you can. As long as your site is a self-hosted WordPress (WordPress.org) environment that supports the installation of plugins, or a hosted plan that supports premium plugins, it is possible to export Telex directly to the .zip file is uploaded and enabled as a regular plugin.
3. Can Telex generate an entire WordPress theme for me?
   A: No. Telex is architected and designed to focus entirely on generating “Gutenberg Blocks”. It specializes in single or combined page components, and is not responsible for generating “themes” that involve global page routing, database substructure, or site-wide file hierarchies.
4. Why can't I open the Telex interface on my mobile browser?
   A: In order to ensure the stable operation and typographical needs of the complex code generation process, the dual-view code editor, and the built-in WordPress Playground sandbox, access devices are officially and forcibly restricted. Please be sure to use your desktop computer's browser to do so.
5. What if the generated block is buggy or doesn't function as expected?
   A: You don't need to know the code to fix it. Please open the AI Assistant panel on the right side of the interface and describe the error or dissatisfaction to the AI in plain language. The AI will automatically investigate and modify the code, and then show you the corrected version in the sandbox. If you know the code, you can also switch directly to the code view to review it and then guide the AI to fix it in technical terms.