Cómo distribuir un bloque Gutenberg como plugin

Contents

Cómo distribuir un bloque Gutenberg como plugin

En este artículo detallado exploraremos paso a paso el proceso completo para crear, configurar y publicar un bloque de Gutenberg empaquetado como plugin en el repositorio oficial de WordPress.org. Cubriremos desde la estructura de archivos, las dependencias, el entorno de construcción, hasta la optimización, el readme.txt y los requisitos de revisión.

1. ¿Por qué distribuir tu bloque como plugin

Modularidad: Permite actualizar el bloque sin alterar el tema.
Reutilización: Facilita compartirlo con otros proyectos y clientes.
Mantenimiento: El repositorio de WordPress.org ofrece control de versiones y visibilidad global.

2. Requisitos previos

WordPress instalado localmente o en servidor de pruebas (>=5.0).
Node.js y npm (versión LTS).
Conocimientos básicos de JavaScript moderno (ESNext) y React.
Acceso a una cuenta en WordPress.org para subir tu plugin.

3. Estructura básica del plugin

Organiza tu proyecto según la convención estándar:

Archivo/Carpeta	Descripción
my-block-plugin.php	Archivo principal del plugin.
src/	Código fuente (JS/SCSS) de tu bloque.
build/	Archivos compilados listos para producción.
readme.txt	Descripción, instalación, FAQs para WordPress.org.

4. Archivo principal del plugin

En my-block-plugin.php, define la cabecera y registra los assets:

 mgb-block-script,
        editor_style  => mgb-block-style,
        style         => mgb-block-style,
    ) )
}
add_action( init, mgb_register_block )
>

5. Desarrollo del bloque con @wordpress/scripts

Inicializa el proyecto:
npm init -y
Instala las dependencias de desarrollo:
npm install @wordpress/scripts --save-dev
Crea src/index.js con el siguiente contenido:

import { registerBlockType } from @wordpress/blocks
import { __ } from @wordpress/i18n
import ./style.scss

registerBlockType( mgb/custom-block, {
    title: __( Mi Bloque, mi-bloque-gutenberg ),
    icon: smiley,
    category: widgets,
    edit() {
        return { __( Hola, editor!, mi-bloque-gutenberg ) }
    },
    save() {
        return { __( Hola, sitio público!, mi-bloque-gutenberg ) }
    },
} )

Añade scripts en package.json:

{
  scripts: {
    build: wp-scripts build --output-path=build,
    start: wp-scripts start
  }
}

6. Estilos y SCSS

Dentro de src/style.scss define estilos básicos:

.wp-block-mgb-custom-block {
  padding: 15px
  border: 1px solid #ccc
  background: #fff
  font-size: 1rem
}

7. Construir y probar

npm run build para generar build/.
Activa tu plugin en WordPress y prueba el bloque.
Usa npm run start para desarrollo con recarga en caliente.

8. Preparar el readme.txt

Sigue las pautas oficiales. Incluye secciones:

== Description ==
== Installation ==
== Screenshots == (opcional, con imágenes de bloques)
== Changelog ==
== Frequently Asked Questions ==

9. Subida al repositorio de WordPress.org

Crea un nuevo plugin en https://wordpress.org/plugins/add/.
Usa Subversion (SVN) para subir tu código.
Espera la aprobación del equipo de revisión (review team).

10. Buenas prácticas y optimización

Internacionalización: Usa #95() y dominio de texto.
Minificación: Deja que wp-scripts genere archivos optimizados.
Pruebas: Verifica compatibilidad con diferentes temas y versiones de WP.
Documentación: Mantén tu readme.txt actualizado y claro.

11. Recursos y referencias

Autor: Tu Nombre bull Fecha: 2024 bull Licencia: GPLv2

Acepto donaciones de BAT's mediante el navegador Brave 🙂

Cómo distribuir un bloque Gutenberg como plugin