Cómo crear un bloque personalizado para WordPress con Gutenberg

En este post, aprenderás a crear un bloque personalizado para WordPress con Gutenberg. Los bloques personalizados te permiten añadir nuevas funcionalidades a tu sitio web, como widgets, formularios o cualquier otro contenido que te imagines.

React para crear bloques
Crear tu primer bloque de Gutenberg
Instalando node
Instalando LocalWP
Usando @wordpress/create-block
La carpeta build contiene los siguientes archivos
La carpeta node_modules
Anatomía de un bloque
- block.json
- edit.js
- editor.scss
- index.js
- save.js
- style.scss
¡A programar!

En este post, te guiaremos paso a paso por el proceso de creación de un bloque personalizado con Gutenberg.

React para crear bloques

¿Por qué es aconsejable saber React para crear bloques en Gutenberg?

Gutenberg es la nueva interfaz de edición de contenido de WordPress, y permite a los usuarios crear bloques personalizados para añadir nuevas funcionalidades a sus sitios web.

Para crear bloques personalizados con Gutenberg, se puede utilizar una variedad de lenguajes de programación, como PHP, JavaScript o TypeScript. Sin embargo, es aconsejable saber React.

React es una biblioteca JavaScript de código abierto que se utiliza para crear interfaces de usuario. Es una biblioteca muy popular y bien documentada, y tiene una gran comunidad de desarrolladores que pueden ayudar a resolver problemas.

Los bloques personalizados de Gutenberg se crean utilizando React. La interfaz de usuario del bloque se crea con un componente React, y el contenido del bloque se renderiza utilizando el componente React.

Si sabes React, tendrás una buena base para crear bloques personalizados de Gutenberg. Serás capaz de entender la estructura de los bloques, y podrás utilizar las funciones y características de React para crear bloques personalizados potentes y funcionales.

Aquí hay algunos beneficios de saber React para crear bloques en Gutenberg:

Facilidad de desarrollo: React es una biblioteca muy intuitiva y fácil de aprender. Si ya sabes React, podrás crear bloques personalizados con Gutenberg rápidamente y sin problemas.
Flexibilidad: React es una biblioteca muy flexible. Puedes utilizarla para crear bloques personalizados de cualquier tipo, desde simples bloques de contenido hasta bloques complejos con funcionalidad avanzada.
Calidad: React es una biblioteca bien desarrollada y mantenida. Los bloques personalizados creados con React suelen ser de alta calidad y funcionan bien.

Si estás pensando en crear bloques personalizados para WordPress, te recomiendo que aprendas React. Será una inversión que te ayudará a crear bloques personalizados más potentes y funcionales.

Crear tu primer bloque de Gutenberg

Para crear tu primer bloque de Gutenberg desde cero, necesitarás los siguientes pasos:

Configura tu entorno de desarrollo local. Puedes usar un editor de código como Visual Studio Code o Atom, y un servidor local como MAMP o XAMPP.
Crea un nuevo proyecto de bloque de Gutenberg. Puedes usar el comando npx @wordpress/create-block para crear un nuevo proyecto de bloque de Gutenberg.

npx @wordpress/create-block

Esto creará una nueva carpeta para tu proyecto de bloque de Gutenberg con los siguientes archivos:

index.js: Este archivo contiene el código principal de tu bloque.
style.css: Este archivo contiene los estilos de tu bloque.
template.php: Este archivo contiene la plantilla de tu bloque.

Personaliza tu bloque. Puedes personalizar tu bloque modificando el código en los archivos index.js, style.css y template.php.

En este ejemplo, crearemos un bloque simple que muestra un texto. Modificaremos el archivo index.js para agregar la siguiente función:

JavaScript

const { registerBlockType } = wp.blocks;

function MyBlock(props) {
  return (
    <div>
      <h1>Este es mi bloque de Gutenberg</h1>
    </div>
  );
}

registerBlockType("my-block", {
  title: "Mi bloque de Gutenberg",
  icon: "editor-paragraph",
  category: "common",
  edit: MyBlock,
});

Esta función crea un bloque con un encabezado de nivel 1 que dice «Este es mi bloque de Gutenberg».

Compila tu bloque. Puedes compilar tu bloque usando el comando npm run build.

npm run build

Esto creará una carpeta dist que contiene los archivos compilados de tu bloque.

Activa tu bloque. Puedes activar tu bloque agregando el siguiente código a tu archivo functions.php:

PHP

function my_block_init() {
  register_block_type("my-block");
}

add_action("init", "my_block_init");

Este código registra tu bloque en WordPress.

Una vez que hayas completado estos pasos, podrás usar tu bloque en cualquier publicación o página de WordPress.

Consejos para crear bloques de Gutenberg:

Usa la documentación de WordPress para obtener información sobre cómo crear bloques de Gutenberg.
Empieza con bloques simples y luego aumenta la complejidad a medida que aprendas más.
Comparte tus bloques con otros usuarios de WordPress.

Aquí hay algunos otros ejemplos de bloques de Gutenberg que puedes crear:

Un bloque de formulario que permite a los usuarios recopilar información.
Un bloque de galería que muestra imágenes o videos.
Un bloque de mapa que muestra un mapa de un área específica.
Un bloque de widget que muestra contenido personalizado.

Con un poco de práctica, podrás crear bloques de Gutenberg personalizados que se adapten a tus necesidades específicas.

Instalando node

Necesitaremos tener node instalado en
nuestro ordenador para poder trabajar con
los bloques de gutenberg.

Enlace: https://nodejs.org/en/download

Para instalar Node en Windows, sigue estos pasos:

Descarga el instalador de Node desde el sitio web oficial.
Ejecuta el instalador y sigue las instrucciones en pantalla.
Reinicia tu computadora.

Una vez que Node esté instalado, puedes verificar la versión instalada usando el siguiente comando:

node -v

Si Node está instalado correctamente, deberías ver la versión que está instalada.

Opcional: Añadir Node al PATH de Windows

Para que puedas usar Node desde cualquier directorio, puedes añadirlo al PATH de Windows. Para hacerlo, sigue estos pasos:

Abre el editor de registro de Windows.
Navega hasta la siguiente clave:

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Environment

Crea una nueva clave llamada NODE_PATH.
En el valor de la clave, escribe la ruta a la carpeta node_modules de tu instalación de Node.
Cierra el editor de registro.

Una vez que hayas añadido Node al PATH, podrás usar el comando node desde cualquier directorio.

Problemas comunes

Si tienes problemas para instalar Node en Windows, puedes probar los siguientes consejos:

Asegúrate de que tienes los permisos necesarios para instalar software en tu computadora.
Cierra cualquier programa que pueda estar usando Node antes de instalarlo.
Intenta instalar una versión anterior de Node.
Si estás usando un antivirus, desactívalo temporalmente mientras instalas Node.

Si sigues teniendo problemas, puedes consultar la documentación de Node para obtener más ayuda.

Instalando LocalWP

Para instalar LocalWP, sigue estos pasos:

Descarga el instalador de LocalWP desde el sitio web oficial.
Ejecuta el instalador y sigue las instrucciones en pantalla.
Reinicia tu computadora.

Una vez que LocalWP esté instalado, puedes iniciarlo desde el menú Inicio.

Creando una nueva instalación de WordPress

Para crear una nueva instalación de WordPress con LocalWP, sigue estos pasos:

Abre LocalWP.
Haz clic en el botón «Crear nuevo sitio».
Escribe un nombre para tu sitio web.
Selecciona la versión de WordPress que quieres usar.
Haz clic en el botón «Crear».

LocalWP creará una nueva instalación de WordPress en tu computadora. Puedes acceder a ella desde tu navegador web usando la dirección que se muestra en la pantalla.

Comprobando la instalación

Una vez que hayas creado tu instalación de WordPress, puedes comprobarla para asegurarte de que funciona correctamente.

Accede a tu instalación de WordPress usando la dirección que se muestra en la pantalla.
Inicia sesión con el usuario administrador y la contraseña que se crearon durante la instalación.
Haz clic en el menú «Apariencia».
Selecciona el tema «Twenty Twenty-Two».
Haz clic en el botón «Activar».

Tu instalación de WordPress debería tener ahora un aspecto similar al siguiente:

Configuración de LocalWP

LocalWP te permite configurar algunas opciones para tu entorno de desarrollo. Para acceder a la configuración, haz clic en el botón «Configuración» en la esquina superior derecha de la ventana de LocalWP.

Opciones de configuración:

Puerto: El puerto que usa LocalWP para servir tus sitios web.
Directorio raíz: El directorio donde se almacenan tus sitios web.
Base de datos: Las opciones de configuración de la base de datos de tus sitios web.
Idioma: El idioma que usa LocalWP.

Puedes cambiar estas opciones según tus necesidades.

Consejos para usar LocalWP:

Puedes crear tantas instalaciones de WordPress como necesites con LocalWP.
Puedes acceder a tus instalaciones de WordPress desde cualquier dispositivo conectado a tu red local.
Puedes usar LocalWP para probar nuevos plugins y temas de WordPress sin tener que instalarlos en un servidor en vivo.

Ahora que tienes una instalación de WordPress accesible, puedes empezar a crear bloques de Gutenberg.

Usando @wordpress/create-block

El comando npx @wordpress/create-block my-first-block creará un nuevo complemento de WordPress con un bloque básico llamado «my-first-block». El complemento incluirá los siguientes archivos:

index.js: Este archivo registra el bloque con WordPress.
my-first-block.php: Este archivo contiene el código PHP del bloque.
my-first-block.editor.css: Este archivo contiene el CSS para el editor de bloques.
my-first-block.style.css: Este archivo contiene el CSS para el bloque en el front-end.

Para crear el complemento, abra una ventana de terminal y navegue a la carpeta donde desea crear el complemento. Luego, ejecute el siguiente comando:

npx @wordpress/create-block my-first-block

Una vez creado el complemento, puede instalarlo en su sitio de WordPress siguiendo estos pasos:

Cargue el directorio del complemento en su directorio /wp-content/plugins/.
Active el complemento desde la página de Complementos en su panel de control de WordPress.

Una vez activado el complemento, puede agregar el bloque «my-first-block» a sus publicaciones y páginas utilizando el editor de bloques de Gutenberg.

Aquí hay un ejemplo de cómo usar el bloque:

