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:

function funcionalidades_bloques_en_mi_tema() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( 'magenta-oscuro', 'themeLangDomain' ),
            'slug' => 'magenta-oscuro',
            'color' => '#a156b4',
        ),
        array(
            'name' => __( 'magenta claro', 'themeLangDomain' ),
            'slug' => 'magenta-claro',
            'color' => '#d0a5db',
        ),
        array(
            'name' => __( 'gris muy claro', 'themeLangDomain' ),
            'slug' => 'gris-muy-claro',
            'color' => '#eee',
        ),
        array(
            'name' => __( 'gris muy oscuro', 'themeLangDomain' ),
            'slug' => 'gris-muy-oscuro',
            'color' => '#444',
        ),
    ) );
}

add_action( 'after_setup_theme', 'funcionalidades_bloques_en_mi_tema' );

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:

add_theme_support( 'align-wide' );

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:

<figure class="wp-block-image">
    <img src="..." alt="" width="200px">
    <figcaption>Leyenda de la imagen.</figcaption>
</figure>

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

<div class="wp-block-image">
    <figure class="alignleft">
        <img src="..." alt="" width="200px">
        <figcaption>Leyenda de la imagen.</figcaption>
    </figure>
</div>

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í:

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'magenta oscuro', 'themeLangDomain' ),
        'slug' => 'magenta-oscuro',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'magenta claro', 'themeLangDomain' ),
        'slug' => 'magenta-claro',
        'color' => '#d0a5db',
    ),
    array(
        'name' => __( 'gris muy claro', 'themeLangDomain' ),
        'slug' => 'gris-muy-claro',
        'color' => '#eee',
    ),
    array(
        'name' => __( 'gris muy oscuro', 'themeLangDomain' ),
        'slug' => 'gris-muy-oscuro',
        'color' => '#444',
    ),
) );

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:

.has-magenta-oscuro-background-color {
    background-color: #313131;
}

.has-magenta-oscuro-color {
    color: #f78da7;
}

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í:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'pequeño', 'themeLangDomain' ),
        'shortName' => __( 'P', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'peque'
    ),
    array(
        'name' => __( 'mediano', 'themeLangDomain' ),
        'shortName' => __( 'M', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'mediano'
    ),
    array(
        'name' => __( 'grande', 'themeLangDomain' ),
        'shortName' => __( 'G', 'themeLangDomain' ),
        'size' => 36,
        'slug' => 'grande'
    ),
    array(
        'name' => __( 'extra', 'themeLangDomain' ),
        'shortName' => __( 'SG', 'themeLangDomain' ),
        'size' => 50,
        'slug' => 'extra'
    )
) );

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:

.has-mediano-font-size {
    font-size: 16px;
}

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:

add_theme_support('disable-custom-font-sizes');

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:

add_theme_support( 'disable-custom-colors' )

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:

add_theme_support('editor-styles');

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:

add_theme_support( 'editor-styles' );
add_theme_support( 'dark-editor-style' );

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:

/* Añade esto a tu archivo `style-editor.css` */
body {
    background-color: #d3ebf3;
    color: #00005d;
}

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:

/* Ancho columna principal */
.wp-block {
    max-width: 720px;
}

/* Ancho de bloques "wide" */
.wp-block[data-align="wide"] {
    max-width: 1080px;
}

/* Ancho de bloques "full-wide" */
.wp-block[data-align="full"] {
    max-width: none;
}

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:

add_theme_support( '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í:

<figure class="wp-embed-aspect-16-9 wp-has-aspect-ratio">
   ...
</figure>

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:

 add_theme_support( '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 Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(8 votos, promedio: 4.6)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

5 comentarios en “Cómo hacer que tu tema WordPress sea compatible con Gutenberg”

  1. Quique Martinez

    Muy buen articulo Fernando!!!! la verdad es que vamos a tener que estar muy atentos a los cambios. He leído poco respecto a la compatibilidad de DIVI y Gutemberg. ¿Qué opinión o sugerencia podrías hacer? Gracias

  2. Que tal Fernando, en primer lugar muchas gracias por hacernos la vida con WordPress más fácil, pero estoy teniendo problemas, estoy intentando actualizarme y mantenerme al día pero no logro hacer funcionar los bloques, se ven los bloques anteriores, y aunque también he intentado que se muestre el editor clásico y deshabilitar gutenberg tampoco se ve, el editor queda en blanco y no se puede escribir ni ver los botones. Espero me puedas dar un consejo, muchas gracias.

      1. Que tal Fernando, intenté desactivar Gutenberg, utilicé tu plugin, luego utilicé otro llamado classic editor y nada, en ninguno de los casos, llegaba a funcionar ni el editor clásico ni gutenberg, así que no me ha quedado de otra que volver a instalar la versión 4.9.8 que recomendaste en otro artículo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido