Cómo adaptar tu tema de WordPress a Gutenberg


En este tutorial voy a explicaros cómo adaptar vuestro tema de WordPress a Gutenberg, el nuevo editor de WordPress.

Índice de Contenidos:

1. Paleta de Colores
1.1 Añadir paleta de colores personalizada
1.2 Deshabilitar color personalizado

2. Alineamientos de Imagen
2.1 Añadir Align Wide & Align Full
2.2 Dar estilos CSS .alignwide y .alignfull

3. Estilos para bloques en el editor
3.1 Encolar hoja de estilos del editor
3.2 Dar estilos CSS a los anchos de los bloques en el editor
3.3 Usar google fonts en el editor

Gutenberg implementa varias funcionalidades nuevas a las que debemos dar compatibilidad con nuestro tema, pero no os preocupeis que es bastante sencillo ya que todo se realiza a través de los archivos functions.php y style.css de nuestro tema.

Estas novedades son por ejemplo: las paletas de colores, los nuevos alineamientos de imagen y la posibilidad de dar estilos a los bloques en el editor, y para mostraros un ejemplo real, lo que haré será adaptar el tema de la web de mi newsletter semanal AprendeGutenberg.com, a la que deberías estar suscrito, si deseas estar todas las semanas al tanto de lo que ocurre dentro del proyecto de Gutenberg 😀

Paletas de colores

Comenzamos con las paletas de colores, como sabéis Gutenberg lleva incorporada una paleta de colores predeterminada con la que se puede agregar tanto color al texto, como al fondo del bloque. Esta paleta incluye 11 colores predeterminados y un selector de color personalizado.

gutenberg-color-palette-default

Aquí radica el principal problema y es que si el usuario de WordPress no tiene los suficientes conocimientos puede crear auténticos “horrores” combinando colores, y aunque existen avisos de que esa combinación de colores no es la idónea, el usuario puede desear seguir “destruyendo retinas” sin compasión 😛

gutenberg-color-palette-custom-warning

Añadir paleta de colores personalizada

Por lo que vamos a crear nuestra propia paleta de colores personalizada, que tenga solo disponibles los colores de nuestra marca y que sustituya la predeterminada que por defecto lleva Gutenberg. Abrimos el archivo functions.php de nuestro tema y añadimos el siguiente código:


/**
 * Gutenberg add_theme_support
 */

// Add custom palette
 	add_theme_support( 'editor-color-palette',
 	    array(
 	        'name' => 'ag orange',
 	        'color' => '#ffa300',
 	    ),
 	    array(
 	        'name' => 'ag light grey',
 	        'color' => '#ebeff4',
 	    ),
 	    array(
 	        'name' => 'ag grey',
 	        'color' => '#cad5e2',
 	    ),
 	    array(
 	        'name' => 'ag black',
 	        'color' => '#404040',
 	    ),
 	   array(
 	        'name' => 'ag white',
 	        'color' => '#fff',
 	    ) 
 	);

Es muy importante que pegueis el código justo cuando acabe otra funcíón para no “romper” vuestro functions.php

Este código es muy sencillo de entender y lo que hace es añadir soporte al tema para la funcionalidad con la línea add_theme_support(‘editor-color-palette’) e incluye un array en el que debemos completar un nombre de color ‘name’ => ‘ag orange’, y su código hexadecimal ‘color’ => ‘#ffa300’,.

En este ejemplo he usado los cinco colores del diseño de la web AprendeGutenberg.com, el primer color es un naranja, luego un gris claro, un gris, un negro y para finalizar blanco. Una vez está completada nuestra paleta de colores personalizada, guardamos los cambios y vemos los resultados:

gutenberg-color-palette-custom

Si os fijais en el código añadimos nombres a los colores en el array, pues bien estos nombres como por ejemplo ‘ag orange’ serán las clases con las que podremos dar estilo a los bloques del core usando las clases .has-ag-orange-background-color y .has-ag-orange-color.

gutenberg-color-palette-without-custom-plus-classname

Deshabilitar color personalizado

Ahora lo que vamos a hacer es deshabilitar la posibilidad de añadir un color personalizado en la paleta de colores predeterminados de Gutenberg, y para ello volvemos a abrir el archivo functions.php de nuestro tema y pegamos el siguiente código a continuación del anterior código de la paleta de colores:


// Disable custom colors
 	add_theme_support( 'disable-custom-colors' );

Una vez está añadida la línea en nuestro functions.php guardamos los cambios y vemos los resultados:

gutenberg-color-palette-without-custom