Abra la publicación o página donde desea agregar el bloque.
Haga clic en el botón «+» en el editor de bloques de Gutenberg.
Escriba «my-first-block» en la barra de búsqueda.
Haga clic en el bloque «My First Block» para agregarlo a la publicación o página.

Luego, puede personalizar el bloque utilizando la configuración del bloque.

Ejemplo de uso del bloque

El bloque «my-first-block» es un bloque básico que solo tiene un campo editable: el texto del bloque. Para personalizar el bloque, puede cambiar el texto del campo «Texto del bloque».

Por ejemplo, puede cambiar el texto del campo «Texto del bloque» a «Este es mi primer bloque de Gutenberg». Luego, cuando agregue el bloque a una publicación o página, el texto del bloque se mostrará como «Este es mi primer bloque de Gutenberg».

También puede cambiar el estilo del bloque utilizando el CSS del bloque. Para hacer esto, abra el archivo my-first-block.style.css y agregue el siguiente CSS:

CSS

.my-first-block {
  background-color: red;
  color: white;
  border: 1px solid black;
}

Este CSS cambiará el color de fondo del bloque a rojo, el color del texto a blanco y el borde del bloque a negro.

Otros bloques personalizados

Puede crear bloques personalizados más complejos agregando más campos editables al bloque. Por ejemplo, puede agregar un campo para la imagen del bloque, un campo para el título del bloque o un campo para el enlace del bloque.

También puede agregar más CSS al bloque para personalizar su estilo. Por ejemplo, puede agregar CSS para cambiar el tamaño de fuente del texto del bloque o para agregar una sombra al bloque.

Efectivamente, la carpeta build contiene todos los bloques compilados y preparados para usar en WordPress. Esta carpeta se crea automáticamente cuando se utiliza el comando npx @wordpress/create-block.

La carpeta `build` contiene los siguientes archivos

index.js: Este archivo es idéntico al archivo index.js de la carpeta raíz del plugin.
my-first-block.php: Este archivo es idéntico al archivo my-first-block.php de la carpeta raíz del plugin.
my-first-block.editor.css: Este archivo es idéntico al archivo my-first-block.editor.css de la carpeta raíz del plugin.
my-first-block.style.css: Este archivo es idéntico al archivo my-first-block.style.css de la carpeta raíz del plugin.

Para utilizar el bloque en WordPress, debe copiar los archivos de la carpeta build a la carpeta /wp-content/plugins/my-first-block/.

Una vez que haya copiado los archivos, puede activar el complemento desde la página de Complementos en su panel de control de WordPress.

El bloque estará disponible para que lo utilice en sus publicaciones y páginas.

¿Por qué no tenemos que programar nada en la carpeta build?

La carpeta build se crea automáticamente utilizando el comando npx @wordpress/create-block. El comando compila los archivos de la carpeta raíz del plugin y los coloca en la carpeta build.

Por lo tanto, no es necesario que programemos nada en la carpeta build.

La carpeta node_modules

Contiene todas las dependencias que posiblemente necesitemos para programar nuestros bloques. Estas dependencias incluyen bibliotecas JavaScript, frameworks y herramientas que podemos utilizar para crear nuestros bloques.

La carpeta node_modules se crea automáticamente cuando se utiliza el comando npx @wordpress/create-block. El comando instala las dependencias necesarias en la carpeta node_modules.

No tenemos que programar nada en la carpeta node_modules. Sin embargo, podemos acceder a las dependencias de la carpeta node_modules desde nuestros bloques.

La carpeta `src` es donde estaremos programando la mayor parte del tiempo.

En esta carpeta se encuentran los archivos de los bloques en versión raw, antes de ser compilados.

Los archivos de los bloques en la carpeta src se dividen en dos categorías:

Archivos de registro: Estos archivos registran los bloques con WordPress.
Archivos de implementación: Estos archivos implementan las características de los bloques.

Archivos de registro

Los archivos de registro son responsables de registrar los bloques con WordPress. El archivo de registro principal es index.js. Este archivo contiene la función registerBlockType(), que define las propiedades del bloque, como su nombre, icono y descripción.

La siguiente tabla describe los archivos de registro con más detalle:

Archivo	Descripción
`index.js`	Este archivo registra el bloque con WordPress. Contiene la función `registerBlockType()`, que define las propiedades del bloque, como su nombre, icono y descripción.

Archivos de implementación

Los archivos de implementación son responsables de implementar las características de los bloques. Estos archivos suelen utilizar React para crear la interfaz de usuario del bloque.

La siguiente tabla describe los archivos de implementación con más detalle:

Archivo	Descripción
`my-block.js`	Este archivo implementa el bloque «My Block».

Ejemplo de archivo de implementación

El siguiente es un ejemplo de un archivo de implementación de un bloque:

JavaScript

import React from "react";

const MyBlock = () => {
  return (
    <div>
      <h2>Este es mi bloque</h2>
    </div>
  );
};

export default MyBlock;

Este archivo crea un bloque simple con un encabezado que dice «Este es mi bloque».

Cómo programar en la carpeta src

Para programar en la carpeta src, podemos utilizar cualquier editor de código que deseemos. Una vez que hayamos terminado de programar, podemos compilar los archivos de la carpeta src utilizando el comando npm run build.

