Hoy vemos cómo actualizar un child theme de Genesis para que sea compatible con el editor de bloques de WordPress. Muy fácil con este sencillo tutorial.
La llegada de la versión 5.1 de WordPress, trajo muchas actualizaciones, entre las que destacó la incorporación en el core de WordPress del nuevo editor de bloques.
Este nuevo editor de bloques, ha llegado para quedarse. Y aunque puedes evitar usarlo instalando el plugin Editor Clásico del repositorio de WordPress, es muy seguro que con el paso de los meses, no te quede más remedio que pasarte al nuevo editor de bloques.
Si estás arrancando tu proyecto online y has instalado un child theme de Genesis reciente, es muy posible que ya sea compatible con el editor de bloques. Pero si en tu proyecto estás utilizando, o está basado en un child theme anterior a la llegada del editor, tendrás que hacer unos pequeños ajustes para que éste sea compatible con el editor de bloques de WordPress.
Por lo tanto, si no quieres tener que instalar un nuevo child theme, o simplemente quieres ampliar la vida útil del que ya tienes instalado en tu proyecto, para que así sea compatible con el editor de bloques, sólo tienes que seguir los pasos de este tutorial. Así que… ¡manos a la obra!
¿Cómo actualizar un child theme de Genesis para usar el editor de bloques?
Paso 1. Descargar la nueva versión de tu child theme
Lo primero que necesitas es una copia de la nueva versión de tu child theme. Puedes bajártela de tu cuenta de StudioPress o si no, siempre puedes conseguirla en el área de contenido premium.
Paso 2. Localizar los archivos necesarios
Descomprime el archivo .zip y dirígete hasta la carpeta /lib/. Dentro de esta carpeta, encontrarás una carpeta llamada /gutenberg/ que es la que tendrás que subir a tu instalación de WordPress en producción.
Paso 3. Subir los archivos a tu instalación de WordPress
Una vez que tienes los archivos a subir localizados, sólo tienes que conectarte a tu instalación de WordPress, bien a través de tu cliente FTP o bien a través del panel de control de tu hosting.
Una vez estés conectado, dirígete a la carpeta /wp-content/themes/tu-child-theme/lib/ y sube la carpeta /gutenberg/ que has localizado en el child theme original, a la carpeta /lib/ de tu instalación.
Paso 4. Modificación del archivo functions.php
Una vez que ya hayas cargado la carpeta /gutenberg/, añade el siguiente snippet de código al archivo functions.php de tu child theme:
// Añade funcionalidades y estilos del editor de bloques
add_action( 'after_setup_theme', 'genesis_child_gutenberg_support' );
function genesis_child_gutenberg_support() {
require_once get_stylesheet_directory() . '/lib/gutenberg/init.php';
}Con este snippet estás indicando a tu child theme que ejecute los archivos dentro de tu nueva carpeta /gutenberg/.
Paso 5. Modificación del archivo style.css
Para terminar, sólo tienes que añadir la instrucción overflow-x: hidden; al final de la sección body de tu archivo style.css:
body {
background-color: #fff;
color: #414141;
...
overflow-x: hidden;
}Con estos sencillos cambios, tu child theme ya es compatible con el editor de bloques de WordPress. Eso sí, si anteriormente has modificado los estilos de tu tema hijo, es posible que debas hacer algunos ajustes adicionales en dichos estilos para que la visualización del contenido en el editor de bloques sea lo más aproximada posible a tu front-end.
Como ves, actualizar el child theme que estabas usando para que sea compatible con el editor de bloques de WordPress es un proceso bastante sencillo. Bastan unas pocas líneas de código para resolverlo de forma fácil y rápida, y así alargar la vida útil de tu child theme de Genesis. Además, haciéndolo así, cada vez aprenderás más sobre Genesis y la instalación de tu proyecto online.
Si te ha gustado este tutorial, recuerda que si te suscribes, tendrás acceso a todo el contenido premium.
Y como siempre, si tienes cualquier problema, no dudes en contactar conmigo. Nos vemos en la próxima entrega, con un nuevo tutorial. 😉
