Saltar al contenido

Tutorial cómo crear bloques del editor Gutenberg paso a paso (2019)

Tutorial cómo crear bloques del editor Gutenberg paso a paso (2019)
5 (100%) 1 vote[s]

2J7wes2

Aprender a crear un bloque Gutenberg es una buena inversión de futuro. No importa dónde caiga en el debate de Gutenberg, el editor de bloques está aquí para quedarse.

Incluso si ha vuelto al editor clásico, es muy probable que en algún momento de los próximos años empiece a crear páginas web en forma de bloques.

Cada vez más temas, como Twenty Veinte y Diecinueve, se aprovecharán de lo que el nuevo editor de WordPress tiene para ofrecer. Además, pronto también usarás bloques en otras partes de WordPress como el menú de navegación o los widgets. Por lo tanto, es mejor que te concentres en ellos ahora.

El editor viene con una serie de bloques estándar que se pueden ampliar mediante plugins. Sin embargo, ser capaz de construir sus propias soluciones personalizadas es a menudo muy útil, que es lo que este tutorial en bloque de Gutenberg le enseñará. Pero primero, comencemos con lo básico.

¿Qué son los bloques Gutenberg?

Antes de que lleguemos a la parte de cómo hacerlo, primero decidamos de qué estamos hablando.

Ejemplos de bloques de Gutenberg

El principal cambio que Gutenberg introdujo en la creación de contenido en WordPress es que, en lugar de tener un gran pedazo de contenido (como lo tenía el editor clásico), las páginas web ahora están segmentadas en partes más pequeñas, llamadas bloques.

Estas pueden ser muchas cosas diferentes:

  • Párrafos
  • Encabezados
  • Citas en bloque
  • Imágenes y galerías
  • Listas
  • Medios integrados
  • Botones
  • Mesas

gutenberg block example
Cada bloque tiene su propio contenido, formato y otras opciones y puede moverlo, eliminarlo y reutilizarlo a voluntad.

¿Por qué el cambio?

¿Por qué cambiar un sistema en funcionamiento? Bueno, la idea principal detrás del editor de Gutenberg es hacer que la experiencia de edición sea más flexible y fácil de personalizar, especialmente para los usuarios principiantes.

Le da más control sobre toda la página, no sólo sobre el contenido principal. Puede personalizar los elementos de una manera más detallada y sin aplicarles clases CSS u otros inconvenientes técnicos.

En su lugar, puede modificar su formato, posición, colores, tamaños y mucho más directamente desde la interfaz de usuario.

Además, los bloques en el editor tienen el mismo aspecto que en la página. Esto hace que la experiencia del usuario sea mejor, ya que la vista del editor se asemeja más al producto final.
twenty nineteen back end styling
Además, pronto ya no tendrás que aprender diferentes formas de mostrar los elementos de la página (como los atajos y los widgets), sino simplemente uno: los bloques. Cuando usted sabe cómo utilizarlos, puede controlar todas las diferentes partes de su sitio.

Entonces, ¿por qué crear su propio bloque Gutenberg?

Una de las cosas más emocionantes de WordPress es que es tan personalizable. Prácticamente cualquier cosa sobre la plataforma es adaptable a sus necesidades.

Por ejemplo, el editor clásico es completamente personalizable. Entonces, ¿por qué no hacer lo mismo con su nueva contraparte?

Especialmente si hay bloques de contenido que necesitas con frecuencia pero que el editor, los plugins o los temas no ofrecen (todavía), crear los tuyos propios tiene sentido. En lugar de poner código personalizado cada vez, es más práctico poder elegirlo desde el menú incorporado. ¿No estás de acuerdo?

Después de todo, su sitio web debe adaptarse a sus necesidades para que trabajar con él sea lo más fácil posible. Además, saber cómo crear su propio bloque Gutenberg se está convirtiendo rápidamente en una habilidad útil.

¿Es Fácil?

Desde un punto de vista técnico, es importante tener en cuenta que la mayoría de los componentes de los bloques de Gutenberg están escritos en JavaScript. Esto va de la mano con el consejo de Matt Mullenweg de 2015 de aprender el lenguaje de programación – profundamente (si quieres hacer eso, consulta estos recursos útiles).

El cambio hacia JavaScript ha sido evidente en los últimos años, por ejemplo, en Calypso. El lenguaje de programación viene con una tonelada de beneficios y las aplicaciones web JavaScript-powered construidas sobre APIs (como Gutenberg) son el futuro de la web.

