Este artículo es una primera aproximación a la edición completa del sitio (FSE, por sus siglas en inglés) y cómo crear un theme de WordPress orientado a bloques.
La edición completa del sitio es una opción experimental del plugin Gutenberg con la que se puede probar la personalización de un theme orientado a bloques. Un theme orientado a bloques es el siguiente paso que se quiere dar en WordPress y supone un cambio conceptual en lo que hasta ahora hemos entendido como «theme».
¿Qué es la edición completa del sitio (FSE)?
Preguntas y respuestas en vivo: Temas de WordPress basados en bloques / Edición completa del sitio. Como parte del trabajo de divulgación de la edición completa del sitio mediante Gutenberg que se está efectuando; los desarrolladores de WordPress, Carolina Nymark (del equipo de Themes y creadora del curso Full Site Editing Course), Kjell Rigstad (director de diseño en Automattic y principal desarrollador en Gutenberg) y Eileen Violini (desarrollador en el equipo de Gutenberg y diseñador de Sidetrack Studio), participan en vivo en este webinar. Después de las presentaciones, Kjell Rigstad demostró la creación de una parte de plantilla de encabezado en la edición completa del sitio para un tema existente. Un vídeo muy interesante para aprender Gutenberg y acerca de lo que se podrá hacer pronto en WordPress para diseñar un theme desde cero con bloques de Gutenberg.
Desarrollo de un theme FSE simple como acercamiento
A partir del artículo Creating a Block-based Landing Page Theme de Kjell Reigstad me atreví a crear mi primer theme orientado a bloques (FSE).
Realmente, el theme «Blogpocket Twenty» (que realmente es una landing page) es una prueba muy sencilla (ver imagen que precede a estas líneas) pero que es una buena manera de sumergirte en el nuevo mundo de los themes de WordPress orientados a bloques y su personalización mediante la función experimental (beta) del plugin Gutenberg.
Los themes de WordPress orientados a bloques se diferencian, en lo que se refiere al código, bastante de los themes tradicionales, incluso de aquellos que estamos viendo en la era post-Gutenberg pero que no son orientados a bloques dentro del código.
En cuanto al diseño, el theme «Blogpocket Twenty» se creó totalmente con Gutenberg usando bloques nativos y se aderezó con un poquito de CSS para personalizar las fuentes de letra.
Se partió del theme EmptyTheme y de algunas configuraciones plasmadas en el theme twentytwentyone-blocks. Y, por supuesto, en la idea de Kjell Reigstad para hacer una landing page semejante a la que se hizo también en Carrd.
La estructura de un theme orientado a bloques
Te recuerdo que esto es solo una introducción para crear un theme de WordPress orientado a bloques; y puedes empezar para más información con el tutorial oficial en el Manual del editor de bloques.
Lo primero que debes investigar es la nueva estructura de un theme orientado a bloques.
Lo primero que hice fue descargar el theme EmptyTheme y vaciar el archivo index.html (dentro de la carpeta block-templates). Este archivo corresponde a la plantilla por defecto que utiliza Gutenberg en la FSE cuando no encuentra ninguna plantilla.
Eso es semejante a entrar en la home vacía de la plantilla Blogpocket Nineteen.
Codificación en los archivos del theme
A nivel de HTML, no hay que hacer nada. El archivo block-templates/index.html se rellenará con instrucciones especiales HTML de Gutenberg cuando entremos en el editor FSE.
Hay un archivo json con el que se agregan los tamaños y colores de fuente predeterminados del tema, utilizando la especificación theme.json. Yo utilicé inicialmente el archivo experimental-theme.json del theme EmptyTheme y luego probé con el de twentytwentyone-blocks. La principal diferencia es que obtendrás más posibilidades de personalización cuando utilices Gutenberg con la función experimental de edición completa del sitio. Pero, esto no afecta esencialmente al objetivo que se persigue inicialmente: crear un theme senillo, estilo landing page, usando bloques.
En cuanto a los archivos PHP:
- Index.php está vacío, pero debe estar así.
- El archivo functions.php contiene las funciones estándar para poner en cola la hoja de estilo. Aparte de eso, solo establece algunas opciones de tema. Más información en el manual del Editor de bloques. Pero yo dejé sin tocar el archivo functions.php del theme EmptyTheme.
Respecto a las hojas de estilo, yo opté por añadir en style.css el código necesario para asignar un tipo de letra por defecto. Si no se hace esto, no pasa nada a nivel conceptual porque la página home se verá en cualquier caso con el tipo de fuente del sistema. Probablemente, no será de nuestro agrado pero se podrá personalizar más tarde desde el editor FSE.
Instalación del plugin Gutenberg e instalación de la plantilla EmptyTheme
Para empezar a diseñar la página con el editor FSE, lo primero es instalar el plugin Gutenberg (ver imagen superior) y, después, instalar el theme EmptyTheme con las modificaciones de código anteriormente descritas.
Diseño de la página
Automáticamente, verás una nueva opción en el sidebar del administrador de WordPress que te llevará a editar la plantilla por defecto. Supondremos, por el momento, que queremos crear solo una web con una única página de aterrizaje. El propósito es entender qué es un theme orientado a bloques, empezar a comprender su estructura de archivos y cómo podemos personalizarlo con el Editor del Sitio (beta).
Para el diseño de la página, empleé el bloque Cover y dentro un encabezado H2, un párrafo y un botón. Para el background del Cover subí una foto de startupstockphotos.com.
Construcción del archivo zip del theme
Hay una opción en el editor del sitio (beta), dentro de los tres puntos suspensivos verticales de la barra de herramientas, para exportar los archivos de diseño.
El que nos interesa es precisamente el index.html que inicialmente estaba vacío y ahora contiene el código correspondiente a nuestro diseño con bloques de Gutenberg.
Ten en cuenta que si has empleado algún elemento alojado dentro de tu WordPress (como es el caso con la imagen), en el archivo index.html habrá una referencia a la carpeta «wp-content/uploads». Si quieres instalar el theme resultante en otro sitio, tienes dos opciones:
- Instalar el theme sin la imagen porque la instrucción de carga fallará y subirla con el editor del sitio añadiéndola al bloque Cover.
- Modificar de antemano la instrucción de carga de la imagen en index.html dirigiéndola a un repositorio externo. Yo la he alojado en lanzatu.blog y cuando subas el theme a tu sitio de pruebas, se verá la imagen. Habrá un acceso a lanzatu.blog desde tu sitio web, por lo que convendrá que modifiques el bloque Cover con el editor del sitio o corrijas las llamadas a lanzatu.blog dentro del index.html antes de instalar el theme.
Puedes sustituir el index.html del theme EmptyTheme modificado, y que subiste a tu sitio, por el que te has descargado con el export. Después, comprime la carpeta contenedora creando el zip del theme.
Resumen del proceso:
- Descarga EmpyTheme.
- Modifica functions.php, style.css y vacia el index.html
- Sube el theme y actívalo.
- Diseña con bloques y el Editor del Sitio.
- Exporta la plantilla y las partes de la plantilla. Nos interesa el archivo index.html (que es producto de lo que hayas hecho en el punto 4)
- Sustituye el archivo index.html vacío del punto 2, por el que has descargado en el punto 5.
- Comprime y crea el zip.
Yo utilicé Local para toda la prueba.
Descarga el theme «Blogpocket Twenty»
Descarga aquí el theme experimental Blogpocket Twenty 1.1. Y en lugar del Emptytheme puedes partir de la prueba que yo he hecho 😉
Más información sobre el desarrollo de este theme: Desarrollo de Blogpocket Twenty (notas relacionadas)
Conclusiones
Es muy interesante el nuevo enfoque de los themes de WordPress orientados a bloques.
Aquí te he explicado cómo puedes crear tú mismo un theme muy sencillo que sea una landing page. Trata de modificar el diseño y personalizarlo a tu gusto con pocas líneas de código.
¿Qué te parece? ¿Lo vas a estudiar? ¿Conocías ya el concepto de FSE?
Dame feedback, por favor. Tu opinión y comentarios son muy valiosos para mí.
Deja una respuesta