Código Genesis

Tutoriales de WordPress y Genesis Framework

Pasos para adaptar un child theme de Genesis a Gutenberg

Aprende cómo adaptar un child theme de Genesis al nuevo editor de WordPress para sacarle todo el partido y conseguir que se vea correctamente.

Gutenberg llega cargado de novedades. Pero para sacarle el máximo provecho a algunas de ellas, necesitas implementarlas en tu tema.  

Pero, ¿de qué modificaciones estamos hablando?

Cambios del nuevo editor de WordPress que debes aplicar

  • Uno de ellos es que hay 2 nuevas formas de mostrar las imágenes.

Hasta el momento, en WordPress las fotografías tenían tres alineanciones posibles: derecha (alignright), izquierda (alignleft) y central (aligncenter).

Gutenberg introduce 2 alternativas: ancho amplio (alignwide) y ancho completo (alignfull).

Bloque-imagen-gutenberg-con-alignwide
  • Otra de las novedades es la posibilidad de agregar una paleta de colores definida a una plantilla.

Por defecto, ofrece una paleta de colores donde elegir el tono para bloques de texto, encabezados o botones.

paleta-colores-defecto-Gutenberg

Pero puedes limitar la paleta de colores, lo cual te ayuda a mantener una coherencia estética y le facilita el uso a tu cliente.

paleta colores personalizada Gutenberg
  • Por último, también es interesante dar estilos personalizados a los bloques de contenido que usa Gutenberg para que vayan acorde con el tema.

En resumen, con el siguiente tutorial vas a conseguir todas las líneas de código necesarias para adecuar un child themes de Genesis al nuevo editor de WordPress.

Y como verás, necesitas realizar modificaciones a nivel funcional, en el fichero functions.php, y estético, en el style.css.

Instrucciones para adaptar tu plantilla de Genesis a Gutenberg

1. Edita el fichero functions.php

Añade la siguiente línea en functions.php:

Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.

Usando este snippet, introduces los 3 colores elegidos (en este caso, blue, gray y black) en la paleta que se muestra en el editor. Por supuesto, puedes seleccionar los que tú desees.

Con este paso, además de los colores añadidos mediante código, también incluyes los colores destacados que hayas escogido desde el personalizador.

Si no estás usando Genesis Sample, tendrás que adaptar la parte referente a los colores destacados a lo que usa tu child themes de Genesis.

Es decir, en lugar de esto:

			array(
				'name'  => esc_html__( 'Link Color', 'genesis-sample' ),
				'slug'  => 'link-color',
				'color' => esc_html( get_theme_mod( 'genesis_sample_link_color', genesis_sample_customizer_get_default_link_color() ) ),
			),
			array(
				'name'  => esc_html__( 'Accent Color', 'genesis-sample' ),
				'slug'  => 'accent-color',
				'color' => esc_html( get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ) ),
			)

deberías de usar, por ejemplo si estás usando Workstation Pro, este otro fragmento:

                        array(
				'name'  => esc_html__( 'Link Color', 'workstation-pro' ),
				'slug'  => 'link-color',
				'color' => esc_html( get_theme_mod( 'workstation_primary_color', workstation_customizer_get_default_accent_color() ) ),
			),
			array(
				'name'  => esc_html__( 'Accent Color', 'workstation-pro' ),
				'slug'  => 'accent-color',
				'color' => esc_html( get_theme_mod( 'workstation_accent_color', workstation_customizer_get_default_secondary_accent_color() ) ),
			)

Para saber cómo se llaman las funciones que se encargan de guardar los colores del personalizador, puedes inspeccionar el fichero customize.php dentro de la carpeta /lib/ de tu child theme de Genesis.

Ya tienes la parte funcional resuelta. Ahora te queda adaptar cómo se visualiza el contenido.

2. Modifica el fichero style.css

Para aplicar los cambios estéticos que exige la implementación de Gutenberg, inserta el siguiente fragmento en style.css:

Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.

Con este código consigues:

  • Aplicar estilos básicos a los principales bloques de Gutenberg.
  • Dar formato a otros elementos extras del nuevo editor de WordPress.
  • Permitir que las imágenes de ancho amplio y completo se muestren correctamente.
  • Agregar una paleta de colores personalizada.

En concreto, con este snippet añades 3 colores (blue, gray y black) y los colores destacados que hayas elegido desde el personalizador.

paleta colores personalizada Gutenberg colores personlizador

Para este ejemplo he adaptado la plantilla Genesis Sample (versión 2.6).

Sin embargo, puedes conseguir el efecto que deseas con cualquier otro child theme de Genesis usando este código como punto de partida y ajustándolo a tu tema con pequeñas modificaciones.

Conclusiones

La llegada del nuevo editor de WordPress es un punto de inflexión, no sólo para la forma en la que creas el contenido, sino también para la manera en que lo muestras.

Gutenberg debería funcionar sin problemas en cualquier tema de Genesis, pero si quieres sacarle todo el partido y que las plantillas luzcan perfectas con el nuevo editor, debes realizar varios ajustes.

En este tutorial tienes TODOS los snippets para asegurarte de que el child theme soporta las novedades y, mejor aún, las muestra correctamente.

Recuerda que las modificaciones estás realizadas con Genesis Sample. Por lo tanto, es posible que necesites realizar pequeños ajustes (especialmente de CSS) para que funcionen a la perfección en tu tema.

Si quieres profundizar sobre qué hace cada parte del código, echa un ojo a los tutoriales individuales:

¿Tienes alguna pregunta o quieres darme una sugerencia para próximos tutoriales? Cuéntamela en los comentarios (opción exclusiva para suscriptores).

Tutoriales relacionados

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.