Cómo crear un bloque Gutenberg de WordPress personalizado: serie de tutoriales

Esta es una serie de tutoriales detallados que cubren cómo crear sus propios bloques personalizados de WordPress Gutenberg. Es para usted que es un desarrollador de temas o complementos y, como yo, está frustrado con la falta de documentación. La mayor parte de lo que he aprendido cuando se trata de desarrollar en el nuevo mundo Javascript de WordPress es a través de prueba y error, experimentando vigorosamente y leyendo todo lo relacionado que he encontrado. Entonces pensé que podría reunir todo lo que he aprendido hasta ahora en un gran tutorial.

A través de 10 partes, este tutorial tiene como objetivo enseñarle cómo escribir sus propios bloques personalizados. No importa para qué sean, comenzando por lo básico y avanzando hacia funciones más complejas. Le recomiendo que escriba todo usted mismo en lugar de copiar y pegar el código. ¡Esa es la mejor manera de aprender! Siga la serie del paso 1 al 10, ya que construiremos sobre el bloque a medida que avanzamos.

Lo que necesitas saber antes de comenzar

Antes de sumergirnos en los escalones; un descargo de responsabilidad Hay algunas cosas que ya deberías saber de antemano sobre qué es y qué no es esta serie.

Los lenguajes de programación

Necesita saber Javascript, eso es un hecho. No es necesario ser un experto, pero esto no es un tutorial de Javascript. En cuanto a la versión ECMAScript Javascript; puede escribir en ES5 y no preocuparse por compilar su código con Babel y esas cosas. Sin embargo, esta serie está escrita con código ES6 y ESNext. No se preocupe: el paso 1 está dedicado a guiarlo en la configuración de un entorno de desarrollo listo para codificar en ESNext con todas sus nuevas sintaxis.

Como probablemente sepa, Gutenberg está basado en React JS. Esta serie tampoco es un tutorial de React y asume un conocimiento básico de React y cómo funciona. Una vez más no hay necesidad de ser un experto. Como React ha existido por un tiempo, hay muchos buenos tutoriales, documentación y recursos dedicados a enseñarle React. Así que recomiendo buscar estos primero.

Esta serie se centra en aprender las partes de Javascript, React y JSX y no se preocupa por el estilo/CSS. Como el objetivo de su bloque puede ser drásticamente diferente, he optado por no centrarme en el estilo y solo he proporcionado HTML muy básico. Depende de usted agregar su estilo y la salida HTML necesaria para hacer que su bloque se represente exactamente como lo necesita.

La edad de este tutorial

Y finalmente, considere el momento en que se escribió esta serie. Gutenberg todavía es bastante nuevo, pero está cambiando y mejorando drásticamente.

Si encuentra esto en un futuro lejano, es posible que algún código quede obsoleto o se reemplace con mejores métodos. Esta guía se escribió y finalizó en la versión 5.2.3 de WordPress (finales del año 2019).

lo que aprenderás

En las primeras partes nos centramos en lo básico. Configuramos un entorno de desarrollo con la ejecución de la compilación de nuestro código. Y los conceptos básicos de cómo registrar un bloque y las partes necesarias de PHP también. Aprenderemos sobre la enorme biblioteca de componentes y métodos disponibles para nosotros en WordPress Gutenberg.

Continuando, aprenderemos cómo agregar secciones y configuraciones para nuestro bloque en la barra lateral del editor (Inspector), así como también cómo personalizar la barra de herramientas. En el camino, tocaremos muchos tipos de entrada diferentes y cómo usar el componente de Gutenberg para estos. Y, por supuesto, aprenderemos cómo guardar, actualizar y enviar la información guardada a nuestro bloque, y cómo funciona eso detrás de escena.

Al final, veremos cosas más avanzadas como bloques dinámicos y cómo usar PHP para representar la salida del bloque. Y finalmente, cómo hacer consultas de publicaciones dentro del editor, lo que permite al usuario seleccionar una publicación de una lista para renderizar.

Tabla de contenido

A continuación encontrará enlaces directos a cada parte de la serie.

• Parte 1: Configuración del entorno de desarrollo
  En la primera parte de esta serie de tutoriales sobre cómo crear bloques personalizados de Gutenberg, debemos configurar nuestro entorno de desarrollo. Necesitamos un lugar donde podamos escribir nuestro código en sintaxis ES6/ESNext y compilarlo sobre la marcha.

• Parte 2: Registro de un bloque
  En esta parte escribiremos Javascript para registrar y configurar nuestro bloque personalizado. Al final registraremos el script con PHP y haremos el código PHP necesario para que WordPress lo reconozca como un nuevo bloque.

• Parte 3: Props y componentes de WordPress
  En el paso anterior aprendimos cómo registrar un bloque personalizado, tanto en Javascript como en PHP. En este paso, aprenderemos cómo usar los componentes de WordPress para agregar diferentes tipos de campos y configuraciones.

• Parte 4: Atributos
  En esta parte veremos cómo definir atributos, obtener sus valores y actualizarlos. Con los atributos podemos aceptar la entrada del editor, guardarla y generarla como elijamos.

• Parte 5: agregar la configuración del Inspector
  En este paso, nos centraremos en lo que WordPress (al menos en el código) llama Inspector: la barra lateral en el lado derecho del editor. Hablaremos sobre algunos componentes nuevos que tiene sentido colocar en la barra lateral y cómo manejarlos.

• Parte 6: Agregar barras de herramientas
  En esta publicación, aprenderemos cómo agregar las barras de herramientas de WordPress a nuestro bloque, es decir, para alinear y alinear bloques. También aprenderemos a agregar nuestras propias barras de herramientas con nuestros propios botones para realizar acciones personalizadas.

• Parte 7: Creación de sus propios componentes
  Hasta ahora, en esta serie de tutoriales, hemos escrito todo el código dentroregisterBlockType()de laeditfunción. Es totalmente posible y, a menudo, se recomienda asignar la edición a un componente separado. Al hacerlo, podemos utilizar funciones como el estado de los componentes y los métodos del ciclo de vida.

• Parte 8: Traducción de tu Bloque
  En esta parte nos enfocaremos en cómo traducir los textos y valores en nuestro bloque. Usamos WP-CLI para generar los archivos necesarios para que Gutenberg pueda cargar nuestras traducciones al cambiar el idioma de WordPress.

• Parte 9: Bloques dinámicos
  Hasta ahora hemos renderizado la salida del bloque en Javascript. Sin embargo, con contenido dinámico como publicaciones recientes o mostrar una publicación, es posible que debamos representar la salida del bloque en PHP.

• Parte 10: Obtener publicaciones y componentes de orden superior
  En la parte final, aprenderemos cómo usar componentes de orden superior y, por lo tanto, cómo realizar una consulta de publicación desde el editor y proporcionar un método para seleccionar publicaciones.