El comando npm run build compilará los archivos de la carpeta src y los colocará en la carpeta build.

Una vez que los archivos estén compilados, podemos copiarlos a la carpeta /wp-content/plugins/my-block/.

Una vez que haya copiado los archivos, puede activar el complemento desde la página de Complementos en su panel de control de WordPress.

El bloque estará disponible para que lo utilice en sus publicaciones y páginas.

my-first-block.php

El archivo my-first-block.php es el archivo donde configuramos la descripción del plugin y registramos todos los tipos de bloque que programemos.

Este archivo es un archivo de PHP que utiliza la clase WP_Block_Register para registrar los bloques con WordPress.

El siguiente es un ejemplo de un archivo my-first-block.php:

PHP

<?php

class MyFirstBlock_Block_Registrar {

  public function __construct() {
    // Register the "My First Block" block.
    register_block_type(
      'my-first-block/my-first-block',
      [
        'title' => 'My First Block',
        'icon' => 'editor-paragraph',
        'category' => 'common',
        'attributes' => [
          'text' => [
            'type' => 'string',
            'default' => '',
          ],
        ],
      ]
    );
  }
}

new MyFirstBlock_Block_Registrar();

Este archivo registra un bloque llamado «My First Block». El bloque tiene el siguiente aspecto:

El título del bloque es «My First Block».
El icono del bloque es un párrafo.
La categoría del bloque es «common».
El bloque tiene un atributo llamado «text». El atributo «text» es un campo de texto que se puede utilizar para personalizar el contenido del bloque.

Cómo configurar la descripción del plugin

Para configurar la descripción del plugin, podemos utilizar la propiedad description de la clase WP_Block_Register.

Por ejemplo, para cambiar la descripción del bloque «My First Block» a «Este es mi primer bloque personalizado», podemos modificar el archivo my-first-block.php de la siguiente manera:

PHP

<?php

class MyFirstBlock_Block_Registrar {

  public function __construct() {
    // Register the "My First Block" block.
    register_block_type(
      'my-first-block/my-first-block',
      [
        'title' => 'My First Block',
        'icon' => 'editor-paragraph',
        'category' => 'common',
        'attributes' => [
          'text' => [
            'type' => 'string',
            'default' => '',
          ],
        ],
        'description' => 'Este es mi primer bloque personalizado',
      ]
    );
  }
}

new MyFirstBlock_Block_Registrar();

Cómo registrar tipos de bloque

Para registrar tipos de bloque, podemos utilizar la función register_block_type(). La función register_block_type() toma los siguientes argumentos:

El nombre del bloque.
Un array con las propiedades del bloque.

Las propiedades del bloque incluyen el título, el icono, la categoría y los atributos del bloque.

El siguiente es un ejemplo de cómo registrar un tipo de bloque:

PHP

<?php

class MyFirstBlock_Block_Registrar {

  public function __construct() {
    // Register the "My First Block" block.
    register_block_type(
      'my-first-block/my-first-block',
      [
        'title' => 'My First Block',
        'icon' => 'editor-paragraph',
        'category' => 'common',
        'attributes' => [
          'text' => [
            'type' => 'string',
            'default' => '',
          ],
        ],
      ]
    );
  }
}

new MyFirstBlock_Block_Registrar();

Este código registra un bloque llamado «My First Block». El bloque tiene el siguiente aspecto:

El título del bloque es «My First Block».
El icono del bloque es un párrafo.
La categoría del bloque es «common».
El bloque tiene un atributo llamado «text». El atributo «text» es un campo de texto que se puede utilizar para personalizar el contenido del bloque.

my-first-block.php

Efectivamente, el archivo my-first-block.php contiene todas las definiciones de un plugin, así como la función register_block_type().

La función register_block_type() registra el bloque utilizando los metadatos almacenados en el archivo build/block.json.

El archivo build/block.json contiene los siguientes datos:

El nombre del bloque.
El título del bloque.
El icono del bloque.
La categoría del bloque.
Los atributos del bloque.

El siguiente es un ejemplo de un archivo build/block.json:

JSON

{
  "name": "my-first-block",
  "title": "My First Block",
  "icon": "editor-paragraph",
  "category": "common",
  "attributes": [
    {
      "name": "text",
      "type": "string",
      "default": ""
    }
  ]
}

Este archivo registra un bloque llamado «My First Block». El bloque tiene el siguiente aspecto:

El nombre del bloque es «my-first-block».
El título del bloque es «My First Block».
El icono del bloque es un párrafo.
La categoría del bloque es «common».
El bloque tiene un atributo llamado «text». El atributo «text» es un campo de texto que se puede utilizar para personalizar el contenido del bloque.

¿Cómo funciona la función register_block_type()?

La función register_block_type() toma los siguientes argumentos:

El nombre del bloque.
Un array con las propiedades del bloque.

Las propiedades del bloque incluyen el título, el icono, la categoría y los atributos del bloque.

La función register_block_type() utiliza estos argumentos para crear un objeto WP_Block_Type. Luego, utiliza el objeto WP_Block_Type para registrar el bloque con WordPress.

¿Cómo puedo personalizar el bloque utilizando los metadatos?

Puede personalizar el bloque utilizando los metadatos modificando el archivo build/block.json. Por ejemplo, puede cambiar el título del bloque, el icono del bloque o la categoría del bloque.

