Recursos para dominar las tecnologías detrás de Gutenberg para WordPress

Uno de los mayores desafíos que los desarrolladores con WordPress es reciclar nuestro conocimiento para adaptarse al nuevo paradigma de programación detrás del nuevo editor de bloques. El cambio principal con Gutenberg es la nueva pila de tecnologías utilizadas. Por lo general, un desarrollador de WordPress ha creado complementos utilizando PHP principalmente con partes escritas menores en JavaScript. Ahora el instrumento clave es JavaScript, dejando PHP solo una base para crear la estructura de complementos y temas. Puede pensar que este no es el caso y que PHP todavía tiene un largo viaje en WordPress. No te condena por esto, porque los cambios siempre son difíciles de aceptar. Sin embargo, creo que estás equivocado. JavaScript ya no es el futuro WordPress, sino el presente. Y si desea mantener su posición, deberá mantenerlo al día ahora mismo.
JavaScript aprende profundamente, como dijo Matt … Afortunadamente, aunque insistieron en que tenemos que aprender un JavaScript profundo, creo que este no es el caso. Conocer algunos mínimos que cualquier tutorial puede enseñarle es más que suficiente. Puede aprender todo lo que necesitará para comenzar a desarrollar rápidamente para Gutenberg, debido a los recursos que describiré durante este artículo. Aprenda JavaScript Cuando aprenda un nuevo lenguaje de programación, lo primero que debe saber es comprender su sintaxis. Solo de esta manera puedes comenzar a programar con él. Una vez que haces esto, tienes todo listo para comenzar a crear.

Cuando desee aprender JavaScript, no debe leer un manual con más de 1000 páginas … Hay opciones mucho más simples y más agradables y, al mismo tiempo, son lo suficientemente completas. Si nunca ha hecho nada con JavaScript, estos son algunos tutoriales en diferentes formatos que lo ayudarán a comenzar: nociones básicas para JavaScript: curso gratuito de Zac Gordon en formato de video.
JavaScript 30: Aprenda con un desafío todos los días durante 30 días con Wes Bos en este curso gratuito.
Una reintroducción a JavaScript: breve introducción a JavaScript de niños en Mozilla.
JavaScript para gatos: otra introducción a JavaScript, con ciertas notas de humor de gatos.
Ejercicio.io: Web gratuita donde puede hacer ejercicios en JavaScript y cargar la solución para que un mentor lo evalúe.
JSBOOKS: Si usted es uno de los que prefiere aprender con los libros, aquí tiene muchos de ellos gratis.
Por el contrario, si ya tiene algo de experiencia en el uso de JavaScript, extienda su conocimiento estudiando conceptos avanzados sobre funciones, ejecución asincrónica con promesas y asincrónicas/esperando y, en resumen, todo sobre Esnext.
Con un día de capacitación de JavaScript, debería ser más que suficiente para adquirir el conocimiento básico para moverse fácilmente a todo lo que tendrá que desarrollar sobre el editor de bloques de WordPress. Aprenda React y Redux junto a JavaScript, para desarrollar el editor de bloques de WordPress, deberá tener ciertas nociones de React y Redux. Eso les dirá a todos, pero la verdad es que no lo es. Puede desarrollar para Gutenberg sin tener ninguna idea de React o Redux. Por supuesto, si sabe cómo funciona y qué se usan, entonces sería mejor. Reaccionar y, sobre todo, JSX que no puede evitar es saber cómo funciona la sintaxis JSX para definir la interfaz de nuestros componentes (ya sea que ellos son bloques o vistas de Gutenberg en el editor). Imagine que desea definir la interfaz para los componentes de productos y compras y luego usarlos en un bloque de Gutenberg. Con la notación estándar, procederá de la siguiente manera, utilizando WP. Element.Createment () proporcionado por Gutenberg:
Por otro lado, si usa JSX en el método render (), que no es más que una notación similar a HTML, lo que tiene es lo siguiente:
El uso de JSX simplifica la escritura y la reutilización de los componentes, porque el código es mucho más simple y más fácil de leer. Como puede ver, en el ejemplo anterior creamos que los componentes reaccionan sin tener ninguna idea sobre React, sabiendo solo cómo administrar JSX y usarlo como si fuera HTML con superpoderes. Además, también puede usar componentes existentes en Gutenberg. Puede verlos en este espectador que también está relacionado con la documentación oficial.
Solo hay un problema. Deberá traspilar el código con Babel, para que la notación JSX se convierta en el código ordinario que cualquier navegador pueda interpretar. Sin embargo, esto no es un drama, porque puede hacerlo automáticamente usando WebPack.Redux para mantener el estado de su aplicación, por otro lado, probablemente haya oído hablar de Rodux. Es una herramienta para guardar y administrar el estado en aplicaciones JavaScript. Nuevamente, si está interesado en aprender a usarlo, recomiendo estos videos de Wes BOS, pero no es necesario. Si necesitara crear su propio depósito de datos, no lo haría con Redex, pero usaría el @WordPress/Date incluido en Gutenberg. Este paquete usa Adux Internal, pero eso no importa. Además, estamos hablando de un caso de uso complejo que probablemente no necesite, al menos en una etapa inicial. Entonces, por ahora se olvida.
NPM, Webpack, Babel, PostCSS y ESLTT junto a JavaScript y las nociones básicas de React y JSX, para la nueva era que ya está aquí en WordPress, necesitará conocer las siguientes tecnologías para que las tareas de su desarrollador sean mucho más simples. extremadamente automatizado:

