Gutenberg llegará pronto a WordPress. Su Sitio web ¿Está listo? Aunque todavía no sabemos exactamente qué forma tomará, este nuevo sistema de contenido se agregará a WordPress en el futuro. Echemos un vistazo a los impactos potenciales que esto podría tener en su sitio y las formas de identificar y solucionar las áreas problemáticas con anticipación.

gutenberg wordpress

Gutenberg es un proyecto de WordPress que tiene como objetivo dar a los usuarios más flexibilidad en el diseño de su contenido. Esencialmente, el proyecto tiene como objetivo reemplazar el editor actual, que funciona principalmente como un procesador de textos, con una interfaz más visual y estructurada. Actualmente, Gutenberg es un complemento y brinda a los usuarios la capacidad de editar su contenido de la misma manera que Visual Composer u otros editores de arrastrar y soltar (Drag & Drop), pero de forma simplificada y muy intuitiva.

Para conocer más sobre Gutenberg, haga clic aquí.

Gutenberg es una empresa enorme y probablemente llegará a muchos puntos finales en su Sitio web. Estas son las tres áreas que exploraremos en busca de problemas potenciales:

  • Su tema: Gutenberg viene con su propio conjunto de estilos para el contenido. ¿Tu tema es compatible? ¿Cómo será Gutenberg cuando esté activo?
  • Sus complementos: Es posible que Gutenberg interactúe con sus otros complementos de formas inesperadas. Veremos qué podría ser y qué hacer para solucionar cualquier problema que surja.
  • Tu contenido: Gutenberg afectará la forma en que se muestra su contenido. Veremos cómo esto podría cambiar el aspecto de sus páginas y repasaremos algunas posibles soluciones si tiene problemas.

Antes de comenzar, es una buena idea configurar un área de prueba donde pueda experimentar con Gutenberg sin poner en riesgo su sitio principal. Idealmente, debería crear su propia área de prueba o crear una copia local de su sitio. Para obtener más información sobre cómo realizar cualquiera de estas tareas, consulte el siguiente tutorial: Cómo instalar WordPress localmente.

Si esto no es posible, puede realizar las pruebas directamente en su sitio. Tenga en cuenta que esto puede ser riesgoso, ya que activaremos y desactivaremos varias partes de su sitio. Si está realizando la prueba en vivo, asegúrese de crear una copia de seguridad de su sitio antes de comenzar.

Una vez que sepa dónde va a realizar la prueba, vaya al directorio de complementos y busque Gutenberg. Una vez que esté instalado y activado, sigue leyendo.

Ahora que tiene Gutenberg instalado, echemos un vistazo a la primera sección de su sitio que podría verse afectada: su tema. Si ya hay problemas importantes en este punto, como errores en la base de datos o problemas con el panel de WordPress, vaya a la sección Que hacer cuando hay demasiados problemas.

Dado que Gutenberg interactúa principalmente con el contenido del sitio, es suficiente probar algunas cosas, por suerte para nosotros.

La primera es que Gutenberg viene con su propia hoja de estilo y un conjunto de estilos. Verifique cada uno de los diferentes tipos de páginas y plantillas que se utilizan en su sitio para asegurarse de que sigan apareciendo correctamente. El objetivo principal aquí es centrarse en los elementos del área de contenido principal de sus páginas, especialmente el contenido y los bloques de imágenes. Si ve algún problema, es probable que los estilos de Gutenberg tengan prioridad sobre los de su sitio.

Para corregir esto, deberá identificar de dónde proviene el problema. Por lo general, este será un selector de CSS centrado en un elemento HTML o la prioridad de los estilos de Gutenberg sobre sus propias clases. De cualquier manera, intente identificar dónde está ocurriendo el error. A continuación, averigüe por qué los estilos de Gutenberg están anulando los suyos y corrija su código para que tenga prioridad.

Intenta hacer correcciones en tu propio tema (o mejor aún, en un tema secundario o área especificada para CSS en su tema), en lugar de modificar Gutenberg. Si edita directamente cualquiera de los archivos en Gutenberg, es probable que se sobrescriba cuando se actualice el complemento.