Este último paso es quizás bastante restrictivo con el usuario final, pero es lo ideal si no deseas que puedan jugar con colores que no sean corporativos.

Cómo has podido comprobar realizar todo tipo de modificaciones a la paleta de colores de Gutenberg es muy sencillo y fácil, tan solo necesitamos dos códigos para poder adaptar la paleta de colores del nuevo editor de WordPress a nuestras necesidades.

Alineamiento de Imagen

Otra nueva funcionalidad que incluye Gutenberg por defecto son dos nuevos tipos de alineamientos de imagen, llamados alignwide y alignfull.

Añadir Align Wide & Align Full

Para dar soporte a ambos alineamientos debemos abrir el archivo functions.php de nuestro tema e incluir el siguiente código:


// Add alignwide & alignfull support
 	add_theme_support( 'align-wide' );

Guardamos los cambios y añadimos un bloque de imagen a nuestro contenido para ver que ya nos aparecen las dos nuevas opciones de alineamiento en la barra de herramientas del bloque, sin tan siquiera subir una imagen.

Dar estilos CSS .alignwide y .alignfull

El siguiente paso es dar estilo a estos nuevos alineamientos y para ello debemos modificar el archivo style.css de nuestro tema. Abrimos nuestro style.css y lo ideal es que donde tengamos el resto de alineamientos de las imágenes añadamos el siguiente código:


.alignwide {margin-left: auto;margin-right: auto; max-width: 960px;}
.alignfull {margin-left: auto;margin-right: auto; width: 100%;}

Lo que hacemos con estas líneas es definir los anchos de contenedor que deseamos que tengan cada uno de los alineamientos en las clases .alignwide y .alignfull, eso sí, siempre teniendo en cuenta los anchos máximos de los contenedores que tenga nuestro tema.

Por ejemplo, mi tema usa un contenedor con un max-width de 80 rem que equivale a 1280px, así que a la clase .alignfull la permito que tenga un width del 100% y así la imagen podrá ocupar todo ese ancho, cómo podéis comprobar en la siguiente imagen:

gutenberg-image-align-full

Mientras que a la clase .alignwide la defino un max-width de 960 pixeles, para que el ancho máximo de la imagen ocupe esta medida como podéis comprobar a continuación…

gutenberg-image-align-wide

Esto es todo lo que podemos hacer para que los nuevos alineamientos sean compatibles con nuestro tema en Gutenberg y al igual que las paletas de colores solo se necesitan dos simples modificaciones.

Estilos para bloques en el editor

Para cerrar la compatibilidad de nuestro tema con Gutenberg, lo que podemos es crear estilos personalizados para los bloques del nuevo editor de WordPress o usar google fonts en el editor.

Encolar hoja de estilos del editor

Comenzamos creando una hoja de estilos css llamada style-editor.css dentro de nuestro tema, una vez la tenemos creada, abrimos el archivo functions.php de nuestro tema y la encolamos usando el siguiente código:


// Enqueue block editor style
 	function vdv_aprendegutenberg_block_editor_styles() {
 		// Editor styles.
 	    wp_enqueue_style( 'vdv-aprendegutenberg-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
 	}
 	
 	add_action( 'enqueue_block_editor_assets', 'vdv_aprendegutenberg_block_editor_styles' );

En este código creamos la función, function vdv_aprendegutenberg_block_editor_styles() encolamos la hoja de estilos con su ruta { wp_enqueue_style( ‘vdv-aprendegutenberg-block-editor-styles’, get_theme_file_uri( ‘/style-editor.css’ ), false, ‘1.0’, ‘all’ ); y añadimos la acción para que funcione add_action( ‘enqueue_block_editor_assets’, ‘vdv_aprendegutenberg_block_editor_styles’ );

Es muy importante para que te funcione que recuerdes sustituir el nombre de la función y la ruta de la hoja de estilos por los de tu tema.

Para que veais que todo funciona bien podéis crear un ejemplo en style-editor.css añadiendo el siguiente código:


body.gutenberg-editor-page {background-color: #f2a300;color: #404040;}

Con este código a la clase body.gutenberg-editor-page le ponemos un fondo naranja background-color: #f2a300; y un color:#404040 negro para el texto, salvamos nuestros cambios y los estilos de nuestro editor han cambiado como podéis ver en la siguiente imagen:

gutenberg-editor-change-background

Ahora ya tenéis la posibilidad de modificar todos los estilos de vuestro editor, sabiendo las clases que se utilizan en el, pero ser cautos ya que como dice SpiderMan “todo gran poder conlleva una gran responsabilidad” 😀

Dar estilos CSS a los anchos de los bloques en el editor

Otra de las cosas que pueden ser útiles de cara a los usuarios de WordPress, es definir los anchos de los alineamientos de imagen dentro del editor para que estos sean idénticos a los que se verán cuando publiquemos la entrada. Para definir los anchos máximos, abrimos la hoja de estilos recién creada styles-editor.css y copiamos este código en su interior:


/* Main column width */
body.gutenberg-editor-page .editor-post-title,
body.gutenberg-editor-page .editor-default-block-appender,
body.gutenberg-editor-page .editor-block-list__block {
    max-width: 720px;
}

/* Width of "wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
    max-width: 960px;
}

/* Width of "full-wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="full"] {
    max-width: none;
}

Este código lo que hace es que a los bloques estándar les da un ancho máximo de 720px, a los bloques con alignwide les define un ancho de 960px y por último a los bloques con alignfull les dejamos con un ancho máximo de “none” para que pille todo el ancho de pantalla de nuestro editor.

En el siguiente vídeo podéis ver cómo se comportan los diferentes anchos en el editor, justo después de haber modificado sus tamaños en styles-editor.css

Usar google fonts en el editor

Para finalizar vamos a ver cómo utilizar google fonts dentro del editor e integrarlas en Gutenberg. Como ejemplo usare la fuente Abril Fatface que es la que estoy tengo para las cabeceras de AprendeGutenberg.com.

Lo que debemos hacer para poder usar google fonts es abrir el archivo functions.php de nuestro tema y pegar el siguiente código:


// Add google fonts to the Gutenberg editor
	function vdv_aprendegutenberg_fonts_url() {
	$fonts_url = '';
		$abril = esc_html_x( 'on', 'Abril+Fatface font: on or off', 'vdv-aprendegutenberg' );
		if ( 'off' !== $abril ) {
			$font_families = array();
			$font_families[] = 'Abril+Fatface:400,400italic,700,700italic';
			$query_args = array(
				'family' => urlencode( implode( '|', $font_families ) ),
				'subset' => urlencode( 'latin,latin-ext' ),
			);
			$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
		}
		return $fonts_url;
	}

Recordar que para que os funcione tendréis que sustituir la función vdv_aprendegutenberg_fonts_url() por la vuestra, las variables $abril por la que queráis usar, os recomiendo $nombredevuestrafuente y en $font_families[] = ‘Abril+Fatface:400,400italic,700,700italic’; cambiar Abril+Fatface por vuestra fuente elegida.

El siguiente paso es encolarla dentro de los estilos del editor de bloque y para ellos usamos el siguiente código:


// Enqueue block editor style
 	function vdv_aprendegutenberg_block_editor_styles() {
 		// Fonts.
 		wp_enqueue_style( 'vdv-aprendegutenberg-fonts', vdv_aprendegutenberg_fonts_url(), array(), null );
 		// Editor styles.
 	    wp_enqueue_style( 'vdv-aprendegutenberg-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
 	}
 	
 	add_action( 'enqueue_block_editor_assets', 'vdv_aprendegutenberg_block_editor_styles' );

Una vez está encolada guardamos los cambios y de primeras no vemos cambio alguno, si deseamos que la fuente sea la predeterminada en el texto del editor para los bloques, lo que debemos modificar en styles-editor.css es el siguiente código:


.edit-post-visual-editor, .edit-post-visual-editor p {font-family: 'Abril Fatface', sans-serif;}

Guardamos cambios y ya vemos como el texto de nuestros bloques muestran la nueva fuente.

gutenberg-editor-google-font

Y por ahora esto es todo amig@s, como habéis podido comprobar ahora mismo dar compatibilidad a un tema para Gutenberg es algo relativamente sencillo y no tiene excesiva complicación puesto que se realiza añadiendo códigos a través de los archivos functions.php y style.css de nuestro tema.

Recordar que si tenéis cualquier tipo de duda acerca de Gutenberg, puedo ayudaros, tan solo tenéis que contactarme.

Bonus track

Si quieres ver una ponencia de Gutenberg que dicen que es la reostia, vente a la WordCamp Irun el 1 y 2 de Junio que como están locos estos irundarras, me han dejado a mi para que cierre el evento. ¡Nos vemos en Irun!

Deja un comentario

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

¿Hablamos?


Si eres una empresa, un autónomo o un particular, puedes contratarme para ayudarte a crear o mejorar tu proyecto web.

+34 622 43 28 36
hola@vdevidania.com
@javidania