Como preparar tus temas para Gutenberg en Wordpress

Como preparar tus temas para Gutenberg en WordPress

por Marcel Cabrera - 7 agosto 2018 Categorías: Temas

Índice de contenidos Agregar soporte para elementos de GutenbergAgregar soporte para alineación en formato ancho o pantalla completaSoporte para paleta de colores personalizada de nuestro temaAgregar estilos para el frontendAlineación a pantalla completa y formato ancho para las imágenesEstilos para las citas BlockquotesOtros estilos de bloquesEstilos en el backend o en el editorIncluir editor-style.css en […]

Ya todos conocemos que el nuevo editor de WordPress: Gutenberg será un cambio bastante grande al editor TinyMCE que ya todos conocemos y hemos usado por muchos años, pero ¿realmente estamos preparados los que desarrollamos temas propios para el cambio? No te preocupes, trataremos de dar una introducción a lo que nos espera y como podemos comenzar a trabajar en Gutenberg desde ya, con los ajustes básicos que deberíamos estar haciendo a nuestros temas para estar listos cuando la versión 5.0 de WordPress llegue a nuestro dashboard.

Para utilizar Gutenberg desde ya mismo solo tienes que descargar e instalar el plugin en tu sitio

Agregar soporte para elementos de Gutenberg

Agregar soporte para alineación en formato ancho o pantalla completa

Una de las funciones más llamativas de Gutenberg es alinear nuestros bloques o imágenes al ancho completo de la ventana o un poco más anchas que el contenedor de nuestro contenido, lo cual permite crear efectos llamativos en nuestras páginas.

Alineación a ancho completo o ancho saliente en Gutenberg

Por default Gutenberg no viene activado con estos elementos de estilo, entonces para que nuestro tema soporte estos estilos debemos agregar lo siguiente al archivo functions.php de nuestro tema:

add_theme_support( 'align-wide' );

Soporte para paleta de colores personalizada de nuestro tema

Adicionalmente podemos personalizar la paleta de colores que le aparecerá a nuestros usuarios cuando tengan seleccionado un bloque al cual le podamos aplicar color, esto nos puede ayudar a que los colores de nuestro diseño estén listos para cuando el usuario tenga que usarlos y no estar teniendo que escoger o encontrar el color o escribiendo el código. Cabe mencionar que aún especificando esta paleta de colores, los usuarios podrán seleccionar otros colores desde el picker con todos los colores.

Personalización de paleta de colores para el editor en Gutenberg

Para personalizar estos colores y colocar nuestra propia paleta de colores dependiendo del tema, en nuestro archivo functions.php colocamos lo siguiente:

add_theme_support('editor-color-palette',
    array(
        array(
	    'name' => 'primary color',
	    'color' => '#02b3e4'
	),
	array(
	    'name' => 'secondary color',
	    'color' => '#09e1c0'
	)
    )
);

Agregar estilos para el frontend

Gutenberg aplica una gran cantidad de estilos por default a nuestro sitio una vez que lo activemos, pero definitivamente en nuestros temas queremos que esos estilos se adapten a nuestro tema y aquí es donde podremos sobreescribir muchos de esos estilos para cada uno de los bloques nuevos que Gutenberg introduce a nuestro nuevo editor. En este artículo veremos un par de ejemplos como una introducción a lo que debemos hacer pero ya dependiendo de cada tema será la cantidad de bloques que quieran o deban estilar de acuerdo al diseño de su tema.

Alineación a pantalla completa y formato ancho para las imágenes

Una vez que tengas activado este soporte en tu tema tendrás que agregar ciertos estilos a tu archivo css para estilar esos bloques con el selector que Gutenberg da por default una vez que marcas uno de estos estilos de alineación, estos son los dos estilos que se agregan y te mostramos los estilos en formato sass que hemos manejado en nuestro caso, el breakpoint es un mixin de sass que aplica este código solo a tamaños de pantalla más grandes de 768px o tablets, ya depende del gusto y diseño de cada tema cuando aplicarlos, en nuestro caso así nos funciona bien:

.alignfull {
  @include breakpoint(intern){
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: auto;
    max-width: 1000%;

  }
}

.alignwide {
  @include breakpoint(intern){
    margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);
    width: auto;
    max-width: 1000%;

  }
}

.alignwide img,
.alignfull img {
  @include breakpoint(intern){
    display: block;
    margin: 0 auto;
    width: 100% !important;
  }
}

Y el resultado en nuestro sitio es el siguiente, con la imagen alineándose al ancho completo de la ventana:

Imagen alineada a ancho completo con Gutenberg

 

Estilos para las citas Blockquotes