Sin embargo, eso también significa que, desafortunadamente, la creación de bloques Gutenberg no es muy amigable para los principiantes. No soy un desarrollador ni siquiera por un largo trecho de la palabra, pero he estado trabajando, escribiendo y construyendo sitios con WordPress durante casi diez años.

Aún así, tengo que admitir que luché para completar el reto que me puse con este puesto. Espero que, presentando el proceso paso a paso, pueda abrirlo a otras personas que no se ganan la vida escribiendo código. Veamos, ¿de acuerdo?

Cómo crear bloques para el editor Gutenberg de WordPress

Muy bien, ahora que tenemos la teoría fuera del camino, hablemos de cómo crear un bloque de Gutenberg.

Para este tutorial usaremos el tema Veintinueve, el primer tema que fue hecho específicamente para el nuevo editor. Fuera de la caja, ofrece varios bloques personalizados, entre los que se encuentran cubiertas, widgets, cotizaciones, pullquotes y mucho más. A esto añadiremos un simple bloque de llamada a la acción con contenido personalizable y estilo personalizado.

Para no empezar de cero, utilizaremos el kit de herramientas de desarrollo de bloque guten de Ahmad Awais. Todo lo que estás a punto de leer se basa en ello. Además, enlazará con la documentación oficial de Gutenberg cuando lo considere prudente o necesario.

1. Prepare su entorno

Uno de los primeros retos para crear un bloque Gutenberg es configurar el entorno de desarrollo. Aunque es fácil configurar una instalación local de WordPress, para jugar con el nuevo editor necesitas cosas como webpack, React, ESLint, Babel, y más.

Si no sabes lo que significa la mitad de estas cosas, está bien, yo tampoco. Lo importante es que todas ellas están incluidas y configuradas correctamente en el kit create guten block.

Sin embargo, para poder utilizarlo, primero debe instalar node.js y npm. Para ello, vaya al sitio web oficial node.js y descargue el archivo de instalación correcto para su sistema.

Una vez hecho esto, ejecute y ejecute la instalación. ¿Listo? Genial, acabas de completar el primer paso.

2. Configure sus archivos de plugin con create guten block

Después de eso, es hora de crear el primer bloque. Puede hacerlo fácilmente a través de la consola. Si nunca has trabajado con él antes, no te preocupes. También fue mi primera vez.

Lo primero que tienes que hacer es abrir la consola. En Windows, pulse el botón Windows, busque la línea de comandos y ábrala. Si estás en un Mac, usa Cmd+F y luego busca la consola. Ambos deberían abrir algo como esto:
create gutenberg block in windows command prompt with create guten block
Aquí, lo primero que quieres hacer es navegar al directorio de plugins de tu sitio local. Puede hacerlo con el comando cd. Escribir cd[nombre del directorio] abre un directorio, cd… vuelve a un directorio.

También puede copiar la ruta al directorio de plugins desde la parte superior de su ventana y simplemente pegarla después del comando cd para ir allí directamente.
navigate directories in console
Una vez allí, desea ejecutar el siguiente comando:

 

npx create-guten-block my-block
1
npx create-guten-block my-block

Asegúrese de reemplazar mi bloque con el nombre del bloque que desea crear. Por ejemplo, en mi caso, fui con cta-block.

La máquina creará un directorio con el mismo nombre, descargará toda la información necesaria y configurará los archivos de plugin que necesite para su bloque Gutenberg.
run create guten block
Tomará un poco de tiempo, pero cuando esté terminado, acabarás con esto:
create guten block structure
Una vez hecho esto, sigue el consejo de crear un bloque guten y entra en tu carpeta de plugins (recuerda, cd[nombre del directorio]) y escribe npm start.

Este último ejecutará el bloque en modo de desarrollo, estará atento a los cambios y reportará errores en su código.

3. Activar el plugin y probarlo

Una vez que haya llegado hasta aquí, ya puede utilizar el plugin que acaba de crear. Para ello, inicia sesión en tu sitio de WordPress, ve al menú de Plugins y actívalo allí.
create guten block in plugin menu
Cuando vaya al editor, haga clic en el símbolo más y busque el nombre del bloque, también lo encontrará incluido.
create gutenberg block and choose in editor
Incluso puede introducirlo en la página para encontrarlo en la pantalla:
create guten block sample block
No está mal, ¿verdad?

