< / >

AI-Build Custom Blocks

Crea bloques de WordPress desde cero con IA

David Viña - Desenvolvedor Web WordPress & AI

David Viña ⚡

°CHAVETAS TECH I/O

Onde atoparme

davidviña.dev aurareels.me

< / >

A realidade das IAs ou titoriais...

Copias código sen entender
Rezas para que funcione
As cousas rompen e logo perdemos máis tempo en arranxalo que facelo
etc.

Hoxe imos facer o contrario: entender antes de copiar

< / >

Que imos aprender hoxe?

Estrutura real

Arquivos imprescindibles dun bloque seguindo as directrices de WordPress

Base de datos

Como se gardan os bloques e os atributos como comentarios HTML

IA como ferramenta

Usar Telex de Automattic + Cursor IA para acelerar sen perder o control

Non é maxia, non é copiar-pegar: é entender o que fas

< / >

Que e un bloque de WordPress?

Unidade de contido no editor Gutenberg
Combina JavaScript (editor) + PHP (opcional, renderizado)
Ten unha vista de edición e unha vista gardada
Os datos gardanse como comentarios HTML na base de datos

Así se ve na táboa wp_posts

<p class="has-text-align-center">Ola mundo!</p>

< / >

Anatomia dun bloque na BD

<!-- wp:namespace/nome-do-bloque {
    "atributo1": "valor1",
    "atributo2": true
} -->

<div class="wp-block-namespace-nome">
    Contido HTML do bloque
</div>

<!-- /wp:namespace/nome-do-bloque -->

wp: prefixo que identifica un bloque
namespace/nome: identificador único (ex: core/paragraph)
JSON entre {}: os atributos do bloque
HTML interior: o contido renderizado (ou baleiro en bloques dinámicos)

< / >

Bloques estáticos vs dinámicos

Estático (save.js)

// Gárdase na BD
<!-- wp:meu/bloque {
    "msg": "Ola"
} -->
<p>Ola</p>
<!-- /wp:meu/bloque -->

O HTML gárdase directamente

Dinámico (render.php)

// Gárdase na BD
<!-- wp:meu/bloque {
    "msg": "Ola"
} /-->

// Renderízase con PHP

PHP xera o HTML ao cargar

< / >

En vivo

Kick-off: Creando un bloque

npx @wordpress/create-block lugo-demo-block

Crea a estrutura completa do plugin
Configura webpack, babel e todo o build
Xera os arquivos base: block.json, edit.js, save.js...

< / >

O que xerou o CLI

📁 build
📁 node_modules
📂 src/lugo-demo-block
    {} block.json ⭐
    JS edit.js ⭐
    🎨 editor.scss
    JS index.js
    JS save.js ⭐
    🎨 style.scss
    JS view.js
📄 .editorconfig
📄 .gitignore
{} package.json
🐘 lugo-demo-block.php ⭐

Arquivos clave:

block.json - Ficha técnica
edit.js - Vista no editor
save.js - O que se garda
*.php - Rexistro do bloque

< / >

block.json - A ficha técnica

{
  "$schema": "https://schemas.wp.org/...",
  "apiVersion": 3,
  "name": "create-block/lugo-demo",
  "version": "0.1.0",
  "title": "Lugo Demo Block",
  "category": "widgets",
  "icon": "smiley",
  "description": "Un bloque de demo",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

apiVersion: 3 para WP 6.5+
name: namespace/slug
category: grupo no inserter
icon: Dashicon ou SVG
editorScript: JS do editor
style: CSS do frontend

< / >

Os atributos: o estado do bloque

"attributes": {
    "message": {
        "type": "string",
        "default": "Ola Lugo!"
    },
    "backgroundColor": {
        "type": "string",
        "default": "#7c5cff"
    },
    "showBorder": {
        "type": "boolean",
        "default": false
    }
}

Gardase na BD como JSON

< / >

edit.js - A vista no editor

import { __ } from '@wordpress/i18n';
import {
    useBlockProps,
    InspectorControls,
} from '@wordpress/block-editor';
import {
    PanelBody,
    TextControl,
} from '@wordpress/components';

export default function Edit( { attributes, setAttributes } ) {
    const { message } = attributes;

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Configuración' ) }>
                    <TextControl
                        label={ __( 'Mensaxe' ) }
                        value={ message }
                        onChange={ ( val ) => setAttributes( { message: val } ) }
                    />
                </PanelBody>
            </InspectorControls>
            <p { ...useBlockProps() }>
                { message }
            </p>
        </>
    );
}

< / >

save.js - O que se garda

import { useBlockProps } from '@wordpress/block-editor';

export default function Save( { attributes } ) {
    return (
        <p { ...useBlockProps.save() }>
            { attributes.message }
        </p>
    );
}

Só devolve markup - a serialización é automática.
O HTML xerado gárdase na BD xunto cos atributos no comentario.

< / >

render.php - Versión dinámica

Para bloques que precisan datos frescos (posts recentes, usuario actual, etc.)

// No block.json engadir:
"render": "file:./render.php"

// render.php
<?php
$message = $attributes['message'] ?? 'Ola!';
?>
<p <?php echo get_block_wrapper_attributes(); ?>>
    <?php echo esc_html( $message ); ?>
