Cómo hacer que tu tema WordPress sea compatible con Gutenberg

Si quieres que tu tema WordPress sea compatible con los nuevos estilos y características del nuevo editor Gutenberg que traerá WordPress 5.0 tendrás que seguir unas pocas indicaciones.

Por defecto, los bloques ofrecen sus propios estilos para permitir compatibilidad básica con bloques en los temas sin tener que hacer cambios.

Los temas, además, pueden añadir/omitir estos estilos, o pueden no ofrecer ningún estilo en absoluto, o basarse totalmente en lo que ofrezcan los bloques.

Algunas características avanzadas de los bloques requieren compatibilidad expresa en el tema, ya que es difícil que el bloque ofrezca estos estilos, y puede que requieran cambios en el mismo tema, para que funcionen bien.

Para permitir alguna de estas características debes llamar a add_theme_support en el archivo functions.php del tema activo. Por ejemplo:

Características opcionales

Alineamiento ancho

Algunos bloques, como el bloque de imagen, tienen la posibilidad de definir un alineamiento “ancho” o “completo” añadiendo el correspondiente nombre de la clase al bloque ( alignwide o alignfull ).

Puedes añadir esta característica a un tema haciendo esta llamada:

Alineamientos anchos y flotaciones

Puede ser difícil crear una estructura adaptable (responsive) que acomode imágenes anchas, una barra lateral, una columna centrada y elementos flotantes que estén dentro de una columna centrada.

Para ello, Gutenberg añade marcado adicional a las flotaciones de las imágenes, para hacer que sea más fácil aplicarles estilos.

Aquí tienes un marcado tipo para una Image  con leyenda:

Y este sería el marcado para una imagen con flotación izquierda:

Paletas de color de los bloques

Los bloques tienen la posibilidad de personalizar colores.

Gutenberg ofrece una paleta por defecto que, como vimos, puedes omitir y sustituir por la tuya, así:

Los colores se mostrarán en orden en la paleta, y no hay límite en cuantos puedes especificar.

Los temas serán los responsables de crear las clases que apliquen los colores en los distintos contextos. Los bloques por defecto usan los contextos “color” y “background-color“.

Así que para aplicar correctamente el color “magenta oscuro” a todos los contextos de bloques por defecto, un tema debería añadir las siguientes clases:

El nombre de la clase se crea con el prefijo  “has-“, seguido por el nombre de la clase y terminando con el nombre del contexto.

Tamaños de fuente del bloque

Los bloques pueden permitir al usuario configurar los tamaños de fuente que quieran usar.

Gutenberg ofrece un conjunto predeterminado de tamaños de fuente, pero un tema puede omitirlos y ofrecer los suyos así:

Los tamaños de fuente se mostrarán en el selector de tamaño de fuente en el orden en el que el tema los declare.

Los temas, también, son los responsables de crear las clases que apliquen los estilos adecuados a los tamaños de fuente.

De nuevo, el nombre de la clase se crea con el prefijo “has-“, seguido del nombre del tamaño de la fuente y terminando con -font-size.

El siguiente ejemplo sería para el tamaño de fuente mediano, en el que el tema podría ofrecer la siguiente clase:

Desactivar tamaños de fuente personalizados

Visto lo anterior, debes saber también que los temas pueden desactivar la posibilidad de establecer tamaños personalizados de fuentes con el siguiente código:

Una vez añadido, los usuarios quedarán restringidos a los tamaños de fuente por defecto ofrecidos en Gutenberg, o a los tamaños ofrecidos mediante el ajuste editor-font-sizes del tema.

Desactivar colores personalizados en paletas de color de los bloques

Por defecto, la paleta de color ofrecida a los bloques permite al usuario elegir un color distinto a los colores por defecto del editor o el tema.

Pero, de nuevo, desde el tema se puede desactivar esta característica usando:

Con este código te aseguras de que los usuarios solo podrán elegir colores desde editor-color-palette ofrecido por el tema, o de los colores por defecto del editor si el tema no tiene los suyos propios.

Estilos del editor

Gutenberg es compatible con estilos del editor en el tema, aunque funciona de manera distinta al editor clásico.

En el editor clásico se carga directamente la hoja de estilos del editor en el iframe del editor WYSIWYG, si hacer ningún cambio.

Sin embargo, Gutenberg no usa iframes.

Para asegurarse de que tus estilos se aplican solo al contenido del editor transforma los estilos de tu editor reescribiendo selectivamente o ajustando ciertos selectores CSS.

Y como funciona de manera distinta a lo habitual, tienes que añadir compatibilidad con esto con un poco de código en tu tema, además de la función add_editor_style, que sigue vigente:

En cualquier caso, no deberías tener que cambiar mucho los estilos de tu editor, pues la mayoría de los temas ya añaden el código previo y obtienen resultados similares en el editor clásico y en el editor Gutenberg.

Si los estilos de tu editor, por ejemplo, tienen un fondo oscuro, puedes añadir lo siguiente para ajustar el color de la interfaz del mismo para que funcione bien en fondos oscuros:

Observa que no tienes que añadir dos veces add_theme_support( 'editor-styles' );, pues esa regla tiene que estar presente en la regla dark-editor-style para que funcione.

Colores básicos

Puedes aplicar estilos al editor como harías con cualquier otra página web.

En el siguiente ejemplo tienes como se cambiarían el color de fondo y el color de la fuente a azul:

Cambiar el ancho del editor

Para cambiar el ancho de la columna principal del editor añade el siguiente CSS al archivo style-editor.css del tema:

Puedes usar estos anchos del editor para que se adapten a tu tema. Y puedes usar cualquier unidad de ancho CSS, por ejemplo % o px.

Estilos de bloque por defecto

Los bloques incluidos por defecto también incluyen estilos predeterminados.

Los estilos se encolan para su edición pero no se encolan para la visualización a menos que el tema añada compatibilidad con los estilos de los bloques por defecto.

Si quieres usar los estilos por defecto en tu tema tienes que añadir la compatibilidad del tema con los mismos mediante wp-block-styles:

Contenido incrustado adaptable (responsive)

Los bloques de incrustados aplican estilos automáticamente al contenido incrustado para reflejar la relación de aspecto del contenido incrustado como iframe.

El estilo de un bloque con estilos adaptables (responsive) a la relación de aspecto sería así:

Y, parea hacer que al redimensionarse el contenido se mantenga la relación de aspecto, el elemento <body> necesita la clase wp-embed-responsive.

Esto no está configurado por defecto, así que requiere que añadas compatibilidad en el tema con esta característica de responsive-embeds:


Como ves, cuando llegue WordPress 5.0, también conocido ya entre los amigos como “GutenPress“, hay algunas adaptaciones que tendrás que hacer en tu tema, o pedirlas al desarrollador de tu tema, según el caso.

Fuente: Gutenberg Theme Support

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (5 votos, promedio: 4,60 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This