Cómo crear su primer bloque para Gutenberg

Ni el aumento constante en el número de sitios web que eligen WordPress ni su posición dominante en el mercado han hecho que la comunidad de desarrollo de WordPress se relaje. WordPress cambiará mucho en muy poco tiempo. Y el mayor cambio en WordPress se llama Gutenberg. En este artículo, hablaré con usted sobre Gutenberg y le mostraré cómo involucrarse en su desarrollo creando su primer bloque, un concepto que definitivamente tendrá que dominar si tiene la intención de continuar ganando con su ayuda. WordPress para los próximos años. ¡Vamos a empezar!
¿Qué es Gutenberg? Gutenberg es el nuevo editor de contenido de WordPress. Pero es mucho más que eso. Gutenberg cambiará la forma en que los usuarios y los desarrolladores trabajan con WordPress. Hasta ahora ha utilizado el editor de WordPress como si fuera un documento de Microsoft Word. Bueno, esto está a punto de cambiar a medida que el concepto de bloque aparece en el escenario. Ahora su contenido de WordPress estará compuesto por bloques: tendrá bloques para párrafos, imágenes, encabezados, citas y más. Además, la comunidad de desarrolladores se volverá loca creando complementos que agregan nuevos bloques personalizados.
Si desea un primer vistazo a la apariencia de Gutenberg, no se pierda el próximo video en el que Matias Ventura, el desarrollador principal de Gutenberg, ha demostrado sus características principales durante WordCamp US 2017: también, tenga en cuenta que Gutenberg no será el editor en WordPress, en Las futuras iteraciones de desarrollo, el concepto de bloque reemplazará otros conceptos familiares en WordPress, como widgets y menús. Pronto se bloqueará WordPress. Y es por eso que estoy interesado en enseñarle cómo crear un bloque básico hoy. Instalar y activar Gutenberg se dice que Gutenberg estará listo para ser incluido en WordPress 5.0 hasta abril de 2018. Pero creo que tendremos que esperar un poco más hasta que Gutenberg llegue a WordPress. Incluso si desea probar Gutenberg, tendrá que para instalar un complemento. Pero tenga cuidado, no le recomiendo que lo haga en la instalación de producción de WordPress, porque todavía se está desarrollando y puede romper las cosas. En su lugar, intente en una instalación de prueba.
La captura de pantalla del editor de Gutenberg. Simplemente instale el complemento Gutenberg, activelo y acceda a una publicación o página. Por cierto, me encantaría escuchar tu opinión después de probarla, porque había mucha controversia. Para crear un nuevo bloque para Gutenberg ahora que sabes lo que es Gutenberg, tengamos nuestras manos y codificamos algunas cosas, ¿verdad? Para hacer esto, crearemos un nuevo bloque para Gutenberg que nos permite agregar un testimonio de clientes a nuestro sitio. El testimonio incluirá una fotografía de la persona, su nombre y función, así como el texto del testimonio en sí. El resultado final que queremos se verá así:

Modelo de la nueva prueba de testimonios que queremos agregar a WordPress. ¡Hagamos que funcione! Creación del complemento y su estructura de archivo principalmente crearemos un complemento de WordPress que incluya los archivos necesarios para tener un nuevo bloque en Gutenberg. Para hacer esto, cree una estructura de archivo y carpetas como la siguiente: la estructura del archivo para el complemento que agrega el bloque testimonial a Gutenberg. Esto es lo que debe saber sobre estos archivos:

Block/testomonial/index.php es responsable de colocar los archivos que definen el bloque y lo muestran tanto en la parte posterior como en la WordPress.

