Compatibilidad entre tu tema WP y Gutenberg

El nuevo editor Gutenberg y sus bloques, lanzado con la versión 5 de WordPress, posee características avanzadas, las cuales requieren tener una compatibilidad expresa con el tema activo en tu sitio sobre WordPress. Debido a esto, es difícil que los bloques ofrezcan esos estilos y puede que sea necesario realizar modificaciones en el tema.

Si lo que queremos es permitir algunas de estas características, debemos hacer un llamado a [add_theme_support] en nuestro archivo functions.php del tema activo o en nuestro plugin de funciones personalizadas.

Por ejemplo:

/*----Agregar paleta de colores para los bloques-----*/

function funcionalidades_bloques_okweb() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( ''ow-azul-oscuro', 'themeLangDomain' ),
            'slug' => 'ow-azul-oscuro ',
            'color' => '#a156b4',
        ),
        array(
            'name' => __( 'ow-azul-claro', 'themeLangDomain' ),
            'slug' => ' ow-azul-claro',
            'color' => '#d0a5db',
        ),
        array(
            'name' => __( 'ow-naranja', 'themeLangDomain' ),
            'slug' => 'ow-naranja-claro',
            'color' => '#eee',
        ),
        array(
            'name' => __( 'ow-naranja', 'themeLangDomain' ),
            'slug' => 'ow-naranja-claro',
            'color' => '#444',
        ),
    ) );
}

add_action( 'after_setup_theme', 'funcionalidades_bloques_okweb' );


Características opcionales

Alineación de anchura completa

Algunos de los nuevos bloques, permiten esta función como lo es el bloque de imagen donde nos brinda la posibilidad de definir un tipo de alineación “ancha” o “completa” añadiendo el nombre correspondiente de la clase al bloque.

[alignwide o alignfull]

Para ello podemos añadir esta característica en tu tema:

add_theme_support( ‘align-wide’ );

Descripción para las imágenes

Gutenberg permite añadir un texto o descripción flotante debajo de las imágenes, esto hace que sea fácil aplicar estilos.

<!–Marcado tipo para una imagen con descripción–>

<figure class=»wp-block-image»>
<img src=»https://okweb.co/wp-content/uploads/2016/08/logo.png» alt=»Ok Web – Tu Evolución Digital» width=»200px»>
<figcaption>descripción de la imagen</figcaption>
</figure>

<!– Marcado para imagen con flotación a la izquierda –>

<div class=»wp-block-image»>
<figure class=»alignleft»>
<img src=»https://okweb.co/wp-content/uploads/2016/08/logo.png» alt=»Ok Web – Tu Evolución Digital» width=»200px»>
<figcaption>Leyenda de la imagen</figcaption>
</figure>
</div>

Libros Digitales Ok Web

Breves documentos en formato PDF, elaborados por Ok Web para orientar y ayudar en temas digitales aportando a
Tu Evolución Digital.

Identifica cuál es la mejor opción digital para hacer crecer tu negocio

Alojamiento web de alta calidad para WordPress


SiteGround

Compartir en LinkedIn

Web Hosting

Seguir Empresa

Solicita una Asesoría



Darle formato de color a los bloques

Gutenberg nos ofrece la posibilidad de personalizar los colores de los bloques, estos pueden ser sustituidos por tu propia paleta:

/*----Agregar paleta de colores para los bloques-----*/

function funcionalidades_bloques_okweb() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( ''ow-azul-oscuro', 'themeLangDomain' ),
            'slug' => 'ow-azul-oscuro ',
            'color' => '#a156b4',
        ),
        array(
            'name' => __( 'ow-azul-claro', 'themeLangDomain' ),
            'slug' => ' ow-azul-claro',
            'color' => '#d0a5db',
        ),
        array(
            'name' => __( 'ow-naranja', 'themeLangDomain' ),
            'slug' => 'ow-naranja-claro',
            'color' => '#eee',
        ),
        array(
            'name' => __( 'ow-naranja', 'themeLangDomain' ),
            'slug' => 'ow-naranja-claro',
            'color' => '#444',
        ),
    ) );
}

add_action( 'after_setup_theme', 'funcionalidades_bloques_okweb' );


→ Estos colores se muestran en el orden de la paleta y no hay un límite de cuantos colores detallar especificar.

→ Cómo cambiar el Slug

El editor de bloques Gutenberg por defecto nos muestra un primer módulo que es el de título, al hacer clic sobre este módulo o presionar la tecla tabulación de nuestro teclado, nos dará la opción de escribir, una vez insertado el título y después de un breve momento al dar de nuevo clic sobre este bloque, nos mostrará en la parte superior, un rectángulo donde está el slug y un botón en la parte derecha que dice editar.

Otra forma de hacerlo es en el panel derecho, allí podremos ver un ítem con el nombre del enlace permanente, lo cambiamos y actualizamos.

→ Como ocultar las cajas por defecto en el editor de bloques

Para ocultar las cajas en los paneles del editor lo que debemos hacer es dirigirnos a la esquina superior derecha, hacemos clic en el icono de los 3 puntos verticales, luego en opciones y allí podemos observar múltiples cuadros de selección, para ocultarlos, simplemente quitamos la selección y listo.

→ Como desactivar el editor de bloques

Lo único que debemos hacer es copiar el siguiente código e insertarlo en nuestro archivo functions.php del child theme o si tenemos nuestro propio complemento de personalizaciones.

Para versiones anteriores a WordPress beta 5.0:

add_filter( ‘gutenberg_can_edit_post_type’, ‘__return_false’ );

Para versiones beta 1 y superiores:

add_filter(‘use_block_editor_for_post_type’, ‘__return_false’, 100);

Pensamientos finales

El nuevo editor Gutenberg de WordPress trae funciones muy prácticas que resultan de gran ayuda a la hora de publicar una entrada o página en tu sitio web.

Debemos familiarizarnos y aprender nuevamente a usar este editor, solo esperemos que sea para quedarse y no para cambiarlo próximamente e iniciar de nuevo el aprendizaje.

¿Te gustó?
Ir al blog
¡Chévere si comentas!

Mejor si compartes

Libros Digitales Ok Web

Breves documentos en formato PDF, elaborados por Ok Web para orientar y ayudar en temas digitales aportando a
Tu Evolución Digital.

Identifica cuál es la mejor opción digital para hacer crecer tu negocio

Alojamiento web de alta calidad para WordPress


SiteGround

Compartir en LinkedIn

Web Hosting

Seguir Empresa

Solicita una Asesoría



Resumen
Compatibilidad entre tu tema WP y Gutenberg
Nombre del artículo
Compatibilidad entre tu tema WP y Gutenberg
Descripción
Para aprovechar todas las ventajas del nuevo editor Gutenberg, será necesario que tu tema sea modificado y esto lo hace un experto de tu confianza.
Jhon Vélez
https://okweb.co/wp-content/uploads/2018/02/Ok-Web-My-Appm.jpg
Ok Web
Logotipo del editor
Escribir a Ok Web