También puede agregar atributos al bloque modificando el array attributes en el archivo build/block.json. Por ejemplo, puede agregar un atributo llamado «image» que permita al usuario agregar una imagen al bloque.

readme.txt

Efectivamente, el archivo readme.txt es el archivo donde configuramos la información del plugin para subirlo al repositorio de plugins de WordPress.

El archivo readme.txt es un archivo de texto que contiene la siguiente información:

El nombre del plugin.
La versión del plugin.
La descripción del plugin.
Los requisitos del plugin.
Los enlaces a los archivos del plugin.
Los enlaces a la documentación del plugin.

El siguiente es un ejemplo de un archivo readme.txt:

# My First Block

## Description

My First Block is a simple block that allows you to add a text block to your posts and pages.

## Version

1.0.0

## Requirements

* WordPress 5.8 or higher

## Installation

1. Upload the `my-first-block` folder to the `/wp-content/plugins/` directory.
2. Activate the plugin through the "Plugins" menu in WordPress.

## Usage

To add a My First Block to your post or page, click on the "My First Block" button in the editor.

## Documentation

For more information, please see the [documentation](https://example.com/docs/my-first-block/).

Este archivo configura el plugin para que se llame «My First Block», tenga la versión 1.0.0 y tenga la siguiente descripción:

My First Block es un bloque simple que le permite agregar un bloque de texto a sus publicaciones y páginas.

El archivo también configura los requisitos del plugin para que sea compatible con WordPress 5.8 o superior.

Finalmente, el archivo proporciona enlaces a los archivos del plugin, la documentación del plugin y un enlace al sitio web del desarrollador.

¿Cómo puedo personalizar la información del plugin?

Puede personalizar la información del plugin modificando el archivo readme.txt. Por ejemplo, puede cambiar el nombre del plugin, la versión del plugin o la descripción del plugin.

También puede agregar requisitos al plugin modificando la sección «Requirements» en el archivo readme.txt. Por ejemplo, puede agregar un requisito para que el plugin requiera la biblioteca JavaScript «jQuery».

Finalmente, puede agregar enlaces a los archivos del plugin, la documentación del plugin y un enlace al sitio web del desarrollador modificando las secciones correspondientes en el archivo readme.txt.

Anatomía de un bloque

Un bloque en WordPress es un componente de interfaz de usuario que se puede utilizar para agregar contenido a las publicaciones y páginas. Los bloques se pueden utilizar para crear una variedad de elementos de contenido, como texto, imágenes, videos, código y más.

La anatomía de un bloque se puede dividir en dos partes principales:

Metadatos: Los metadatos son datos sobre el bloque que se utilizan para registrarlo con WordPress y proporcionar información sobre el bloque al usuario.
Implementación: La implementación es el código que crea la interfaz de usuario del bloque y le permite interactuar con el usuario.

Metadatos

Los metadatos de un bloque se definen en el archivo build/block.json. El archivo build/block.json es un archivo JSON que contiene las siguientes propiedades:

name: El nombre del bloque.
title: El título del bloque.
icon: El icono del bloque.
category: La categoría del bloque.
attributes: Los atributos del bloque.

La siguiente tabla describe las propiedades de los metadatos con más detalle:

Propiedad	Descripción
`name`	El nombre único del bloque.
`title`	El título del bloque que se muestra al usuario.
`icon`	El icono que se utiliza para representar el bloque en la barra de herramientas del editor.
`category`	La categoría a la que pertenece el bloque.
`attributes`	Los atributos que se pueden utilizar para personalizar el bloque.

Implementación

La implementación de un bloque se define en los archivos index.js y [nombre del bloque].js. El archivo index.js es el archivo principal del bloque y registra el bloque con WordPress. El archivo [nombre del bloque].js es el archivo que crea la interfaz de usuario del bloque y le permite interactuar con el usuario.

El archivo index.js contiene la siguiente función:

JavaScript

registerBlockType(
  '[nombre del bloque]',
  [
    // Propiedades del bloque
  ],
);

Esta función registra el bloque con WordPress. La función toma dos argumentos:

El nombre del bloque.
Un array con las propiedades del bloque.

Las propiedades del bloque que se pasan a la función registerBlockType() son las mismas que las propiedades que se definen en el archivo build/block.json.

El archivo [nombre del bloque].js contiene el código que crea la interfaz de usuario del bloque. El código suele utilizar la biblioteca React para crear la interfaz de usuario.

La siguiente es una descripción general de los pasos involucrados en la creación de un bloque:

Cree un nuevo plugin de WordPress.
Cree un archivo build/block.json y defina los metadatos del bloque.
Cree los archivos index.js y [nombre del bloque].js y implemente el bloque.
Compilar los archivos del bloque utilizando el comando npm run build.
Cargue el plugin en WordPress.

Una vez que haya creado un bloque, puede utilizarlo en sus publicaciones y páginas. Para agregar un bloque a una publicación o página, haga clic en el botón «Agregar bloque» en el editor y seleccione el bloque que desea agregar.

Para obtener más información sobre cómo crear bloques, consulte la documentación de WordPress para desarrolladores.

block.json

Efectivamente, el archivo build/block.json es el archivo donde configuramos todo lo relativo a nuestro bloque.

El archivo build/block.json es un archivo JSON que contiene los metadatos del bloque. Los metadatos son datos sobre el bloque que se utilizan para registrarlo con WordPress y proporcionar información sobre el bloque al usuario.

Las siguientes propiedades se pueden definir en el archivo build/block.json:

name: El nombre del bloque.
title: El título del bloque.
icon: El icono del bloque.
category: La categoría del bloque.
attributes: Los atributos del bloque.

La siguiente tabla describe las propiedades de los metadatos con más detalle:

Propiedad	Descripción
`name`	El nombre único del bloque.
`title`	El título del bloque que se muestra al usuario.
`icon`	El icono que se utiliza para representar el bloque en la barra de herramientas del editor.
`category`	La categoría a la que pertenece el bloque.
`attributes`	Los atributos que se pueden utilizar para personalizar el bloque.

Ejemplo

El siguiente es un ejemplo de un archivo build/block.json:

JSON

{
  "name": "my-first-block",
  "title": "My First Block",
  "icon": "editor-paragraph",
  "category": "common",
  "attributes": [
    {
      "name": "text",
      "type": "string",
      "default": ""
    }
  ]
}

Este archivo define un bloque llamado «My First Block». El bloque tiene el siguiente aspecto:

El nombre del bloque es «my-first-block».
El título del bloque es «My First Block».
El icono del bloque es un párrafo.
La categoría del bloque es «common».
El bloque tiene un atributo llamado «text». El atributo «text» es un campo de texto que se puede utilizar para personalizar el contenido del bloque.

Cómo personalizar el bloque utilizando los metadatos

Puede personalizar el bloque utilizando los metadatos modificando el archivo build/block.json. Por ejemplo, puede cambiar el título del bloque, el icono del bloque o la categoría del bloque.

edit.js

El archivo edit.js es el archivo donde programaremos cómo se muestra el bloque en el editor Gutenberg.

El archivo edit.js es un archivo JavaScript que crea la interfaz de usuario del bloque en el editor Gutenberg. El código suele utilizar la biblioteca React para crear la interfaz de usuario.

El archivo edit.js debe exportar una función que devuelva un componente React. La función suele tener el siguiente aspecto:

JavaScript

const EditMyFirstBlock = (props) => {
  // Código para crear la interfaz de usuario del bloque
  return (
    <div>
      // Contenido del bloque
    </div>
  );
};

export default EditMyFirstBlock;

Ejemplo

El siguiente es un ejemplo de un archivo edit.js que crea un bloque simple con un campo de texto:

JavaScript

import React from "react";

const EditMyFirstBlock = (props) => {
  const { attributes, setAttributes } = props;

  return (
    <div>
      <input
        type="text"
        value={attributes.text}
        onChange={(e) => setAttributes({ text: e.target.value })}
      />
    </div>
  );
};

export default EditMyFirstBlock;

Este archivo crea un bloque con el siguiente aspecto:

<div>
  <input type="text" />
</div>

El campo de texto tiene el atributo name establecido en text. El valor del campo de texto se almacena en el atributo text del objeto props. El campo de texto se actualiza cuando el usuario cambia su valor.

Cómo personalizar la interfaz de usuario del bloque

Puede personalizar la interfaz de usuario del bloque modificando el código en el archivo edit.js. Por ejemplo, puede cambiar el diseño del bloque, agregar nuevos campos o modificar el comportamiento de los campos existentes.

También puede utilizar las funciones proporcionadas por la biblioteca React para crear una interfaz de usuario más compleja.

editor.scss

El archivo editor.scss es el archivo donde programaremos todo el CSS para el bloque cuando lo veamos en el editor de Gutenberg.

El archivo editor.scss es un archivo CSS que se utiliza para estilizar la interfaz de usuario del bloque en el editor Gutenberg.

El archivo editor.scss debe importar los estilos de los archivos style.css y editor-style.css. El archivo style.css contiene los estilos generales del bloque, y el archivo editor-style.css contiene los estilos específicos para el editor Gutenberg.

El archivo editor.scss puede utilizar las siguientes variables para acceder a los atributos del bloque:

$attributes.text: El valor del atributo text del bloque.

Ejemplo

El siguiente es un ejemplo de un archivo editor.scss que estiliza un bloque simple con un campo de texto:

CSS

@import "style.css";
@import "editor-style.css";

.my-first-block {
  background-color: #ffffff;
  padding: 10px;
}

.my-first-block input {
  width: 100%;
}

.my-first-block input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}