Del mismo modo, querrá ejecutar las mismas pruebas en su tablero de una vez por todas. Las opciones de tema y otras secciones personalizadas generadas por su tema parecen ser los mayores culpables hasta ahora. Una vez que haya identificado los problemas de estilo en estas áreas, generalmente puede solucionarlos cambiando o creando un tema hijo y ajustando el CSS allí.

Después de probar su tema, los complementos para su sitio son los siguientes. Específicamente, esté atento a los complementos que proporcionan códigos cortos que utiliza en su contenido (por ejemplo, Gravity Forms), complementos que afectan la apariencia de su contenido (por ejemplo, complementos de accesibilidad que afectan el tamaño del texto) y complementos que insertan elementos directamente en su página (como Campos personalizados avanzados).

Para auditar esta área, comience por recopilar una lista de todos los códigos cortos que está utilizando, así como las páginas en las que existen. Con su lista en la mano, visite cada una de estas páginas para ver si funcionan como se esperaba. Si tiene problemas de estilo, es probable que esté experimentando el mismo problema que antes y necesite reajustar sus estilos.

Sin embargo, si se muestra el código abreviado y no el contenido esperado (es decir, su página muestra el [shortcode]en lugar de hacer lo correcto) hay otra solución. En este caso, puede mirar el bloque donde se encuentra el shortcode y confirmar que no se considera texto (busque y elimine las etiquetas no deseadas alrededor del shortcode). Si el problema persiste, mover el código corto a un tipo de bloque más apropiado debería reiniciar todo.

Este problema surge del mismo problema que ya cubrimos: las sustituciones de estilo. Identifica los elementos afectados y corrige el CSS.

La última área que analizaremos para detectar problemas conflictivos es la creación de artículos. Cualquier complemento que inserte elementos HTML en una página sin utilizar códigos cortos es sospechoso aquí, por ejemplo, cuando PHP extrae campos personalizados del complemento Campos personalizados avanzados.

El deslizamiento más común con la creación de elementos gira en torno a bloques incompatibles. Dado que Gutenberg proporciona sus propios estilos, es posible que si sus elementos se crean dentro de un bloque no intencionado, no se muestren correctamente. La solución para esto es asegurarse de que su código agregue elementos al bloque donde desea que estén.

No es tan urgente como los otros problemas que hemos discutido, pero podría haber algunas complicaciones en la forma en que se muestra su contenido. La mayoría de estos problemas provendrán de cambios de estilo menores o de laorganización bloques Para solucionar esto, tendrá que jugar con el sistema de bloqueo hasta que obtenga su página de la manera que desea.

Que hacer cuando hay demasiados problemas

¿Se encontró con un problema que no pudo resolver con las sugerencias de este tutorial? No te asustes ! Todavía queda algo de tiempo antes de que Gutenberg se integre en el núcleo de WordPress.

Primero, escriba cuál es el error y qué pasos condujeron al error. Cuanta más información pueda recopilar, mejor. Transmita toda esta información al equipo de Gutenberg. Con suerte, podrán determinar el problema y solucionarlo en una versión futura.

Si estaba trabajando en un sitio de prueba, en este punto eso es todo lo que puede hacer por ahora. Siga revisando las notas de la versión para ver si su problema está resuelto, o posiblemente trabaje para solucionarlo usted mismo.

Si estaba trabajando en su sitio en vivo, deshabilitar Gutenberg debería hacer que todo vuelva a la normalidad. Si no es así, ¡es hora de volver a la copia de seguridad que hizo al comienzo del tutorial!

Gutenberg apunta a ser un cambio masivo en el entorno de WordPress, que busca cambiar el contenido para mejor. Antes de que llegue a la rama principal, asegúrese de verificar que su sitio funcione con los nuevos cambios. Si tiene algún problema diferente a los enumerados aquí, mejores soluciones o arreglos para cualquier cosa en este tutorial, deje un comentario a continuación.