Estas son notas del desarrollo de Blogpocket Twenty sobre las modificaciones realizadas al EmptyTheme con el fin de crear un theme orientado a bloques.
El archivo /block-templates/index.html
El punto más importantes en el desarrollo de Blogpocket Twenty es el archivo /block-templates/index.html.
El archivo /block-templates/index.html contiene el diseño de la plantilla por defecto. Esta plantilla se mostrará si el Editor del Sitio (beta) no encuentra otra plantilla.
El theme Blogpocket Twenty gira alrededor de este archivo, ya que se trata de partir de un /block-templates/index.html con un contenido determinado (una landing page de ejemplo implementada con bloques de Gutenberg) y que puedas modificarlo a tu gusto. Es un ejercicio de comprensión de lo que es un theme orientado a bloques y un aprendizaje del nuevo Editor del Sitio (beta).
Para crear Blogpocket Twenty nosotros partimos de EmptyTheme, con un /block-templates/index.html vacío. Tú puedes crear tu propia versión partiendo de Blogpocket Twenty.
Exportar el /block-templates/index.html una vez diseñada la plantilla con el Editor del Sitio (beta)
Si quieres crear una copia de distribución del theme, tendrás que exportar el archivo /block-templates/index.html una vez que hayas finalizado el diseño de la plantilla con el Editor del Sitio (beta).
Sustituye el /block-templates/index.html del que partiste por el que has descargado con la opción “Export” de los tres puntos suspensivos verticales de la barra de herramientas. El nuevo archivo /block-templates/index.html junto con el resto de carpetas y archivos (ver estructura en la figura 1) conformarán el paquete del theme para que lo guardes o distribuyas.
El archivo experimental-theme.json
El archivo experimental-theme.json cumple un cometido importante porque es una especie de archivo para declarar variables que se utilizan en el theme y dentro del Editor del Sitio (beta).
La opción del Editor del Sitio (beta) solo es visible en el sidebar del Administrador de WordPress cuando está activo un theme orientado a bloques.
Algunas de las opciones que verás en el inspector de bloques y en los estilos globales, dentro del Editor del Sitio (beta) se definen en el archivo experimental-theme.json.
Por ejemplo, queremos asignar una fuente concreta al theme y eso requiere una definición en la hoja de estilo CSS. Podemos escribir una instrucción body { font-family: “Inter var”;} directamente en style.css o definir una variable “custom” en el archivo experimental-theme.json tal y como se muestra en la figura 3.
De esta manera, en style.css escribiremos: font-family: var(–wp–custom–font-family);
Por supuesto, hay otras muchas definiciones de valores por defecto que se usarán en el theme y en Editor del Sitio (beta).
Style.css y Style-shared.css
Es preferible dejar el archivo sytle.css limpio y exclusivamente con lo único que necesita WordPress para interpretar que lo que se está instalando es un theme.
La figura 4 es el contenido del archivo style.css modificado con los datos de nuestro theme Blogpocket Twenty.
El resto de código CSS lo escribiremos en otros archivos. En el caso de Blogpocket Twenty solo es necesario codificar las instrucciones para definir la tipografía que usará el theme.
La figura 5 es el contenido del archivo style-shared.css.
Como vimos anteriormente, en esta hoja de estilos se ha incluido la declaración de la fuente que se utilizará en todo el cuerpo de las páginas (body), empleando la variable –wp-custom–font-family definida en el archivo experimental-theme.json.
Declaración de fuentes
Obsérvese en la figura 5 que las declaraciones de los dos tipos de fuentes “Inter var” (normal e itálica) indican dónde se encuentran los archivos en formato “woff2”: dentro de la carpeta “assets”, tal y como se ve en la figura 6.
Si necesitas definir tus propias fuentes y obtener estos archivos, lee por favor: Cómo modificar el tipo de letra de Google Fonts de cualquier theme de WordPress.
El archivo functions.php
El archivo functions.php también juega un papel crucial en el funcionamiento de un theme orientado a bloques. Como en los themes pre-FSE, contiene instrucciones que alterarán el funcionamiento normal de WordPress, con definiciones, hooks, etc.
En Blogpocket Twenty se utiliza el archivo functions.php del EmptyTheme, con una leve modificación para que se reconozca el archivo style-shared.css (ver figura 7).
Hay un detalle importante que no debe pasar de largo.
En el archivo functions.php hay declaraciones para los estilos del Editor y otras para el theme. Los estilos del Editor afectan a la presentación de los bloques dentro del Editor (add_editor_style). Eso es lo que se ve en la figura 8. No se aplica ningún estilo especial dentro del editor porque la hoja de estilos es style.css y recordemos que ésta se encuentra vacía.
Sin embargo, los estilos del theme afectan a cómo se verá el theme en un navegador (lo que ve el usuario). Esto corresponde a lo que se ve en la figura 7.
Esta es la razón por la que Blogpocket Twenty muestra la fuente “Inter var” cuando se ve en Internet y la fuente por defecto de WordPress cuando entramos en la plantilla mediante el Editor del Sitio (beta). Esto sería fácil de modificar para que ambos presentaran la misma fuente.
Referencia a las imágenes
Hay un último detalle que no se nos debe escapar. Si no lo remedias, las referencias a las imágenes harán referencia a la carpeta wp-content/uploads de tu instalación de WordPress en la que hayas elaborado el theme, mediante el Editor del Sitio (beta). Cuando generes el correspondiente archivo index.html, a través del Export, esa referencia se quedará y podrías crear un paquete de distribución del nuevo theme que fallará a la hora de mostrar las imágenes, ya que harán referencia a archivos que no estarán en los WordPress de aquellas personas que estén probándolo.
Para arreglar ese pequeño inconveniente, modifica el index.html recién exportado incluyendo una URL visible desde Internet. Habrá un acceso externo a tu WordPress pero evitarás que no se muestre la imagen. Mejor, puedes llevar las imágenes a repositorios CDN (o a servicios como cloudinary.com).
Estas son algunas notas importantes sobre el desarrollo de Blogpocket Twenty. Si tienes dudas o alguna pregunta relacionada con este asunto, no dudes en contactar conmigo 😉
Deja una respuesta