.my-first-block input[type="text"]:focus {
  border: 1px solid #000;
}

Este archivo estiliza el bloque de la siguiente manera:

El bloque tiene un fondo blanco y un relleno de 10 píxeles.
El campo de texto tiene un ancho del 100% y un borde de 1 píxel de color gris claro.
El campo de texto se resalta con un borde de color negro cuando el usuario lo enfoca.

Cómo personalizar el CSS del bloque

Puede personalizar el CSS del bloque modificando el código en el archivo editor.scss. Por ejemplo, puede cambiar los colores, los tamaños o las fuentes.

También puede utilizar las variables proporcionadas por el archivo editor-style.css para crear estilos más complejos.

index.js

El archivo index.js es el archivo donde programaremos el punto de inicio del bloque. Importamos las dependencias y registramos el tipo de bloque en el cliente.

El archivo index.js es el archivo principal del bloque. Este archivo importa las dependencias del bloque, registra el tipo de bloque y exporta una función que se utiliza para registrar el bloque con WordPress.

El código en el archivo index.js suele tener el siguiente aspecto:

JavaScript

import { registerBlockType } from "@wordpress/blocks";
import EditMyFirstBlock from "./edit";

export default function registerMyFirstBlock() {
  registerBlockType("my-first-block", {
    edit: EditMyFirstBlock,
  });
}