Bloque/testimonial/block. JS define el bloque del testimonio en sí y su comportamiento al editarlo y guardarlo. Es el archivo más importante “vinculado a Gutenberg” en términos de bloqueo.
Block/Testimonial/Editor.css contiene reglas CSS para el blog de estilo en Gutenberg Editor.
Block/testimonial/style.css contiene reglas CSS para el blog en Frantend, cuando un usuario accede a su sitio y ve el resultado final.
Nelio-testimonial-block.php es el archivo de complemento principal, donde define los encabezados necesarios para describir el complemento e incluir el archivo index.php. Si alguna vez ha creado un complemento de WordPress, ya está familiarizado con él. puedes verlo aqui.
Encontrará todo el código del bloque de testimonio en GitHub.
Coloque los archivos necesarios en la cola Una vez que haya creado los archivos y la estructura operativa del complemento, simplemente debe colocar los archivos CSS y los archivos JavaScript requeridos por Gutenberg. Simplemente ajuste el bloque/testomonial/index.php para que busque lo siguiente (verlo en github): Tenga en cuenta que, prácticamente, usamos dos ganchos: enqueue_block_edor_assets y enqueu_block_assets. El primer gancho es incluir los archivos que usamos en Gutenberg Publisher: block.js y editor.css. También vale la pena señalar que el archivo block.js tiene algunas adicciones (blocks wp, wp-i18n y wp-element), que son necesarios si desea crear un bloque como el nuestro e internación. El segundo gancho simplemente pone los estilos de interfaz: style.css.
Registre el nuevo bloque ahora para echar un vistazo más de cerca a block.js (enlace al archivo GitHub). En primer lugar, debemos registrar el nuevo bloque de testimonio que se puede hacer fácilmente utilizando el método RegistroBlockType de Gutenberg:
Es mucho código, ¿no? Pero no entre en pánico, explicaré paso a paso. Primero nombramos el bloque utilizando un identificador interno único. En nuestro caso, este nombre es ‘Nelio/Testimonial-Block’. Luego, simplemente pasamos un objeto con todas las propiedades relevantes del bloque. Por ejemplo, hay un título (línea 10), un ícono (línea 13), una categoría de bloque (línea 16) y algunos atributos adicionales (líneas 19 a 47). Fácil, ¿verdad? ?
Los atributos son las características que contendrá el bloque. En nuestro caso, el bloque de pruebas tendrá lo siguiente:
Nombre: El nombre de la persona que escribe el testimonio.
Puesto: El trabajo de esa persona.