Gutenberg aplica dos estilos de citas o blockquotes:  la éstandar y un estilo “grande”. Ambas pueden incluir una cita <cite> .

Estilos de citas en Gutenberg

Aquí les dejamos el estilo básico que hemos experimentado en Claserama para el que utilizamos SASS:

blockquote{
  background: transparent;
  margin: 0 0 1em;
  @include font-size(18);
  font-style: italic;
  padding: 0;
  text-align: center;

  cite {
    display: block;
    @include font-size(16);
    margin-top: 17px;
  }

  p:last-of-type {
    margin-bottom: 0;
  }

  &.is-large.wp-block-quote {
    @include font-size(22);
    margin: 0 0 1em;
    padding: 0;

    cite {
      text-align: center;
    }
  }

  &.wp-block-pullquote {
    border-top: 2px solid $basecolor;
    border-bottom: 2px solid $basecolor;
    padding: 1em 0;
  }
}

Otros estilos de bloques

Hay muchos bloques y todos deberíamos estilarlos de acuerdo al diseño de nuestro tema, si bien hay algunos como las galerías que son muy específicos de Gutenberg y podemos dejarlos con los estilos por default, hay otros como los botones, las reglas, que definitivamente tenemos que ajustarlos a nuestro tema. Esto ya dependerá de cada tema y como ha sido construído. Esperamos que con los ejemplos que les mostramos puedan ver que no es tan complicado el poder ajustar nuestros temas y estar preparados para Gutenberg en el frontend y con esto puedan investigar y ver como estilar los demás bloques necesarios para su tema.

 

Estilos en el backend o en el editor

Una de las principales razones para el cambio del editor a Gutenberg es convertirlo en un verdadero WYSIWYG (Lo que ves es lo que obtienes) que es algo que no teníamos realmente con TinyMCE , sin embargo para poder conseguir ese WYSIWYG del que tanto esperamos, necesitamos agregar estilos directamente al editor de Gutenberg para agregar fuentes y estilos que sean necesarios para que en el editor se vea lo más parecido posible a como se verá el sitio en el frontend.

Incluir editor-style.css en tu tema

Todos los estilos CSS para el editor de Gutenberg tienen que ser incluídos en un archivo CSS extra, en nuestro caso lo llamaremos editor-style.css y lo puedes colocar en la carpeta de css de tu tema, recuerda en las buenas prácticas de desarrollo en WordPress debería ir en la carpeta assets/stylesheets.

Este archivo lo podemos llamar por medio de nuestras funciones de enqueue, muy similar a como insertamos estilos para el editor actual. para esto utilizaremos el archivo functions.php y el hook ‘enqueue_block_editor_assets’ y el código sería el siguiente:

function claserama_editor_styles(){
    wp_enqueue_style('google-fonts','https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700','1.0');
    wp_enqueue_style( 'claserama-editor-style', get_template_directory_uri() . '/assets/stylesheets/editor-style.css' );
}
add_action('enqueue_block_editor_assets','claserama_editor_styles');

Como pueden ver en el código,  aparte de insertar el archivo css también podemos incluir las fonts de nuestro sitio, lo cual es de mucha ayuda en lograr que en el editor todo se vea igual que en el frontend, ya solo quedaría el trabajo de agregar los estilos necesarios a este archivo para lograr ese parecido en las dos vistas.

ten cuidado en especificar muy bien tus estilos para el editor para que no se apliquen en nigún otro lado, como medida de seguridad puedes usar el prefijo .editor-post-visual-editor para todos los selectores que utilices y así no caer en errores de visualización.

 

Conclusiones

Gutenberg está por llegar y debemos estar preparados para cuando esto suceda, como puedes ver será un cambio muy grande y podemos como conclusión ver varios puntos:

  • Será un cambio fundamental en como los usuarios editan el contenido del sitio, por lo cual debemos preparar nuestros temas lo más posible creando todos los estilos posibles para los diferentes bloques.
  • Para temas modulares o que usan ACF o custom fields, en un principio no va a afectar ya que Gutenberg solo se aplica a nuestra sección de contenido principal. Sin embargo debemos irnos preparando para el futuro donde se espera que con Gutenberg podamos crear esos sitios modulares sin tantas complicaciones o inclusive sin plugins como ACF o de custom fields, otra opción es que estos plugins se adaptarán a los bloques de Gutenberg y trabajar sobre estos mismos.
  • Esta guía es una base y seguiremos experimentando y claro que haremos más artículos acerca de estos cambios.

Les dejamos con los códigos que vimos en este artículo para functions.php y style.css de nuestro tema.

1 comentario

  1. Miguel Gomez7 agosto, 2018

    Excelente artículo Marcel, gracias por compartir.

Deja un comentario

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

*
*
*