4. Editar plugin.php

La razón por la que no se ve nada en absoluto es porque actualmente el bloque contiene contenido ficticio. Es hora de cambiar eso.

Los archivos importantes para cualquier cambio son plugin.php dentro del directorio de plugins así como los tres archivos dentro de src/block llamados blocks.js, editor.scss y style.scss.

Con ellos, usted controla todo lo que tiene que ver con la funcionalidad y el diseño de su bloque Gutenberg de fabricación propia.

El más fácil de cambiar es plugin.php. Aquí se encuentra el encabezado del plugin que contiene toda la información que se ve en el menú del plugin en el módulo de servicio.

 

/** Nombre del plugin: cta-block – CGB Gutenberg Block Plugin * Plugin URI: https://github.com/ahmadawais/create-guten-block/ * Descripción: cta-block – es un plugin de Gutenberg creado mediante create-guten-block. * Autor: mrahmadawais, maedahbatool * Autor URI: https://AhmadAwais.com/ * Versión: 1.0.0 * Licencia: GPL2+ * Licencia URI: https://www.gnu.org/licenses/gpl-2.0.txt * * @package CGB *//
1
2
3
4
5
6
7
8
9
10
11
12
/**
* Nombre del plugin: cta-block – CGB Gutenberg Block Plugin
* Plugin URI: https://github.com/ahmadawais/create-guten-block/
* Descripción: cta-block – es un plugin de Gutenberg creado mediante create-guten-block.
* Autor: mrahmadawais, maedahbatool
* Autor URI: https://AhmadAwais.com/
* Versión: 1.0.0
* Licencia: GPL2+
* Licencia URI: https://www.gnu.org/licenses/gpl-2.0.txt
*
* Paquete CGB
*/

Como primer paso, modifique todo esto para que refleje el nombre correcto, el autor y otra información del plugin. Todo se explica por sí mismo, pero si tienes problemas, lee este artículo.

Una vez hecho y guardado, también verá los cambios en WordPress.
gutenberg block with adjusted plugin header

5. Registre su bloque Gutenberg

Después de eso, quiere hacer lo mismo con la forma en que su bloque aparece en el editor de Gutenberg. Para eso, gire a block.js. Contiene todo el código para registrar el bloque en un sitio de WordPress y para lo que hace en el front end y back end.
create guten block code
El archivo por defecto para crear un bloque guten está muy bien anotado. Le dice qué parte es responsable de qué para que pueda hacer sus propios cambios. registerBlockType es lo que registra el bloque. Las funciones siguientes editar: y guardar: describen el contenido y el comportamiento del bloque dentro de Gutenberg y en la página respectivamente. Más información aquí y aquí.

En mi caso, simplemente borro todo empezando por registerBlockType y lo reemplazo con el ejemplo de la documentación de Gutenberg (hacia abajo). Esto crea un sencillo campo de editor de texto enriquecido con opciones de formato mínimas, incluyendo negrita, cursiva, hipervínculos, etc.

Sin embargo, para que funcione con lo que hemos creado hasta ahora, necesitamos cambiar esta parte:

 

