• Historias de la Radio, 1 28018 Madrid
gutenberg wordpress Chrome 77 error

Cómo solucionar los problemas de Google Chrome en el editor Gutenberg

  • septiembre 17, 2019
  • 1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 5,00 de 5)
    Cargando…

La última actualización de Google Chrome -versión 77- está causando problemas con el Editor Gutenberg de WordPress a la hora de mostrar los contenidos de una entrada. Con esta ayuda para WordPress lo solucionaremos.

Estos problemas, según hemos podido ver en diferentes foros de ayuda para WordPress, presumiblemente, vienen motivados por la modificación en la implementación de los modelos Flexbox en Chrome 77, es decir, en el método que ayuda a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.

ayuda para WordPress
Ejemplo de superposición de los metacuadros

Es decir, un problema de alineación, justificación y distribución del espacio libre entre ítems en CSS, al editar páginas y publicaciones, si tiene los llamados «meta cuadros» debajo del editor Gutenberg. Estos metacuadros se corresponden principalmente a plugins como Yoast SEO, Schema Pro, el propio tema de nuestra web, etc., causando que estos cuadros se superponen y aparezcan en el medio del contenido del editor Gutenberg cuando el contenido está a la altura total de la ventana del navegador.

Solución provisional para el editor Gutenberg

Para resolver el problema, puedes esperar una actualización de WordPress (ya se está trabajando en ello), esperar a la actualización de Chrome a la versión M77/78, o simplemente insertar un pequeño código en el archivo functions.php de tu tema activo -ojo si usas un tema child, haz la modificación en él-. Aquí tienes una guia de como hacerlo -Gracias a Jonas Tietgen-:

  1. Inicia sesión en su servidor a través de FTP, si no tienes habilitada la función de Editor de Temas en Ajustes dentro del panel de administración de WordPress.
  2. Vete a la carpeta wp-content -> themes -> tu tema (si no tiene un tema hijo, el código desaparecerá con la próxima actualización del tema)
  3. Crea una copia de seguridad del archivo functions.php (copiar o descargar)
  4. Pega el siguiente código en el archivo functions.php, mejor al final del fichero para tenerlo localizado:
/**
* Modify the height of a specific CSS class to fix an issue in Chrome 77 with Gutenberg. Ayuda para WordPress
*
* @see https://github.com/WordPress/gutenberg/issues/17406
*/
add_action(
'admin_head',
function() {
echo '<style>.block-editor-writing-flow { height: auto; }</style>';
}
);

¡Una vez que hayas insertado este código, el Editor Gutenberg funcionará bien en Google Chrome 77! Espero que esta ayuda para WordPress os sirva y os solucione el problema con Guttenberg.

Si eres empresa, y necesitas un presupuesto de mantenimiento de tu web, no dudes en ponerte en contacto con nosotros.

Abrir chat