NPM: JavaScript Addiction Manager. Simplemente defina las adicciones que necesita e instale haciendo que la instalación de NPM.
Webpack: paquete JavaScript. No es fácil de configurar al principio, pero una vez que lo tiene, facilita el trabajo de administración de archivos JavaScript: transpilación, miniificación …
Babel: El compilador JavaScript podrá usar hoy la sintaxis de las siguientes versiones de este idioma.
PostCSS: Al igual que Babel, pero para las hojas de estilo CSS.
Eslint: detecta el uso de errores de JavaScript y estilo, por lo que puede evitarlos mientras escribe código. Ya he hablado sobre la mayoría de estas tecnologías aquí. Sin embargo, escribiré otro artículo pronto, donde explicaré cómo integrarlos en un proyecto de desarrollo de WordPress, para que pueda usarlos en un caso real.
Cómo se crean los nuevos bloques para Gutenberg ahora, vayamos a la parte más importante: por qué necesitamos comenzar a crear nuevos bloques para el editor de WordPress. Lo primero que debe comenzar a crear sus propios bloques es dominar la función WP.Block.registReckType (). Encontrará la documentación más completa sobre esta función en la guía oficial de Gutenberg. Los argumentos de esta función son una cadena con el nombre del bloque, que debe ser único, y un objeto con la configuración del bloque, donde las partes más importantes son las funciones de guardado y edición del bloque. Ya he explicado esto brevemente en este artículo.
Si esto parece demasiado complicado, puede comenzar a usar el conjunto de herramientas Ahmad Awais llamado Bloque de creación-guten. Esto crea una estructura plegable con todas las adicciones necesarias para crear su primer bloque. Puede ver un tutorial sobre su uso en el siguiente video:
Finalmente, si esto todavía parece demasiado complejo, tiene una última opción disponible. Ciertamente conoce el complemento avanzado de campos personalizados (también conocido como ACF, en resumen). Bueno, este complemento le permitirá crear bloques para Gutenberg sin tener ninguna idea sobre JavaScript. Pero no te voy a explicar, dejo a Mauricio Gelves para hacerlo. Vaya a consultar su presentación sobre este tema en WordCamp Zaragoza 2019 que ya tiene en WordPress.tv (en español): Cómo expandir el editor de bloques en WordPress Hay muchas otras cosas que puede hacer con Gutenberg, además de crear nuevos bloques. Por ejemplo, puede crear un complemento en Gutenberg para agregar un panel al lado derecho del editor con todo lo que desee. Lo mejor es que la documentación oficial de WordPress incluye este tutorial completo con ejemplos concretos de lo que puede hacer allí. Además, puede expandir el editor de WordPress agregando nuevos estilos a los bloques existentes, agregar configuraciones más personalizadas a los bloques, eliminar bloques u ocultar o filtrar las categorías de bloques que puede tener en el editor. Le recomiendo que eche un vistazo a la documentación oficial que tiene en el Manual de Gutenberg para desarrolladores y diseñadores que encontrará aquí. Tómelo con calma, porque hay mucha información y este es uno de los mejores recursos que tiene disponibles. Imagen presentada por Christian Fregnan en Unsplash.