blocks.registerBlockType( ‘gutenberg-examples/example-03-editable’, { title: «Ejemplo»: «Editable», icono: «Acceso universal», categoría: N -«Diseño»,
1
2
3
4
blocks.registerBlockType( ‘gutenberg-examples/example-03-editable’, {
título: «Ejemplo»: Editable»,
icono: «acceso universal»,
categoría: N -«Diseño»,

En particular, lo que quieres cambiar es:

  • Ruta de registro – Se refiere a la ruta que aparece después de blocks.registerBlockType. Necesita adaptarse a su entorno actual.
  • título: – El nombre del bloque tal y como aparecerá en Gutenberg.
  • icono: – El icono asociado al bloque en el editor. Puedes usar los dashicons. Asegúrese de insertar el nombre sin el prefijo dashicons-. Alternativamente, puede utilizar su propio archivo SVG.
  • category: – Bajo qué categoría aparecerá su bloque. Algunas de las categorías estándar son: común, formato, diseño, widgets e incrustación.

En mi caso, simplemente lo cambié por esto:

 

blocks.registerBlockType( ‘cgb/block-cta-block’, { título: «CTA Block», icono: «Testimonio», categoría: «Común»,
1
2
3
4
blocks.registerBlockType( ‘cgb/block-cta-block’, {
título: «CTA Block»,
icono: «Testimonio»,
categoría: «Común»,

Después de eso, aparece en el editor así:
create gutenberg block and choose in editor
Y así es como se ve en la página:
create gutenberg block and display in editor
Dejé el resto del código como lo encontré.

6. Ajustar el estilo de bloques

Después de eso, es hora de ajustar la visualización de su nuevo bloque. Esto sucede dentro de editor.scss y style.scss.

Como sugieren los nombres de los archivos, el primero controla el aspecto de su bloque dentro del editor Gutenberg, y el segundo la salida en la parte frontal.

En el ejemplo por defecto de create guten block puedes ver que la salida es verde en el editor pero roja en la página. Esto es consecuencia de la utilización de dos conjuntos diferentes de márgenes de beneficio.
create guten block default block comparison
En la mayoría de los casos, probablemente tiene sentido mantener el estilo del mismo. Después de todo, uno de los puntos más vendidos de Gutenberg es que la experiencia de edición y el producto final están más alineados que antes.

En mi caso, añado lo siguiente a ambos archivos:

 

.wp-block-cgb-block-cta-block { fondo: #d6f279; frontera: 0.2rem punteado #292929; margen: 0 auto; relleno: 1rem; texto-alineación: centro; }
1
2
3
4
5
6
7
.wp-block-cgb-block-cta-block {
fondo: #d6f279;
de la frontera: 0.2rem punteado #29292929;
margen: 0 auto;
acolchado: 1rem;
text-align: centro;
}

Y aquí está el resultado en el editor:
finished block in gutenberg editor
Y en la parte delantera:
finished block on front end
Por cierto, Gutenberg asigna automáticamente las clases CSS a los bloques en función de su nombre y puede averiguar qué son con las herramientas de su navegador. Sin embargo, las hojas de estilo de create guten block ya contendrán los nombres de clase correctos. Además, puede definir los suyos propios.

7. Terminar

Muy bien, una vez que esté satisfecho con su bloque, hay unos cuantos pasos más. Lo primero que debe hacer es volver a la consola y pulsar Ctrl/Cmd+C para evitar que las npm monitoricen sus archivos.

Después de eso, ejecute el siguiente comando:

 

npm run build
1
npm run build

Esto compilará los archivos necesarios para el código de producción (no te preocupes, no impedirá que tu bloque funcione, lo he comprobado).

Si crees que no quieres volver a usar este bloque dentro de create guten block, también puedes escribir npm run eject. Sin embargo, esto significa que, de ahora en adelante, tendrá que mantener el proyecto usted mismo.

¿Está listo para crear un bloque Gutenberg?

Los bloques de Gutenberg están configurados para convertirse en el nuevo elemento por defecto de WordPress. Ayudan a crear posts, páginas, layouts y diseños de forma modular y ofrecen mucho control.

Aprender a configurar bloques Gutenberg personalizados le ayuda a mantenerse al tanto del desarrollo actual y le proporciona las herramientas para personalizar su sitio con la nueva tecnología.

Arriba, has aprendido una forma básica de crear un bloque para el editor de Gutenberg. Es más complicado que hacer cambios a las plantillas PHP y para modificaciones significativas, es probable que no tenga que aprender al menos algo de JavaScript.

Sin embargo, sabiendo cómo funciona en principio, puedes empezar de a poco y crecer a partir de ahí. Si yo puedo hacerlo, tú también puedes.

Además, los creadores de Advanced Custom Fields están trabajando en una forma de hacer que la creación de bloques sea mucho más fácil. La característica está actualmente en beta, pero tan pronto como esté disponible, puede esperar leer sobre ella aquí.

¿Ha creado antes un bloque Gutenberg? ¿Cómo fue tu experiencia? ¿Algún otro consejo o comentario? Háganoslo saber en la sección de comentarios a continuación!

Nick Schäferhoff

 

Nick Schäferhoff es un empresario, vendedor en línea y blogger profesional de Alemania. Encontró WordPress cuando necesitó un sitio web para su primer negocio e instantáneamente se enamoró. Cuando no está construyendo sitios web, creando contenido o ayudando a sus clientes a mejorar su negocio en línea, lo más frecuente es que lo encuentren en el gimnasio, el dojo o viajando por el mundo con su esposa. Si quieres ponerte en contacto con él, puedes hacerlo a través de Twitter o a través de su página web.