</p>

Con render.php, o save.js debe devolver null

< / >

A importancia dos prompts

A IA é tan boa como as instrucións que lle das
Lixo entra = Lixo sae (Garbage In, Garbage Out)
Un bo prompt aforra horas de depuración
Canto máis contexto, mellor resultado

Non pidas "fai un bloque". Pide exactamente o que necesitas,
con todos os detalles técnicos que coñeces.

< / >

Anatomía dun bo prompt

1. Contexto

Que tecnoloxía usas, versión de WP, tipo de proxecto...

2. Obxectivo claro

Que queres conseguir exactamente

3. Detalles técnicos

Atributos, compoñentes, comportamentos específicos

Estrutura recomendada:
[Rol] + [Contexto] + [Tarefa] + [Formato esperado] + [Restricións]

< / >

Prompt malo vs Prompt bo

Prompt malo

"Fai un bloque de WordPress
para mostrar testemuños"

Moi vago, sen detalles técnicos

Prompt bo

"Crea un bloque de WordPress 6.5+
chamado 'testimonial-card' con:
- Atributos: nome (string), texto
  (string), imaxeURL (string),
  cargo (string)
- InspectorControls no sidebar
- MediaUpload para a imaxe
- Estilo de tarxeta con sombra
- Bloque dinámico con render.php"

< / >

Telex: IA de Automattic para WordPress

https://telex.automattic.ai/

Ferramenta de IA especializada en código WordPress
Entende o ecosistema: bloques, hooks, APIs...
Xera código que realmente funciona no contexto WP
Ideal para consultas rápidas e xeración de snippets

A IA acelera, pero TI debes entender o que xera.
Por iso aprendemos primeiro a estrutura!

< / >

Demo en vivo

Creando un bloque con Telex

Prompt que imos usar:
"Haz un bloque para crear una card para los eventos de WordPress Lugo. Tendrá los siguientes elementos: - Imagen - Título de la charla. Este elemento será editable mediante un componente RichText tipo h2. - Tendrá una breve descripción editable desde un componente RichText tipo párrafo donde se podrá añadir negrita y enlaces. - Botón. El botón será un elemento con el texto por defecto "Ver evento" y la opción de añadir un enlace. Los estilos seguirán las siguientes condiciones: - La card tendrá una sombra gris clara con un ancho máximo de 500px. - Un padding de 1rem. - Un border radius de 10px. - El texto tendrá el color dark gray y el tamaño por defecto que de el tema. - El color primario es #cc1434 usado para el botón o enlaces. "

1. Abrir Telex

telex.automattic.ai

2. Escribir prompt

Ser específico e detallado

3. Revisar e copiar

Validar antes de integrar

< / >

Cursor: O editor con superpoderes

https://cursor.com/

Editor baseado en VS Code con IA integrada
Entende o contexto do teu proxecto completo
Pode editar múltiples arquivos á vez
Chat inline (Cmd+K) e panel lateral (Cmd+L)
Ideal para desenvolvemento completo de bloques

Diferenza con Telex: Cursor traballa co teu código local,
entende a estrutura do proxecto e pode modificar arquivos directamente.

< / >

Traballando con Cursor

Comandos esenciais

Cmd+K: Editar código inline
Cmd+L: Chat lateral
Cmd+I: Composer (multi-arquivo)
@arquivo: Referenciar arquivos
@docs: Consultar documentación

Boas prácticas

Abre o proxecto completo
Referencia arquivos con @
Pide que explique o código
Revisa sempre os cambios
Usa Composer para tarefas grandes

< / >

Demo en vivo

Creando un bloque con Cursor

Xa estamos na carpeta wp-content/plugins co proxecto aberto en Cursor

Prompt en Cursor (El de Telex y esto):
"Para hacer el bloque crea un plugin nuevo en la carpeta actual que es la carpeta plugins de la instalación. El plugin se llamará WP Event Card. El plugin tendrá el archivo raiz, la carpeta src con los archivos del bloque y añade los archivos para compilar y encolar el bloque necesarios"

1. Abrir Composer

Cmd+I para multi-arquivo

2. Escribir prompt

O mesmo que en Telex

3. Aceptar cambios

Revisar e aplicar

< / >

Fluxo de traballo recomendado

Entende o que precisas (atributos, comportamento)
Usa Cursor ou Telex para desenvolvemento completo
Revisa: compara con block.json, edit.js, save.js
Proba no editor e no frontend
Mira a BD: comproba que os atributos se gardan ben

< / >

Recursos para seguir aprendendo

Telex: https://telex.automattic.ai/
Cursor: https://cursor.com/
Block Editor Handbook: developer.wordpress.org/block-editor/
@wordpress/create-block: npmjs.com/package/@wordpress/create-block
Storybook de compoñentes: wordpress.github.io/gutenberg/

A mellor forma de aprender: crear un bloque real para un proxecto teu

< / >

Moitas grazas!

🚀

Preguntas? Dúbidas? Ideas?

David Viña ⚡

°CHAVETAS TECH I/O

Onde atoparme

davidviña.dev aurareels.me