Testimonio: el texto del testimonio.mediaid: la identificación de la imagen en la biblioteca de medios WordPress.
MEDIURL: La URL de la imagen de la persona.
Alineación: organizar el texto en testimonio.
Una cosa importante para recordar es lo siguiente: cualquier atributo que tenga un elemento HTML asociado necesita un selector único o Gutenberg le dará un error al abrir el contenido. Por lo tanto, si, por ejemplo, tenemos varios atributos asociados con las etiquetas
dentro del bloque, debemos tener un selector diferente para cada uno (puede hacerlo con diferentes nombres de clases CSS).
Finalmente tenemos las funciones de edición y rescate del bloque. ¡Echemos un vistazo más de cerca a ambos! El método de edición aquí comienza cosas buenas. El método de edición le permite preparar el bloque de edición en Gutenberg. Básicamente, este método devuelve un componente React formado por todos los componentes que queremos aparecer en el editor. Se ve como esto:
Parece muy complicado, pero créeme, no lo es, son solo muchos componentes reactos. Esencialmente, creamos la estructura HTML imbricando los elementos con su función (). Por ejemplo, si observa las líneas de 79 a 91, verá que definimos la etiqueta
que contiene la posición de la persona que testifica. Definimos la clase de aula (no estimonial), un sustituyente para mostrar (posición, que es traducible), el valor del elemento (que tomamos de los atributos del bloque definido previamente) y las funciones de Onfocus y Onchange (a Actualice el valor del atributo y para controlar su enfoque). Este modelo se repite una y otra vez.
Sin embargo, hay algunas características adicionales. Por ejemplo, hay un botón para abrir el selector de imágenes de la biblioteca de medios en las líneas de 37 a 47. Utiliza blocks.mediaupload, un componente reutilizable del propio Gutenberg. En las filas del 22 al 30 de mayo reutilizamos otro componente reutilizable: la barra en la que puede cambiar la alineación del texto. Guardar el método El método de guardado se ocupa de hacerse cargo de la información del bloque y prepararla para guardarlos en la base de datos. Es mucho más fácil que el método de edición y se ve así: observe que hemos creado un elemento que contiene dos divs más en el interior. El primero tiene la imagen del testimonio y los segundos tres párrafos con el texto del testimonio, el nombre de la persona que dice su testimonio y posición.
A la acoltura del bloque Si no hacemos nada más, el resultado en el editor no es muy agradable (¡pero, oye, trabaja!):
Bloque para el testimonio sin estilos CSS para el editor (Editor.css está vacío). Lo que parece lo siguiente cuando agregamos algunos datos reales:
Si agregamos contenido de contenido, vemos que la imagen hace que todo termine. No se definen estilos CSS. Y si publicamos la publicación, esto es lo que ven nuestros visitantes:
Lo que nuestros visitantes ven no es lo que queríamos en nuestro modelo original.Necesitamos usar CSS porque style.css está vacío.Para mejorar cómo se ve este bloque y hacer que sea más fácil de usar, debemos agregar algunos estilos.¿Recuerdas esos archivos que puse en la cola al principio?Específicamente, estamos hablando de los archivos editor.css y style.css!Bueno, es hora de cambiarlos, para que las cosas se vean bien.Después de unos minutos (puede ver el resultado final de ambos archivos en GitHub), el bloque Gutenberg finalmente se ve así: Agregar CSS a Editor.css, podemos lograr algo más similar a lo que hemos dibujado en nuestro modelo.Y así es como se ve en Frantend:
Los visitantes de nuestro sitio web verán el bloque correcto al agregar los estilos CSS apropiados a style.css. Observaciones de finalización La creación de un nuevo bloque en Gutenberg puede ser complicada, pero es más fácil de lo esperado si va paso a paso. Una vez que haya codificado las cosas básicas, debe trabajar con solo tres archivos, prácticamente. El primero es un archivo JavaScript en el que define el bloque en sí, sus atributos y guardan y editar métodos. Esta es la parte más complicada. En nuestro ejemplo, utilizamos JavaScript básico, pero es más fácil si usamos la sintaxis JSX para definir los componentes React. Si lo desea, podemos restaurar el bloque de testimones usando JSX en una publicación futura. ? ¡Avísame en la sección de comentarios! Los otros dos archivos importantes son los que definen los estilos tanto del editor como del frontand: editor.css y style.css. Ya ha visto que un pequeño CSS puede aportar un cambio radical al resultado final. Le animo a que pruebe el código y lo mejore. Recursos Antes de terminar, déjame dejarte con una lista de recursos interesantes si quieres saber más sobre Gutenberg. ¡Recuerde que Gutenberg llegará pronto y debería estar preparado para ello! Manual de Gutenberg. El recurso por excelencia. Perfecto como referencia.
Curso de desarrollo de Gordon de Zac Gordon. Si usted es uno de los que prefiere un paso a paso, este es lo más completo que encontrará hasta ahora.

Ahmad Awais Gutenberg Boorlerplate. Si desea comenzar a desarrollar sus bloques, aquí hay algunos ejemplos básicos de Ahmad Awais.

Ejemplos de Gutenberg en Github. Más ejemplos de desarrollo de bloques para Gutenberg.

Los elementos básicos del diseño de Gutenberg.Si eres diseñador, no te pierdas esta publicación de Tammie Lister, uno de los principales diseñadores de Gutenberg.Un tutorial increíble que solía crearlo.¡Lo recomiendo altamente!

News Gutenberg.Si no desea perder ninguna noticia sobre Gutenberg, debe ver este sitio de noticias.

Imagen presentada por Caleb Woods en Unsplash.