Como sabéis, mi sitio web principal El PC de Adam es un WordPress que tiene ya 6-7 años de trabajo (lo comencé en 2020) y es una mezcla de tema clásico, con bloques de ACF, interfaces en React/Vite, muchos plugins y mucho contenido chulo. Pero claro, está empezando a crecer ya de forma exponencial.
¿Qué significa exponencial en un tema clásico? Pues es ir arrastrando mucho contenido y estilos en cada página cuando apenas se usa. Si entramos en la estantería, es posible que esté cargando cosas de las estadísticas, de los vídeos y de otros apartados, pero no se están usando. Esto es porque encapsulto todo en una hoja de estilos y en un fichero script. Esto era normal y funciona sin problemas ahora mismo. Incluso he dividido bastante el contenido para hacer CSS crítico y reducido las bibliotecas. Pero siempre hay un espacio de mejora.
¿Por qué quiero convertir apartados de PHP en bloques de Gutenberg?
La razón primaria es la carga parcial y específica. Ahora tengo un PHP y sigo una lógica muy a lo Astro/Vue: en el mismo fichero tengo código estático o dinámico, estilos y scripts en línea. Como está en una plantilla de WordPress, solo cargo la plantilla correspondiente por cada página que accedemos. Obviamente, no es así siempre, ya que necesito de SASS o de compilador de Javascript para tenerlo todo en ficheros separados y funcional. Sigue siendo PHP, por lo que es un poco incómodo. Al pasarlo todo a un bloque, la carga de contenido y estáticos será justo donde cargue. Y si, por algún casual, necesito compartir estilos, solo habrá que añadir las dependencias en cada bloque o seguir teniendo estilos globales.
La siguiente razón será por ir actualizándonos poco a poco e ir quitando las cosas clásicas de en medio. PHP estará siempre ahí, pero WordPress (y su manía de IA first) van camino al FSE muy rápido y seguro que las optimizaciones, cargas y funcionalidades estarán mejor adaptadas en Gutenberg que en un fichero de PHP. Hay que subirse al carro también de que Telex funciona muy bien y, aunque no lo utilice, también podrá ayudarme a arreglar problemas desde su alto conocimiento de código de WordPress.
Y la última razón es ya por simple aburrimiento o intento de mejora del sitio. Ya se me han acabado las ideas o no es el momento perfecto para realizarlas, por lo que veo que es el momento de empezar a ir reduciendo/quitando cosas de las plantillas para ir adaptándose al futuro.
¿Cuál es la situación?
Ahora mismo, en el PC, cada página podría ser un bloque de Gutenberg perfectamente. Cada ventana podría ser otro bloque de Gutenberg con su configuración propia y, dentro de ese bloque, añadir los futuros bloques de página.
Por lo que mi problemática actual sería ver la forma en la que cambiar mi forma de desarrollo para crear todos estos bloques que hay que transformar.
Yo trabajo ahora mismo todo desde PHP y con un solo compilador de estáticos que leen los ficheros de SASS y JS; y los procesa en dos ficheros respectivamente sin tener que estar abriendo otras cosas (a no ser que sea alguno de los proyectos en React/Vite).
Esto funciona de escándalo y no me complico. Por lo que tengo que averiguar ahora mismo si puedo crear un plugin con todos los futuros bloques existentes. En el momento en el que escribo esto, sé que ha cambiado bastante la forma de cómo crear el plugin con el bloque. He leído durante estos años los cambios y seguramente sea fácil y sencillo. Pero hay que limpiar todas las formas obsoletas o deprecated y quedarse con la más sencilla.
Cómo crear un plugin de WordPress con varios bloques de Gutenberg
La idea de tener un plugin de WordPress para generar nuestros nuevos bloques es para que estos propios bloques sean completamente independientes del propio tema. Esto son buenas prácticas para tenerlo todo más ordenado y funcional. Si algún día queremos quitar los bloques o generar un nuevo tema, será todo más simple y ordenado.
Lo bueno de la comunidad de WordPress es que tienen herramientas para todo y las liberan al público. Por lo que no tenemos que empezar desde cero casi nunca. Existe el paquete @wordpress/create-block que nos genera un plugin con un bloque genérico para empezar a construir nuestro plugin.
Generar el plugin base con @wordpress/create-block
El paquete @wordpress/create-block nos añadirá toda la configuración generando PHP, JS y CSS para arrancar el plugin y el bloque básico del que podemos partir. Pero no solo eso: también nos preparará el entorno de desarrollo sin necesidad de configurar nada. Algo muy parecido a cuando inicias un proyecto con Vite o el difunto create-react-app. Tú eliges lo que quieres y te genera todos los ficheros necesarios. Pero, en este caso, es ejecutar y cero elección. Eso sí, todo está perfectamente ordenado para que funcione genial y está hecho de forma oficial por el equipo/comunidad.
Aunque también tiene una opción Interactiva como Vite si no añades el nombre del plugin de forma inicial. Nosotros vamos a hacerlo sin preguntas. ¡Al lío!
Para utilizar este paquete, nos iremos a la raiz de la carpeta wp-content/plugins/ y podremos ejecutar el siguiente comando de npx:
npx @wordpress/create-block nombre-carpeta-plugin
Debemos de añadir un nombre único de carpeta para que no nos borre otros plugins.
Una vez termine de preparar todo, accederemos a la carpeta que ha creado.
Aquí, tienes que poner en marcha tus conocimientos de npm. Todos los comandos generados están en el fichero package.json y no los veremos todos aquí, pero que sepas que puedes verlos ahí.
Una vez dentro de la carpeta, tenemos que instalar las dependencias que necesita para funcionar este entorno de desarrollo. Para ello, ejecutamos el comando npm i. Ahora empezará a la instalación del contenido y puede tardar un rato. Por supuesto, puedes utilizar pnpm u otros gestores si te interesa. Tendrás que ver la compatibilidad por tu cuenta.
Una vez instalado todo, ya podemos empezar a desarrollar cosas.
¿Cómo entro en modo desarrollo?
Para tener el entorno arrancado y generando los estáticos cada vez que cambiamos algo, hay que estar en la raíz del plugin y ejecutar el comando npm run start. Esto arrancará todos los scripts y el propio sistema de detección de cambios (watch). ¡Ojo! Esta detección no te recargará la página donde estés editando, por lo que solo te está generando estilos/scripts. Sobre todo no lo hace para que no pierdas cambios.
¿Cómo genero múltiples bloques en el mismo plugin?
@wordpress/create-block ha creado un sistema tan sencillo como crear una nueva carpeta con los ficheros necesarios. Por si no lo sabes, WordPress puede leer y entender los bloques gracias al fichero block.json, donde tiene la información general, ficheros de los que depende y sus opciones finales. Lo único que hay que decir a WordPress es dónde están estos bloques.
Para nuestra suerte, @wordpress/create-block ya le ha dicho que los bloque estarán en la carpeta src y nosotros solo tendremos que crear una nueva carpeta con nuestro fichero block.json y los ficheros necesarios como un index.js para hacer el registro del bloque y, quizás, un fichero PHP con el código básico si no necesitas generar el código en JS.
¿Cómo genero los ficheros finales para usar los bloques?
Una vez que tienes ya una versión usable de los bloques, tiene que generar las versiones finales ejecutables o builds. Estas builds son solo los ficheros finales con el código necesario sin herramientas de desarrollo y que Gutenberg/FSE entenderán a la perfección. Además, estarán minificados y optimizados para que ocupen lo mínimo necesario.
Para generar los builds de la versión actual, solo necesitas ejecutar desde la raíz del plugin el comando npm run build. Esto cambiará los ficheros que hay en la carpeta build dentro del plugin con las versiones finales de los ficheros necesarios.
¿Qué nos queda ya?
Pues ya estaría todo listo para ponernos a programar y pasar las páginas a bloques de Gutenberg. Hay que ponerse a estudiar si se necesita un render básico en PHP o ponernos duros con React y darle opciones configurables desde el propio editor de Gutenberg. Esto ya depende de cada página/opción/intención que tengas que realizar. No te desanimes y a darle duro.