Compatibilidad entre tu tema WP y Gutenberg
Compatibilidad entre tu tema WP y Gutenberg
Escrito por: Jhon Veléz
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>
→ 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.
Probar la velocidad desde móviles
Esta es una herramienta de Google que mide la velocidad de carga de tus páginas simulando una red 3G (de las más lentas), la prueba puede tardar unos pocos minutos, pero la espera vale la pena:
- Te da un resultado en segundos (no te asustes, es normal tanto tiempo)
- Calcula el posible porcentaje de pérdida de visitantes, debido a la lentitud
- Hace comparación entre distintas industrias
- Te indica cuanto tiempo de carga puedes ganar haciendo los ajustes recomendados
Finalmente te permite obtener un informe gratuito que te es enviado a tu correo electrónico, en el cual están todos los aspectos y detalles que debes mejorar para cumplir con lo planteado como ideal por Google.