Este código registra el tipo de bloque con el nombre «my-first-block». El bloque utiliza el componente EditMyFirstBlock para crear su interfaz de usuario en el editor Gutenberg.

Dependencias

El archivo index.js importa las siguientes dependencias:

@wordpress/blocks: Esta dependencia proporciona las funciones necesarias para registrar tipos de bloques con WordPress.
./edit: Esta dependencia importa el componente EditMyFirstBlock.

Registro del bloque

La función registerMyFirstBlock() registra el tipo de bloque con WordPress. La función toma un objeto con las propiedades siguientes:

name: El nombre del bloque.
edit: El componente React que se utiliza para crear la interfaz de usuario del bloque en el editor Gutenberg.

Cómo personalizar el punto de inicio del bloque

Puede personalizar el punto de inicio del bloque modificando el código en el archivo index.js. Por ejemplo, puede agregar dependencias adicionales o modificar la función registerMyFirstBlock() para registrar el tipo de bloque de manera diferente.

También puede utilizar las funciones proporcionadas por la biblioteca React para crear una interfaz de usuario más compleja.

save.js

El archivo save.js es el archivo donde programaremos cómo aparecerá el bloque en el frontend, no en el editor de Gutenberg.

El archivo save.js es un archivo JavaScript que crea la interfaz de usuario del bloque en el frontend. El código suele utilizar la biblioteca React para crear la interfaz de usuario.

El archivo save.js debe exportar una función que devuelva un componente React. La función suele tener el siguiente aspecto:

JavaScript

const SaveMyFirstBlock = (props) => {
  // Código para crear la interfaz de usuario del bloque
  return (
    <div>
      // Contenido del bloque
    </div>
  );
};

export default SaveMyFirstBlock;

Ejemplo

El siguiente es un ejemplo de un archivo save.js que crea un bloque simple con un campo de texto:

JavaScript

import React from "react";

const SaveMyFirstBlock = (props) => {
  const { attributes } = props;

  return (
    <div>
      <p>{attributes.text}</p>
    </div>
  );
};

export default SaveMyFirstBlock;

Este archivo crea un bloque con el siguiente aspecto:

<div>
  <p>Texto del bloque</p>
</div>

El texto del bloque se almacena en el atributo text del objeto props.

Cómo personalizar la interfaz de usuario del bloque

Puede personalizar la interfaz de usuario del bloque modificando el código en el archivo save.js. Por ejemplo, puede cambiar el diseño del bloque, agregar nuevos campos o modificar el comportamiento de los campos existentes.

También puede utilizar las funciones proporcionadas por la biblioteca React para crear una interfaz de usuario más compleja.

Cómo utilizar los atributos del bloque

Los atributos del bloque se pueden utilizar para personalizar la interfaz de usuario del bloque en el frontend. Por ejemplo, el siguiente código utiliza el atributo text para mostrar el texto del bloque en un párrafo:

JavaScript

const SaveMyFirstBlock = (props) => {
  const { attributes } = props;

  return (
    <div>
      <p>{attributes.text}</p>
    </div>
  );
};

También puede utilizar los atributos del bloque para controlar el comportamiento del bloque. Por ejemplo, el siguiente código utiliza el atributo color para cambiar el color del fondo del bloque:

JavaScript

const SaveMyFirstBlock = (props) => {
  const { attributes } = props;

  return (
    <div style={{ backgroundColor: attributes.color }}>
      Contenido del bloque
    </div>
  );
};

style.scss

El archivo style.scss es el archivo donde programaremos todo el CSS para el bloque cuando lo veamos tanto en el editor de Gutenberg como en el frontend.

El archivo style.scss es un archivo CSS que se utiliza para estilizar el bloque. El código suele utilizar la biblioteca Sass para crear estilos más complejos.

El archivo style.scss debe importar los estilos de los archivos editor-style.scss y frontend-style.scss. El archivo editor-style.scss contiene los estilos específicos para el editor Gutenberg, y el archivo frontend-style.scss contiene los estilos específicos para el frontend.

El archivo style.scss puede utilizar las siguientes variables para acceder a los atributos del bloque:

$attributes.text: El valor del atributo text del bloque.

Ejemplo

El siguiente es un ejemplo de un archivo style.scss que estiliza un bloque simple con un campo de texto:

CSS

@import "editor-style.scss";
@import "frontend-style.scss";

.my-first-block {
  background-color: #ffffff;
  padding: 10px;
}

.my-first-block input {
  width: 100%;
}

.my-first-block input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}

.my-first-block input[type="text"]:focus {
  border: 1px solid #000;
}

.my-first-block .content {
  font-size: 16px;
  line-height: 1.5;
}

Este archivo estiliza el bloque de la siguiente manera:

El bloque tiene un fondo blanco y un relleno de 10 píxeles.
El campo de texto tiene un ancho del 100% y un borde de 1 píxel de color gris claro.
El campo de texto se resalta con un borde de color negro cuando el usuario lo enfoca.

Cómo personalizar el CSS del bloque

Puede personalizar el CSS del bloque modificando el código en el archivo style.scss. Por ejemplo, puede cambiar los colores, los tamaños o las fuentes.

También puede utilizar las variables proporcionadas por los archivos editor-style.scss y frontend-style.scss para crear estilos más complejos.

Cómo utilizar los atributos del bloque

Los atributos del bloque se pueden utilizar para personalizar el CSS del bloque. Por ejemplo, el siguiente código utiliza el atributo color para cambiar el color del texto del bloque:

CSS

.my-first-block .content {
  color: var(--my-first-block-color);
}

También puede utilizar los atributos del bloque para controlar el comportamiento del CSS del bloque. Por ejemplo, el siguiente código utiliza el atributo size para cambiar el tamaño del texto del bloque:

CSS

.my-first-block .content {
  font-size: var(--my-first-block-size);
}

¡A programar!

Este video es perfecto para cualquier persona que quiera aprender a crear bloques personalizados para WordPress. No necesitas tener experiencia previa en programación para seguir este video.

Aquí tienes un ejemplo de cómo crear un bloque simple con un campo de texto:

├── block.json
├── edit.js
├── editor.scss
├── index.js
└── save.js

block.json

JSON

{
  "name": "my-first-block",
  "title": "My First Block",
  "icon": "editor-paragraph",
  "category": "common",
  "attributes": [
    {
      "name": "text",
      "type": "string",
      "default": ""
    }
  ]
}

Este archivo define un bloque llamado «My First Block» con un atributo llamado «text». El atributo «text» es un campo de texto que se puede utilizar para personalizar el contenido del bloque.

edit.js

JavaScript

import React from "react";

const EditMyFirstBlock = (props) => {
  const { attributes, setAttributes } = props;

  return (
    <div>
      <input
        type="text"
        value={attributes.text}
        onChange={(e) => setAttributes({ text: e.target.value })}
      />
    </div>
  );
};

export default EditMyFirstBlock;

Este archivo crea la interfaz de usuario del bloque en el editor Gutenberg. El campo de texto tiene el atributo name establecido en text. El valor del campo de texto se almacena en el atributo text del objeto props. El campo de texto se actualiza cuando el usuario cambia su valor.

editor.scss

CSS

@import "style.css";
@import "editor-style.css";

.my-first-block {
  background-color: #ffffff;
  padding: 10px;
}

.my-first-block input {
  width: 100%;
}

.my-first-block input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}

.my-first-block input[type="text"]:focus {
  border: 1px solid #000;
}

Este archivo estiliza la interfaz de usuario del bloque en el editor Gutenberg. El bloque tiene un fondo blanco y un relleno de 10 píxeles. El campo de texto tiene un ancho del 100% y un borde de 1 píxel de color gris claro. El campo de texto se resalta con un borde de color negro cuando el usuario lo enfoca.

index.js

JavaScript

import { registerBlockType } from "@wordpress/blocks";
import EditMyFirstBlock from "./edit";

export default function registerMyFirstBlock() {
  registerBlockType("my-first-block", {
    edit: EditMyFirstBlock,
  });
}

Este archivo registra el tipo de bloque con WordPress. El bloque utiliza el componente EditMyFirstBlock para crear su interfaz de usuario en el editor Gutenberg.

save.js

JavaScript

import React from "react";

const SaveMyFirstBlock = (props) => {
  const { attributes } = props;

  return (
    <div>
      <p>{attributes.text}</p>
    </div>
  );
};

export default SaveMyFirstBlock;

Este archivo crea la interfaz de usuario del bloque en el frontend. El bloque muestra el texto del bloque en un párrafo.

style.scss

CSS

@import "editor-style.scss";
@import "frontend-style.scss";

.my-first-block {
  background-color: #ffffff;
  padding: 10px;
}

.my-first-block .content {
  font-size: 16px;
  line-height: 1.5;
}

Este archivo estiliza el bloque en el frontend. El bloque tiene un fondo blanco y un relleno de 10 píxeles. El texto del bloque tiene un tamaño de fuente de 16 píxeles y una altura de línea de 1,5.

Una vez que hayas creado este código, puedes instalarlo en tu sitio web de WordPress. Para ello, sube los archivos del bloque a la carpeta `wp-content/plugins/my-first

↑

Cómo crear un bloque personalizado para WordPress con Gutenberg

React para crear bloques

Crear tu primer bloque de Gutenberg

Instalando node

Instalando LocalWP

Usando @wordpress/create-block

La carpeta build contiene los siguientes archivos

La carpeta node_modules

La carpeta src es donde estaremos programando la mayor parte del tiempo.

my-first-block.php

my-first-block.php

readme.txt

Anatomía de un bloque

block.json

edit.js

editor.scss

index.js

save.js

style.scss

¡A programar!

La carpeta `build` contiene los siguientes archivos

La carpeta `src` es donde estaremos programando la mayor parte del tiempo.